From 1b36a6dd956aa38150f33d4308e1c4a950f0d70f Mon Sep 17 00:00:00 2001 From: sc-ArshadHannan Date: Tue, 26 Aug 2025 12:06:11 +0530 Subject: [PATCH 01/93] Improting the Global CSS and Alert to the Doc and Registry (#61) * intergration of the global css styles and other dependent styles to the project * integration of the alert component to the doc site * deafult alert text update * issue fixed for a working registry of the alert component * registry dependecey moved to the live env * text fix for the alert success variant in the doc site * removed the breakpoint.css from the global.css. * removal of unused imports * Added the rest of the CSS files which are dependent to the global css to the registry, added the dependencies imports for the alert component to the registry. * edited the title and description of the registry.json theme. --- registry.json | 40 +++- src/app/borderRadius.css | 50 +++++ src/app/colors.css | 342 +++++++++++++++++++++++++++++++ src/app/demo/[name]/ui/alert.tsx | 58 +++++- src/app/globals.css | 247 +++++++++++----------- src/app/shadows.css | 55 +++++ src/app/typography.css | 71 +++++++ src/components/ui/alert.tsx | 39 +++- 8 files changed, 749 insertions(+), 153 deletions(-) create mode 100644 src/app/borderRadius.css create mode 100644 src/app/colors.css create mode 100644 src/app/shadows.css create mode 100644 src/app/typography.css diff --git a/registry.json b/registry.json index f7d9e553..72e621a0 100644 --- a/registry.json +++ b/registry.json @@ -6,8 +6,8 @@ { "name": "theme", "type": "registry:theme", - "title": "Nature Theme", - "description": "A nature theme and styles with greens and browns using Tailwind and shadcn/ui variable names", + "title": "Blokcn Theme", + "description": "A custom Blokcn theme providing reusable UI components styled with Tailwind CSS and shadcn/ui variables, designed for consistency and efficiency across projects.", "cssVars": { "light": { "background": "oklch(0.97 0.01 80.72)", @@ -86,6 +86,26 @@ "type": "registry:style", "target": "app/globals.css" }, + { + "path": "src/app/colors.css", + "type": "registry:style", + "target": "app/colors.css" + }, + { + "path": "src/app/shadows.css", + "type": "registry:style", + "target": "app/shadows.css" + }, + { + "path": "src/app/borderRadius.css", + "type": "registry:style", + "target": "app/borderRadius.css" + }, + { + "path": "src/app/typography.css", + "type": "registry:style", + "target": "app/typography.css" + }, { "path": "postcss.config.mjs", "type": "registry:file", @@ -374,16 +394,20 @@ "name": "alert", "type": "registry:ui", "title": "Alert", - "description": "Displays a callout for user attention.", + "description": "Displays Alert Variants.", + "dependencies": [ + "@mdi/react", + "@mdi/js", + "class-variance-authority" + ], "registryDependencies": [ - "alert", - "https://registry-starter.vercel.app/r/theme.json" + "https://blok-shadcn.vercel.app/r/theme.json" ], "files": [ { - "path": "src/layouts/minimal-layout.tsx", - "type": "registry:file", - "target": "app/layout.tsx" + "path": "src/components/ui/alert.tsx", + "type": "registry:ui", + "target": "src/components/ui/alert.tsx" } ] }, diff --git a/src/app/borderRadius.css b/src/app/borderRadius.css new file mode 100644 index 00000000..be8473fb --- /dev/null +++ b/src/app/borderRadius.css @@ -0,0 +1,50 @@ +@theme { + /* resetting everything */ + /* --rounded-*: initial; */ + + /* You can define custom breakpoint names, e.g.: */ + --rounded-none: 0; + --rounded-sm: 0.125rem; + --rounded-base: 0.25rem; + --rounded-md: 0.375rem; + --rounded-lg: 0.5rem; + --rounded-xl: 0.75rem; + --rounded-2xl: 1rem; + --rounded-3xl: 1.5rem; + --rounded-full: 624.938rem; + + /* To remove default breakpoints, set them to `initial` */ + /* --rounded-sm: initial; */ + /* --rounded-md: initial; */ + /* etc. */ +} + +@layer utilities { + .rounded-none { + border-radius: var(--rounded-none); + } + .rounded-sm { + border-radius: var(--rounded-sm); + } + .rounded-base { + border-radius: var(--rounded-base); + } + .rounded-md { + border-radius: var(--rounded-md); + } + .rounded-lg { + border-radius: var(--rounded-lg); + } + .rounded-xl { + border-radius: var(--rounded-xl); + } + .rounded-2xl { + border-radius: var(--rounded-2xl); + } + .rounded-3xl { + border-radius: var(--rounded-3xl); + } + .rounded-full { + border-radius: var(--rounded-full); + } +} diff --git a/src/app/colors.css b/src/app/colors.css new file mode 100644 index 00000000..b03233a4 --- /dev/null +++ b/src/app/colors.css @@ -0,0 +1,342 @@ +@import "tailwindcss"; + +@theme { + /* override all tailwind colors */ + /* --color-*: initial; */ + + /* Chakra theme colors as CSS variables */ + --color-transparent: transparent; + --color-current: currentColor; + --color-black: #000000; + --color-white: #ffffff; + --color-whiteAlpha-50: rgba(255, 255, 255, 0.04); + --color-whiteAlpha-100: rgba(255, 255, 255, 0.06); + --color-whiteAlpha-200: rgba(255, 255, 255, 0.11); + --color-whiteAlpha-300: rgba(255, 255, 255, 0.29); + --color-whiteAlpha-400: rgba(255, 255, 255, 0.42); + --color-whiteAlpha-500: rgba(255, 255, 255, 0.55); + --color-whiteAlpha-600: rgba(255, 255, 255, 0.68); + --color-whiteAlpha-700: rgba(255, 255, 255, 0.76); + --color-whiteAlpha-800: rgba(255, 255, 255, 0.78); + --color-whiteAlpha-900: rgba(255, 255, 255, 0.94); + --color-blackAlpha-50: rgba(0, 0, 0, 0.04); + --color-blackAlpha-100: rgba(0, 0, 0, 0.06); + --color-blackAlpha-200: rgba(0, 0, 0, 0.11); + --color-blackAlpha-300: rgba(0, 0, 0, 0.29); + --color-blackAlpha-400: rgba(0, 0, 0, 0.42); + --color-blackAlpha-500: rgba(0, 0, 0, 0.55); + --color-blackAlpha-600: rgba(0, 0, 0, 0.68); + --color-blackAlpha-700: rgba(0, 0, 0, 0.76); + --color-blackAlpha-800: rgba(0, 0, 0, 0.78); + --color-blackAlpha-900: rgba(0, 0, 0, 0.94); + + --color-blue-50: #f4f7ff; + --color-blue-100: #e1eaff; + --color-blue-200: #c9d8ff; + --color-blue-300: #9cb3fd; + --color-blue-400: #6987f9; + --color-blue-500: #4a65e8; + --color-blue-600: #344bc3; + --color-blue-700: #293ba1; + --color-blue-800: #1f2d7f; + --color-blue-900: #16215f; + --color-cyan-50: #eafaff; + --color-cyan-100: #c6f1ff; + --color-cyan-200: #a0e3fd; + --color-cyan-300: #5cc0f1; + --color-cyan-400: #2695de; + --color-cyan-500: #0873c8; + --color-cyan-600: #0059a1; + --color-cyan-700: #004783; + --color-cyan-800: #003767; + --color-cyan-900: #00294d; + --color-danger-50: #fff5f4; + --color-danger-100: #ffe4e2; + --color-danger-200: #ffccc8; + --color-danger-300: #ff9a94; + --color-danger-400: #f4595a; + --color-danger-500: #d92739; + --color-danger-600: #b30426; + --color-danger-700: #92001f; + --color-danger-800: #730019; + --color-danger-900: #580113; + --color-gray-50: #f7f7f7; + --color-gray-100: #e9e9e9; + --color-gray-200: #d8d8d8; + --color-gray-300: #b5b5b5; + --color-gray-400: #8e8e8e; + --color-gray-500: #717171; + --color-gray-600: #535353; + --color-gray-700: #3b3b3b; + --color-gray-800: #282828; + --color-gray-900: #212121; + --color-green-50: #e8fcf5; + --color-green-100: #bef6e3; + --color-green-200: #8bebd0; + --color-green-300: #44cbac; + --color-green-400: #0ea184; + --color-green-500: #007f66; + --color-green-600: #006450; + --color-green-700: #085040; + --color-green-800: #0d3e31; + --color-green-900: #0f2d25; + --color-info-50: #f7f6ff; + --color-info-100: #eae7ff; + --color-info-200: #d9d4ff; + --color-info-300: #b8a9ff; + --color-info-400: #9373ff; + --color-info-500: #6e3fff; + --color-info-600: #5319e0; + --color-info-700: #4715af; + --color-info-800: #401791; + --color-info-900: #2f1469; + --color-orange-50: #fff6e7; + --color-orange-100: #ffe6bd; + --color-orange-200: #fdd291; + --color-orange-300: #ffa037; + --color-orange-400: #e26e00; + --color-orange-500: #ba5200; + --color-orange-600: #953d00; + --color-orange-700: #7a2f00; + --color-orange-800: #612300; + --color-orange-900: #491901; + --color-pink-50: #fff4fe; + --color-pink-100: #ffe2fb; + --color-pink-200: #fec7f8; + --color-pink-300: #f592f3; + --color-pink-400: #de53e0; + --color-pink-500: #bc29bd; + --color-pink-600: #9d039e; + --color-pink-700: #800081; + --color-pink-800: #640664; + --color-pink-900: #470e46; + --color-primary-50: #f7f6ff; + --color-primary-100: #eae7ff; + --color-primary-200: #d9d4ff; + --color-primary-300: #b8a9ff; + --color-primary-400: #9373ff; + --color-primary-500: #6e3fff; + --color-primary-600: #5319e0; + --color-primary-700: #4715af; + --color-primary-800: #401791; + --color-primary-900: #2f1469; + --color-purple-50: #f7f6ff; + --color-purple-100: #eae7ff; + --color-purple-200: #d9d4ff; + --color-purple-300: #b8a9ff; + --color-purple-400: #9373ff; + --color-purple-500: #6e3fff; + --color-purple-600: #5319e0; + --color-purple-700: #4715af; + --color-purple-800: #401791; + --color-purple-900: #2f1469; + --color-red-50: #fff5f4; + --color-red-100: #ffe4e2; + --color-red-200: #ffccc8; + --color-red-300: #ff9a94; + --color-red-400: #f4595a; + --color-red-500: #d92739; + --color-red-600: #b30426; + --color-red-700: #92001f; + --color-red-800: #730019; + --color-red-900: #580113; + --color-success-50: #e8fcf5; + --color-success-100: #bef6e3; + --color-success-200: #8bebd0; + --color-success-300: #44cbac; + --color-success-400: #0ea184; + --color-success-500: #007f66; + --color-success-600: #006450; + --color-success-700: #085040; + --color-success-800: #0d3e31; + --color-success-900: #0f2d25; + --color-teal-50: #e7fbfb; + --color-teal-100: #bbf4f3; + --color-teal-200: #8be9e8; + --color-teal-300: #3cc8cb; + --color-teal-400: #019ea5; + --color-teal-500: #007c85; + --color-teal-600: #00626b; + --color-teal-700: #0a4e57; + --color-teal-800: #103b44; + --color-teal-900: #102c33; + --color-warning-50: #fff6e7; + --color-warning-100: #ffe6bd; + --color-warning-200: #fdd291; + --color-warning-300: #ffa037; + --color-warning-400: #e26e00; + --color-warning-500: #ba5200; + --color-warning-600: #953d00; + --color-warning-700: #7a2f00; + --color-warning-800: #612300; + --color-warning-900: #491901; + --color-yellow-50: #fdf8d2; + --color-yellow-100: #faec79; + --color-yellow-200: #f8d904; + --color-yellow-300: #d7b300; + --color-yellow-400: #ae8a00; + --color-yellow-500: #8b6b00; + --color-yellow-600: #705300; + --color-yellow-700: #5b4300; + --color-yellow-800: #483300; + --color-yellow-900: #362500; + + /* SEMANTIC TOKENS */ + --color-body-bg: var(--color-white); + --color-subtle-bg: var(--color-gray-50); + --color-body-text: var(--color-blackAlpha-900); + --color-subtle-text: var(--color-blackAlpha-500); + --color-placeholder-color: var(--color-blackAlpha-400); + --color-inverse-text: var(--color-white); + --color-border-color: var(--color-blackAlpha-200); + --color-border-color-a11y: var(--color-blackAlpha-400); + --color-primary-fg: var(--color-primary-600); + --color-danger-fg: var(--color-danger-600); + --color-warning-fg: var(--color-warning-600); + --color-success-fg: var(--color-success-600); + --color-info-fg: var(--color-info-600); + --color-neutral-fg: var(--color-blackAlpha-600); + --color-primary-bg: var(--color-primary-100); + --color-danger-bg: var(--color-danger-100); + --color-warning-bg: var(--color-warning-100); + --color-success-bg: var(--color-success-100); + --color-info-bg: var(--color-info-100); + --color-neutral-bg: var(--color-blackAlpha-100); + --color-primary-bg-active: var(--color-primary-200); + --color-danger-bg-active: var(--color-danger-200); + --color-warning-bg-active: var(--color-warning-200); + --color-success-bg-active: var(--color-success-200); + --color-info-bg-active: var(--color-info-200); + --color-neutral-bg-active: var(--color-blackAlpha-200); + --color-primary: var(--color-primary-500); + --color-danger: var(--color-danger-500); + --color-success: var(--color-success-500); + --color-warning: var(--color-warning-500); + --color-info: var(--color-info-500); + --color-neutral: var(--color-blackAlpha-500); + --color-gray: var(--color-gray-500); + --color-red: var(--color-red-500); + --color-orange: var(--color-orange-500); + --color-yellow: var(--color-yellow-500); + --color-green: var(--color-green-500); + --color-teal: var(--color-teal-500); + --color-cyan: var(--color-cyan-500); + --color-blue: var(--color-blue-500); + --color-purple: var(--color-purple-500); + --color-pink: var(--color-pink-500); + --color-neutral-50: var(--color-blackAlpha-50); + --color-neutral-100: var(--color-blackAlpha-100); + --color-neutral-200: var(--color-blackAlpha-200); + --color-neutral-300: var(--color-blackAlpha-300); + --color-neutral-400: var(--color-blackAlpha-400); + --color-neutral-500: var(--color-blackAlpha-500); + --color-neutral-600: var(--color-blackAlpha-600); + --color-neutral-700: var(--color-blackAlpha-700); + --color-neutral-800: var(--color-blackAlpha-800); + --color-neutral-900: var(--color-blackAlpha-900); +} + +@layer utilities { + .ai { + background-image: linear-gradient( + to top right, + var(--color-purple-500), + var(--color-red-500) + ); + } + .ai-50 { + background-image: linear-gradient( + to top right, + var(--color-purple-50), + var(--color-red-50) + ); + } + .ai-100 { + background-image: linear-gradient( + to top right, + var(--color-purple-100), + var(--color-red-100) + ); + } + .ai-200 { + background-image: linear-gradient( + to top right, + var(--color-purple-200), + var(--color-red-200) + ); + } + .ai-300 { + background-image: linear-gradient( + to top right, + var(--color-purple-300), + var(--color-red-300) + ); + } + .ai-400 { + background-image: linear-gradient( + to top right, + var(--color-purple-400), + var(--color-red-400) + ); + } + .ai-500 { + background-image: linear-gradient( + to top right, + var(--color-purple-500), + var(--color-red-500) + ); + } + .ai-600 { + background-image: linear-gradient( + to top right, + var(--color-purple-600), + var(--color-red-600) + ); + } + .hover\:ai-600:hover { + background-image: linear-gradient( + to top right, + var(--color-purple-600), + var(--color-red-600) + ); + } + .text-ai-600 { + background-image: linear-gradient( + to top right, + var(--color-purple-600), + var(--color-red-600) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + } + .ai-700 { + background-image: linear-gradient( + to top right, + var(--color-purple-700), + var(--color-red-700) + ); + } + .active\:ai-700:active { + background-image: linear-gradient( + to top right, + var(--color-purple-700), + var(--color-red-700) + ); + } + .ai-800 { + background-image: linear-gradient( + to top right, + var(--color-purple-800), + var(--color-red-800) + ); + } + .ai-900 { + background-image: linear-gradient( + to top right, + var(--color-purple-900), + var(--color-red-900) + ); + } +} diff --git a/src/app/demo/[name]/ui/alert.tsx b/src/app/demo/[name]/ui/alert.tsx index c5d0bd5c..da3b0f33 100644 --- a/src/app/demo/[name]/ui/alert.tsx +++ b/src/app/demo/[name]/ui/alert.tsx @@ -1,26 +1,64 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; -import { AlertCircle, Terminal } from "lucide-react"; export const alert = { name: "alert", components: { Default: ( - - - Heads up! + + Default Alert - You can add components to your app using the cli. + This is a default alert with a title and description. ), - Destructive: ( - - - Error + Primary: ( + + Primary Alert - Your session has expired. Please log in again. + This is a primary alert with a title and description. ), + Success: ( + + Success Alert + + This is a success alert with a title and description. + + + ), + Danger: ( + + Danger Alert + + This is a danger alert with a title and description. + + + ), + Warning: ( + + Warning Alert + + This is a warning alert with a title and description. + + + ), + Descriptive: ( + + + This is an extremely long alert title that spans multiple lines to + demonstrate how the component handles very lengthy headings while + maintaining readability and proper text wrapping behavior + + + This is an equally long description that contains detailed information + about the alert. It shows how the component can accommodate extensive + content while preserving proper spacing, alignment, and readability + across different screen sizes and viewport widths. This helps ensure + the user experience remains consistent regardless of the content + length. + + + ) }, }; diff --git a/src/app/globals.css b/src/app/globals.css index 42d0ea6a..bd4b9bab 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,130 +3,139 @@ @custom-variant dark (&:is(.dark *)); -:root { - --background: oklch(0.97 0.01 80.72); - --foreground: oklch(0.3 0.04 30.2); - - --card: oklch(0.97 0.01 80.72); - --card-foreground: oklch(0.3 0.04 30.2); - - --popover: oklch(0.97 0.01 80.72); - --popover-foreground: oklch(0.3 0.04 30.2); - - --primary: oklch(0.52 0.13 144.17); - --primary-foreground: oklch(1.0 0 0); - - --secondary: oklch(0.96 0.02 147.64); - --secondary-foreground: oklch(0.43 0.12 144.31); - - --muted: oklch(0.94 0.01 74.42); - --muted-foreground: oklch(0.45 0.05 39.21); - - --accent: oklch(0.9 0.05 146.04); - --accent-foreground: oklch(0.43 0.12 144.31); - - --destructive: oklch(0.54 0.19 26.72); - --destructive-foreground: oklch(1.0 0 0); +/* @tailwind base; */ +/* @tailwind components; */ +@tailwind utilities; - --border: oklch(0.88 0.02 74.64); - --input: oklch(0.88 0.02 74.64); - --ring: oklch(0.52 0.13 144.17); +@import "./colors.css"; +@import "./typography.css"; +@import "./borderRadius.css"; +@import "./shadows.css"; - --chart-1: oklch(0.67 0.16 144.21); - --chart-2: oklch(0.58 0.14 144.18); - --chart-3: oklch(0.52 0.13 144.17); - --chart-4: oklch(0.43 0.12 144.31); - --chart-5: oklch(0.22 0.05 145.73); - - --sidebar: oklch(0.94 0.01 74.42); - --sidebar-foreground: oklch(0.3 0.04 30.2); - --sidebar-primary: oklch(0.52 0.13 144.17); - --sidebar-primary-foreground: oklch(1.0 0 0); - --sidebar-accent: oklch(0.9 0.05 146.04); - --sidebar-accent-foreground: oklch(0.43 0.12 144.31); - --sidebar-border: oklch(0.88 0.02 74.64); - --sidebar-ring: oklch(0.52 0.13 144.17); - - --radius: 0.5rem; +:root { + --radius: 0.625rem; + /* Chakra semantic token mappings (light mode) */ + --background: var(--color-white); /* chakra-body-bg: white */ + --foreground: var( + --color-blackAlpha-900 + ); /* chakra-body-text: blackAlpha.900 */ + --card: var(--color-white); /* chakra-card-bg: white */ + --card-foreground: var( + --color-blackAlpha-900 + ); /* chakra-card-text: blackAlpha.900 */ + --popover: var(--color-white); /* chakra-popover-bg: white */ + --popover-foreground: var( + --color-blackAlpha-900 + ); /* chakra-popover-text: blackAlpha.900 */ + --primary: var(--color-primary-500); /* primary-fg: primary.600 */ + --primary-foreground: var(--color-white); /* chakra-inverse-text: white */ + --primary-background: var(--color-primary-100); + --secondary: var(--color-gray-50); + --secondary-foreground: var(--color-blackAlpha-900); + --muted: var(--color-gray-50); /* chakra-subtle-bg: gray.50 */ + --muted-foreground: var( + --color-blackAlpha-500 + ); /* chakra-subtle-text: blackAlpha.500 */ + --accent: var(--color-gray-50); + --accent-foreground: var(--color-blackAlpha-900); + --destructive: var(--color-danger-500); /* danger-fg: danger.600 */ + --border: var( + --color-blackAlpha-200 + ); /* chakra-border-color: blackAlpha.200 */ + --input: var( + --color-blackAlpha-400 + ); /* chakra-placeholder-color: blackAlpha.400 */ + --ring: #6987f9; + --chart-1: #4E41CC; + --chart-2: #0FB5AE; + --chart-3: #F08910; + --chart-4: #33C5E8; + --chart-5: #E055E2; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); } .dark { - --background: oklch(0.15 0.01 74.42); - --foreground: oklch(0.95 0.02 80.72); - - --card: oklch(0.12 0.01 80.72); - --card-foreground: oklch(0.95 0.02 80.72); - - --popover: oklch(0.12 0.01 80.72); - --popover-foreground: oklch(0.95 0.02 80.72); - - --primary: oklch(0.58 0.15 144.17); - --primary-foreground: oklch(0.09 0.01 80.72); - - --secondary: oklch(0.15 0.02 147.64); - --secondary-foreground: oklch(0.65 0.12 144.31); - - --muted: oklch(0.18 0.01 74.42); - --muted-foreground: oklch(0.65 0.03 74.42); - - --accent: oklch(0.22 0.04 146.04); - --accent-foreground: oklch(0.65 0.12 144.31); - - --destructive: oklch(0.62 0.22 26.72); - --destructive-foreground: oklch(0.95 0.02 80.72); - - --border: oklch(0.22 0.02 74.64); - --input: oklch(0.22 0.02 74.64); - --ring: oklch(0.58 0.15 144.17); - - --chart-1: oklch(0.72 0.16 144.21); - --chart-2: oklch(0.63 0.14 144.18); - --chart-3: oklch(0.58 0.15 144.17); - --chart-4: oklch(0.48 0.12 144.31); - --chart-5: oklch(0.35 0.08 145.73); - - --sidebar: oklch(0.15 0.01 74.42); - --sidebar-foreground: oklch(0.95 0.02 80.72); - --sidebar-primary: oklch(0.58 0.15 144.17); - --sidebar-primary-foreground: oklch(0.09 0.01 80.72); - --sidebar-accent: oklch(0.22 0.04 146.04); - --sidebar-accent-foreground: oklch(0.65 0.12 144.31); - --sidebar-border: oklch(0.22 0.02 74.64); - --sidebar-ring: oklch(0.58 0.15 144.17); + /* Chakra semantic token mappings (dark mode) */ + --background: var(--color-gray-800); /* chakra-body-bg: gray.800 */ + --foreground: var(--color-white); /* chakra-body-text: white */ + --card: var(--color-gray-800); /* chakra-card-bg: gray.800 */ + --card-foreground: var(--color-white); /* chakra-card-text: white */ + --popover: var(--color-gray-800); /* chakra-popover-bg: gray.800 */ + --popover-foreground: var(--color-white); /* chakra-popover-text: white */ + --primary: var(--color-primary-200); /* primary-fg: primary.200 */ + --primary-foreground: var( + --color-blackAlpha-900 + ); /* chakra-inverse-text: blackAlpha.900 */ + --primary-background: var(--color-primary-100); + --secondary: var(--color-gray-900); /* chakra-subtle-bg: gray.900 */ + --secondary-foreground: var(--color-white); /* chakra-subtle-text: white */ + --muted: var(--color-gray-900); /* chakra-subtle-bg: gray.900 */ + --muted-foreground: var( + --color-whitealpha-600 + ); /* chakra-subtle-text: whiteAlpha.600 */ + --accent: var(--color-gray-900); + --accent-foreground: var(--color-white); /* chakra-inverse-text: white */ + --destructive: var(--color-danger-200); /* danger-fg: danger.200 */ + --border: var( + --color-whitealpha-200 + ); /* chakra-border-color: whiteAlpha.200 */ + --input: var( + --color-whitealpha-500 + ); /* chakra-placeholder-color: whiteAlpha.500 */ + --ring: #6987f9; + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: var(--color-purple-500); /* 6e3fff */ + --chart-2: var(--color-blue-500); /* 4a65e8 */ + --chart-3: var(--color-cyan-500); /* 0873c8 */ + --chart-4: var(--color-teal-500); /* 007c85 */ + --chart-5: var(--color-green-500); /* 007f66 */ + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.439 0 0); } @theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); - + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); - + --color-primary-background: var(--primary-background); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); - - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); @@ -135,32 +144,22 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-serif: var(--font-serif); - --font-mono: var(--font-mono); - - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); } @layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-border, currentColor); + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; } } + +.scrollbar-hidden { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.scrollbar-hidden::-webkit-scrollbar { + display: none; +} \ No newline at end of file diff --git a/src/app/shadows.css b/src/app/shadows.css new file mode 100644 index 00000000..dcb32c67 --- /dev/null +++ b/src/app/shadows.css @@ -0,0 +1,55 @@ +@theme { + --shadow-none: none; + --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05); + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-base: + 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --shadow-md: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: + 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + --shadow-outline: 0 0 0 3px rgba(110, 63, 255, 0.6); + --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); + --shadow-dark-lg: + rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, + rgba(0, 0, 0, 0.4) 0px 15px 40px; +} + +@layer utilities { + .shadow-none { + box-shadow: var(--shadow-none); + } + .shadow-xs { + box-shadow: var(--shadow-xs); + } + .shadow-sm { + box-shadow: var(--shadow-sm); + } + .shadow-base { + box-shadow: var(--shadow-base); + } + .shadow-md { + box-shadow: var(--shadow-md); + } + .shadow-lg { + box-shadow: var(--shadow-lg); + } + .shadow-xl { + box-shadow: var(--shadow-xl); + } + .shadow-2xl { + box-shadow: var(--shadow-2xl); + } + .shadow-outline { + box-shadow: var(--shadow-outline); + } + .shadow-inner { + box-shadow: var(--shadow-inner); + } + .shadow-dark-lg { + box-shadow: var(--shadow-dark-lg); + } +} diff --git a/src/app/typography.css b/src/app/typography.css new file mode 100644 index 00000000..52bff32a --- /dev/null +++ b/src/app/typography.css @@ -0,0 +1,71 @@ +@theme { + --text-3xs: 0.625rem; + --text-2xs: 0.6875rem; + --text-xs: 0.75rem; + --text-sm: 0.8125rem; + --text-base: 0.875rem; + --text-md: 0.875rem; + --text-lg: 1rem; + --text-xl: 1.125rem; + --text-2xl: 1.25rem; + --text-3xl: 1.5rem; + --text-4xl: 1.875rem; + --text-5xl: 2.25rem; + --text-6xl: 3rem; + --text-7xl: 3.75rem; + --text-8xl: 4.5rem; + --text-9xl: 6rem; +} + +/* override and extend typography with custom variants */ + +@layer utilities { + .text-3xs { + font-size: var(--text-3xs); /* 10px */ + } + .text-2xs { + font-size: var(--text-2xs); /* 11px */ + } + .text-xs { + font-size: var(--text-xs); /* 12px */ + } + .text-sm { + font-size: var(--text-sm); /* 13px */ + } + .text-base { + font-size: var(--text-base); /* 14px */ + } + .text-md { + font-size: var(--text-md); /* 14px */ + } + .text-lg { + font-size: var(--text-lg); /* 16px */ + } + .text-xl { + font-size: var(--text-xl); /* 18px */ + } + .text-2xl { + font-size: var(--text-2xl); /* 20px */ + } + .text-3xl { + font-size: var(--text-3xl); /* 24px */ + } + .text-4xl { + font-size: var(--text-4xl); /* 30px */ + } + .text-5xl { + font-size: var(--text-5xl); /* 36px */ + } + .text-6xl { + font-size: var(--text-6xl); /* 48px */ + } + .text-7xl { + font-size: var(--text-7xl); /* 60px */ + } + .text-8xl { + font-size: var(--text-8xl); /* 72px */ + } + .text-9xl { + font-size: var(--text-9xl); /* 96px */ + } +} diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx index 4f74e7b2..97745741 100644 --- a/src/components/ui/alert.tsx +++ b/src/components/ui/alert.tsx @@ -1,27 +1,39 @@ -import { type VariantProps, cva } from "class-variance-authority"; -import type * as React from "react"; +import * as React from "react" +import { mdiAlertCircle, mdiCheckCircle, mdiInformation } from "@mdi/js" +import Icon from "@mdi/react" +import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", { variants: { variant: { - default: "bg-card text-card-foreground", - destructive: - "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", + default: "bg-card text-card-foreground [&>svg]:text-card-foreground", + primary: "bg-primary-bg [&>svg]:text-primary-500", + danger: "bg-danger-bg [&>svg]:text-danger-500", + warning: "bg-warning-bg [&>svg]:text-warning-500", + success: "bg-success-bg [&>svg]:text-success-500", }, }, defaultVariants: { variant: "default", }, - }, + } ); +const variantIcons = { + default: mdiInformation, + primary: mdiInformation, + danger: mdiAlertCircle, + warning: mdiAlertCircle, + success: mdiCheckCircle, +} + function Alert({ className, - variant, + variant = "default", ...props }: React.ComponentProps<"div"> & VariantProps) { return ( @@ -30,7 +42,12 @@ function Alert({ role="alert" className={cn(alertVariants({ variant }), className)} {...props} - /> + > + {variant && ( + + )} + {props.children} + ); } @@ -55,8 +72,8 @@ function AlertDescription({
From add5fb79f4f5b07e1ca4c63b2de06268c5fc16f2 Mon Sep 17 00:00:00 2001 From: Spyridon Misichronis <57755377+aeroplaniko@users.noreply.github.com> Date: Tue, 26 Aug 2025 11:07:37 +0300 Subject: [PATCH 02/93] update version (#65) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2b7d7ef8..e6a9c9e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "registry-starter", - "version": "0.0.1", + "version": "0.0.2", "private": true, "scripts": { "dev": "npm run registry:build && next dev --turbopack", From 5a997bd04055a6248776afa4a5b51de08c9b71f1 Mon Sep 17 00:00:00 2001 From: sc-ArshadHannan Date: Tue, 26 Aug 2025 14:17:05 +0530 Subject: [PATCH 03/93] build fix, updated the package.json with mdi dependencies (#66) --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e6a9c9e6..2201be10 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ }, "dependencies": { "@hookform/resolvers": "^5.1.1", + "@mdi/js": "^7.4.47", + "@mdi/react": "^1.6.1", "@radix-ui/react-accordion": "^1.2.11", "@radix-ui/react-alert-dialog": "^1.1.14", "@radix-ui/react-aspect-ratio": "^1.1.7", @@ -85,4 +87,4 @@ "overrides": { "react-is": "^19.0.0-rc-69d4b800-20241021" } -} +} \ No newline at end of file From 52c695db137b2efdaf74d09322abe2df7b7568d9 Mon Sep 17 00:00:00 2001 From: sc-ArshadHannan Date: Wed, 27 Aug 2025 11:25:14 +0530 Subject: [PATCH 04/93] Dev build bugfix - added the lock yaml file (#67) --- pnpm-lock.yaml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5317ade2..994fcbeb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,12 @@ importers: '@hookform/resolvers': specifier: ^5.1.1 version: 5.1.1(react-hook-form@7.60.0(react@19.1.0)) + '@mdi/js': + specifier: ^7.4.47 + version: 7.4.47 + '@mdi/react': + specifier: ^1.6.1 + version: 1.6.1 '@radix-ui/react-accordion': specifier: ^1.2.11 version: 1.2.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -614,6 +620,12 @@ packages: '@jridgewell/trace-mapping@0.3.29': resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==} + '@mdi/js@7.4.47': + resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==} + + '@mdi/react@1.6.1': + resolution: {integrity: sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==} + '@next/env@15.4.4': resolution: {integrity: sha512-SJKOOkULKENyHSYXE5+KiFU6itcIb6wSBjgM92meK0HVKpo94dNOLZVdLLuS7/BxImROkGoPsjR4EnuDucqiiA==} @@ -2797,6 +2809,12 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.4 + '@mdi/js@7.4.47': {} + + '@mdi/react@1.6.1': + dependencies: + prop-types: 15.8.1 + '@next/env@15.4.4': {} '@next/swc-darwin-arm64@15.4.4': From baf54e0fcbdca5d0ecb4fb0d3624cc7ca8af03ca Mon Sep 17 00:00:00 2001 From: Vishath Amarasinghe - Sitecore SE Date: Wed, 27 Aug 2025 12:52:10 +0530 Subject: [PATCH 05/93] feat(badge): add registry and demo components for Badge (#64) * registry component and demo component related to badge implemented * removed conflicting issues with previous registry badge component --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/ui/badge.tsx | 134 ++++++++++++++++++++++++------- src/components/hero.tsx | 2 +- src/components/ui/badge.tsx | 53 +++++++----- 3 files changed, 138 insertions(+), 51 deletions(-) diff --git a/src/app/demo/[name]/ui/badge.tsx b/src/app/demo/[name]/ui/badge.tsx index bce5a826..ec3d3784 100644 --- a/src/app/demo/[name]/ui/badge.tsx +++ b/src/app/demo/[name]/ui/badge.tsx @@ -1,46 +1,118 @@ -import { Badge } from "@/components/ui/badge"; -import { ArrowRight } from "lucide-react"; -import Link from "next/link"; +import { Badge } from "@/components/ui/badge" +import { ArrowRightIcon } from "lucide-react" export const badge = { name: "badge", components: { - Default: Badge, - Secondary: Secondary, - Outline: Secondary, - Destructive: Destructive, + // Sizes + SizeSm: Size sm, + SizeMd: Size md, + SizeLg: Size lg, + // Default (neutral + colorSchemes) + DefaultNeutral: Default Neutral, + DefaultPrimary: Default Primary, + DefaultDanger: Default Danger, + DefaultSuccess: Default Success, + DefaultWarning: Default Warning, + DefaultYellow: Default Yellow, + DefaultTeal: Default Teal, + DefaultCyan: Default Cyan, + DefaultBlue: Default Blue, + DefaultPink: Default Pink, + + // Bold variants + BoldNeutral: Bold Neutral, + BoldPrimary: ( + + Bold Primary + + ), + BoldDanger: ( + + Bold Danger + + ), + BoldSuccess: ( + + Bold Success + + ), + BoldWarning: ( + + Bold Warning + + ), + BoldYellow: ( + + Bold Yellow + + ), + BoldTeal: ( + + Bold Teal + + ), + BoldCyan: ( + + Bold Cyan + + ), + BoldBlue: ( + + Bold Blue + + ), + BoldPink: ( + + Bold Pink + + ), + + // Default links DefaultLink: ( - - - Link - - + + + Default Link + + + ), + DefaultLinkPrimary: ( + + + Default Link + ), - SecondaryLink: ( - - - Link - - + DefaultLinkDanger: ( + + + Default Link + + + ), + + // Bold links + BoldLink: ( + + + Bold Link + ), - OutlineLink: ( - - - Link - - + BoldLinkPrimary: ( + + + Bold Link + ), - DestructiveLink: ( - - - Link - - + BoldLinkDanger: ( + + + Bold Link + ), }, -}; +} diff --git a/src/components/hero.tsx b/src/components/hero.tsx index fd3bf18d..0d8d652c 100644 --- a/src/components/hero.tsx +++ b/src/components/hero.tsx @@ -21,7 +21,7 @@ export function Hero({
- + Coming soon

diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index dac19eb7..8578d981 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,46 +1,61 @@ -import { Slot } from "@radix-ui/react-slot"; -import { type VariantProps, cva } from "class-variance-authority"; -import type * as React from "react"; +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" const badgeVariants = cva( - "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + "inline-flex items-center px-2 justify-center rounded w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { - default: - "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", - secondary: - "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", - destructive: - "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", - outline: - "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + default: "font-normal", + bold: "uppercase font-bold", + }, + size: { + sm: "text-sm h-4", + md: "text-md h-5", + lg: "text-md h-6", + }, + colorScheme: { + neutral: "bg-neutral-100 text-neutral-800", + primary: "bg-primary-100 text-primary-800", + danger: "bg-danger-100 text-danger-800", + success: "bg-success-100 text-success-800", + warning: "bg-warning-100 text-warning-800", + yellow: "bg-yellow-100 text-yellow-800", + teal: "bg-teal-100 text-teal-800", + cyan: "bg-cyan-100 text-cyan-800", + blue: "bg-blue-100 text-blue-800", + pink: "bg-pink-100 text-pink-800", }, }, defaultVariants: { + colorScheme: "neutral", + size: "md", variant: "default", }, - }, -); + } +) function Badge({ className, variant, + colorScheme, + size = "md", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { - const Comp = asChild ? Slot : "span"; + const Comp = asChild ? Slot : "span" return ( - ); + ) } -export { Badge, badgeVariants }; +export { Badge, badgeVariants } From 24e3c046899be120a30b278d2f4646857a861853 Mon Sep 17 00:00:00 2001 From: Muthula Alwis <215100981+Sc-MuthulaAlwis@users.noreply.github.com> Date: Wed, 27 Aug 2025 12:54:08 +0530 Subject: [PATCH 06/93] Integration of the button group component to the doc site (#69) * Imported new button component * Updated non existing button variants with existing variants --------- Co-authored-by: Muthula --- src/app/demo/[name]/ui/button.tsx | 3 +- src/app/demo/[name]/ui/sonner-toasts.tsx | 2 +- src/components/hero.tsx | 2 +- src/components/ui/button.tsx | 204 ++++++++++++++++++++--- 4 files changed, 184 insertions(+), 27 deletions(-) diff --git a/src/app/demo/[name]/ui/button.tsx b/src/app/demo/[name]/ui/button.tsx index 90b82515..7902a083 100644 --- a/src/app/demo/[name]/ui/button.tsx +++ b/src/app/demo/[name]/ui/button.tsx @@ -4,7 +4,8 @@ export const button = { name: "button", components: { Primary: , - Secondary: , Outline: , + Ghost: , + Link: , }, }; diff --git a/src/app/demo/[name]/ui/sonner-toasts.tsx b/src/app/demo/[name]/ui/sonner-toasts.tsx index e1109f64..ac44fa60 100644 --- a/src/app/demo/[name]/ui/sonner-toasts.tsx +++ b/src/app/demo/[name]/ui/sonner-toasts.tsx @@ -30,7 +30,7 @@ export function WarningSonner() { export function ErrorSonner() { return ( + + + ), + ElevationXs: ( + + + xs Elevation + Style: outline, Elevation: xs + + +

This card demonstrates the xs elevation variant with outline style.

+ + + + + + ), + ElevationSm: ( + + + sm Elevation + Style: outline, Elevation: sm + + +

This card demonstrates the sm elevation variant with outline style.

+ + + + + + ), + ElevationBase: ( + + + base Elevation + Style: outline, Elevation: base + + +

This card demonstrates the base elevation variant with outline style.

+ + + + + + ), + ElevationMd: ( + + + md Elevation + Style: outline, Elevation: md + + +

This card demonstrates the md elevation variant with outline style.

+ + + + + + ), + ElevationLg: ( + + + lg Elevation + Style: outline, Elevation: lg + + +

This card demonstrates the lg elevation variant with outline style.

+ + + + + + ), + + // Style Variants + StyleFlat: ( + + + flat Style + Style: flat, Elevation: base + + +

This card demonstrates the flat style variant with base elevation.

+ + + + + + ), + StyleOutline: ( + + + outline Style + Style: outline, Elevation: base + + +

This card demonstrates the outline style variant with base elevation.

+ + + + + + ), + StyleFilled: ( + + + filled Style + Style: filled, Elevation: base + + +

This card demonstrates the filled style variant with base elevation.

+ + + + + + ), + + // Padding Variants + PaddingSm: ( + + + Padding: sm - Deploy your new project in one-click. + Style: outline, Elevation: md, Padding: sm -

This is the content of a card!

+

This card demonstrates the sm padding variant with outline style and md elevation.

 - - - - + + + + + ), + PaddingMd: ( + + + Padding: md + + Style: outline, Elevation: md, Padding: md + + + +

This card demonstrates the md padding variant with outline style and md elevation.

+ + + + + + ), + PaddingLg: ( + + + Padding: lg + + Style: outline, Elevation: md, Padding: lg + + + +

This card demonstrates the lg padding variant with outline style and md elevation.

+ + + ), diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index cee9feae..0d77f641 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,15 +1,50 @@ -import type * as React from "react"; +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; -function Card({ className, ...props }: React.ComponentProps<"div">) { +const cardVariants = cva( + "flex flex-col gap-6 rounded-xl border transition-shadow", + { + variants: { + elevation: { + none: "shadow-none", + xs: "shadow-xs", + sm: "shadow-sm", + base: "shadow-base", + md: "shadow-md", + lg: "shadow-lg" + }, + style: { + flat: "bg-white border-transparent", + outline: "bg-white border-color-border", + filled: "bg-neutral-50 border-transparent", + }, + padding: { + sm: "px-3 py-3 rounded-base", + md: "px-5 py-5 rounded-md", + lg: "px-7 py-7 rounded-lg", + }, + }, + defaultVariants: { + elevation: "sm", + style: "flat", + padding: "lg", + }, + } +); + +function Card({ + className, + elevation, + style, + padding, + ...props +}: React.ComponentProps<"div"> & VariantProps) { return (
); @@ -20,8 +55,8 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -32,7 +67,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (
); @@ -54,7 +89,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) { data-slot="card-action" className={cn( "col-start-2 row-span-2 row-start-1 self-start justify-self-end", - className, + className )} {...props} /> @@ -63,11 +98,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) { function CardContent({ className, ...props }: React.ComponentProps<"div">) { return ( -
+
); } @@ -75,7 +106,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (
); From 15b2045a4608e2c6de6eec190946ff6d677c7503 Mon Sep 17 00:00:00 2001 From: Ishanka Lakshan Date: Thu, 28 Aug 2025 12:30:56 +0530 Subject: [PATCH 09/93] Integration of the tooltip component to the doc site (#77) --- src/app/demo/[name]/ui/tooltip.tsx | 40 ++++++++++++++++++++++++------ src/components/ui/tooltip.tsx | 6 ++--- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/app/demo/[name]/ui/tooltip.tsx b/src/app/demo/[name]/ui/tooltip.tsx index c6445c74..e9783310 100644 --- a/src/app/demo/[name]/ui/tooltip.tsx +++ b/src/app/demo/[name]/ui/tooltip.tsx @@ -9,14 +9,40 @@ import { export const tooltip = { name: "tooltip", components: { - Default: ( + side: ( - - - - - Add to library - +
+ {/* Top Tooltip */} + + + + + Add to library (Top) + + {/* Bottom Tooltip */} + + + + + + Add to library (Bottom) + + + {/* Rigth Tooltip */} + + + + + Add to library (Rigth) + + {/* Rigth Tooltip */} + + + + + Add to library (Left) + +
), }, diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 1ae8e37e..d672b47a 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -46,13 +46,13 @@ function TooltipContent({ data-slot="tooltip-content" sideOffset={sideOffset} className={cn( - "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out", - className, + "text-inverse-text animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-gray-700 px-3 py-1.5 text-xs text-balance", + className )} {...props} > {children} - + ); From b85de10d72455a6e37b7484e500e9798c82fc805 Mon Sep 17 00:00:00 2001 From: sc-ArshadHannan Date: Thu, 28 Aug 2025 12:41:49 +0530 Subject: [PATCH 10/93] button , select and badge added to the registry.json (#76) * registry.json updated with button, toggle, toggle group and badge * select , button and badge added to the registry.json * added the card component to the registry.json --- registry.json | 53 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 21 deletions(-) diff --git a/registry.json b/registry.json index 72e621a0..8ca0ea94 100644 --- a/registry.json +++ b/registry.json @@ -434,14 +434,17 @@ "title": "Badge", "description": "Displays a small count or status indicator.", "registryDependencies": [ - "badge", - "https://registry-starter.vercel.app/r/theme.json" + "https://blok-shadcn.vercel.app/r/theme.json" + ], + "dependencies": [ + "@radix-ui/react-slot", + "class-variance-authority" ], "files": [ { - "path": "src/layouts/minimal-layout.tsx", - "type": "registry:file", - "target": "app/layout.tsx" + "path": "src/components/ui/badge.tsx", + "type": "registry:ui", + "target": "src/components/ui/badge.tsx" } ] }, @@ -467,15 +470,18 @@ "type": "registry:ui", "title": "Button", "description": "Allows users to take actions with a single click or tap.", + "dependencies": [ + "@radix-ui/react-slot", + "class-variance-authority" + ], "registryDependencies": [ - "button", - "https://registry-starter.vercel.app/r/theme.json" + "https://blok-shadcn.vercel.app/r/theme.json" ], "files": [ { - "path": "src/layouts/minimal-layout.tsx", - "type": "registry:file", - "target": "app/layout.tsx" + "path": "src/components/ui/button.tsx", + "type": "registry:ui", + "target": "src/components/ui/button.tsx" } ] }, @@ -501,15 +507,17 @@ "type": "registry:ui", "title": "Card", "description": "Containers for displaying content and actions about a single subject.", + "dependencies": [ + "class-variance-authority" + ], "registryDependencies": [ - "card", - "https://registry-starter.vercel.app/r/theme.json" + "https://blok-shadcn.vercel.app/r/theme.json" ], "files": [ { - "path": "src/layouts/minimal-layout.tsx", - "type": "registry:file", - "target": "app/layout.tsx" + "path": "src/components/ui/card.tsx", + "type": "registry:ui", + "target": "src/components/ui/card.tsx" } ] }, @@ -654,15 +662,18 @@ "type": "registry:ui", "title": "Select", "description": "Displays a list of options for the user to pick from—triggered by a button.", + "dependencies": [ + "@radix-ui/react-select", + "@mdi/react", + "@mdi/js" + ], "registryDependencies": [ - "select", - "https://registry-starter.vercel.app/r/theme.json" + "https://blok-shadcn.vercel.app/r/theme.json" ], "files": [ { - "path": "src/layouts/minimal-layout.tsx", - "type": "registry:file", - "target": "app/layout.tsx" + "path": "src/components/ui/select.tsx", + "type": "registry:ui" } ] }, @@ -825,4 +836,4 @@ ] } ] -} +} \ No newline at end of file From c7c4656aea97eaf016193313400c9f59db58021a Mon Sep 17 00:00:00 2001 From: Vishath Amarasinghe - Sitecore SE Date: Thu, 28 Aug 2025 12:42:50 +0530 Subject: [PATCH 11/93] feat(Switch): add registry and demo components for Switch (#79) * demo and registry components implemented for switch * linting refactor --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/ui/switch.tsx | 32 +++++++++++++++++++++++++++---- src/components/ui/switch.tsx | 32 +++++++++++++++++++++++-------- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/src/app/demo/[name]/ui/switch.tsx b/src/app/demo/[name]/ui/switch.tsx index 04b5c07f..85a08a35 100644 --- a/src/app/demo/[name]/ui/switch.tsx +++ b/src/app/demo/[name]/ui/switch.tsx @@ -4,11 +4,35 @@ import { Switch } from "@/components/ui/switch"; export const switchComponent = { name: "switch", components: { - Default: ( -
- - + Primary: ( +
+ +
), + Danger: ( +
+ + +
+ ), + Success: ( +
+ + +
+ ), + FocusMode: ( + + ), }, }; diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 727e5440..63302558 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -1,31 +1,47 @@ "use client"; -import * as SwitchPrimitive from "@radix-ui/react-switch"; import type * as React from "react"; +import * as SwitchPrimitive from "@radix-ui/react-switch"; +import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; +const switchVariants = cva( + "peer data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", + { + variants: { + variant: { + primary: "data-[state=checked]:bg-primary", + danger: "data-[state=checked]:bg-destructive", + success: "data-[state=checked]:bg-success", + }, + }, + defaultVariants: { + variant: "primary", + }, + } +) + function Switch({ className, + variant, ...props -}: React.ComponentProps) { +}: React.ComponentProps & + VariantProps) { return ( ); } -export { Switch }; +export { Switch, switchVariants }; From 58193f13d01d614e148617be3aa25c7ea8b622b6 Mon Sep 17 00:00:00 2001 From: Vishath Amarasinghe - Sitecore SE Date: Thu, 28 Aug 2025 12:47:28 +0530 Subject: [PATCH 12/93] feat(Tabs): add registry and demo components for Tabs (#80) * tabs component related registry and demo added * linter issues fixed --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/ui/tabs.tsx | 77 +++++++++++++++++++++++++-------- src/components/ui/tabs.tsx | 52 +++++++++++++++++----- 2 files changed, 101 insertions(+), 28 deletions(-) diff --git a/src/app/demo/[name]/ui/tabs.tsx b/src/app/demo/[name]/ui/tabs.tsx index b4d762e8..8defce16 100644 --- a/src/app/demo/[name]/ui/tabs.tsx +++ b/src/app/demo/[name]/ui/tabs.tsx @@ -1,3 +1,6 @@ +import { mdiCodeBraces, mdiCog, mdiHome, mdiWindowMaximize } from "@mdi/js"; +import Icon from "@mdi/react"; + import { Button } from "@/components/ui/button"; import { Card, @@ -14,9 +17,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; export const tabs = { name: "tabs", components: { - Default: ( - - + LineVariant: ( + + Account Password @@ -28,14 +31,14 @@ export const tabs = { Make changes to your account here. Click save when you're done. - -
- - + +
+ +
-
- - +
+ +
@@ -51,14 +54,14 @@ export const tabs = { Change your password here. After saving, you'll be logged out. - -
- - + +
+ +
-
- - +
+ +
@@ -68,5 +71,45 @@ export const tabs = { ), + LineVariantWithIcons: ( + + + + + Home + + + + Settings + + + + ), + SoftRoundedVariant: ( + + + + Home + + + Settings + + + + ), + WithIcons: ( + + + + + Preview + + + + Code + + + + ), }, }; diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index ba16df9e..e476b2d8 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -1,10 +1,42 @@ "use client"; -import * as TabsPrimitive from "@radix-ui/react-tabs"; import type * as React from "react"; +import * as TabsPrimitive from "@radix-ui/react-tabs"; +import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; +const tabsListVariants = cva( + "inline-flex h-9 w-fit items-center justify-center", + { + variants: { + variant: { + line: "", + "soft-rounded": "", + }, + }, + defaultVariants: { + variant: "line", + }, + } +); + +const tabsTriggerVariants = cva( + "inline-flex h-9 items-center justify-center gap-1.5 text-md font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + { + variants: { + variant: { + line: "text-neutral-fg data-[state=active]:text-primary-fg border-b-2 border-border-color data-[state=active]:border-primary-fg hover:cursor-pointer px-4", + "soft-rounded": + "text-neutral-fg data-[state=active]:text-primary-fg data-[state=active]:bg-primary-bg hover:cursor-pointer px-4 rounded-[9999px]", + }, + }, + defaultVariants: { + variant: "line", + }, + } +); + function Tabs({ className, ...props @@ -20,15 +52,14 @@ function Tabs({ function TabsList({ className, + variant, ...props -}: React.ComponentProps) { +}: React.ComponentProps & + VariantProps) { return ( ); @@ -36,15 +67,14 @@ function TabsList({ function TabsTrigger({ className, + variant, ...props -}: React.ComponentProps) { +}: React.ComponentProps & + VariantProps) { return ( ); From cf8f3503ba47e18e52c369133df37d0f987b843e Mon Sep 17 00:00:00 2001 From: Muthula Alwis <215100981+Sc-MuthulaAlwis@users.noreply.github.com> Date: Thu, 28 Aug 2025 12:50:36 +0530 Subject: [PATCH 13/93] Added breadcrumb component (#82) Co-authored-by: Muthula --- src/components/ui/breadcrumb.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx index 95e80962..02d260a7 100644 --- a/src/components/ui/breadcrumb.tsx +++ b/src/components/ui/breadcrumb.tsx @@ -1,5 +1,6 @@ +import { mdiDotsHorizontal, mdiSlashForward } from "@mdi/js"; +import Icon from "@mdi/react"; import { Slot } from "@radix-ui/react-slot"; -import { ChevronRight, MoreHorizontal } from "lucide-react"; import type * as React from "react"; import { cn } from "@/lib/utils"; @@ -13,7 +14,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
    ); @@ -54,9 +55,10 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { ); @@ -75,7 +77,7 @@ function BreadcrumbSeparator({ className={cn("[&>svg]:size-3.5", className)} {...props} > - {children ?? } + {children ?? } ); } @@ -92,7 +94,7 @@ function BreadcrumbEllipsis({ className={cn("flex size-9 items-center justify-center", className)} {...props} > - + More ); From c98e2d5f16321e2bd0e3509d1038be6288715f9b Mon Sep 17 00:00:00 2001 From: sc-vijith Date: Thu, 28 Aug 2025 12:51:06 +0530 Subject: [PATCH 14/93] menu bar component completed (#81) Co-authored-by: vijithan --- src/app/demo/[name]/ui/menu-bar.tsx | 198 ++++++++++++++++------------ 1 file changed, 112 insertions(+), 86 deletions(-) diff --git a/src/app/demo/[name]/ui/menu-bar.tsx b/src/app/demo/[name]/ui/menu-bar.tsx index 9a37025b..2d1bf409 100644 --- a/src/app/demo/[name]/ui/menu-bar.tsx +++ b/src/app/demo/[name]/ui/menu-bar.tsx @@ -2,6 +2,7 @@ import { Menubar, MenubarCheckboxItem, MenubarContent, + MenubarGroup, MenubarItem, MenubarMenu, MenubarRadioGroup, @@ -13,98 +14,123 @@ import { MenubarSubTrigger, MenubarTrigger, } from "@/components/ui/menubar"; +import { HelpCircleIcon, SettingsIcon, Trash2Icon } from "lucide-react"; export const menuBar = { name: "menu-bar", components: { Default: ( - - - File - - - New Tab ⌘T - - - New Window ⌘N - - New Incognito Window - - - Share - - Email link - Messages - Notes - - - - - Print... ⌘P - - - - - Edit - - - Undo ⌘Z - - - Redo ⇧⌘Z - - - - Find - - Search the web +
    + + + File + + + New Tab ⌘T + + + New Window ⌘N + + New Incognito Window + + + Share + + Email link + Messages + Notes + + + + + Print... ⌘P + + + + + Edit + + + Undo ⌘Z + + + Redo ⇧⌘Z + + + + Find + + Search the web + + Find... + Find Next + Find Previous + + + + Cut + Copy + Paste + + + + View + + + Always Show Bookmarks Bar + + + Always Show Full URLs + + + + Reload ⌘R + + + Force Reload ⇧⌘R + + + Toggle Fullscreen + + Hide Sidebar + + + + Profiles + + + Andy + Benoit + Luis + + + Edit... + + Add Profile... + + + + More + + + + + Settings + + + + Help + - Find... - Find Next - Find Previous - - - - Cut - Copy - Paste - - - - View - - Always Show Bookmarks Bar - - Always Show Full URLs - - - - Reload ⌘R - - - Force Reload ⇧⌘R - - - Toggle Fullscreen - - Hide Sidebar - - - - Profiles - - - Andy - Benoit - Luis - - - Edit... - - Add Profile... - - - + + + Delete + + + + + +
    ), }, }; From 133abaaa4183f486d3caf13a2f7be42cefb05fbe Mon Sep 17 00:00:00 2001 From: Vishath Amarasinghe - Sitecore SE Date: Thu, 28 Aug 2025 13:07:55 +0530 Subject: [PATCH 15/93] feat(Avatar): add registry and demo components for Avatar (#78) * avatar component and demo implemented * refactor * linter issues fixed * refactor * linter fixed * URL changed to blok site urls --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/ui/avatar.tsx | 53 ++++++++++++++++++++++++++----- src/components/ui/avatar.tsx | 8 ++--- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/src/app/demo/[name]/ui/avatar.tsx b/src/app/demo/[name]/ui/avatar.tsx index 03703617..4e8d04ba 100644 --- a/src/app/demo/[name]/ui/avatar.tsx +++ b/src/app/demo/[name]/ui/avatar.tsx @@ -3,21 +3,58 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; export const avatar = { name: "avatar", components: { - Default: ( + default: ( - + CN ), - Fallback: ( + fallback: ( - - - CN - + BM ), - }, + large:( +
    + + CN + + + + MS + + + + OO + +
    + ), + interactive: ( +
    + + + CN + + + + CV + + + + ES + +
    + ) + } }; diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index 98e4243f..f29ca9f3 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -1,7 +1,7 @@ "use client"; -import * as AvatarPrimitive from "@radix-ui/react-avatar"; import type * as React from "react"; +import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { cn } from "@/lib/utils"; @@ -14,7 +14,7 @@ function Avatar({ data-slot="avatar" className={cn( "relative flex size-8 shrink-0 overflow-hidden rounded-full", - className, + className )} {...props} /> @@ -42,8 +42,8 @@ function AvatarFallback({ From 80ab6d324636223aa0e1ce8ff8bf243c46693c6f Mon Sep 17 00:00:00 2001 From: sc-vijith Date: Thu, 28 Aug 2025 13:37:36 +0530 Subject: [PATCH 16/93] seperator component add to demo (#83) Co-authored-by: vijithan --- src/app/demo/[name]/ui/separator.tsx | 32 +++++++++++++++++----------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/src/app/demo/[name]/ui/separator.tsx b/src/app/demo/[name]/ui/separator.tsx index 1467026a..68621016 100644 --- a/src/app/demo/[name]/ui/separator.tsx +++ b/src/app/demo/[name]/ui/separator.tsx @@ -5,19 +5,25 @@ export const separator = { components: { Default: (
    -
    -

    Radix Primitives

    -

    - An open-source UI component library. -

    -
    - -
    -
    Blog
    - -
    Docs
    - -
    Source
    +
    +
    +
    +
    + Tailwind CSS +
    +
    + A utility-first CSS framework. +
    +
    + +
    +
    Blog
    + +
    Docs
    + +
    Source
    +
    +
    ), From 4e79d86f6e5ed1f292adeebd72891b66cc8e92ff Mon Sep 17 00:00:00 2001 From: Muthula Alwis <215100981+Sc-MuthulaAlwis@users.noreply.github.com> Date: Thu, 28 Aug 2025 13:44:20 +0530 Subject: [PATCH 17/93] Integration of the accordion component to the doc site (#72) * Imported new button component * Updated non existing button variants with existing variants * Added new Accordion component * Added lint fixes for accordion component * Removed repeated className use in AccordionContent * Fixed the className repition in AccordionContent Reverted classname use deletion in child component. Removed classname use in parent component --------- Co-authored-by: Muthula --- src/components/ui/accordion.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx index bc92ba7f..9ccb2562 100644 --- a/src/components/ui/accordion.tsx +++ b/src/components/ui/accordion.tsx @@ -1,7 +1,8 @@ "use client"; +import { mdiChevronDown } from "@mdi/js"; +import Icon from "@mdi/react"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import { ChevronDownIcon } from "lucide-react"; import type * as React from "react"; import { cn } from "@/lib/utils"; @@ -35,13 +36,17 @@ function AccordionTrigger({ svg]:rotate-180", + "focus-visible:border-ring focus-visible:ring-ring/50 text-md font-regular hover:bg-blackAlpha-50 flex flex-1 cursor-pointer items-start justify-between gap-4 px-2 py-4 text-left transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className, )} {...props} > {children} - + ); @@ -55,7 +60,7 @@ function AccordionContent({ return (
    {children}
    From 47f837ea5dd2c10d24e63b1e100014a008d570dd Mon Sep 17 00:00:00 2001 From: Muthula Alwis <215100981+Sc-MuthulaAlwis@users.noreply.github.com> Date: Thu, 28 Aug 2025 14:42:37 +0530 Subject: [PATCH 18/93] Integration of the label component to the doc site and registry (#85) * Added Label component * Added label component to index file * Added label object to the registry --------- Co-authored-by: Muthula --- registry.json | 19 +++++++++++++++++++ src/app/demo/[name]/index.tsx | 2 ++ src/app/demo/[name]/ui/label.tsx | 14 ++++++++++++++ src/components/ui/label.tsx | 2 +- 4 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 src/app/demo/[name]/ui/label.tsx diff --git a/registry.json b/registry.json index 8ca0ea94..9753b8b1 100644 --- a/registry.json +++ b/registry.json @@ -640,6 +640,25 @@ } ] }, + { + "name": "label", + "type": "registry:ui", + "title": "Label", + "description": "Renders an accessible label associated with controls.", + "registryDependencies": [ + "https://blok-shadcn.vercel.app/r/theme.json" + ], + "dependencies": [ + "@radix-ui/react-label" + ], + "files": [ + { + "path": "src/components/ui/label.tsx", + "type": "registry:ui", + "target": "src/components/ui/label.tsx" + } + ] + }, { "name": "menu-bar", "type": "registry:ui", diff --git a/src/app/demo/[name]/index.tsx b/src/app/demo/[name]/index.tsx index 63bcb5ad..1a0d2f8c 100644 --- a/src/app/demo/[name]/index.tsx +++ b/src/app/demo/[name]/index.tsx @@ -30,6 +30,7 @@ import { datePicker } from "@/app/demo/[name]/ui/date-picker"; import { dialog } from "@/app/demo/[name]/ui/dialog"; import { dropdownMenu } from "@/app/demo/[name]/ui/dropdown-menu"; import { input } from "@/app/demo/[name]/ui/input"; +import { label } from "@/app/demo/[name]/ui/label"; import { menuBar } from "@/app/demo/[name]/ui/menu-bar"; import { select } from "@/app/demo/[name]/ui/select"; import { separator } from "@/app/demo/[name]/ui/separator"; @@ -80,6 +81,7 @@ export const demos: { [name: string]: Demo } = { "data-table": dataTable, "dropdown-menu": dropdownMenu, input, + label, "menu-bar": menuBar, select, separator, diff --git a/src/app/demo/[name]/ui/label.tsx b/src/app/demo/[name]/ui/label.tsx new file mode 100644 index 00000000..d6167d24 --- /dev/null +++ b/src/app/demo/[name]/ui/label.tsx @@ -0,0 +1,14 @@ +import { Checkbox } from "@/components/ui/checkbox"; +import { Label } from "@/components/ui/label"; + +export const label = { + name: "label", + components: { + Default: ( +
    + + +
    + ), + }, +}; diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx index 67f975b6..47337434 100644 --- a/src/components/ui/label.tsx +++ b/src/components/ui/label.tsx @@ -13,7 +13,7 @@ function Label({ Date: Thu, 28 Aug 2025 14:44:04 +0530 Subject: [PATCH 19/93] feat(Skeleton): add registry and demo components for Skeleton (#84) * avatar component and demo implemented * refactor * linter issues fixed * refactor * linter fixed * URL changed to blok site urls * skeleton demos added * linter issues fixed --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/ui/skeleton.tsx | 31 ++++++++++++++++++----------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/app/demo/[name]/ui/skeleton.tsx b/src/app/demo/[name]/ui/skeleton.tsx index e8cce6d6..835a3a65 100644 --- a/src/app/demo/[name]/ui/skeleton.tsx +++ b/src/app/demo/[name]/ui/skeleton.tsx @@ -1,24 +1,31 @@ +import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; export const skeleton = { name: "skeleton", components: { Default: ( -
    - -
    - - +
    + +
    + +
    ), - Card: ( -
    - -
    - - -
    + CardList: ( +
    + {Array.from({ length: 2 }).map((_, index) => ( + + + + + + + + + + ))}
    ), }, From eabf34e00e5783a966d0a78b8b08b355746a1ef2 Mon Sep 17 00:00:00 2001 From: Vishath Amarasinghe - Sitecore SE Date: Thu, 28 Aug 2025 14:47:44 +0530 Subject: [PATCH 20/93] feat(Dialog): add registry and demo components for Dialog (#86) * dialog registry and component added * linter issues fixed --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/ui/dialog.tsx | 99 ++++++++++++++++++++++++------- src/components/ui/dialog.tsx | 85 +++++++++++++++++++++----- 2 files changed, 150 insertions(+), 34 deletions(-) diff --git a/src/app/demo/[name]/ui/dialog.tsx b/src/app/demo/[name]/ui/dialog.tsx index a29b261a..fa563147 100644 --- a/src/app/demo/[name]/ui/dialog.tsx +++ b/src/app/demo/[name]/ui/dialog.tsx @@ -1,6 +1,7 @@ import { Button } from "@/components/ui/button"; import { Dialog, + DialogClose, DialogContent, DialogDescription, DialogFooter, @@ -17,7 +18,7 @@ export const dialog = { Default: ( - + @@ -26,33 +27,91 @@ export const dialog = { Make changes to your profile here. Click save when you're done. -
    -
    - - +
    +
    + +
    -
    - - +
    + +
    + + +
    ), + Scrollable: ( + + + + + + + Scrollable Content + + This is a dialog with scrollable content. + + +
    +

    + Lorem Ipsum +

    + {Array.from({ length: 10 }).map((_, index) => ( +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    + ))} +
    +     +     + ), + StickyFooter: ( + + + + + + + Scrollable Content + + This is a dialog with scrollable content. + + +
    +

    + Lorem Ipsum +

    + {Array.from({ length: 10 }).map((_, index) => ( +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    + ))} +
    + + + + + +     +     + ), }, }; diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 3f639a55..834b1945 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -1,10 +1,12 @@ "use client"; +import * as React from "react"; +import { mdiClose } from "@mdi/js"; +import Icon from "@mdi/react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; -import { XIcon } from "lucide-react"; -import type * as React from "react"; import { cn } from "@/lib/utils"; +import { buttonVariants } from "@/components/ui/button"; function Dialog({ ...props @@ -38,35 +40,90 @@ function DialogOverlay({ ); } +interface DialogContentProps + extends React.ComponentProps { + size?: "sm" | "md" | "lg" | "xl" | "full" +} + function DialogContent({ className, children, + size = "md", ...props -}: React.ComponentProps) { +}: DialogContentProps) { + const sizeClasses: Record, string> = { + sm: "max-w-sm", + md: "max-w-md", + lg: "max-w-2xl", + xl: "max-w-4xl", + full: "w-screen h-screen max-w-none max-h-none rounded-none p-0", + } + + function hasCloseButton(node: React.ReactNode): boolean { + let found = false + + React.Children.forEach(node, (child) => { + if (found) return + + if ( + React.isValidElement(child) && + (child.type === DialogClose || child.type === DialogPrimitive.Close) + ) { + found = true + } else if ( + React.isValidElement(child) && + child.props && + typeof child.props === "object" && + "children" in child.props + ) { + found = hasCloseButton(child.props.children as React.ReactNode) + } + }) + + return found + } + + const hasCustomCloseButton = hasCloseButton(children); + return ( {children} - - - Close - + + {!hasCustomCloseButton && ( + + + Close + + )} ); @@ -87,8 +144,8 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
    @@ -102,7 +159,7 @@ function DialogTitle({ return ( ); From 60682216ded80582aa506130f04d857bf46d4977 Mon Sep 17 00:00:00 2001 From: Ishanka Lakshan Date: Thu, 28 Aug 2025 15:33:30 +0530 Subject: [PATCH 21/93] Integration of the input component to the doc site (#87) * Integration of the input component to the doc site * Integration of the input component to the doc site revert * Integration of the input component to the doc site --- src/app/demo/[name]/ui/input.tsx | 34 +++++++++++++++++--------------- src/components/ui/input.tsx | 7 ++++--- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/app/demo/[name]/ui/input.tsx b/src/app/demo/[name]/ui/input.tsx index 929ab9b2..d61c9bb5 100644 --- a/src/app/demo/[name]/ui/input.tsx +++ b/src/app/demo/[name]/ui/input.tsx @@ -1,29 +1,31 @@ -import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; export const input = { name: "input", components: { - Default: , - Email: , - WithLabel: ( -
    - - + Email: ( +
    +
    ), - WithButton: ( -
    - - + Text: ( +
    + +
    + ), + Password: ( +
    +
    ), - File: ( -
    - - +
    + +
    + ), + Disabled: ( +
    +
    ), }, diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index a60356dd..a9404d0f 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -8,9 +8,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { type={type} data-slot="input" className={cn( - "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", - "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", - "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", + "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-sm border bg-white px-3 py-1 text-base transition-[color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "focus-visible:border-primary", + "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "border-input focus:border-primary focus:ring-primary text-md font-regular placeholder-blackAlpha-400 rounded-md border focus:ring-1", className, )} {...props} From 98d45a25b189bfaa2841d32e22dbeda8440019b7 Mon Sep 17 00:00:00 2001 From: Vishath Amarasinghe - Sitecore SE Date: Thu, 28 Aug 2025 15:34:07 +0530 Subject: [PATCH 22/93] feat(carousel): add registry and demo components for Carousel (#88) * carousel component related registry and demo implemented * linter issues fixed --------- Co-authored-by: Vishath Amarasinghe --- src/app/demo/[name]/index.tsx | 2 + src/app/demo/[name]/ui/carousel.tsx | 81 +++++++++++++++++++++++++++++ src/components/ui/carousel.tsx | 31 ++++++----- 3 files changed, 101 insertions(+), 13 deletions(-) create mode 100644 src/app/demo/[name]/ui/carousel.tsx diff --git a/src/app/demo/[name]/index.tsx b/src/app/demo/[name]/index.tsx index 1a0d2f8c..97a470fd 100644 --- a/src/app/demo/[name]/index.tsx +++ b/src/app/demo/[name]/index.tsx @@ -23,6 +23,7 @@ import { breadcrumb } from "@/app/demo/[name]/ui/breadcrumb"; import { button } from "@/app/demo/[name]/ui/button"; import { calendar } from "@/app/demo/[name]/ui/calendar"; import { card } from "@/app/demo/[name]/ui/card"; +import {carousel} from '@/app/demo/[name]/ui/carousel'; import { chart } from "@/app/demo/[name]/ui/chart"; import { checkbox } from "@/app/demo/[name]/ui/checkbox"; import { dataTable } from "@/app/demo/[name]/ui/data-table"; @@ -74,6 +75,7 @@ export const demos: { [name: string]: Demo } = { button, calendar, card, + carousel, chart, checkbox, dialog, diff --git a/src/app/demo/[name]/ui/carousel.tsx b/src/app/demo/[name]/ui/carousel.tsx new file mode 100644 index 00000000..380e6690 --- /dev/null +++ b/src/app/demo/[name]/ui/carousel.tsx @@ -0,0 +1,81 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; + +export const carousel = { + name: "carousel", + components: { + // Default Carousel + Default: ( + + + {Array.from({ length: 5 }).map((_, index) => ( + +
    + + + {index + 1} + + +
    +     + ))} +     + + +     + ), + + // Start-aligned Carousel + StartAligned: ( + + + {Array.from({ length: 5 }).map((_, index) => ( + +
    + + + {index + 1} + + +
    +     + ))} +     + + +     + ), + + // Carousel with negative margin + half-width items + NegativeMargin: ( + + + {Array.from({ length: 5 }).map((_, index) => ( + +
    + + + {index + 1} + + +
    +     + ))} +     + + +     + ), + }, +}; diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx index 67921a40..18d990d3 100644 --- a/src/components/ui/carousel.tsx +++ b/src/components/ui/carousel.tsx @@ -1,10 +1,11 @@ "use client"; +import * as React from "react"; +import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; +import Icon from "@mdi/react"; import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react"; -import { ArrowLeft, ArrowRight } from "lucide-react"; -import * as React from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; @@ -56,7 +57,7 @@ function Carousel({ ...opts, axis: orientation === "horizontal" ? "x" : "y", }, - plugins, + plugins ); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); @@ -145,7 +146,7 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) { className={cn( "flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", - className, + className )} {...props} /> @@ -164,7 +165,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { className={cn( "min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", - className, + className )} {...props} /> @@ -174,6 +175,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { function CarouselPrevious({ className, variant = "outline", + colorScheme, size = "icon", ...props }: React.ComponentProps) { @@ -183,19 +185,20 @@ function CarouselPrevious({ ); @@ -204,6 +207,7 @@ function CarouselPrevious({ function CarouselNext({ className, variant = "outline", + colorScheme, size = "icon", ...props }: React.ComponentProps) { @@ -213,19 +217,20 @@ function CarouselNext({ ); From 3caa6a58121e6e8d35ac86cb15cc459533793f7f Mon Sep 17 00:00:00 2001 From: Muthula Alwis <215100981+Sc-MuthulaAlwis@users.noreply.github.com> Date: Thu, 28 Aug 2025 15:54:08 +0530 Subject: [PATCH 23/93] Added the slider component (#89) Co-authored-by: Muthula --- src/components/ui/slider.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx index 2adaa9c5..c80e2f48 100644 --- a/src/components/ui/slider.tsx +++ b/src/components/ui/slider.tsx @@ -31,7 +31,7 @@ function Slider({ min={min} max={max} className={cn( - "relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50", + "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className, )} {...props} @@ -39,13 +39,13 @@ function Slider({ @@ -53,7 +53,7 @@ function Slider({ ))} From 1b6189440a4c04672c02e388935c415cb39d0d4c Mon Sep 17 00:00:00 2001 From: Muthula Alwis <215100981+Sc-MuthulaAlwis@users.noreply.github.com> Date: Thu, 28 Aug 2025 17:23:36 +0530 Subject: [PATCH 24/93] Integration of the sonner component to the doc site (#90) * Added sonner component * Updated layout with the toaster component --------- Co-authored-by: Muthula --- src/app/demo/[name]/ui/sonner-toasts.tsx | 5 +- src/app/layout.tsx | 2 + src/components/ui/sonner.tsx | 60 +++++++++++++++++++----- 3 files changed, 51 insertions(+), 16 deletions(-) diff --git a/src/app/demo/[name]/ui/sonner-toasts.tsx b/src/app/demo/[name]/ui/sonner-toasts.tsx index ac44fa60..0b2bbfc4 100644 --- a/src/app/demo/[name]/ui/sonner-toasts.tsx +++ b/src/app/demo/[name]/ui/sonner-toasts.tsx @@ -29,10 +29,7 @@ export function WarningSonner() { export function ErrorSonner() { return ( - ); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7aa07aac..d13fed81 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,6 +7,7 @@ import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import "@/app/globals.css"; +import { Toaster } from "@/components/ui/sonner"; export const metadata: Metadata = { title: "Registry Starter", @@ -52,6 +53,7 @@ export default function RootLayout({ {children} + ); diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx index faccee59..aef684c7 100644 --- a/src/components/ui/sonner.tsx +++ b/src/components/ui/sonner.tsx @@ -1,8 +1,14 @@ "use client"; +import { + mdiAlertCircle, + mdiCheckCircle, + mdiClose, + mdiInformation, +} from "@mdi/js"; +import Icon from "@mdi/react"; import { useTheme } from "next-themes"; import { Toaster as Sonner, type ToasterProps } from "sonner"; -import { type CSSProperties } from "react"; const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme(); @@ -11,20 +17,50 @@ const Toaster = ({ ...props }: ToasterProps) => { + +
    + ), + error: ( +
    + +
    + ), + info: ( +
    + +
    + ), + warning: ( +
    + +
    + ), + close: ( +
    + +
    + ), + }} /> ); }; From 7c3076e1c3bc96f2c5fdc6f81c5d6a7ee11854e6 Mon Sep 17 00:00:00 2001 From: Ishanka Lakshan Date: Thu, 28 Aug 2025 17:24:28 +0530 Subject: [PATCH 25/93] Integration of the pagination component to the doc site (#91) * Integration of the input component to the doc site * Integration of the input component to the doc site revert * Integration of the pagination component to the doc site --- src/app/demo/[name]/index.tsx | 2 ++ src/app/demo/[name]/ui/pagination.tsx | 43 +++++++++++++++++++++++++++ src/components/ui/pagination.tsx | 35 ++++++++++++---------- 3 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 src/app/demo/[name]/ui/pagination.tsx diff --git a/src/app/demo/[name]/index.tsx b/src/app/demo/[name]/index.tsx index 97a470fd..47cf5290 100644 --- a/src/app/demo/[name]/index.tsx +++ b/src/app/demo/[name]/index.tsx @@ -43,6 +43,7 @@ import { table } from "@/app/demo/[name]/ui/table"; import { tabs } from "@/app/demo/[name]/ui/tabs"; import { toggleGroup } from "@/app/demo/[name]/ui/toggle-group"; import { tooltip } from "@/app/demo/[name]/ui/tooltip"; +import { pagination } from "@/app/demo/[name]/ui/pagination"; interface Demo { name: string; // this must match the `registry.json` name @@ -95,4 +96,5 @@ export const demos: { [name: string]: Demo } = { tabs, "toggle-group": toggleGroup, tooltip, + pagination, }; diff --git a/src/app/demo/[name]/ui/pagination.tsx b/src/app/demo/[name]/ui/pagination.tsx new file mode 100644 index 00000000..d3091d0f --- /dev/null +++ b/src/app/demo/[name]/ui/pagination.tsx @@ -0,0 +1,43 @@ +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "@/components/ui/pagination"; + +export const pagination = { + name: "pagination", + components: { + Default: ( +
    + + + + + + + 1 + + + + 2 + + + + 3 + + + + + + + + + +
    + ), + }, +}; diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx index e3595658..81cf8670 100644 --- a/src/components/ui/pagination.tsx +++ b/src/components/ui/pagination.tsx @@ -1,16 +1,14 @@ -import { - ChevronLeftIcon, - ChevronRightIcon, - MoreHorizontalIcon, -} from "lucide-react"; +import { mdiChevronLeft, mdiChevronRight, mdiDotsHorizontal } from "@mdi/js"; import type * as React from "react"; -import { type Button, buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import { Button, buttonVariants } from "@/components/ui/button"; +import Icon from "@mdi/react"; function Pagination({ className, ...props }: React.ComponentProps<"nav">) { return (