diff --git a/apps/www/__registry__/default/block/sidebar-16/page.tsx b/apps/www/__registry__/default/block/sidebar-16/page.tsx new file mode 100644 index 00000000000..6109ca50876 --- /dev/null +++ b/apps/www/__registry__/default/block/sidebar-16/page.tsx @@ -0,0 +1,134 @@ +"use client" + +import * as React from "react" +import { Command, Sidebar } from "lucide-react" + +import { AppSidebar } from "@/registry/default/block/sidebar-16/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "An inset sidebar with site header navigation." + +const HEADER_HEIGHT = "4rem" + +export default function Page() { + const [open, setOpen] = React.useState(true) + + return ( +
+
+
+
+ + +
+ +
+ + +
+
+
+ + + + +
+
+
+ + +
+ + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + +
+ ) +} diff --git a/apps/www/__registry__/default/blocks/sidebar-16/page.tsx b/apps/www/__registry__/default/blocks/sidebar-16/page.tsx new file mode 100644 index 00000000000..01313fb14e9 --- /dev/null +++ b/apps/www/__registry__/default/blocks/sidebar-16/page.tsx @@ -0,0 +1,30 @@ +import { AppSidebar } from "@/registry/default/blocks/sidebar-16/components/app-sidebar" +import { SiteHeader } from "@/registry/default/blocks/sidebar-16/components/site-header" +import { SidebarInset, SidebarProvider } from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "A sidebar with a header and a search form." + +export default function Page() { + return ( +
+ + +
+ + +
+
+
+
+
+
+
+
+ +
+ +
+ ) +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 5b61ac36371..52cdfa55598 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -1139,6 +1139,49 @@ export const Index: Record = { source: "__registry__/new-york/blocks/sidebar-15/page.tsx", meta: undefined, }, + "sidebar-16": { + name: "sidebar-16", + description: "A sidebar with a sticky site header.", + type: "registry:block", + registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","button"], + files: [{ + path: "registry/new-york/blocks/sidebar-16/page.tsx", + type: "registry:page", + target: "app/dashboard/page.tsx" + },{ + path: "registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/new-york/blocks/sidebar-16/components/nav-main.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/new-york/blocks/sidebar-16/components/nav-projects.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/new-york/blocks/sidebar-16/components/nav-user.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/new-york/blocks/sidebar-16/components/search-form.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/new-york/blocks/sidebar-16/components/site-header.tsx", + type: "registry:component", + target: "" + }], + categories: ["sidebar","dashboard"], + component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-16/page.tsx")), + source: "__registry__/new-york/blocks/sidebar-16/page.tsx", + meta: undefined, + }, "login-01": { name: "login-01", description: "A simple login form.", @@ -6394,6 +6437,49 @@ export const Index: Record = { source: "__registry__/default/blocks/sidebar-15/page.tsx", meta: undefined, }, + "sidebar-16": { + name: "sidebar-16", + description: "A sidebar with a sticky site header.", + type: "registry:block", + registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","button"], + files: [{ + path: "registry/default/blocks/sidebar-16/page.tsx", + type: "registry:page", + target: "app/dashboard/page.tsx" + },{ + path: "registry/default/blocks/sidebar-16/components/app-sidebar.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/default/blocks/sidebar-16/components/nav-main.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/default/blocks/sidebar-16/components/nav-projects.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/default/blocks/sidebar-16/components/nav-secondary.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/default/blocks/sidebar-16/components/nav-user.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/default/blocks/sidebar-16/components/search-form.tsx", + type: "registry:component", + target: "" + },{ + path: "registry/default/blocks/sidebar-16/components/site-header.tsx", + type: "registry:component", + target: "" + }], + categories: ["sidebar","dashboard"], + component: React.lazy(() => import("@/registry/default/blocks/sidebar-16/page.tsx")), + source: "__registry__/default/blocks/sidebar-16/page.tsx", + meta: undefined, + }, "login-01": { name: "login-01", description: "A simple login form.", diff --git a/apps/www/__registry__/new-york/block/sidebar-16/page.tsx b/apps/www/__registry__/new-york/block/sidebar-16/page.tsx new file mode 100644 index 00000000000..d639e07c2ee --- /dev/null +++ b/apps/www/__registry__/new-york/block/sidebar-16/page.tsx @@ -0,0 +1,134 @@ +"use client" + +import * as React from "react" +import { Command, Sidebar } from "lucide-react" + +import { AppSidebar } from "@/registry/new-york/block/sidebar-16/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Button } from "@/registry/new-york/ui/button" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "An inset sidebar with site header navigation." + +const HEADER_HEIGHT = "4rem" + +export default function Page() { + const [open, setOpen] = React.useState(true) + + return ( +
+
+ +
+ + + + +
+
+
+ + +
+ + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + +
+ ) +} diff --git a/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx new file mode 100644 index 00000000000..85d4f3b69b5 --- /dev/null +++ b/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx @@ -0,0 +1,30 @@ +import { AppSidebar } from "@/registry/new-york/blocks/sidebar-16/components/app-sidebar" +import { SiteHeader } from "@/registry/new-york/blocks/sidebar-16/components/site-header" +import { SidebarInset, SidebarProvider } from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "A sidebar with a header and a search form." + +export default function Page() { + return ( +
+ + +
+ + +
+
+
+
+
+
+
+
+ +
+ +
+ ) +} diff --git a/apps/www/lib/colors.ts b/apps/www/lib/colors.ts index 74709c4f11f..42f07264fd7 100644 --- a/apps/www/lib/colors.ts +++ b/apps/www/lib/colors.ts @@ -11,6 +11,7 @@ const colorSchema = z.object({ rgb: z.string(), hsl: z.string(), foreground: z.string(), + oklch: z.string(), }) const colorPaletteSchema = z.object({ @@ -26,6 +27,7 @@ export function getColorFormat(color: Color) { hex: color.hex, rgb: color.rgb, hsl: color.hsl, + oklch: color.oklch, } } @@ -57,6 +59,10 @@ export function getColors() { /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, "$1 $2 $3" ), + oklch: color.oklch.replace( + /^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/, + "$1 $2 $3" + ), foreground: getForegroundFromBackground(rgb), } }), diff --git a/apps/www/public/r/colors/index.json b/apps/www/public/r/colors/index.json index c25158efb11..c06c452a3ff 100644 --- a/apps/www/public/r/colors/index.json +++ b/apps/www/public/r/colors/index.json @@ -6,6 +6,7 @@ "hex": "#000000", "rgb": "rgb(0,0,0)", "hsl": "hsl(0,0%,0%)", + "oklch": "oklch(0.00,0.00,0)", "rgbChannel": "0 0 0", "hslChannel": "0 0% 0%" }, @@ -13,6 +14,7 @@ "hex": "#ffffff", "rgb": "rgb(255,255,255)", "hsl": "hsl(0,0%,100%)", + "oklch": "oklch(1.00,0.00,0)", "rgbChannel": "255 255 255", "hslChannel": "0 0% 100%" }, @@ -22,6 +24,7 @@ "hex": "#f8fafc", "rgb": "rgb(248,250,252)", "hsl": "hsl(210,40%,98%)", + "oklch": "oklch(0.98,0.00,248)", "rgbChannel": "248 250 252", "hslChannel": "210 40% 98%" }, @@ -30,6 +33,7 @@ "hex": "#f1f5f9", "rgb": "rgb(241,245,249)", "hsl": "hsl(210,40%,96.1%)", + "oklch": "oklch(0.97,0.01,248)", "rgbChannel": "241 245 249", "hslChannel": "210 40% 96.1%" }, @@ -38,6 +42,7 @@ "hex": "#e2e8f0", "rgb": "rgb(226,232,240)", "hsl": "hsl(214.3,31.8%,91.4%)", + "oklch": "oklch(0.93,0.01,256)", "rgbChannel": "226 232 240", "hslChannel": "214.3 31.8% 91.4%" }, @@ -46,6 +51,7 @@ "hex": "#cbd5e1", "rgb": "rgb(203,213,225)", "hsl": "hsl(212.7,26.8%,83.9%)", + "oklch": "oklch(0.87,0.02,253)", "rgbChannel": "203 213 225", "hslChannel": "212.7 26.8% 83.9%" }, @@ -54,6 +60,7 @@ "hex": "#94a3b8", "rgb": "rgb(148,163,184)", "hsl": "hsl(215,20.2%,65.1%)", + "oklch": "oklch(0.71,0.04,257)", "rgbChannel": "148 163 184", "hslChannel": "215 20.2% 65.1%" }, @@ -62,6 +69,7 @@ "hex": "#64748b", "rgb": "rgb(100,116,139)", "hsl": "hsl(215.4,16.3%,46.9%)", + "oklch": "oklch(0.55,0.04,257)", "rgbChannel": "100 116 139", "hslChannel": "215.4 16.3% 46.9%" }, @@ -70,6 +78,7 @@ "hex": "#475569", "rgb": "rgb(71,85,105)", "hsl": "hsl(215.3,19.3%,34.5%)", + "oklch": "oklch(0.45,0.04,257)", "rgbChannel": "71 85 105", "hslChannel": "215.3 19.3% 34.5%" }, @@ -78,6 +87,7 @@ "hex": "#334155", "rgb": "rgb(51,65,85)", "hsl": "hsl(215.3,25%,26.7%)", + "oklch": "oklch(0.37,0.04,257)", "rgbChannel": "51 65 85", "hslChannel": "215.3 25% 26.7%" }, @@ -86,6 +96,7 @@ "hex": "#1e293b", "rgb": "rgb(30,41,59)", "hsl": "hsl(217.2,32.6%,17.5%)", + "oklch": "oklch(0.28,0.04,260)", "rgbChannel": "30 41 59", "hslChannel": "217.2 32.6% 17.5%" }, @@ -94,6 +105,7 @@ "hex": "#0f172a", "rgb": "rgb(15,23,42)", "hsl": "hsl(222.2,47.4%,11.2%)", + "oklch": "oklch(0.21,0.04,266)", "rgbChannel": "15 23 42", "hslChannel": "222.2 47.4% 11.2%" }, @@ -102,6 +114,7 @@ "hex": "#020617", "rgb": "rgb(2,6,23)", "hsl": "hsl(222.2,84%,4.9%)", + "oklch": "oklch(0.13,0.04,265)", "rgbChannel": "2 6 23", "hslChannel": "222.2 84% 4.9%" } @@ -112,6 +125,7 @@ "hex": "#f9fafb", "rgb": "rgb(249,250,251)", "hsl": "hsl(210,20%,98%)", + "oklch": "oklch(0.98,0.00,248)", "rgbChannel": "249 250 251", "hslChannel": "210 20% 98%" }, @@ -120,6 +134,7 @@ "hex": "#f3f4f6", "rgb": "rgb(243,244,246)", "hsl": "hsl(220,14.3%,95.9%)", + "oklch": "oklch(0.97,0.00,265)", "rgbChannel": "243 244 246", "hslChannel": "220 14.3% 95.9%" }, @@ -128,6 +143,7 @@ "hex": "#e5e7eb", "rgb": "rgb(229,231,235)", "hsl": "hsl(220,13%,91%)", + "oklch": "oklch(0.93,0.01,265)", "rgbChannel": "229 231 235", "hslChannel": "220 13% 91%" }, @@ -136,6 +152,7 @@ "hex": "#d1d5db", "rgb": "rgb(209,213,219)", "hsl": "hsl(216,12.2%,83.9%)", + "oklch": "oklch(0.87,0.01,258)", "rgbChannel": "209 213 219", "hslChannel": "216 12.2% 83.9%" }, @@ -144,6 +161,7 @@ "hex": "#9ca3af", "rgb": "rgb(156,163,175)", "hsl": "hsl(217.9,10.6%,64.9%)", + "oklch": "oklch(0.71,0.02,261)", "rgbChannel": "156 163 175", "hslChannel": "217.9 10.6% 64.9%" }, @@ -152,6 +170,7 @@ "hex": "#6b7280", "rgb": "rgb(107,114,128)", "hsl": "hsl(220,8.9%,46.1%)", + "oklch": "oklch(0.55,0.02,264)", "rgbChannel": "107 114 128", "hslChannel": "220 8.9% 46.1%" }, @@ -160,6 +179,7 @@ "hex": "#4b5563", "rgb": "rgb(75,85,99)", "hsl": "hsl(215,13.8%,34.1%)", + "oklch": "oklch(0.45,0.03,257)", "rgbChannel": "75 85 99", "hslChannel": "215 13.8% 34.1%" }, @@ -168,6 +188,7 @@ "hex": "#374151", "rgb": "rgb(55,65,81)", "hsl": "hsl(216.9,19.1%,26.7%)", + "oklch": "oklch(0.37,0.03,260)", "rgbChannel": "55 65 81", "hslChannel": "216.9 19.1% 26.7%" }, @@ -176,6 +197,7 @@ "hex": "#1f2937", "rgb": "rgb(31,41,55)", "hsl": "hsl(215,27.9%,16.9%)", + "oklch": "oklch(0.28,0.03,257)", "rgbChannel": "31 41 55", "hslChannel": "215 27.9% 16.9%" }, @@ -184,6 +206,7 @@ "hex": "#111827", "rgb": "rgb(17,24,39)", "hsl": "hsl(220.9,39.3%,11%)", + "oklch": "oklch(0.21,0.03,265)", "rgbChannel": "17 24 39", "hslChannel": "220.9 39.3% 11%" }, @@ -192,6 +215,7 @@ "hex": "#030712", "rgb": "rgb(3,7,18)", "hsl": "hsl(224,71.4%,4.1%)", + "oklch": "oklch(0.13,0.03,262)", "rgbChannel": "3 7 18", "hslChannel": "224 71.4% 4.1%" } @@ -202,6 +226,7 @@ "hex": "#fafafa", "rgb": "rgb(250,250,250)", "hsl": "hsl(0,0%,98%)", + "oklch": "oklch(0.99,0.00,0)", "rgbChannel": "250 250 250", "hslChannel": "0 0% 98%" }, @@ -210,6 +235,7 @@ "hex": "#f4f4f5", "rgb": "rgb(244,244,245)", "hsl": "hsl(240,4.8%,95.9%)", + "oklch": "oklch(0.97,0.00,286)", "rgbChannel": "244 244 245", "hslChannel": "240 4.8% 95.9%" }, @@ -218,6 +244,7 @@ "hex": "#e4e4e7", "rgb": "rgb(228,228,231)", "hsl": "hsl(240,5.9%,90%)", + "oklch": "oklch(0.92,0.00,286)", "rgbChannel": "228 228 231", "hslChannel": "240 5.9% 90%" }, @@ -226,6 +253,7 @@ "hex": "#d4d4d8", "rgb": "rgb(212,212,216)", "hsl": "hsl(240,4.9%,83.9%)", + "oklch": "oklch(0.87,0.01,286)", "rgbChannel": "212 212 216", "hslChannel": "240 4.9% 83.9%" }, @@ -234,6 +262,7 @@ "hex": "#a1a1aa", "rgb": "rgb(161,161,170)", "hsl": "hsl(240,5%,64.9%)", + "oklch": "oklch(0.71,0.01,286)", "rgbChannel": "161 161 170", "hslChannel": "240 5% 64.9%" }, @@ -242,6 +271,7 @@ "hex": "#71717a", "rgb": "rgb(113,113,122)", "hsl": "hsl(240,3.8%,46.1%)", + "oklch": "oklch(0.55,0.01,286)", "rgbChannel": "113 113 122", "hslChannel": "240 3.8% 46.1%" }, @@ -250,6 +280,7 @@ "hex": "#52525b", "rgb": "rgb(82,82,91)", "hsl": "hsl(240,5.2%,33.9%)", + "oklch": "oklch(0.44,0.01,286)", "rgbChannel": "82 82 91", "hslChannel": "240 5.2% 33.9%" }, @@ -258,6 +289,7 @@ "hex": "#3f3f46", "rgb": "rgb(63,63,70)", "hsl": "hsl(240,5.3%,26.1%)", + "oklch": "oklch(0.37,0.01,286)", "rgbChannel": "63 63 70", "hslChannel": "240 5.3% 26.1%" }, @@ -266,6 +298,7 @@ "hex": "#27272a", "rgb": "rgb(39,39,42)", "hsl": "hsl(240,3.7%,15.9%)", + "oklch": "oklch(0.27,0.01,286)", "rgbChannel": "39 39 42", "hslChannel": "240 3.7% 15.9%" }, @@ -274,6 +307,7 @@ "hex": "#18181b", "rgb": "rgb(24,24,27)", "hsl": "hsl(240,5.9%,10%)", + "oklch": "oklch(0.21,0.01,286)", "rgbChannel": "24 24 27", "hslChannel": "240 5.9% 10%" }, @@ -282,6 +316,7 @@ "hex": "#09090b", "rgb": "rgb(9,9,11)", "hsl": "hsl(240,10%,3.9%)", + "oklch": "oklch(0.14,0.00,286)", "rgbChannel": "9 9 11", "hslChannel": "240 10% 3.9%" } @@ -292,6 +327,7 @@ "hex": "#fafafa", "rgb": "rgb(250,250,250)", "hsl": "hsl(0,0%,98%)", + "oklch": "oklch(0.99,0.00,0)", "rgbChannel": "250 250 250", "hslChannel": "0 0% 98%" }, @@ -300,6 +336,7 @@ "hex": "#f5f5f5", "rgb": "rgb(245,245,245)", "hsl": "hsl(0,0%,96.1%)", + "oklch": "oklch(0.97,0.00,0)", "rgbChannel": "245 245 245", "hslChannel": "0 0% 96.1%" }, @@ -308,6 +345,7 @@ "hex": "#e5e5e5", "rgb": "rgb(229,229,229)", "hsl": "hsl(0,0%,89.8%)", + "oklch": "oklch(0.92,0.00,0)", "rgbChannel": "229 229 229", "hslChannel": "0 0% 89.8%" }, @@ -316,6 +354,7 @@ "hex": "#d4d4d4", "rgb": "rgb(212,212,212)", "hsl": "hsl(0,0%,83.1%)", + "oklch": "oklch(0.87,0.00,0)", "rgbChannel": "212 212 212", "hslChannel": "0 0% 83.1%" }, @@ -324,6 +363,7 @@ "hex": "#a3a3a3", "rgb": "rgb(163,163,163)", "hsl": "hsl(0,0%,63.9%)", + "oklch": "oklch(0.72,0.00,0)", "rgbChannel": "163 163 163", "hslChannel": "0 0% 63.9%" }, @@ -332,6 +372,7 @@ "hex": "#737373", "rgb": "rgb(115,115,115)", "hsl": "hsl(0,0%,45.1%)", + "oklch": "oklch(0.56,0.00,0)", "rgbChannel": "115 115 115", "hslChannel": "0 0% 45.1%" }, @@ -340,6 +381,7 @@ "hex": "#525252", "rgb": "rgb(82,82,82)", "hsl": "hsl(0,0%,32.2%)", + "oklch": "oklch(0.44,0.00,0)", "rgbChannel": "82 82 82", "hslChannel": "0 0% 32.2%" }, @@ -348,6 +390,7 @@ "hex": "#404040", "rgb": "rgb(64,64,64)", "hsl": "hsl(0,0%,25.1%)", + "oklch": "oklch(0.37,0.00,0)", "rgbChannel": "64 64 64", "hslChannel": "0 0% 25.1%" }, @@ -356,6 +399,7 @@ "hex": "#262626", "rgb": "rgb(38,38,38)", "hsl": "hsl(0,0%,14.9%)", + "oklch": "oklch(0.27,0.00,0)", "rgbChannel": "38 38 38", "hslChannel": "0 0% 14.9%" }, @@ -364,6 +408,7 @@ "hex": "#171717", "rgb": "rgb(23,23,23)", "hsl": "hsl(0,0%,9%)", + "oklch": "oklch(0.20,0.00,0)", "rgbChannel": "23 23 23", "hslChannel": "0 0% 9%" }, @@ -372,6 +417,7 @@ "hex": "#0a0a0a", "rgb": "rgb(10,10,10)", "hsl": "hsl(0,0%,3.9%)", + "oklch": "oklch(0.14,0.00,0)", "rgbChannel": "10 10 10", "hslChannel": "0 0% 3.9%" } @@ -382,6 +428,7 @@ "hex": "#fafaf9", "rgb": "rgb(250,250,249)", "hsl": "hsl(60,9.1%,97.8%)", + "oklch": "oklch(0.98,0.00,106)", "rgbChannel": "250 250 249", "hslChannel": "60 9.1% 97.8%" }, @@ -390,6 +437,7 @@ "hex": "#f5f5f4", "rgb": "rgb(245,245,244)", "hsl": "hsl(60,4.8%,95.9%)", + "oklch": "oklch(0.97,0.00,106)", "rgbChannel": "245 245 244", "hslChannel": "60 4.8% 95.9%" }, @@ -398,6 +446,7 @@ "hex": "#e7e5e4", "rgb": "rgb(231,229,228)", "hsl": "hsl(20,5.9%,90%)", + "oklch": "oklch(0.92,0.00,49)", "rgbChannel": "231 229 228", "hslChannel": "20 5.9% 90%" }, @@ -406,6 +455,7 @@ "hex": "#d6d3d1", "rgb": "rgb(214,211,209)", "hsl": "hsl(24,5.7%,82.9%)", + "oklch": "oklch(0.87,0.00,56)", "rgbChannel": "214 211 209", "hslChannel": "24 5.7% 82.9%" }, @@ -414,6 +464,7 @@ "hex": "#a8a29e", "rgb": "rgb(168,162,158)", "hsl": "hsl(24,5.4%,63.9%)", + "oklch": "oklch(0.72,0.01,56)", "rgbChannel": "168 162 158", "hslChannel": "24 5.4% 63.9%" }, @@ -422,6 +473,7 @@ "hex": "#78716c", "rgb": "rgb(120,113,108)", "hsl": "hsl(25,5.3%,44.7%)", + "oklch": "oklch(0.55,0.01,58)", "rgbChannel": "120 113 108", "hslChannel": "25 5.3% 44.7%" }, @@ -430,6 +482,7 @@ "hex": "#57534e", "rgb": "rgb(87,83,78)", "hsl": "hsl(33.3,5.5%,32.4%)", + "oklch": "oklch(0.44,0.01,74)", "rgbChannel": "87 83 78", "hslChannel": "33.3 5.5% 32.4%" }, @@ -438,6 +491,7 @@ "hex": "#44403c", "rgb": "rgb(68,64,60)", "hsl": "hsl(30,6.3%,25.1%)", + "oklch": "oklch(0.37,0.01,68)", "rgbChannel": "68 64 60", "hslChannel": "30 6.3% 25.1%" }, @@ -446,6 +500,7 @@ "hex": "#292524", "rgb": "rgb(41,37,36)", "hsl": "hsl(12,6.5%,15.1%)", + "oklch": "oklch(0.27,0.01,34)", "rgbChannel": "41 37 36", "hslChannel": "12 6.5% 15.1%" }, @@ -454,6 +509,7 @@ "hex": "#1c1917", "rgb": "rgb(28,25,23)", "hsl": "hsl(24,9.8%,10%)", + "oklch": "oklch(0.22,0.01,56)", "rgbChannel": "28 25 23", "hslChannel": "24 9.8% 10%" }, @@ -462,6 +518,7 @@ "hex": "#0c0a09", "rgb": "rgb(12,10,9)", "hsl": "hsl(20,14.3%,4.1%)", + "oklch": "oklch(0.15,0.00,49)", "rgbChannel": "12 10 9", "hslChannel": "20 14.3% 4.1%" } @@ -472,6 +529,7 @@ "hex": "#fef2f2", "rgb": "rgb(254,242,242)", "hsl": "hsl(0,85.7%,97.3%)", + "oklch": "oklch(0.97,0.01,17)", "rgbChannel": "254 242 242", "hslChannel": "0 85.7% 97.3%" }, @@ -480,6 +538,7 @@ "hex": "#fee2e2", "rgb": "rgb(254,226,226)", "hsl": "hsl(0,93.3%,94.1%)", + "oklch": "oklch(0.94,0.03,18)", "rgbChannel": "254 226 226", "hslChannel": "0 93.3% 94.1%" }, @@ -488,6 +547,7 @@ "hex": "#fecaca", "rgb": "rgb(254,202,202)", "hsl": "hsl(0,96.3%,89.4%)", + "oklch": "oklch(0.88,0.06,18)", "rgbChannel": "254 202 202", "hslChannel": "0 96.3% 89.4%" }, @@ -496,6 +556,7 @@ "hex": "#fca5a5", "rgb": "rgb(252,165,165)", "hsl": "hsl(0,93.5%,81.8%)", + "oklch": "oklch(0.81,0.10,20)", "rgbChannel": "252 165 165", "hslChannel": "0 93.5% 81.8%" }, @@ -504,6 +565,7 @@ "hex": "#f87171", "rgb": "rgb(248,113,113)", "hsl": "hsl(0,90.6%,70.8%)", + "oklch": "oklch(0.71,0.17,22)", "rgbChannel": "248 113 113", "hslChannel": "0 90.6% 70.8%" }, @@ -512,6 +574,7 @@ "hex": "#ef4444", "rgb": "rgb(239,68,68)", "hsl": "hsl(0,84.2%,60.2%)", + "oklch": "oklch(0.64,0.21,25)", "rgbChannel": "239 68 68", "hslChannel": "0 84.2% 60.2%" }, @@ -520,6 +583,7 @@ "hex": "#dc2626", "rgb": "rgb(220,38,38)", "hsl": "hsl(0,72.2%,50.6%)", + "oklch": "oklch(0.58,0.22,27)", "rgbChannel": "220 38 38", "hslChannel": "0 72.2% 50.6%" }, @@ -528,6 +592,7 @@ "hex": "#b91c1c", "rgb": "rgb(185,28,28)", "hsl": "hsl(0,73.7%,41.8%)", + "oklch": "oklch(0.51,0.19,28)", "rgbChannel": "185 28 28", "hslChannel": "0 73.7% 41.8%" }, @@ -536,6 +601,7 @@ "hex": "#991b1b", "rgb": "rgb(153,27,27)", "hsl": "hsl(0,70%,35.3%)", + "oklch": "oklch(0.44,0.16,27)", "rgbChannel": "153 27 27", "hslChannel": "0 70% 35.3%" }, @@ -544,6 +610,7 @@ "hex": "#7f1d1d", "rgb": "rgb(127,29,29)", "hsl": "hsl(0,62.8%,30.6%)", + "oklch": "oklch(0.40,0.13,26)", "rgbChannel": "127 29 29", "hslChannel": "0 62.8% 30.6%" }, @@ -552,6 +619,7 @@ "hex": "#450a0a", "rgb": "rgb(69,10,10)", "hsl": "hsl(0,74.7%,15.5%)", + "oklch": "oklch(0.26,0.09,26)", "rgbChannel": "69 10 10", "hslChannel": "0 74.7% 15.5%" } @@ -562,6 +630,7 @@ "hex": "#fff7ed", "rgb": "rgb(255,247,237)", "hsl": "hsl(33.3,100%,96.5%)", + "oklch": "oklch(0.98,0.02,74)", "rgbChannel": "255 247 237", "hslChannel": "33.3 100% 96.5%" }, @@ -570,6 +639,7 @@ "hex": "#ffedd5", "rgb": "rgb(255,237,213)", "hsl": "hsl(34.3,100%,91.8%)", + "oklch": "oklch(0.95,0.04,75)", "rgbChannel": "255 237 213", "hslChannel": "34.3 100% 91.8%" }, @@ -578,6 +648,7 @@ "hex": "#fed7aa", "rgb": "rgb(254,215,170)", "hsl": "hsl(32.1,97.7%,83.1%)", + "oklch": "oklch(0.90,0.07,71)", "rgbChannel": "254 215 170", "hslChannel": "32.1 97.7% 83.1%" }, @@ -586,6 +657,7 @@ "hex": "#fdba74", "rgb": "rgb(253,186,116)", "hsl": "hsl(30.7,97.2%,72.4%)", + "oklch": "oklch(0.84,0.12,66)", "rgbChannel": "253 186 116", "hslChannel": "30.7 97.2% 72.4%" }, @@ -594,6 +666,7 @@ "hex": "#fb923c", "rgb": "rgb(251,146,60)", "hsl": "hsl(27,96%,61%)", + "oklch": "oklch(0.76,0.16,56)", "rgbChannel": "251 146 60", "hslChannel": "27 96% 61%" }, @@ -602,6 +675,7 @@ "hex": "#f97316", "rgb": "rgb(249,115,22)", "hsl": "hsl(24.6,95%,53.1%)", + "oklch": "oklch(0.70,0.19,48)", "rgbChannel": "249 115 22", "hslChannel": "24.6 95% 53.1%" }, @@ -610,6 +684,7 @@ "hex": "#ea580c", "rgb": "rgb(234,88,12)", "hsl": "hsl(20.5,90.2%,48.2%)", + "oklch": "oklch(0.65,0.19,41)", "rgbChannel": "234 88 12", "hslChannel": "20.5 90.2% 48.2%" }, @@ -618,6 +693,7 @@ "hex": "#c2410c", "rgb": "rgb(194,65,12)", "hsl": "hsl(17.5,88.3%,40.4%)", + "oklch": "oklch(0.55,0.17,38)", "rgbChannel": "194 65 12", "hslChannel": "17.5 88.3% 40.4%" }, @@ -626,6 +702,7 @@ "hex": "#9a3412", "rgb": "rgb(154,52,18)", "hsl": "hsl(15,79.1%,33.7%)", + "oklch": "oklch(0.47,0.14,37)", "rgbChannel": "154 52 18", "hslChannel": "15 79.1% 33.7%" }, @@ -634,6 +711,7 @@ "hex": "#7c2d12", "rgb": "rgb(124,45,18)", "hsl": "hsl(15.3,74.6%,27.8%)", + "oklch": "oklch(0.41,0.12,38)", "rgbChannel": "124 45 18", "hslChannel": "15.3 74.6% 27.8%" }, @@ -642,6 +720,7 @@ "hex": "#431407", "rgb": "rgb(67,20,7)", "hsl": "hsl(13,81.1%,14.5%)", + "oklch": "oklch(0.27,0.08,36)", "rgbChannel": "67 20 7", "hslChannel": "13 81.1% 14.5%" } @@ -652,6 +731,7 @@ "hex": "#fffbeb", "rgb": "rgb(255,251,235)", "hsl": "hsl(48,100%,96.1%)", + "oklch": "oklch(0.99,0.02,95)", "rgbChannel": "255 251 235", "hslChannel": "48 100% 96.1%" }, @@ -660,6 +740,7 @@ "hex": "#fef3c7", "rgb": "rgb(254,243,199)", "hsl": "hsl(48,96.5%,88.8%)", + "oklch": "oklch(0.96,0.06,96)", "rgbChannel": "254 243 199", "hslChannel": "48 96.5% 88.8%" }, @@ -668,6 +749,7 @@ "hex": "#fde68a", "rgb": "rgb(253,230,138)", "hsl": "hsl(48,96.6%,76.7%)", + "oklch": "oklch(0.92,0.12,96)", "rgbChannel": "253 230 138", "hslChannel": "48 96.6% 76.7%" }, @@ -676,6 +758,7 @@ "hex": "#fcd34d", "rgb": "rgb(252,211,77)", "hsl": "hsl(45.9,96.7%,64.5%)", + "oklch": "oklch(0.88,0.15,92)", "rgbChannel": "252 211 77", "hslChannel": "45.9 96.7% 64.5%" }, @@ -684,6 +767,7 @@ "hex": "#fbbf24", "rgb": "rgb(251,191,36)", "hsl": "hsl(43.3,96.4%,56.3%)", + "oklch": "oklch(0.84,0.16,84)", "rgbChannel": "251 191 36", "hslChannel": "43.3 96.4% 56.3%" }, @@ -692,6 +776,7 @@ "hex": "#f59e0b", "rgb": "rgb(245,158,11)", "hsl": "hsl(37.7,92.1%,50.2%)", + "oklch": "oklch(0.77,0.16,70)", "rgbChannel": "245 158 11", "hslChannel": "37.7 92.1% 50.2%" }, @@ -700,6 +785,7 @@ "hex": "#d97706", "rgb": "rgb(217,119,6)", "hsl": "hsl(32.1,94.6%,43.7%)", + "oklch": "oklch(0.67,0.16,58)", "rgbChannel": "217 119 6", "hslChannel": "32.1 94.6% 43.7%" }, @@ -708,6 +794,7 @@ "hex": "#b45309", "rgb": "rgb(180,83,9)", "hsl": "hsl(26,90.5%,37.1%)", + "oklch": "oklch(0.56,0.15,49)", "rgbChannel": "180 83 9", "hslChannel": "26 90.5% 37.1%" }, @@ -716,6 +803,7 @@ "hex": "#92400e", "rgb": "rgb(146,64,14)", "hsl": "hsl(22.7,82.5%,31.4%)", + "oklch": "oklch(0.47,0.12,46)", "rgbChannel": "146 64 14", "hslChannel": "22.7 82.5% 31.4%" }, @@ -724,6 +812,7 @@ "hex": "#78350f", "rgb": "rgb(120,53,15)", "hsl": "hsl(21.7,77.8%,26.5%)", + "oklch": "oklch(0.41,0.11,46)", "rgbChannel": "120 53 15", "hslChannel": "21.7 77.8% 26.5%" }, @@ -732,6 +821,7 @@ "hex": "#451a03", "rgb": "rgb(69,26,3)", "hsl": "hsl(20.9,91.7%,14.1%)", + "oklch": "oklch(0.28,0.07,46)", "rgbChannel": "69 26 3", "hslChannel": "20.9 91.7% 14.1%" } @@ -742,6 +832,7 @@ "hex": "#fefce8", "rgb": "rgb(254,252,232)", "hsl": "hsl(54.5,91.7%,95.3%)", + "oklch": "oklch(0.99,0.03,102)", "rgbChannel": "254 252 232", "hslChannel": "54.5 91.7% 95.3%" }, @@ -750,6 +841,7 @@ "hex": "#fef9c3", "rgb": "rgb(254,249,195)", "hsl": "hsl(54.9,96.7%,88%)", + "oklch": "oklch(0.97,0.07,103)", "rgbChannel": "254 249 195", "hslChannel": "54.9 96.7% 88%" }, @@ -758,6 +850,7 @@ "hex": "#fef08a", "rgb": "rgb(254,240,138)", "hsl": "hsl(52.8,98.3%,76.9%)", + "oklch": "oklch(0.95,0.12,102)", "rgbChannel": "254 240 138", "hslChannel": "52.8 98.3% 76.9%" }, @@ -766,6 +859,7 @@ "hex": "#fde047", "rgb": "rgb(253,224,71)", "hsl": "hsl(50.4,97.8%,63.5%)", + "oklch": "oklch(0.91,0.17,98)", "rgbChannel": "253 224 71", "hslChannel": "50.4 97.8% 63.5%" }, @@ -774,6 +868,7 @@ "hex": "#facc15", "rgb": "rgb(250,204,21)", "hsl": "hsl(47.9,95.8%,53.1%)", + "oklch": "oklch(0.86,0.17,92)", "rgbChannel": "250 204 21", "hslChannel": "47.9 95.8% 53.1%" }, @@ -782,6 +877,7 @@ "hex": "#eab308", "rgb": "rgb(234,179,8)", "hsl": "hsl(45.4,93.4%,47.5%)", + "oklch": "oklch(0.80,0.16,86)", "rgbChannel": "234 179 8", "hslChannel": "45.4 93.4% 47.5%" }, @@ -790,6 +886,7 @@ "hex": "#ca8a04", "rgb": "rgb(202,138,4)", "hsl": "hsl(40.6,96.1%,40.4%)", + "oklch": "oklch(0.68,0.14,76)", "rgbChannel": "202 138 4", "hslChannel": "40.6 96.1% 40.4%" }, @@ -798,6 +895,7 @@ "hex": "#a16207", "rgb": "rgb(161,98,7)", "hsl": "hsl(35.5,91.7%,32.9%)", + "oklch": "oklch(0.55,0.12,66)", "rgbChannel": "161 98 7", "hslChannel": "35.5 91.7% 32.9%" }, @@ -806,6 +904,7 @@ "hex": "#854d0e", "rgb": "rgb(133,77,14)", "hsl": "hsl(31.8,81%,28.8%)", + "oklch": "oklch(0.48,0.10,62)", "rgbChannel": "133 77 14", "hslChannel": "31.8 81% 28.8%" }, @@ -814,6 +913,7 @@ "hex": "#713f12", "rgb": "rgb(113,63,18)", "hsl": "hsl(28.4,72.5%,25.7%)", + "oklch": "oklch(0.42,0.09,58)", "rgbChannel": "113 63 18", "hslChannel": "28.4 72.5% 25.7%" }, @@ -822,6 +922,7 @@ "hex": "#422006", "rgb": "rgb(66,32,6)", "hsl": "hsl(26,83.3%,14.1%)", + "oklch": "oklch(0.29,0.06,54)", "rgbChannel": "66 32 6", "hslChannel": "26 83.3% 14.1%" } @@ -832,6 +933,7 @@ "hex": "#f7fee7", "rgb": "rgb(247,254,231)", "hsl": "hsl(78.3,92%,95.1%)", + "oklch": "oklch(0.99,0.03,121)", "rgbChannel": "247 254 231", "hslChannel": "78.3 92% 95.1%" }, @@ -840,6 +942,7 @@ "hex": "#ecfccb", "rgb": "rgb(236,252,203)", "hsl": "hsl(79.6,89.1%,89.2%)", + "oklch": "oklch(0.97,0.07,122)", "rgbChannel": "236 252 203", "hslChannel": "79.6 89.1% 89.2%" }, @@ -848,6 +951,7 @@ "hex": "#d9f99d", "rgb": "rgb(217,249,157)", "hsl": "hsl(80.9,88.5%,79.6%)", + "oklch": "oklch(0.94,0.12,124)", "rgbChannel": "217 249 157", "hslChannel": "80.9 88.5% 79.6%" }, @@ -856,6 +960,7 @@ "hex": "#bef264", "rgb": "rgb(190,242,100)", "hsl": "hsl(82,84.5%,67.1%)", + "oklch": "oklch(0.90,0.18,127)", "rgbChannel": "190 242 100", "hslChannel": "82 84.5% 67.1%" }, @@ -864,6 +969,7 @@ "hex": "#a3e635", "rgb": "rgb(163,230,53)", "hsl": "hsl(82.7,78%,55.5%)", + "oklch": "oklch(0.85,0.21,129)", "rgbChannel": "163 230 53", "hslChannel": "82.7 78% 55.5%" }, @@ -872,6 +978,7 @@ "hex": "#84cc16", "rgb": "rgb(132,204,22)", "hsl": "hsl(83.7,80.5%,44.3%)", + "oklch": "oklch(0.77,0.20,131)", "rgbChannel": "132 204 22", "hslChannel": "83.7 80.5% 44.3%" }, @@ -880,6 +987,7 @@ "hex": "#65a30d", "rgb": "rgb(101,163,13)", "hsl": "hsl(84.8,85.2%,34.5%)", + "oklch": "oklch(0.65,0.18,132)", "rgbChannel": "101 163 13", "hslChannel": "84.8 85.2% 34.5%" }, @@ -888,6 +996,7 @@ "hex": "#4d7c0f", "rgb": "rgb(77,124,15)", "hsl": "hsl(85.9,78.4%,27.3%)", + "oklch": "oklch(0.53,0.14,132)", "rgbChannel": "77 124 15", "hslChannel": "85.9 78.4% 27.3%" }, @@ -896,6 +1005,7 @@ "hex": "#3f6212", "rgb": "rgb(63,98,18)", "hsl": "hsl(86.3,69%,22.7%)", + "oklch": "oklch(0.45,0.11,131)", "rgbChannel": "63 98 18", "hslChannel": "86.3 69% 22.7%" }, @@ -904,6 +1014,7 @@ "hex": "#365314", "rgb": "rgb(54,83,20)", "hsl": "hsl(87.6,61.2%,20.2%)", + "oklch": "oklch(0.41,0.10,131)", "rgbChannel": "54 83 20", "hslChannel": "87.6 61.2% 20.2%" }, @@ -912,6 +1023,7 @@ "hex": "#1a2e05", "rgb": "rgb(26,46,5)", "hsl": "hsl(89.3,80.4%,10%)", + "oklch": "oklch(0.27,0.07,132)", "rgbChannel": "26 46 5", "hslChannel": "89.3 80.4% 10%" } @@ -922,6 +1034,7 @@ "hex": "#f0fdf4", "rgb": "rgb(240,253,244)", "hsl": "hsl(138.5,76.5%,96.7%)", + "oklch": "oklch(0.98,0.02,156)", "rgbChannel": "240 253 244", "hslChannel": "138.5 76.5% 96.7%" }, @@ -930,6 +1043,7 @@ "hex": "#dcfce7", "rgb": "rgb(220,252,231)", "hsl": "hsl(140.6,84.2%,92.5%)", + "oklch": "oklch(0.96,0.04,157)", "rgbChannel": "220 252 231", "hslChannel": "140.6 84.2% 92.5%" }, @@ -938,6 +1052,7 @@ "hex": "#bbf7d0", "rgb": "rgb(187,247,208)", "hsl": "hsl(141,78.9%,85.1%)", + "oklch": "oklch(0.93,0.08,156)", "rgbChannel": "187 247 208", "hslChannel": "141 78.9% 85.1%" }, @@ -946,6 +1061,7 @@ "hex": "#86efac", "rgb": "rgb(134,239,172)", "hsl": "hsl(141.7,76.6%,73.1%)", + "oklch": "oklch(0.87,0.14,154)", "rgbChannel": "134 239 172", "hslChannel": "141.7 76.6% 73.1%" }, @@ -954,6 +1070,7 @@ "hex": "#4ade80", "rgb": "rgb(74,222,128)", "hsl": "hsl(141.9,69.2%,58%)", + "oklch": "oklch(0.80,0.18,152)", "rgbChannel": "74 222 128", "hslChannel": "141.9 69.2% 58%" }, @@ -962,6 +1079,7 @@ "hex": "#22c55e", "rgb": "rgb(34,197,94)", "hsl": "hsl(142.1,70.6%,45.3%)", + "oklch": "oklch(0.72,0.19,150)", "rgbChannel": "34 197 94", "hslChannel": "142.1 70.6% 45.3%" }, @@ -970,6 +1088,7 @@ "hex": "#16a34a", "rgb": "rgb(22,163,74)", "hsl": "hsl(142.1,76.2%,36.3%)", + "oklch": "oklch(0.63,0.17,149)", "rgbChannel": "22 163 74", "hslChannel": "142.1 76.2% 36.3%" }, @@ -978,6 +1097,7 @@ "hex": "#15803d", "rgb": "rgb(21,128,61)", "hsl": "hsl(142.4,71.8%,29.2%)", + "oklch": "oklch(0.53,0.14,150)", "rgbChannel": "21 128 61", "hslChannel": "142.4 71.8% 29.2%" }, @@ -986,6 +1106,7 @@ "hex": "#166534", "rgb": "rgb(22,101,52)", "hsl": "hsl(142.8,64.2%,24.1%)", + "oklch": "oklch(0.45,0.11,151)", "rgbChannel": "22 101 52", "hslChannel": "142.8 64.2% 24.1%" }, @@ -994,6 +1115,7 @@ "hex": "#14532d", "rgb": "rgb(20,83,45)", "hsl": "hsl(143.8,61.2%,20.2%)", + "oklch": "oklch(0.39,0.09,153)", "rgbChannel": "20 83 45", "hslChannel": "143.8 61.2% 20.2%" }, @@ -1002,6 +1124,7 @@ "hex": "#052e16", "rgb": "rgb(5,46,22)", "hsl": "hsl(144.9,80.4%,10%)", + "oklch": "oklch(0.27,0.06,153)", "rgbChannel": "5 46 22", "hslChannel": "144.9 80.4% 10%" } @@ -1012,6 +1135,7 @@ "hex": "#ecfdf5", "rgb": "rgb(236,253,245)", "hsl": "hsl(151.8,81%,95.9%)", + "oklch": "oklch(0.98,0.02,166)", "rgbChannel": "236 253 245", "hslChannel": "151.8 81% 95.9%" }, @@ -1020,6 +1144,7 @@ "hex": "#d1fae5", "rgb": "rgb(209,250,229)", "hsl": "hsl(149.3,80.4%,90%)", + "oklch": "oklch(0.95,0.05,163)", "rgbChannel": "209 250 229", "hslChannel": "149.3 80.4% 90%" }, @@ -1028,6 +1153,7 @@ "hex": "#a7f3d0", "rgb": "rgb(167,243,208)", "hsl": "hsl(152.4,76%,80.4%)", + "oklch": "oklch(0.90,0.09,164)", "rgbChannel": "167 243 208", "hslChannel": "152.4 76% 80.4%" }, @@ -1036,6 +1162,7 @@ "hex": "#6ee7b7", "rgb": "rgb(110,231,183)", "hsl": "hsl(156.2,71.6%,66.9%)", + "oklch": "oklch(0.85,0.13,165)", "rgbChannel": "110 231 183", "hslChannel": "156.2 71.6% 66.9%" }, @@ -1044,6 +1171,7 @@ "hex": "#34d399", "rgb": "rgb(52,211,153)", "hsl": "hsl(158.1,64.4%,51.6%)", + "oklch": "oklch(0.77,0.15,163)", "rgbChannel": "52 211 153", "hslChannel": "158.1 64.4% 51.6%" }, @@ -1052,6 +1180,7 @@ "hex": "#10b981", "rgb": "rgb(16,185,129)", "hsl": "hsl(160.1,84.1%,39.4%)", + "oklch": "oklch(0.70,0.15,162)", "rgbChannel": "16 185 129", "hslChannel": "160.1 84.1% 39.4%" }, @@ -1060,6 +1189,7 @@ "hex": "#059669", "rgb": "rgb(5,150,105)", "hsl": "hsl(161.4,93.5%,30.4%)", + "oklch": "oklch(0.60,0.13,163)", "rgbChannel": "5 150 105", "hslChannel": "161.4 93.5% 30.4%" }, @@ -1068,6 +1198,7 @@ "hex": "#047857", "rgb": "rgb(4,120,87)", "hsl": "hsl(162.9,93.5%,24.3%)", + "oklch": "oklch(0.51,0.10,166)", "rgbChannel": "4 120 87", "hslChannel": "162.9 93.5% 24.3%" }, @@ -1076,6 +1207,7 @@ "hex": "#065f46", "rgb": "rgb(6,95,70)", "hsl": "hsl(163.1,88.1%,19.8%)", + "oklch": "oklch(0.43,0.09,167)", "rgbChannel": "6 95 70", "hslChannel": "163.1 88.1% 19.8%" }, @@ -1084,6 +1216,7 @@ "hex": "#064e3b", "rgb": "rgb(6,78,59)", "hsl": "hsl(164.2,85.7%,16.5%)", + "oklch": "oklch(0.38,0.07,169)", "rgbChannel": "6 78 59", "hslChannel": "164.2 85.7% 16.5%" }, @@ -1092,6 +1225,7 @@ "hex": "#022c22", "rgb": "rgb(2,44,34)", "hsl": "hsl(165.7,91.3%,9%)", + "oklch": "oklch(0.26,0.05,173)", "rgbChannel": "2 44 34", "hslChannel": "165.7 91.3% 9%" } @@ -1102,6 +1236,7 @@ "hex": "#f0fdfa", "rgb": "rgb(240,253,250)", "hsl": "hsl(166.2,76.5%,96.7%)", + "oklch": "oklch(0.98,0.01,181)", "rgbChannel": "240 253 250", "hslChannel": "166.2 76.5% 96.7%" }, @@ -1110,6 +1245,7 @@ "hex": "#ccfbf1", "rgb": "rgb(204,251,241)", "hsl": "hsl(167.2,85.5%,89.2%)", + "oklch": "oklch(0.95,0.05,181)", "rgbChannel": "204 251 241", "hslChannel": "167.2 85.5% 89.2%" }, @@ -1118,6 +1254,7 @@ "hex": "#99f6e4", "rgb": "rgb(153,246,228)", "hsl": "hsl(168.4,83.8%,78.2%)", + "oklch": "oklch(0.91,0.09,180)", "rgbChannel": "153 246 228", "hslChannel": "168.4 83.8% 78.2%" }, @@ -1126,6 +1263,7 @@ "hex": "#5eead4", "rgb": "rgb(94,234,212)", "hsl": "hsl(170.6,76.9%,64.3%)", + "oklch": "oklch(0.85,0.13,181)", "rgbChannel": "94 234 212", "hslChannel": "170.6 76.9% 64.3%" }, @@ -1134,6 +1272,7 @@ "hex": "#2dd4bf", "rgb": "rgb(45,212,191)", "hsl": "hsl(172.5,66%,50.4%)", + "oklch": "oklch(0.78,0.13,182)", "rgbChannel": "45 212 191", "hslChannel": "172.5 66% 50.4%" }, @@ -1142,6 +1281,7 @@ "hex": "#14b8a6", "rgb": "rgb(20,184,166)", "hsl": "hsl(173.4,80.4%,40%)", + "oklch": "oklch(0.70,0.12,183)", "rgbChannel": "20 184 166", "hslChannel": "173.4 80.4% 40%" }, @@ -1150,6 +1290,7 @@ "hex": "#0d9488", "rgb": "rgb(13,148,136)", "hsl": "hsl(174.7,83.9%,31.6%)", + "oklch": "oklch(0.60,0.10,185)", "rgbChannel": "13 148 136", "hslChannel": "174.7 83.9% 31.6%" }, @@ -1158,6 +1299,7 @@ "hex": "#0f766e", "rgb": "rgb(15,118,110)", "hsl": "hsl(175.3,77.4%,26.1%)", + "oklch": "oklch(0.51,0.09,186)", "rgbChannel": "15 118 110", "hslChannel": "175.3 77.4% 26.1%" }, @@ -1166,6 +1308,7 @@ "hex": "#115e59", "rgb": "rgb(17,94,89)", "hsl": "hsl(176.1,69.4%,21.8%)", + "oklch": "oklch(0.44,0.07,188)", "rgbChannel": "17 94 89", "hslChannel": "176.1 69.4% 21.8%" }, @@ -1174,6 +1317,7 @@ "hex": "#134e4a", "rgb": "rgb(19,78,74)", "hsl": "hsl(175.9,60.8%,19%)", + "oklch": "oklch(0.39,0.06,188)", "rgbChannel": "19 78 74", "hslChannel": "175.9 60.8% 19%" }, @@ -1182,6 +1326,7 @@ "hex": "#042f2e", "rgb": "rgb(4,47,46)", "hsl": "hsl(178.6,84.3%,10%)", + "oklch": "oklch(0.28,0.04,193)", "rgbChannel": "4 47 46", "hslChannel": "178.6 84.3% 10%" } @@ -1192,6 +1337,7 @@ "hex": "#ecfeff", "rgb": "rgb(236,254,255)", "hsl": "hsl(183.2,100%,96.3%)", + "oklch": "oklch(0.98,0.02,201)", "rgbChannel": "236 254 255", "hslChannel": "183.2 100% 96.3%" }, @@ -1200,6 +1346,7 @@ "hex": "#cffafe", "rgb": "rgb(207,250,254)", "hsl": "hsl(185.1,95.9%,90.4%)", + "oklch": "oklch(0.96,0.04,203)", "rgbChannel": "207 250 254", "hslChannel": "185.1 95.9% 90.4%" }, @@ -1208,6 +1355,7 @@ "hex": "#a5f3fc", "rgb": "rgb(165,243,252)", "hsl": "hsl(186.2,93.5%,81.8%)", + "oklch": "oklch(0.92,0.08,205)", "rgbChannel": "165 243 252", "hslChannel": "186.2 93.5% 81.8%" }, @@ -1216,6 +1364,7 @@ "hex": "#67e8f9", "rgb": "rgb(103,232,249)", "hsl": "hsl(187,92.4%,69%)", + "oklch": "oklch(0.87,0.12,207)", "rgbChannel": "103 232 249", "hslChannel": "187 92.4% 69%" }, @@ -1224,6 +1373,7 @@ "hex": "#22d3ee", "rgb": "rgb(34,211,238)", "hsl": "hsl(187.9,85.7%,53.3%)", + "oklch": "oklch(0.80,0.13,212)", "rgbChannel": "34 211 238", "hslChannel": "187.9 85.7% 53.3%" }, @@ -1232,6 +1382,7 @@ "hex": "#06b6d4", "rgb": "rgb(6,182,212)", "hsl": "hsl(188.7,94.5%,42.7%)", + "oklch": "oklch(0.71,0.13,215)", "rgbChannel": "6 182 212", "hslChannel": "188.7 94.5% 42.7%" }, @@ -1240,6 +1391,7 @@ "hex": "#0891b2", "rgb": "rgb(8,145,178)", "hsl": "hsl(191.6,91.4%,36.5%)", + "oklch": "oklch(0.61,0.11,222)", "rgbChannel": "8 145 178", "hslChannel": "191.6 91.4% 36.5%" }, @@ -1248,6 +1400,7 @@ "hex": "#0e7490", "rgb": "rgb(14,116,144)", "hsl": "hsl(192.9,82.3%,31%)", + "oklch": "oklch(0.52,0.09,223)", "rgbChannel": "14 116 144", "hslChannel": "192.9 82.3% 31%" }, @@ -1256,6 +1409,7 @@ "hex": "#155e75", "rgb": "rgb(21,94,117)", "hsl": "hsl(194.4,69.6%,27.1%)", + "oklch": "oklch(0.45,0.08,224)", "rgbChannel": "21 94 117", "hslChannel": "194.4 69.6% 27.1%" }, @@ -1264,6 +1418,7 @@ "hex": "#164e63", "rgb": "rgb(22,78,99)", "hsl": "hsl(196.4,63.6%,23.7%)", + "oklch": "oklch(0.40,0.07,227)", "rgbChannel": "22 78 99", "hslChannel": "196.4 63.6% 23.7%" }, @@ -1272,6 +1427,7 @@ "hex": "#083344", "rgb": "rgb(8,51,68)", "hsl": "hsl(197,78.9%,14.9%)", + "oklch": "oklch(0.30,0.05,230)", "rgbChannel": "8 51 68", "hslChannel": "197 78.9% 14.9%" } @@ -1282,6 +1438,7 @@ "hex": "#f0f9ff", "rgb": "rgb(240,249,255)", "hsl": "hsl(204,100%,97.1%)", + "oklch": "oklch(0.98,0.01,237)", "rgbChannel": "240 249 255", "hslChannel": "204 100% 97.1%" }, @@ -1290,6 +1447,7 @@ "hex": "#e0f2fe", "rgb": "rgb(224,242,254)", "hsl": "hsl(204,93.8%,93.7%)", + "oklch": "oklch(0.95,0.03,237)", "rgbChannel": "224 242 254", "hslChannel": "204 93.8% 93.7%" }, @@ -1298,6 +1456,7 @@ "hex": "#bae6fd", "rgb": "rgb(186,230,253)", "hsl": "hsl(200.6,94.4%,86.1%)", + "oklch": "oklch(0.90,0.06,231)", "rgbChannel": "186 230 253", "hslChannel": "200.6 94.4% 86.1%" }, @@ -1306,6 +1465,7 @@ "hex": "#7dd3fc", "rgb": "rgb(125,211,252)", "hsl": "hsl(199.4,95.5%,73.9%)", + "oklch": "oklch(0.83,0.10,230)", "rgbChannel": "125 211 252", "hslChannel": "199.4 95.5% 73.9%" }, @@ -1314,6 +1474,7 @@ "hex": "#38bdf8", "rgb": "rgb(56,189,248)", "hsl": "hsl(198.4,93.2%,59.6%)", + "oklch": "oklch(0.75,0.14,233)", "rgbChannel": "56 189 248", "hslChannel": "198.4 93.2% 59.6%" }, @@ -1322,6 +1483,7 @@ "hex": "#0ea5e9", "rgb": "rgb(14,165,233)", "hsl": "hsl(198.6,88.7%,48.4%)", + "oklch": "oklch(0.68,0.15,237)", "rgbChannel": "14 165 233", "hslChannel": "198.6 88.7% 48.4%" }, @@ -1330,6 +1492,7 @@ "hex": "#0284c7", "rgb": "rgb(2,132,199)", "hsl": "hsl(200.4,98%,39.4%)", + "oklch": "oklch(0.59,0.14,242)", "rgbChannel": "2 132 199", "hslChannel": "200.4 98% 39.4%" }, @@ -1338,6 +1501,7 @@ "hex": "#0369a1", "rgb": "rgb(3,105,161)", "hsl": "hsl(201.3,96.3%,32.2%)", + "oklch": "oklch(0.50,0.12,243)", "rgbChannel": "3 105 161", "hslChannel": "201.3 96.3% 32.2%" }, @@ -1346,6 +1510,7 @@ "hex": "#075985", "rgb": "rgb(7,89,133)", "hsl": "hsl(201,90%,27.5%)", + "oklch": "oklch(0.44,0.10,241)", "rgbChannel": "7 89 133", "hslChannel": "201 90% 27.5%" }, @@ -1354,6 +1519,7 @@ "hex": "#0c4a6e", "rgb": "rgb(12,74,110)", "hsl": "hsl(202,80.3%,23.9%)", + "oklch": "oklch(0.39,0.08,241)", "rgbChannel": "12 74 110", "hslChannel": "202 80.3% 23.9%" }, @@ -1362,6 +1528,7 @@ "hex": "#082f49", "rgb": "rgb(8,47,73)", "hsl": "hsl(204,80.2%,15.9%)", + "oklch": "oklch(0.29,0.06,243)", "rgbChannel": "8 47 73", "hslChannel": "204 80.2% 15.9%" } @@ -1372,6 +1539,7 @@ "hex": "#eff6ff", "rgb": "rgb(239,246,255)", "hsl": "hsl(213.8,100%,96.9%)", + "oklch": "oklch(0.97,0.01,255)", "rgbChannel": "239 246 255", "hslChannel": "213.8 100% 96.9%" }, @@ -1380,6 +1548,7 @@ "hex": "#dbeafe", "rgb": "rgb(219,234,254)", "hsl": "hsl(214.3,94.6%,92.7%)", + "oklch": "oklch(0.93,0.03,256)", "rgbChannel": "219 234 254", "hslChannel": "214.3 94.6% 92.7%" }, @@ -1388,6 +1557,7 @@ "hex": "#bfdbfe", "rgb": "rgb(191,219,254)", "hsl": "hsl(213.3,96.9%,87.3%)", + "oklch": "oklch(0.88,0.06,254)", "rgbChannel": "191 219 254", "hslChannel": "213.3 96.9% 87.3%" }, @@ -1396,6 +1566,7 @@ "hex": "#93c5fd", "rgb": "rgb(147,197,253)", "hsl": "hsl(211.7,96.4%,78.4%)", + "oklch": "oklch(0.81,0.10,252)", "rgbChannel": "147 197 253", "hslChannel": "211.7 96.4% 78.4%" }, @@ -1404,6 +1575,7 @@ "hex": "#60a5fa", "rgb": "rgb(96,165,250)", "hsl": "hsl(213.1,93.9%,67.8%)", + "oklch": "oklch(0.71,0.14,255)", "rgbChannel": "96 165 250", "hslChannel": "213.1 93.9% 67.8%" }, @@ -1412,6 +1584,7 @@ "hex": "#3b82f6", "rgb": "rgb(59,130,246)", "hsl": "hsl(217.2,91.2%,59.8%)", + "oklch": "oklch(0.62,0.19,260)", "rgbChannel": "59 130 246", "hslChannel": "217.2 91.2% 59.8%" }, @@ -1420,6 +1593,7 @@ "hex": "#2563eb", "rgb": "rgb(37,99,235)", "hsl": "hsl(221.2,83.2%,53.3%)", + "oklch": "oklch(0.55,0.22,263)", "rgbChannel": "37 99 235", "hslChannel": "221.2 83.2% 53.3%" }, @@ -1428,6 +1602,7 @@ "hex": "#1d4ed8", "rgb": "rgb(29,78,216)", "hsl": "hsl(224.3,76.3%,48%)", + "oklch": "oklch(0.49,0.22,264)", "rgbChannel": "29 78 216", "hslChannel": "224.3 76.3% 48%" }, @@ -1436,6 +1611,7 @@ "hex": "#1e40af", "rgb": "rgb(30,64,175)", "hsl": "hsl(225.9,70.7%,40.2%)", + "oklch": "oklch(0.42,0.18,266)", "rgbChannel": "30 64 175", "hslChannel": "225.9 70.7% 40.2%" }, @@ -1444,6 +1620,7 @@ "hex": "#1e3a8a", "rgb": "rgb(30,58,138)", "hsl": "hsl(224.4,64.3%,32.9%)", + "oklch": "oklch(0.38,0.14,266)", "rgbChannel": "30 58 138", "hslChannel": "224.4 64.3% 32.9%" }, @@ -1452,6 +1629,7 @@ "hex": "#172554", "rgb": "rgb(23,37,84)", "hsl": "hsl(226.2,57%,21%)", + "oklch": "oklch(0.28,0.09,268)", "rgbChannel": "23 37 84", "hslChannel": "226.2 57% 21%" } @@ -1462,6 +1640,7 @@ "hex": "#eef2ff", "rgb": "rgb(238,242,255)", "hsl": "hsl(225.9,100%,96.7%)", + "oklch": "oklch(0.96,0.02,272)", "rgbChannel": "238 242 255", "hslChannel": "225.9 100% 96.7%" }, @@ -1470,6 +1649,7 @@ "hex": "#e0e7ff", "rgb": "rgb(224,231,255)", "hsl": "hsl(226.5,100%,93.9%)", + "oklch": "oklch(0.93,0.03,273)", "rgbChannel": "224 231 255", "hslChannel": "226.5 100% 93.9%" }, @@ -1478,6 +1658,7 @@ "hex": "#c7d2fe", "rgb": "rgb(199,210,254)", "hsl": "hsl(228,96.5%,88.8%)", + "oklch": "oklch(0.87,0.06,274)", "rgbChannel": "199 210 254", "hslChannel": "228 96.5% 88.8%" }, @@ -1486,6 +1667,7 @@ "hex": "#a5b4fc", "rgb": "rgb(165,180,252)", "hsl": "hsl(229.7,93.5%,81.8%)", + "oklch": "oklch(0.79,0.10,275)", "rgbChannel": "165 180 252", "hslChannel": "229.7 93.5% 81.8%" }, @@ -1494,6 +1676,7 @@ "hex": "#818cf8", "rgb": "rgb(129,140,248)", "hsl": "hsl(234.5,89.5%,73.9%)", + "oklch": "oklch(0.68,0.16,277)", "rgbChannel": "129 140 248", "hslChannel": "234.5 89.5% 73.9%" }, @@ -1502,6 +1685,7 @@ "hex": "#6366f1", "rgb": "rgb(99,102,241)", "hsl": "hsl(238.7,83.5%,66.7%)", + "oklch": "oklch(0.59,0.20,277)", "rgbChannel": "99 102 241", "hslChannel": "238.7 83.5% 66.7%" }, @@ -1510,6 +1694,7 @@ "hex": "#4f46e5", "rgb": "rgb(79,70,229)", "hsl": "hsl(243.4,75.4%,58.6%)", + "oklch": "oklch(0.51,0.23,277)", "rgbChannel": "79 70 229", "hslChannel": "243.4 75.4% 58.6%" }, @@ -1518,6 +1703,7 @@ "hex": "#4338ca", "rgb": "rgb(67,56,202)", "hsl": "hsl(244.5,57.9%,50.6%)", + "oklch": "oklch(0.46,0.21,277)", "rgbChannel": "67 56 202", "hslChannel": "244.5 57.9% 50.6%" }, @@ -1526,6 +1712,7 @@ "hex": "#3730a3", "rgb": "rgb(55,48,163)", "hsl": "hsl(243.7,54.5%,41.4%)", + "oklch": "oklch(0.40,0.18,277)", "rgbChannel": "55 48 163", "hslChannel": "243.7 54.5% 41.4%" }, @@ -1534,6 +1721,7 @@ "hex": "#312e81", "rgb": "rgb(49,46,129)", "hsl": "hsl(242.2,47.4%,34.3%)", + "oklch": "oklch(0.36,0.14,279)", "rgbChannel": "49 46 129", "hslChannel": "242.2 47.4% 34.3%" }, @@ -1542,6 +1730,7 @@ "hex": "#1e1b4b", "rgb": "rgb(30,27,75)", "hsl": "hsl(243.8,47.1%,20%)", + "oklch": "oklch(0.26,0.09,281)", "rgbChannel": "30 27 75", "hslChannel": "243.8 47.1% 20%" } @@ -1552,6 +1741,7 @@ "hex": "#f5f3ff", "rgb": "rgb(245,243,255)", "hsl": "hsl(250,100%,97.6%)", + "oklch": "oklch(0.97,0.02,294)", "rgbChannel": "245 243 255", "hslChannel": "250 100% 97.6%" }, @@ -1560,6 +1750,7 @@ "hex": "#ede9fe", "rgb": "rgb(237,233,254)", "hsl": "hsl(251.4,91.3%,95.5%)", + "oklch": "oklch(0.94,0.03,295)", "rgbChannel": "237 233 254", "hslChannel": "251.4 91.3% 95.5%" }, @@ -1568,6 +1759,7 @@ "hex": "#ddd6fe", "rgb": "rgb(221,214,254)", "hsl": "hsl(250.5,95.2%,91.8%)", + "oklch": "oklch(0.89,0.05,293)", "rgbChannel": "221 214 254", "hslChannel": "250.5 95.2% 91.8%" }, @@ -1576,6 +1768,7 @@ "hex": "#c4b5fd", "rgb": "rgb(196,181,253)", "hsl": "hsl(252.5,94.7%,85.1%)", + "oklch": "oklch(0.81,0.10,294)", "rgbChannel": "196 181 253", "hslChannel": "252.5 94.7% 85.1%" }, @@ -1584,6 +1777,7 @@ "hex": "#a78bfa", "rgb": "rgb(167,139,250)", "hsl": "hsl(255.1,91.7%,76.3%)", + "oklch": "oklch(0.71,0.16,294)", "rgbChannel": "167 139 250", "hslChannel": "255.1 91.7% 76.3%" }, @@ -1592,6 +1786,7 @@ "hex": "#8b5cf6", "rgb": "rgb(139,92,246)", "hsl": "hsl(258.3,89.5%,66.3%)", + "oklch": "oklch(0.61,0.22,293)", "rgbChannel": "139 92 246", "hslChannel": "258.3 89.5% 66.3%" }, @@ -1600,6 +1795,7 @@ "hex": "#7c3aed", "rgb": "rgb(124,58,237)", "hsl": "hsl(262.1,83.3%,57.8%)", + "oklch": "oklch(0.54,0.25,293)", "rgbChannel": "124 58 237", "hslChannel": "262.1 83.3% 57.8%" }, @@ -1608,6 +1804,7 @@ "hex": "#6d28d9", "rgb": "rgb(109,40,217)", "hsl": "hsl(263.4,70%,50.4%)", + "oklch": "oklch(0.49,0.24,293)", "rgbChannel": "109 40 217", "hslChannel": "263.4 70% 50.4%" }, @@ -1616,6 +1813,7 @@ "hex": "#5b21b6", "rgb": "rgb(91,33,182)", "hsl": "hsl(263.4,69.3%,42.2%)", + "oklch": "oklch(0.43,0.21,293)", "rgbChannel": "91 33 182", "hslChannel": "263.4 69.3% 42.2%" }, @@ -1624,6 +1822,7 @@ "hex": "#4c1d95", "rgb": "rgb(76,29,149)", "hsl": "hsl(263.5,67.4%,34.9%)", + "oklch": "oklch(0.38,0.18,294)", "rgbChannel": "76 29 149", "hslChannel": "263.5 67.4% 34.9%" }, @@ -1632,6 +1831,7 @@ "hex": "#1e1b4b", "rgb": "rgb(46,16,101)", "hsl": "hsl(261.2,72.6%,22.9%)", + "oklch": "oklch(0.28,0.14,291)", "rgbChannel": "46 16 101", "hslChannel": "261.2 72.6% 22.9%" } @@ -1642,6 +1842,7 @@ "hex": "#faf5ff", "rgb": "rgb(250,245,255)", "hsl": "hsl(270,100%,98%)", + "oklch": "oklch(0.98,0.01,308)", "rgbChannel": "250 245 255", "hslChannel": "270 100% 98%" }, @@ -1650,6 +1851,7 @@ "hex": "#f3e8ff", "rgb": "rgb(243,232,255)", "hsl": "hsl(268.7,100%,95.5%)", + "oklch": "oklch(0.95,0.03,307)", "rgbChannel": "243 232 255", "hslChannel": "268.7 100% 95.5%" }, @@ -1658,6 +1860,7 @@ "hex": "#e9d5ff", "rgb": "rgb(233,213,255)", "hsl": "hsl(268.6,100%,91.8%)", + "oklch": "oklch(0.90,0.06,307)", "rgbChannel": "233 213 255", "hslChannel": "268.6 100% 91.8%" }, @@ -1666,6 +1869,7 @@ "hex": "#d8b4fe", "rgb": "rgb(216,180,254)", "hsl": "hsl(269.2,97.4%,85.1%)", + "oklch": "oklch(0.83,0.11,306)", "rgbChannel": "216 180 254", "hslChannel": "269.2 97.4% 85.1%" }, @@ -1674,6 +1878,7 @@ "hex": "#c084fc", "rgb": "rgb(192,132,252)", "hsl": "hsl(270,95.2%,75.3%)", + "oklch": "oklch(0.72,0.18,306)", "rgbChannel": "192 132 252", "hslChannel": "270 95.2% 75.3%" }, @@ -1682,6 +1887,7 @@ "hex": "#a855f7", "rgb": "rgb(168,85,247)", "hsl": "hsl(270.7,91%,65.1%)", + "oklch": "oklch(0.63,0.23,304)", "rgbChannel": "168 85 247", "hslChannel": "270.7 91% 65.1%" }, @@ -1690,6 +1896,7 @@ "hex": "#9333ea", "rgb": "rgb(147,51,234)", "hsl": "hsl(271.5,81.3%,55.9%)", + "oklch": "oklch(0.56,0.25,302)", "rgbChannel": "147 51 234", "hslChannel": "271.5 81.3% 55.9%" }, @@ -1698,6 +1905,7 @@ "hex": "#7e22ce", "rgb": "rgb(126,34,206)", "hsl": "hsl(272.1,71.7%,47.1%)", + "oklch": "oklch(0.50,0.24,302)", "rgbChannel": "126 34 206", "hslChannel": "272.1 71.7% 47.1%" }, @@ -1706,6 +1914,7 @@ "hex": "#6b21a8", "rgb": "rgb(107,33,168)", "hsl": "hsl(272.9,67.2%,39.4%)", + "oklch": "oklch(0.44,0.20,304)", "rgbChannel": "107 33 168", "hslChannel": "272.9 67.2% 39.4%" }, @@ -1714,6 +1923,7 @@ "hex": "#581c87", "rgb": "rgb(88,28,135)", "hsl": "hsl(273.6,65.6%,32%)", + "oklch": "oklch(0.38,0.17,305)", "rgbChannel": "88 28 135", "hslChannel": "273.6 65.6% 32%" }, @@ -1722,6 +1932,7 @@ "hex": "#3b0764", "rgb": "rgb(59,7,100)", "hsl": "hsl(273.5,86.9%,21%)", + "oklch": "oklch(0.29,0.14,303)", "rgbChannel": "59 7 100", "hslChannel": "273.5 86.9% 21%" } @@ -1732,6 +1943,7 @@ "hex": "#fdf4ff", "rgb": "rgb(253,244,255)", "hsl": "hsl(289.1,100%,97.8%)", + "oklch": "oklch(0.98,0.02,320)", "rgbChannel": "253 244 255", "hslChannel": "289.1 100% 97.8%" }, @@ -1740,6 +1952,7 @@ "hex": "#fae8ff", "rgb": "rgb(250,232,255)", "hsl": "hsl(287,100%,95.5%)", + "oklch": "oklch(0.95,0.04,319)", "rgbChannel": "250 232 255", "hslChannel": "287 100% 95.5%" }, @@ -1748,6 +1961,7 @@ "hex": "#f5d0fe", "rgb": "rgb(245,208,254)", "hsl": "hsl(288.3,95.8%,90.6%)", + "oklch": "oklch(0.90,0.07,320)", "rgbChannel": "245 208 254", "hslChannel": "288.3 95.8% 90.6%" }, @@ -1756,6 +1970,7 @@ "hex": "#f0abfc", "rgb": "rgb(240,171,252)", "hsl": "hsl(291.1,93.1%,82.9%)", + "oklch": "oklch(0.83,0.13,321)", "rgbChannel": "240 171 252", "hslChannel": "291.1 93.1% 82.9%" }, @@ -1764,6 +1979,7 @@ "hex": "#e879f9", "rgb": "rgb(232,121,249)", "hsl": "hsl(292,91.4%,72.5%)", + "oklch": "oklch(0.75,0.21,322)", "rgbChannel": "232 121 249", "hslChannel": "292 91.4% 72.5%" }, @@ -1772,6 +1988,7 @@ "hex": "#d946ef", "rgb": "rgb(217,70,239)", "hsl": "hsl(292.2,84.1%,60.6%)", + "oklch": "oklch(0.67,0.26,322)", "rgbChannel": "217 70 239", "hslChannel": "292.2 84.1% 60.6%" }, @@ -1780,6 +1997,7 @@ "hex": "#c026d3", "rgb": "rgb(192,38,211)", "hsl": "hsl(293.4,69.5%,48.8%)", + "oklch": "oklch(0.59,0.26,323)", "rgbChannel": "192 38 211", "hslChannel": "293.4 69.5% 48.8%" }, @@ -1788,6 +2006,7 @@ "hex": "#a21caf", "rgb": "rgb(162,28,175)", "hsl": "hsl(294.7,72.4%,39.8%)", + "oklch": "oklch(0.52,0.23,324)", "rgbChannel": "162 28 175", "hslChannel": "294.7 72.4% 39.8%" }, @@ -1796,6 +2015,7 @@ "hex": "#86198f", "rgb": "rgb(134,25,143)", "hsl": "hsl(295.4,70.2%,32.9%)", + "oklch": "oklch(0.45,0.19,325)", "rgbChannel": "134 25 143", "hslChannel": "295.4 70.2% 32.9%" }, @@ -1804,6 +2024,7 @@ "hex": "#701a75", "rgb": "rgb(112,26,117)", "hsl": "hsl(296.7,63.6%,28%)", + "oklch": "oklch(0.40,0.16,326)", "rgbChannel": "112 26 117", "hslChannel": "296.7 63.6% 28%" }, @@ -1812,6 +2033,7 @@ "hex": "#4a044e", "rgb": "rgb(74,4,78)", "hsl": "hsl(296.8,90.2%,16.1%)", + "oklch": "oklch(0.29,0.13,326)", "rgbChannel": "74 4 78", "hslChannel": "296.8 90.2% 16.1%" } @@ -1822,6 +2044,7 @@ "hex": "#fdf2f8", "rgb": "rgb(253,242,248)", "hsl": "hsl(327.3,73.3%,97.1%)", + "oklch": "oklch(0.97,0.01,343)", "rgbChannel": "253 242 248", "hslChannel": "327.3 73.3% 97.1%" }, @@ -1830,6 +2053,7 @@ "hex": "#fce7f3", "rgb": "rgb(252,231,243)", "hsl": "hsl(325.7,77.8%,94.7%)", + "oklch": "oklch(0.95,0.03,342)", "rgbChannel": "252 231 243", "hslChannel": "325.7 77.8% 94.7%" }, @@ -1838,6 +2062,7 @@ "hex": "#fbcfe8", "rgb": "rgb(251,207,232)", "hsl": "hsl(325.9,84.6%,89.8%)", + "oklch": "oklch(0.90,0.06,343)", "rgbChannel": "251 207 232", "hslChannel": "325.9 84.6% 89.8%" }, @@ -1846,6 +2071,7 @@ "hex": "#f9a8d4", "rgb": "rgb(249,168,212)", "hsl": "hsl(327.4,87.1%,81.8%)", + "oklch": "oklch(0.82,0.11,346)", "rgbChannel": "249 168 212", "hslChannel": "327.4 87.1% 81.8%" }, @@ -1854,6 +2080,7 @@ "hex": "#f472b6", "rgb": "rgb(244,114,182)", "hsl": "hsl(328.6,85.5%,70.2%)", + "oklch": "oklch(0.73,0.18,350)", "rgbChannel": "244 114 182", "hslChannel": "328.6 85.5% 70.2%" }, @@ -1862,6 +2089,7 @@ "hex": "#ec4899", "rgb": "rgb(236,72,153)", "hsl": "hsl(330.4,81.2%,60.4%)", + "oklch": "oklch(0.66,0.21,354)", "rgbChannel": "236 72 153", "hslChannel": "330.4 81.2% 60.4%" }, @@ -1870,6 +2098,7 @@ "hex": "#db2777", "rgb": "rgb(219,39,119)", "hsl": "hsl(333.3,71.4%,50.6%)", + "oklch": "oklch(0.59,0.22,1)", "rgbChannel": "219 39 119", "hslChannel": "333.3 71.4% 50.6%" }, @@ -1878,6 +2107,7 @@ "hex": "#be185d", "rgb": "rgb(190,24,93)", "hsl": "hsl(335.1,77.6%,42%)", + "oklch": "oklch(0.52,0.20,4)", "rgbChannel": "190 24 93", "hslChannel": "335.1 77.6% 42%" }, @@ -1886,6 +2116,7 @@ "hex": "#9d174d", "rgb": "rgb(157,23,77)", "hsl": "hsl(335.8,74.4%,35.3%)", + "oklch": "oklch(0.46,0.17,4)", "rgbChannel": "157 23 77", "hslChannel": "335.8 74.4% 35.3%" }, @@ -1894,6 +2125,7 @@ "hex": "#831843", "rgb": "rgb(131,24,67)", "hsl": "hsl(335.9,69%,30.4%)", + "oklch": "oklch(0.41,0.14,2)", "rgbChannel": "131 24 67", "hslChannel": "335.9 69% 30.4%" }, @@ -1902,6 +2134,7 @@ "hex": "#500724", "rgb": "rgb(80,7,36)", "hsl": "hsl(336.2,83.9%,17.1%)", + "oklch": "oklch(0.28,0.10,4)", "rgbChannel": "80 7 36", "hslChannel": "336.2 83.9% 17.1%" } @@ -1912,6 +2145,7 @@ "hex": "#fff1f2", "rgb": "rgb(255,241,242)", "hsl": "hsl(355.7,100%,97.3%)", + "oklch": "oklch(0.97,0.02,12)", "rgbChannel": "255 241 242", "hslChannel": "355.7 100% 97.3%" }, @@ -1920,6 +2154,7 @@ "hex": "#ffe4e6", "rgb": "rgb(255,228,230)", "hsl": "hsl(355.6,100%,94.7%)", + "oklch": "oklch(0.94,0.03,13)", "rgbChannel": "255 228 230", "hslChannel": "355.6 100% 94.7%" }, @@ -1928,6 +2163,7 @@ "hex": "#fecdd3", "rgb": "rgb(254,205,211)", "hsl": "hsl(352.7,96.1%,90%)", + "oklch": "oklch(0.89,0.06,10)", "rgbChannel": "254 205 211", "hslChannel": "352.7 96.1% 90%" }, @@ -1936,6 +2172,7 @@ "hex": "#fda4af", "rgb": "rgb(253,164,175)", "hsl": "hsl(352.6,95.7%,81.8%)", + "oklch": "oklch(0.81,0.11,12)", "rgbChannel": "253 164 175", "hslChannel": "352.6 95.7% 81.8%" }, @@ -1944,6 +2181,7 @@ "hex": "#fb7185", "rgb": "rgb(251,113,133)", "hsl": "hsl(351.3,94.5%,71.4%)", + "oklch": "oklch(0.72,0.17,13)", "rgbChannel": "251 113 133", "hslChannel": "351.3 94.5% 71.4%" }, @@ -1952,6 +2190,7 @@ "hex": "#f43f5e", "rgb": "rgb(244,63,94)", "hsl": "hsl(349.7,89.2%,60.2%)", + "oklch": "oklch(0.65,0.22,16)", "rgbChannel": "244 63 94", "hslChannel": "349.7 89.2% 60.2%" }, @@ -1960,6 +2199,7 @@ "hex": "#e11d48", "rgb": "rgb(225,29,72)", "hsl": "hsl(346.8,77.2%,49.8%)", + "oklch": "oklch(0.59,0.22,18)", "rgbChannel": "225 29 72", "hslChannel": "346.8 77.2% 49.8%" }, @@ -1968,6 +2208,7 @@ "hex": "#be123c", "rgb": "rgb(190,18,60)", "hsl": "hsl(345.3,82.7%,40.8%)", + "oklch": "oklch(0.51,0.20,17)", "rgbChannel": "190 18 60", "hslChannel": "345.3 82.7% 40.8%" }, @@ -1976,6 +2217,7 @@ "hex": "#9f1239", "rgb": "rgb(159,18,57)", "hsl": "hsl(343.4,79.7%,34.7%)", + "oklch": "oklch(0.45,0.17,14)", "rgbChannel": "159 18 57", "hslChannel": "343.4 79.7% 34.7%" }, @@ -1984,6 +2226,7 @@ "hex": "#881337", "rgb": "rgb(136,19,55)", "hsl": "hsl(341.5,75.5%,30.4%)", + "oklch": "oklch(0.41,0.15,10)", "rgbChannel": "136 19 55", "hslChannel": "341.5 75.5% 30.4%" }, @@ -1992,6 +2235,7 @@ "hex": "#4c0519", "rgb": "rgb(76,5,25)", "hsl": "hsl(343.1,87.7%,15.9%)", + "oklch": "oklch(0.27,0.10,12)", "rgbChannel": "76 5 25", "hslChannel": "343.1 87.7% 15.9%" } diff --git a/apps/www/public/r/styles/default/sidebar-16.json b/apps/www/public/r/styles/default/sidebar-16.json new file mode 100644 index 00000000000..7701176079b --- /dev/null +++ b/apps/www/public/r/styles/default/sidebar-16.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "sidebar-16", + "type": "registry:block", + "author": "shadcn (https://ui.shadcn.com)", + "description": "A sidebar with a sticky site header.", + "registryDependencies": [ + "sidebar", + "breadcrumb", + "separator", + "collapsible", + "dropdown-menu", + "avatar", + "button" + ], + "files": [ + { + "path": "blocks/sidebar-16/page.tsx", + "content": "import { AppSidebar } from \"@/registry/default/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/default/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n return (\n
\n \n \n
\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n \n
\n )\n}\n", + "type": "registry:page", + "target": "app/dashboard/page.tsx" + }, + { + "path": "blocks/sidebar-16/components/app-sidebar.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n BookOpen,\n Bot,\n Command,\n Frame,\n LifeBuoy,\n Map,\n PieChart,\n Send,\n Settings2,\n SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-16/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: \"History\",\n url: \"#\",\n },\n {\n title: \"Starred\",\n url: \"#\",\n },\n {\n title: \"Settings\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Models\",\n url: \"#\",\n icon: Bot,\n items: [\n {\n title: \"Genesis\",\n url: \"#\",\n },\n {\n title: \"Explorer\",\n url: \"#\",\n },\n {\n title: \"Quantum\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Documentation\",\n url: \"#\",\n icon: BookOpen,\n items: [\n {\n title: \"Introduction\",\n url: \"#\",\n },\n {\n title: \"Get Started\",\n url: \"#\",\n },\n {\n title: \"Tutorials\",\n url: \"#\",\n },\n {\n title: \"Changelog\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n items: [\n {\n title: \"General\",\n url: \"#\",\n },\n {\n title: \"Team\",\n url: \"#\",\n },\n {\n title: \"Billing\",\n url: \"#\",\n },\n {\n title: \"Limits\",\n url: \"#\",\n },\n ],\n },\n ],\n navSecondary: [\n {\n title: \"Support\",\n url: \"#\",\n icon: LifeBuoy,\n },\n {\n title: \"Feedback\",\n url: \"#\",\n icon: Send,\n },\n ],\n projects: [\n {\n name: \"Design Engineering\",\n url: \"#\",\n icon: Frame,\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: PieChart,\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: Map,\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n
\n \n
\n
\n Acme Inc\n Enterprise\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-main.tsx", + "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n return (\n \n Platform\n \n {items.map((item) => (\n \n \n \n \n \n {item.title}\n \n \n {item.items?.length ? (\n <>\n \n \n \n Toggle\n \n \n \n \n {item.items?.map((subItem) => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n ) : null}\n \n \n ))}\n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-projects.tsx", + "content": "\"use client\"\n\nimport {\n Folder,\n MoreHorizontal,\n Share,\n Trash2,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n projects,\n}: {\n projects: {\n name: string\n url: string\n icon: LucideIcon\n }[]\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n Projects\n \n {projects.map((item) => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-secondary.tsx", + "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n }[]\n} & React.ComponentPropsWithoutRef) {\n return (\n \n \n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-user.tsx", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/search-form.tsx", + "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { SidebarInput } from \"@/registry/default/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n return (\n
\n
\n \n \n \n
\n
\n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/site-header.tsx", + "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/default/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport { useSidebar } from \"@/registry/default/ui/sidebar\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "type": "registry:component", + "target": "" + } + ], + "categories": [ + "sidebar", + "dashboard" + ] +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/v0-sidebar-16.json b/apps/www/public/r/styles/default/v0-sidebar-16.json new file mode 100644 index 00000000000..649658c0552 --- /dev/null +++ b/apps/www/public/r/styles/default/v0-sidebar-16.json @@ -0,0 +1,23 @@ +{ + "name": "v0-sidebar-16", + "type": "registry:block", + "description": "An inset sidebar with site header navigation.", + "registryDependencies": [ + "sidebar", + "breadcrumb", + "separator", + "collapsible", + "dropdown-menu", + "avatar", + "navigation-menu", + "button" + ], + "files": [ + { + "path": "v0/sidebar-16.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n BadgeCheck,\n Bell,\n BookOpen,\n Bot,\n ChevronRight,\n ChevronsUpDown,\n Command,\n CreditCard,\n Folder,\n Frame,\n LifeBuoy,\n LogOut,\n Map,\n MoreHorizontal,\n PieChart,\n Send,\n Settings2,\n Share,\n Sparkles,\n SquareTerminal,\n Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarTrigger,\n useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\n\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: \"History\",\n url: \"#\",\n },\n {\n title: \"Starred\",\n url: \"#\",\n },\n {\n title: \"Settings\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Models\",\n url: \"#\",\n icon: Bot,\n items: [\n {\n title: \"Genesis\",\n url: \"#\",\n },\n {\n title: \"Explorer\",\n url: \"#\",\n },\n {\n title: \"Quantum\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Documentation\",\n url: \"#\",\n icon: BookOpen,\n items: [\n {\n title: \"Introduction\",\n url: \"#\",\n },\n {\n title: \"Get Started\",\n url: \"#\",\n },\n {\n title: \"Tutorials\",\n url: \"#\",\n },\n {\n title: \"Changelog\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n items: [\n {\n title: \"General\",\n url: \"#\",\n },\n {\n title: \"Team\",\n url: \"#\",\n },\n {\n title: \"Billing\",\n url: \"#\",\n },\n {\n title: \"Limits\",\n url: \"#\",\n },\n ],\n },\n ],\n navSecondary: [\n {\n title: \"Support\",\n url: \"#\",\n icon: LifeBuoy,\n },\n {\n title: \"Feedback\",\n url: \"#\",\n icon: Send,\n },\n ],\n projects: [\n {\n name: \"Design Engineering\",\n url: \"#\",\n icon: Frame,\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: PieChart,\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: Map,\n },\n ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n {\n title: \"Alert Dialog\",\n href: \"/docs/primitives/alert-dialog\",\n description:\n \"A modal dialog that interrupts the user with important content and expects a response.\",\n },\n {\n title: \"Hover Card\",\n href: \"/docs/primitives/hover-card\",\n description:\n \"For sighted users to preview content available behind a link.\",\n },\n {\n title: \"Progress\",\n href: \"/docs/primitives/progress\",\n description:\n \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n },\n {\n title: \"Scroll-area\",\n href: \"/docs/primitives/scroll-area\",\n description: \"Visually or semantically separates content.\",\n },\n {\n title: \"Tabs\",\n href: \"/docs/primitives/tabs\",\n description:\n \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n },\n {\n title: \"Tooltip\",\n href: \"/docs/primitives/tooltip\",\n description:\n \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n },\n]\n\nexport default function Page() {\n const [open, setOpen] = React.useState(true)\n const { isMobile } = useSidebar()\n\n return (\n \n
\n
\n setOpen(!open)}\n >\n \n \n\n
\n
\n \n
\n \n \n \n \n \n Getting started\n \n \n \n \n \n \n \n Components\n \n \n \n \n \n \n \n \n Documentation\n \n \n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n
\n \n
\n
\n Acme Inc\n Enterprise\n
\n \n \n \n \n \n \n \n Platform\n \n {data.navMain.map((item) => (\n \n \n \n \n \n {item.title}\n \n \n {item.items?.length ? (\n <>\n \n \n \n Toggle\n \n \n \n \n {item.items?.map((subItem) => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n ) : null}\n \n \n ))}\n \n \n \n Projects\n \n {data.projects.map((item) => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n \n \n \n {data.navSecondary.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n CN\n \n \n
\n \n {data.user.name}\n \n \n {data.user.email}\n \n
\n \n \n \n \n \n
\n \n \n \n CN\n \n \n
\n \n {data.user.name}\n \n \n {data.user.email}\n \n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n \n \n\n \n
\n
\n
\n \n \n
\n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n
\n )\n}\n", + "type": "registry:block", + "target": "components/sidebar-16.tsx" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/styles/new-york/sidebar-16.json b/apps/www/public/r/styles/new-york/sidebar-16.json new file mode 100644 index 00000000000..960892745e1 --- /dev/null +++ b/apps/www/public/r/styles/new-york/sidebar-16.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "sidebar-16", + "type": "registry:block", + "author": "shadcn (https://ui.shadcn.com)", + "description": "A sidebar with a sticky site header.", + "registryDependencies": [ + "sidebar", + "breadcrumb", + "separator", + "collapsible", + "dropdown-menu", + "avatar", + "button" + ], + "files": [ + { + "path": "blocks/sidebar-16/page.tsx", + "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/new-york/ui/sidebar\"\n\nexport default function Page() {\n return (\n
\n \n \n
\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n \n
\n )\n}\n", + "type": "registry:page", + "target": "app/dashboard/page.tsx" + }, + { + "path": "blocks/sidebar-16/components/app-sidebar.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n BookOpen,\n Bot,\n Command,\n Frame,\n LifeBuoy,\n Map,\n PieChart,\n Send,\n Settings2,\n SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-16/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: \"History\",\n url: \"#\",\n },\n {\n title: \"Starred\",\n url: \"#\",\n },\n {\n title: \"Settings\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Models\",\n url: \"#\",\n icon: Bot,\n items: [\n {\n title: \"Genesis\",\n url: \"#\",\n },\n {\n title: \"Explorer\",\n url: \"#\",\n },\n {\n title: \"Quantum\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Documentation\",\n url: \"#\",\n icon: BookOpen,\n items: [\n {\n title: \"Introduction\",\n url: \"#\",\n },\n {\n title: \"Get Started\",\n url: \"#\",\n },\n {\n title: \"Tutorials\",\n url: \"#\",\n },\n {\n title: \"Changelog\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n items: [\n {\n title: \"General\",\n url: \"#\",\n },\n {\n title: \"Team\",\n url: \"#\",\n },\n {\n title: \"Billing\",\n url: \"#\",\n },\n {\n title: \"Limits\",\n url: \"#\",\n },\n ],\n },\n ],\n navSecondary: [\n {\n title: \"Support\",\n url: \"#\",\n icon: LifeBuoy,\n },\n {\n title: \"Feedback\",\n url: \"#\",\n icon: Send,\n },\n ],\n projects: [\n {\n name: \"Design Engineering\",\n url: \"#\",\n icon: Frame,\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: PieChart,\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: Map,\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n
\n \n
\n
\n Acme Inc\n Enterprise\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-main.tsx", + "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n return (\n \n Platform\n \n {items.map((item) => (\n \n \n \n \n \n {item.title}\n \n \n {item.items?.length ? (\n <>\n \n \n \n Toggle\n \n \n \n \n {item.items?.map((subItem) => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n ) : null}\n \n \n ))}\n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-projects.tsx", + "content": "\"use client\"\n\nimport {\n Folder,\n MoreHorizontal,\n Share,\n Trash2,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n projects,\n}: {\n projects: {\n name: string\n url: string\n icon: LucideIcon\n }[]\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n Projects\n \n {projects.map((item) => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-secondary.tsx", + "content": "import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n }[]\n} & React.ComponentPropsWithoutRef) {\n return (\n \n \n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/nav-user.tsx", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/search-form.tsx", + "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport { SidebarInput } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n return (\n
\n
\n \n \n \n
\n
\n )\n}\n", + "type": "registry:component", + "target": "" + }, + { + "path": "blocks/sidebar-16/components/site-header.tsx", + "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york/ui/sidebar\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "type": "registry:component", + "target": "" + } + ], + "categories": [ + "sidebar", + "dashboard" + ] +} \ No newline at end of file diff --git a/apps/www/public/r/styles/new-york/sidebar.json b/apps/www/public/r/styles/new-york/sidebar.json index 7bc8689611d..026f058bd6c 100644 --- a/apps/www/public/r/styles/new-york/sidebar.json +++ b/apps/www/public/r/styles/new-york/sidebar.json @@ -20,7 +20,7 @@ "files": [ { "path": "ui/sidebar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { Sheet, SheetContent } from \"@/registry/new-york/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContext = {\n state: \"expanded\" | \"collapsed\"\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n\n return context\n}\n\nconst SidebarProvider = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n }\n>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open]\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile\n ? setOpenMobile((open) => !open)\n : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n )\n\n return (\n \n \n \n {children}\n
\n \n \n )\n }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n variant?: \"sidebar\" | \"floating\" | \"inset\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n }\n>(\n (\n {\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n },\n ref\n ) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n
\n )\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n
{children}
\n \n \n )\n }\n\n return (\n
\n
\n
\n )\n }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentProps\n>(({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n \n Toggle Sidebar\n \n )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n \n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ ...props }, ref) =>
  • )\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<\"a\"> & {\n asChild?: boolean\n size?: \"sm\" | \"md\"\n isActive?: boolean\n }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n const Comp = asChild ? Slot : \"a\"\n\n return (\n span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n size === \"sm\" && \"text-xs\",\n size === \"md\" && \"text-sm\",\n \"group-data-[collapsible=icon]:hidden\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { Sheet, SheetContent } from \"@/registry/new-york/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContext = {\n state: \"expanded\" | \"collapsed\"\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n\n return context\n}\n\nconst SidebarProvider = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n }\n>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open]\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile\n ? setOpenMobile((open) => !open)\n : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n )\n\n return (\n \n \n \n {children}\n
    • \n \n \n )\n }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n variant?: \"sidebar\" | \"floating\" | \"inset\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n }\n>(\n (\n {\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n },\n ref\n ) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n
    \n )\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n
    {children}
    \n \n     \n )\n }\n\n return (\n
    \n
    \n
    \n )\n }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentProps\n>(({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n \n Toggle Sidebar\n \n )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n
    \n )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n \n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ ...props }, ref) =>
  • )\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<\"a\"> & {\n asChild?: boolean\n size?: \"sm\" | \"md\"\n isActive?: boolean\n }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n const Comp = asChild ? Slot : \"a\"\n\n return (\n span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n size === \"sm\" && \"text-xs\",\n size === \"md\" && \"text-sm\",\n \"group-data-[collapsible=icon]:hidden\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-16.json b/apps/www/public/r/styles/new-york/v0-sidebar-16.json new file mode 100644 index 00000000000..649658c0552 --- /dev/null +++ b/apps/www/public/r/styles/new-york/v0-sidebar-16.json @@ -0,0 +1,23 @@ +{ + "name": "v0-sidebar-16", + "type": "registry:block", + "description": "An inset sidebar with site header navigation.", + "registryDependencies": [ + "sidebar", + "breadcrumb", + "separator", + "collapsible", + "dropdown-menu", + "avatar", + "navigation-menu", + "button" + ], + "files": [ + { + "path": "v0/sidebar-16.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n BadgeCheck,\n Bell,\n BookOpen,\n Bot,\n ChevronRight,\n ChevronsUpDown,\n Command,\n CreditCard,\n Folder,\n Frame,\n LifeBuoy,\n LogOut,\n Map,\n MoreHorizontal,\n PieChart,\n Send,\n Settings2,\n Share,\n Sparkles,\n SquareTerminal,\n Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarTrigger,\n useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\n\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: \"History\",\n url: \"#\",\n },\n {\n title: \"Starred\",\n url: \"#\",\n },\n {\n title: \"Settings\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Models\",\n url: \"#\",\n icon: Bot,\n items: [\n {\n title: \"Genesis\",\n url: \"#\",\n },\n {\n title: \"Explorer\",\n url: \"#\",\n },\n {\n title: \"Quantum\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Documentation\",\n url: \"#\",\n icon: BookOpen,\n items: [\n {\n title: \"Introduction\",\n url: \"#\",\n },\n {\n title: \"Get Started\",\n url: \"#\",\n },\n {\n title: \"Tutorials\",\n url: \"#\",\n },\n {\n title: \"Changelog\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n items: [\n {\n title: \"General\",\n url: \"#\",\n },\n {\n title: \"Team\",\n url: \"#\",\n },\n {\n title: \"Billing\",\n url: \"#\",\n },\n {\n title: \"Limits\",\n url: \"#\",\n },\n ],\n },\n ],\n navSecondary: [\n {\n title: \"Support\",\n url: \"#\",\n icon: LifeBuoy,\n },\n {\n title: \"Feedback\",\n url: \"#\",\n icon: Send,\n },\n ],\n projects: [\n {\n name: \"Design Engineering\",\n url: \"#\",\n icon: Frame,\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: PieChart,\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: Map,\n },\n ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n {\n title: \"Alert Dialog\",\n href: \"/docs/primitives/alert-dialog\",\n description:\n \"A modal dialog that interrupts the user with important content and expects a response.\",\n },\n {\n title: \"Hover Card\",\n href: \"/docs/primitives/hover-card\",\n description:\n \"For sighted users to preview content available behind a link.\",\n },\n {\n title: \"Progress\",\n href: \"/docs/primitives/progress\",\n description:\n \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n },\n {\n title: \"Scroll-area\",\n href: \"/docs/primitives/scroll-area\",\n description: \"Visually or semantically separates content.\",\n },\n {\n title: \"Tabs\",\n href: \"/docs/primitives/tabs\",\n description:\n \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n },\n {\n title: \"Tooltip\",\n href: \"/docs/primitives/tooltip\",\n description:\n \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n },\n]\n\nexport default function Page() {\n const [open, setOpen] = React.useState(true)\n const { isMobile } = useSidebar()\n\n return (\n \n
    \n
    \n setOpen(!open)}\n >\n \n \n\n
    \n
    \n \n
    \n \n \n \n \n \n Getting started\n \n \n \n \n \n \n \n Components\n \n \n \n \n \n \n \n \n Documentation\n \n \n \n \n \n
    \n
    \n
    \n \n \n \n \n \n \n \n
    \n \n
    \n
    \n Acme Inc\n Enterprise\n
    \n     \n     \n     \n     \n     \n \n \n Platform\n \n {data.navMain.map((item) => (\n \n \n \n \n \n {item.title}\n \n \n {item.items?.length ? (\n <>\n \n \n \n Toggle\n \n \n \n \n {item.items?.map((subItem) => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n ) : null}\n \n \n ))}\n \n \n \n Projects\n \n {data.projects.map((item) => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n \n \n \n {data.navSecondary.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n CN\n \n \n
    \n \n {data.user.name}\n \n \n {data.user.email}\n \n
    \n \n \n     \n \n \n
    \n \n \n \n CN\n \n \n
    \n \n {data.user.name}\n \n \n {data.user.email}\n \n
    \n
    \n     \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n     \n     \n     \n     \n \n\n \n
    \n
    \n
    \n \n \n
    \n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n
    \n )\n}\n", + "type": "registry:block", + "target": "components/sidebar-16.tsx" + } + ] +} \ No newline at end of file diff --git a/apps/www/registry/default/blocks/sidebar-16/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-16/components/app-sidebar.tsx new file mode 100644 index 00000000000..4214ec36f99 --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/app-sidebar.tsx @@ -0,0 +1,188 @@ +"use client" + +import * as React from "react" +import { + BookOpen, + Bot, + Command, + Frame, + LifeBuoy, + Map, + PieChart, + Send, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/registry/default/blocks/sidebar-16/components/nav-main" +import { NavProjects } from "@/registry/default/blocks/sidebar-16/components/nav-projects" +import { NavSecondary } from "@/registry/default/blocks/sidebar-16/components/nav-secondary" +import { NavUser } from "@/registry/default/blocks/sidebar-16/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
    + +
    +
    + Acme Inc + Enterprise +
    +     +     +     +     +     + + + + + + + + +     + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-main.tsx new file mode 100644 index 00000000000..10b836a2e3d --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-projects.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-projects.tsx new file mode 100644 index 00000000000..85caea25e0b --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + MoreHorizontal, + Share, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-secondary.tsx new file mode 100644 index 00000000000..f15ddb7bb94 --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-secondary.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-16/components/nav-user.tsx new file mode 100644 index 00000000000..e22c32af62e --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
    + {user.name} + {user.email} +
    + +     +     + + +
    + + + CN + +
    + {user.name} + {user.email} +
    +
    +     + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + +     +     +     +     + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-16/components/search-form.tsx new file mode 100644 index 00000000000..6f62031253d --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/search-form.tsx @@ -0,0 +1,22 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/default/ui/label" +import { SidebarInput } from "@/registry/default/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
    +
    + + + +
    +
    + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/components/site-header.tsx b/apps/www/registry/default/blocks/sidebar-16/components/site-header.tsx new file mode 100644 index 00000000000..b203091d252 --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/components/site-header.tsx @@ -0,0 +1,50 @@ +"use client" + +import { SidebarIcon } from "lucide-react" + +import { SearchForm } from "@/registry/default/blocks/sidebar-16/components/search-form" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { Separator } from "@/registry/default/ui/separator" +import { useSidebar } from "@/registry/default/ui/sidebar" + +export function SiteHeader() { + const { toggleSidebar } = useSidebar() + + return ( +
    +
    + + + + + + + Building Your Application + + + + + Data Fetching + + + + +
    +
    + ) +} diff --git a/apps/www/registry/default/blocks/sidebar-16/page.tsx b/apps/www/registry/default/blocks/sidebar-16/page.tsx new file mode 100644 index 00000000000..01313fb14e9 --- /dev/null +++ b/apps/www/registry/default/blocks/sidebar-16/page.tsx @@ -0,0 +1,30 @@ +import { AppSidebar } from "@/registry/default/blocks/sidebar-16/components/app-sidebar" +import { SiteHeader } from "@/registry/default/blocks/sidebar-16/components/site-header" +import { SidebarInset, SidebarProvider } from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "A sidebar with a header and a search form." + +export default function Page() { + return ( +
    + + +
    + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + ) +} diff --git a/apps/www/registry/default/v0/sidebar-16.tsx b/apps/www/registry/default/v0/sidebar-16.tsx new file mode 100644 index 00000000000..8cebc340960 --- /dev/null +++ b/apps/www/registry/default/v0/sidebar-16.tsx @@ -0,0 +1,648 @@ +"use client" + +import * as React from "react" +import Link from "next/link" +import { + BadgeCheck, + Bell, + BookOpen, + Bot, + ChevronRight, + ChevronsUpDown, + Command, + CreditCard, + Folder, + Frame, + LifeBuoy, + LogOut, + Map, + MoreHorizontal, + PieChart, + Send, + Settings2, + Share, + Sparkles, + SquareTerminal, + Trash2, +} from "lucide-react" + +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/registry/default/ui/navigation-menu" +import { Separator } from "@/registry/default/ui/separator" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, + SidebarTrigger, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "An inset sidebar with site header navigation." + +const HEADER_HEIGHT = "4rem" + +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +const components: { title: string; href: string; description: string }[] = [ + { + title: "Alert Dialog", + href: "/docs/primitives/alert-dialog", + description: + "A modal dialog that interrupts the user with important content and expects a response.", + }, + { + title: "Hover Card", + href: "/docs/primitives/hover-card", + description: + "For sighted users to preview content available behind a link.", + }, + { + title: "Progress", + href: "/docs/primitives/progress", + description: + "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + }, + { + title: "Scroll-area", + href: "/docs/primitives/scroll-area", + description: "Visually or semantically separates content.", + }, + { + title: "Tabs", + href: "/docs/primitives/tabs", + description: + "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + }, + { + title: "Tooltip", + href: "/docs/primitives/tooltip", + description: + "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + }, +] + +export default function Page() { + const [open, setOpen] = React.useState(true) + const { isMobile } = useSidebar() + + return ( +
    +
    + +
    + + + + + + + +
    + +
    +
    + Acme Inc + Enterprise +
    +     +     +     +     +     + + + Platform + + {data.navMain.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + + Projects + + {data.projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + + + + {data.navSecondary.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + + + + + + + + + CN + + +
    + + {data.user.name} + + + {data.user.email} + +
    + +     +     + + +
    + + + + CN + + +
    + + {data.user.name} + + + {data.user.email} + +
    +
    +     + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + +     +     +     +     +     +     + + +
    +
    +
    + + +
    + + + + + Building Your Application + + + + + Data Fetching + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx new file mode 100644 index 00000000000..c3b122038d1 --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/app-sidebar.tsx @@ -0,0 +1,188 @@ +"use client" + +import * as React from "react" +import { + BookOpen, + Bot, + Command, + Frame, + LifeBuoy, + Map, + PieChart, + Send, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/registry/new-york/blocks/sidebar-16/components/nav-main" +import { NavProjects } from "@/registry/new-york/blocks/sidebar-16/components/nav-projects" +import { NavSecondary } from "@/registry/new-york/blocks/sidebar-16/components/nav-secondary" +import { NavUser } from "@/registry/new-york/blocks/sidebar-16/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
    + +
    +
    + Acme Inc + Enterprise +
    +     +     +     +     +     + + + + + + + + +     + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-main.tsx new file mode 100644 index 00000000000..34737f61628 --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-projects.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-projects.tsx new file mode 100644 index 00000000000..3cd543cbbf0 --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + MoreHorizontal, + Share, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx new file mode 100644 index 00000000000..a7d5a4f405a --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-secondary.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-user.tsx new file mode 100644 index 00000000000..a12cf07ff8f --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
    + {user.name} + {user.email} +
    + +     +     + + +
    + + + CN + +
    + {user.name} + {user.email} +
    +
    +     + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + +     +     +     +     + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/search-form.tsx new file mode 100644 index 00000000000..aedcc6434ae --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/search-form.tsx @@ -0,0 +1,22 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/new-york/ui/label" +import { SidebarInput } from "@/registry/new-york/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
    +
    + + + +
    +
    + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/components/site-header.tsx b/apps/www/registry/new-york/blocks/sidebar-16/components/site-header.tsx new file mode 100644 index 00000000000..2efca436cc7 --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/components/site-header.tsx @@ -0,0 +1,50 @@ +"use client" + +import { SidebarIcon } from "lucide-react" + +import { SearchForm } from "@/registry/new-york/blocks/sidebar-16/components/search-form" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Button } from "@/registry/new-york/ui/button" +import { Separator } from "@/registry/new-york/ui/separator" +import { useSidebar } from "@/registry/new-york/ui/sidebar" + +export function SiteHeader() { + const { toggleSidebar } = useSidebar() + + return ( +
    +
    + + + + + + + Building Your Application + + + + + Data Fetching + + + + +
    +
    + ) +} diff --git a/apps/www/registry/new-york/blocks/sidebar-16/page.tsx b/apps/www/registry/new-york/blocks/sidebar-16/page.tsx new file mode 100644 index 00000000000..85d4f3b69b5 --- /dev/null +++ b/apps/www/registry/new-york/blocks/sidebar-16/page.tsx @@ -0,0 +1,30 @@ +import { AppSidebar } from "@/registry/new-york/blocks/sidebar-16/components/app-sidebar" +import { SiteHeader } from "@/registry/new-york/blocks/sidebar-16/components/site-header" +import { SidebarInset, SidebarProvider } from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "A sidebar with a header and a search form." + +export default function Page() { + return ( +
    + + +
    + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + ) +} diff --git a/apps/www/registry/new-york/internal/sidebar-16.tsx b/apps/www/registry/new-york/internal/sidebar-16.tsx new file mode 100644 index 00000000000..e8e312e879f --- /dev/null +++ b/apps/www/registry/new-york/internal/sidebar-16.tsx @@ -0,0 +1,648 @@ +"use client" + +import * as React from "react" +import Link from "next/link" +import { + BadgeCheck, + Bell, + BookOpen, + Bot, + ChevronRight, + ChevronsUpDown, + Command, + CreditCard, + Folder, + Frame, + LifeBuoy, + LogOut, + Map, + MoreHorizontal, + PieChart, + Send, + Settings2, + Share, + Sparkles, + SquareTerminal, + Trash2, +} from "lucide-react" + +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Button } from "@/registry/new-york/ui/button" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/registry/new-york/ui/navigation-menu" +import { Separator } from "@/registry/new-york/ui/separator" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, + SidebarTrigger, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const description = "An inset sidebar with site header navigation." + +const HEADER_HEIGHT = "4rem" + +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +const components: { title: string; href: string; description: string }[] = [ + { + title: "Alert Dialog", + href: "/docs/primitives/alert-dialog", + description: + "A modal dialog that interrupts the user with important content and expects a response.", + }, + { + title: "Hover Card", + href: "/docs/primitives/hover-card", + description: + "For sighted users to preview content available behind a link.", + }, + { + title: "Progress", + href: "/docs/primitives/progress", + description: + "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + }, + { + title: "Scroll-area", + href: "/docs/primitives/scroll-area", + description: "Visually or semantically separates content.", + }, + { + title: "Tabs", + href: "/docs/primitives/tabs", + description: + "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + }, + { + title: "Tooltip", + href: "/docs/primitives/tooltip", + description: + "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + }, +] + +export default function Page() { + const [open, setOpen] = React.useState(true) + const { isMobile } = useSidebar() + + return ( +
    +
    + +
    + + + + + + + +
    + +
    +
    + Acme Inc + Enterprise +
    +     +     +     +     +     + + + Platform + + {data.navMain.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + + Projects + + {data.projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + + + + {data.navSecondary.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + + + + + + + + + CN + + +
    + + {data.user.name} + + + {data.user.email} + +
    + +     +     + + +
    + + + + CN + + +
    + + {data.user.name} + + + {data.user.email} + +
    +
    +     + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + +     +     +     +     +     +     + + +
    +
    +
    + + +
    + + + + + Building Your Application + + + + + Data Fetching + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + ) +} diff --git a/apps/www/registry/new-york/ui/sidebar.tsx b/apps/www/registry/new-york/ui/sidebar.tsx index 77e91958edd..7d44ea7d209 100644 --- a/apps/www/registry/new-york/ui/sidebar.tsx +++ b/apps/www/registry/new-york/ui/sidebar.tsx @@ -215,7 +215,7 @@ const Sidebar = React.forwardRef< return (