Skip to content

Commit c75a4ec

Browse files
alicanerdurmazalicanerdurmaz
committed
feat(ui): update registry
1 parent a0f6970 commit c75a4ec

File tree

3 files changed

+18
-5
lines changed

3 files changed

+18
-5
lines changed

‎packages/ui/public/r/theme-provider.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
33
"name": "theme-provider",
44
"type": "registry:component",
5-
"title": "Theme Provider & Toggle",
5+
"title": "Theme Provider & Toggle & Select",
66
"author": "Refine <info@refine.dev>",
77
"description": "A complete theme system with provider and toggle components. Supports dark, light, and system themes with localStorage persistence.",
88
"dependencies": ["lucide-react"],
@@ -19,8 +19,14 @@
1919
"content": "\"use client\";\n\nimport { useTheme } from \"@/registry/default/refine-ui/layout/theme-provider\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Moon, Sun, Monitor } from \"lucide-react\";\n\ntype ThemeToggleProps = {\n className?: string;\n};\n\nexport function ThemeToggle({ className }: ThemeToggleProps) {\n const { theme, setTheme } = useTheme();\n\n const cycleTheme = () => {\n switch (theme) {\n case \"light\":\n setTheme(\"dark\");\n break;\n case \"dark\":\n setTheme(\"system\");\n break;\n case \"system\":\n setTheme(\"light\");\n break;\n default:\n setTheme(\"light\");\n }\n };\n\n return (\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={cycleTheme}\n className={cn(\n \"rounded-full\",\n \"border-sidebar-border\",\n \"bg-transparent\",\n className,\n )}\n >\n <Sun\n className={cn(\n \"h-[1.2rem]\",\n \"w-[1.2rem]\",\n \"rotate-0\",\n \"scale-100\",\n \"transition-all\",\n \"duration-200\",\n {\n \"-rotate-90 scale-0\": theme === \"dark\" || theme === \"system\",\n },\n )}\n />\n <Moon\n className={cn(\n \"absolute\",\n \"h-[1.2rem]\",\n \"w-[1.2rem]\",\n \"rotate-90\",\n \"scale-0\",\n \"transition-all\",\n \"duration-200\",\n {\n \"rotate-0 scale-100\": theme === \"dark\",\n \"rotate-90 scale-0\": theme === \"light\" || theme === \"system\",\n },\n )}\n />\n <Monitor\n className={cn(\n \"absolute\",\n \"h-[1.2rem]\",\n \"w-[1.2rem]\",\n \"rotate-0\",\n \"scale-0\",\n \"transition-all\",\n \"duration-200\",\n {\n \"scale-100\": theme === \"system\",\n \"scale-0\": theme === \"light\" || theme === \"dark\",\n },\n )}\n />\n <span className=\"sr-only\">Toggle theme (Light → Dark → System)</span>\n </Button>\n );\n}\n\nThemeToggle.displayName = \"ThemeToggle\";\n",
2020
"type": "registry:component",
2121
"target": "src/components/refine-ui/layout/theme-toggle.tsx"
22+
},
23+
{
24+
"path": "registry/default/refine-ui/layout/theme-select.tsx",
25+
"content": "\"use client\";\n\nimport React from \"react\";\nimport { useTheme } from \"./theme-provider\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Moon, Sun, Monitor, ChevronDown, Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ThemeOption = {\n value: \"light\" | \"dark\" | \"system\";\n label: string;\n icon: React.ReactNode;\n};\n\nconst themeOptions: ThemeOption[] = [\n {\n value: \"light\",\n label: \"Light\",\n icon: <Sun className=\"h-4 w-4\" />,\n },\n {\n value: \"dark\",\n label: \"Dark\",\n icon: <Moon className=\"h-4 w-4\" />,\n },\n {\n value: \"system\",\n label: \"System\",\n icon: <Monitor className=\"h-4 w-4\" />,\n },\n];\n\nexport function ThemeSelect() {\n const { theme, setTheme } = useTheme();\n\n const currentTheme = themeOptions.find((option) => option.value === theme);\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"ghost\"\n size=\"lg\"\n className={cn(\n \"w-full\",\n \"justify-between\",\n \"px-3\",\n \"text-left\",\n \"text-sm\",\n \"font-normal\",\n \"text-foreground\",\n \"hover:bg-accent\",\n \"hover:text-accent-foreground\",\n \"focus-visible:outline-none\",\n \"focus-visible:ring-2\",\n \"focus-visible:ring-ring\",\n )}\n >\n <div className=\"flex items-center gap-2\">\n {currentTheme?.icon}\n <span>{currentTheme?.label}</span>\n </div>\n <ChevronDown className=\"h-4 w-4 opacity-50\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"min-w-40 space-y-1\">\n {themeOptions.map((option) => {\n const isSelected = theme === option.value;\n\n return (\n <DropdownMenuItem\n key={option.value}\n onClick={() => setTheme(option.value)}\n className={cn(\n \"flex items-center gap-2 cursor-pointer relative pr-8\",\n {\n \"bg-accent text-accent-foreground\": isSelected,\n },\n )}\n >\n {option.icon}\n <span>{option.label}</span>\n {isSelected && (\n <Check className=\"h-4 w-4 absolute right-2 text-primary\" />\n )}\n </DropdownMenuItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n\nThemeSelect.displayName = \"ThemeSelect\";\n",
26+
"type": "registry:component",
27+
"target": "src/components/refine-ui/layout/theme-select.tsx"
2228
}
2329
],
2430
"docs": "https://github.com/refinedev/refine",
25-
"categories": ["theme", "dark-mode", "toggle", "provider"]
31+
"categories": ["theme", "dark-mode", "toggle", "select", "provider"]
2632
}

‎packages/ui/refine-ui-docs/installation.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,11 @@ npx shadcn@latest add http://localhost:3000/r/layout-01.json
6565
**Installs:**
6666

6767
- `src/components/refine-ui/layout/layout.tsx`
68-
- `src/components/refine-ui/layout/header.tsx`
68+
- `src/components/refine-ui/layout/mobile-header.tsx`
6969
- `src/components/refine-ui/layout/sidebar.tsx`
7070
- `src/components/refine-ui/layout/user-avatar.tsx`
7171
- `src/components/refine-ui/layout/user-info.tsx`
72+
- `src/components/refine-ui/layout/theme-select.tsx`
7273

7374
**Description:** A complete layout system with sidebar, header, and main content area for Refine applications
7475

@@ -202,6 +203,7 @@ npx shadcn@latest add http://localhost:3000/r/theme-provider.json
202203

203204
- `src/components/refine-ui/layout/theme-provider.tsx`
204205
- `src/components/refine-ui/layout/theme-toggle.tsx`
206+
- `src/components/refine-ui/layout/theme-select.tsx`
205207

206208
**Description:** A complete theme system with provider and toggle components. Supports dark, light, and system themes with localStorage persistence
207209

‎packages/ui/registry.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,13 +317,13 @@
317317
{
318318
"name": "theme-provider",
319319
"type": "registry:component",
320-
"title": "Theme Provider & Toggle",
320+
"title": "Theme Provider & Toggle & Select",
321321
"description": "A complete theme system with provider and toggle components. Supports dark, light, and system themes with localStorage persistence.",
322322
"dependencies": ["lucide-react"],
323323
"registryDependencies": ["button"],
324324
"author": "Refine <info@refine.dev>",
325325
"docs": "https://github.com/refinedev/refine",
326-
"categories": ["theme", "dark-mode", "toggle", "provider"],
326+
"categories": ["theme", "dark-mode", "toggle", "select", "provider"],
327327
"files": [
328328
{
329329
"path": "registry/default/refine-ui/layout/theme-provider.tsx",
@@ -334,6 +334,11 @@
334334
"path": "registry/default/refine-ui/layout/theme-toggle.tsx",
335335
"type": "registry:component",
336336
"target": "src/components/refine-ui/layout/theme-toggle.tsx"
337+
},
338+
{
339+
"path": "registry/default/refine-ui/layout/theme-select.tsx",
340+
"type": "registry:component",
341+
"target": "src/components/refine-ui/layout/theme-select.tsx"
337342
}
338343
]
339344
},

0 commit comments

Comments
 (0)