diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 000000000..44e35cc41 --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,12 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "preskok-docs", + "runtimeExecutable": "pnpm", + "runtimeArgs": ["--dir", "apps/preskok", "exec", "next", "dev", "--turbopack"], + "port": 4001, + "autoPort": true + } + ] +} diff --git a/apps/preskok/CLAUDE.md b/apps/preskok/CLAUDE.md new file mode 100644 index 000000000..43c994c2d --- /dev/null +++ b/apps/preskok/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/apps/preskok/components/component-preview-tabs.tsx b/apps/preskok/components/component-preview-tabs.tsx index 03c8aa1eb..066626c2b 100644 --- a/apps/preskok/components/component-preview-tabs.tsx +++ b/apps/preskok/components/component-preview-tabs.tsx @@ -6,7 +6,7 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs" import { cn } from "@/lib/utils" const previewClassName = - "preview flex min-h-56 max-h-[min(520px,80vh)] w-full overflow-auto overscroll-contain scroll-p-6 p-6 sm:scroll-p-8 sm:px-8 sm:py-8" + "preview not-prose flex min-h-56 max-h-[min(520px,80vh)] w-full overflow-auto overscroll-contain scroll-p-6 p-6 sm:scroll-p-8 sm:px-8 sm:py-8" const previewContentClassName = "flex max-w-full min-w-0 justify-center data-[align=center]:my-auto data-[align=end]:mt-auto data-[align=start]:mb-auto [&>.flex-wrap]:justify-center" diff --git a/apps/preskok/public/r/badge.json b/apps/preskok/public/r/badge.json index 8d103f859..404187816 100644 --- a/apps/preskok/public/r/badge.json +++ b/apps/preskok/public/r/badge.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/badge.tsx", - "content": "\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport React from \"react\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nconst badgeIntents = {\n primary: [\n \"[--badge-primary:color-mix(in_oklab,var(--color-primary)_10%,white_90%)] [--badge-primary-foreground:color-mix(in_oklab,var(--color-primary)_60%,white_40%)] bg-(--badge-primary)\",\n \"dark:bg-primary/15 text-primary dark:text-(--badge-primary-foreground) dark:group-hover:bg-primary/25\",\n \"group-hover:bg-[color-mix(in_oklab,var(--color-primary)_15%,white_85%)] dark:group-hover:bg-primary/20\",\n ],\n secondary: [\n \"bg-secondary group-hover:bg-muted dark:bg-secondary dark:group-hover:bg-muted text-secondary-foreground\",\n ],\n success: [\n \"bg-emerald-500/15 text-emerald-700 group-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20\",\n ],\n info: \"bg-sky-500/15 text-sky-700 group-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-hover:bg-sky-500/20\",\n warning:\n \"bg-amber-400/20 text-amber-700 group-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-hover:bg-amber-400/15\",\n danger:\n \"bg-red-500/15 text-red-700 group-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-hover:bg-red-500/20\",\n outline:\n \"inset-ring-border bg-transparent text-foreground group-hover:bg-secondary\",\n}\nconst badgeStyles = tv({\n base: \"inset-ring inset-ring-transparent inline-flex items-center gap-x-1.5 py-0.5 font-medium text-xs/5 **:data-[slot=icon]:size-3 forced-colors:outline\",\n variants: {\n intent: { ...badgeIntents },\n isCircle: {\n true: \"rounded-full px-2\",\n false: \"rounded-sm px-1.5\",\n },\n },\n defaultVariants: {\n intent: \"primary\",\n isCircle: true,\n },\n})\n\ninterface BadgeProps\n extends ComponentProps<\"span\">, VariantProps {\n className?: string\n children: React.ReactNode\n}\n\nconst Badge = ({\n children,\n intent,\n isCircle = true,\n className,\n ...props\n}: BadgeProps) => {\n return (\n \n {children}\n \n )\n}\nexport { Badge, badgeIntents, badgeStyles }\nexport type { BadgeProps }\n", + "content": "\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport React from \"react\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nconst badgeIntents = {\n primary: [\n \"[--badge-primary:color-mix(in_oklab,var(--color-primary)_10%,white_90%)] [--badge-primary-foreground:color-mix(in_oklab,var(--color-primary)_60%,white_40%)] bg-(--badge-primary)\",\n \"dark:bg-primary/15 text-primary dark:text-(--badge-primary-foreground) dark:group-hover:bg-primary/25\",\n \"group-hover:bg-[color-mix(in_oklab,var(--color-primary)_15%,white_85%)] dark:group-hover:bg-primary/20\",\n ],\n secondary: [\n \"bg-secondary group-hover:bg-border text-secondary-foreground\",\n ],\n success: [\n \"bg-emerald-500/15 text-emerald-700 group-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20\",\n ],\n info: \"bg-sky-500/15 text-sky-700 group-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-hover:bg-sky-500/20\",\n warning:\n \"bg-amber-400/20 text-amber-700 group-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-hover:bg-amber-400/15\",\n danger:\n \"bg-red-500/15 text-red-700 group-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-hover:bg-red-500/20\",\n outline:\n \"inset-ring-border bg-transparent text-foreground group-hover:bg-secondary\",\n}\nconst badgeStyles = tv({\n base: \"inset-ring inset-ring-transparent inline-flex items-center gap-x-1.5 py-0.5 font-medium text-xs/5 **:data-[slot=icon]:size-3 forced-colors:outline\",\n variants: {\n intent: { ...badgeIntents },\n isCircle: {\n true: \"rounded-full px-2\",\n false: \"rounded-sm px-1.5\",\n },\n },\n defaultVariants: {\n intent: \"primary\",\n isCircle: true,\n },\n})\n\ninterface BadgeProps\n extends ComponentProps<\"span\">, VariantProps {\n className?: string\n children: React.ReactNode\n}\n\nconst Badge = ({\n children,\n intent,\n isCircle = true,\n className,\n ...props\n}: BadgeProps) => {\n return (\n \n {children}\n \n )\n}\nexport { Badge, badgeIntents, badgeStyles }\nexport type { BadgeProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/button.json b/apps/preskok/public/r/button.json index d166a0bbf..84041c5ca 100644 --- a/apps/preskok/public/r/button.json +++ b/apps/preskok/public/r/button.json @@ -12,7 +12,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/button.tsx", - "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n Button as ButtonPrimitive,\n type ButtonProps as ButtonPrimitiveProps,\n} from \"react-aria-components/Button\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nimport { Loader } from \"@/components/ui/preskok-ui/loader\"\n\nconst buttonStyles = tv({\n base: [\n \"[--btn-border:var(--color-foreground)]/15 [--btn-icon-active:var(--btn-foreground)] [--btn-outline:var(--btn-background)] [--btn-ring:var(--btn-background)]/20\",\n \"bg-(--btn-background) pressed:bg-(--btn-overlay) text-(--btn-foreground) outline-(--btn-outline) ring-(--btn-ring) hover:bg-(--btn-overlay) focus-visible:bg-(--btn-overlay)\",\n \"relative border border-(--btn-border) isolate inline-flex items-center justify-center font-medium\",\n \"focus:outline-0 focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-background transition-transform duration-150\",\n \"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) pressed:*:data-[slot=icon]:text-(--btn-icon-active) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:my-1 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]\",\n \"[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:my-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center [&_svg.lucide]:text-(--btn-icon) pressed:[&_svg.lucide]:text-(--btn-icon-active) focus-visible:[&_svg.lucide]:text-(--btn-icon-active)/80 hover:[&_svg.lucide]:text-(--btn-icon-active)/90 sm:[&_svg.lucide]:my-1\",\n \"*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:my-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:my-1\",\n \"[&_svg:not([class*='size-'])]:size-4\",\n \"[&_svg]:shrink-0\",\n ],\n variants: {\n intent: {\n primary:\n \"[--btn-background:var(--color-primary)] [--btn-foreground:var(--color-primary-foreground)] [--btn-icon:color-mix(in_oklab,var(--primary-foreground)_60%,var(--primary))] [--btn-overlay:var(--color-primary)]/85\",\n secondary:\n \"[--btn-background:var(--color-secondary)] [--btn-foreground:var(--color-secondary-foreground)] [--btn-icon:var(--color-muted-foreground)] [--btn-outline:var(--color-secondary-foreground)] [--btn-overlay:var(--color-secondary)]/85 [--btn-ring:var(--color-muted-foreground)]/20\",\n warning:\n \"[--btn-background:var(--color-warning)] [--btn-foreground:var(--color-warning-foreground)] [--btn-icon:color-mix(in_oklab,var(--warning-foreground)_60%,var(--warning))] [--btn-overlay:var(--color-warning)]/85\",\n danger:\n \"[--btn-background:var(--color-destructive)] [--btn-foreground:var(--color-destructive-foreground)] [--btn-icon:color-mix(in_oklab,var(--destructive-foreground)_60%,var(--destructive))] [--btn-overlay:var(--color-destructive)]/85\",\n outline:\n \"border-border [--btn-background:transparent] [--btn-icon:var(--color-muted-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-muted)] [--btn-ring:var(--color-ring)]/20\",\n plain:\n \"border-transparent [--btn-background:transparent] [--btn-icon:var(--color-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-muted)] [--btn-ring:var(--color-ring)]/20\",\n },\n size: {\n xs: [\n \"gap-x-1 px-2.5 py-1.5 text-sm sm:px-2 sm:py-[--spacing(1.4)] sm:text-xs/4\",\n \"*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n \"[&_svg.lucide]:size-3.5 sm:[&_svg.lucide]:size-3\",\n \"*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n ],\n sm: [\n \"gap-x-1.5 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/5\",\n \"*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-4.5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n ],\n md: [\n \"gap-x-2 px-3.5 py-2 sm:px-3 sm:py-1.5 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n ],\n lg: [\n \"gap-x-2 px-4 py-2.5 sm:px-3.5 sm:py-2 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4.5\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n ],\n \"sq-xs\":\n \"size-8 *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3 sm:*:data-[slot=loader]:size-3\",\n \"sq-sm\":\n \"size-9 *:data-[slot=icon]:size-4.5 [&_svg.lucide]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-md\":\n \"size-10 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-lg\":\n \"size-11 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-4.5 sm:[&_svg.lucide]:size-4.5 sm:*:data-[slot=loader]:size-4.5\",\n },\n\n isCircle: {\n true: \"rounded-full\",\n false: \"rounded-lg\",\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n isPending: {\n true: \"opacity-50\",\n },\n isPressed: {\n true: \"not-aria-[haspopup]:translate-y-px\",\n },\n },\n defaultVariants: {\n intent: \"primary\",\n size: \"md\",\n isCircle: false,\n },\n compoundVariants: [\n {\n size: [\"xs\", \"sq-xs\"],\n className:\n \"rounded-md *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5\",\n },\n ],\n})\n\ninterface ButtonProps\n extends ButtonPrimitiveProps, VariantProps {\n ref?: React.Ref\n}\n\nconst Button = ({\n className,\n intent,\n size,\n isCircle,\n ref,\n ...props\n}: ButtonProps) => {\n return (\n \n buttonStyles({\n ...renderProps,\n intent,\n size,\n isCircle,\n className,\n })\n )}\n >\n {(values) => (\n <>\n {values.isPending && typeof props.children !== \"function\" && (\n \n )}\n {typeof props.children === \"function\"\n ? props.children(values)\n : props.children}\n \n )}\n \n )\n}\n\nexport { Button, buttonStyles }\nexport type { ButtonProps }\n", + "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n Button as ButtonPrimitive,\n type ButtonProps as ButtonPrimitiveProps,\n} from \"react-aria-components/Button\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nimport { Loader } from \"@/components/ui/preskok-ui/loader\"\n\nconst buttonStyles = tv({\n base: [\n \"[--btn-border:var(--color-foreground)]/15 [--btn-icon:var(--btn-foreground)] [--btn-outline:var(--btn-background)] [--btn-ring:var(--btn-background)]/20\",\n \"bg-(--btn-background) pressed:bg-(--btn-overlay) text-(--btn-foreground) outline-(--btn-outline) ring-(--btn-ring) hover:bg-(--btn-overlay) focus-visible:bg-(--btn-overlay)\",\n \"relative border border-(--btn-border) isolate inline-flex items-center justify-center font-medium\",\n \"focus:outline-0 focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-background transition-transform duration-150\",\n \"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1 forced-colors:[--btn-icon:ButtonText]\",\n \"[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:my-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center [&_svg.lucide]:text-(--btn-icon) sm:[&_svg.lucide]:my-1\",\n \"*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:my-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:my-1\",\n \"[&_svg:not([class*='size-'])]:size-4\",\n \"[&_svg]:shrink-0\",\n ],\n variants: {\n intent: {\n primary:\n \"[--btn-background:var(--color-primary)] [--btn-foreground:var(--color-primary-foreground)] [--btn-overlay:var(--color-primary)]/85\",\n secondary:\n \"[--btn-background:var(--color-secondary)] [--btn-foreground:var(--color-secondary-foreground)] [--btn-outline:var(--color-secondary-foreground)] [--btn-overlay:var(--color-secondary)]/85 [--btn-ring:var(--color-muted-foreground)]/20\",\n warning:\n \"[--btn-background:var(--color-warning)] [--btn-foreground:var(--color-warning-foreground)] [--btn-overlay:var(--color-warning)]/85\",\n danger:\n \"[--btn-background:var(--color-destructive)] [--btn-foreground:var(--color-destructive-foreground)] [--btn-overlay:var(--color-destructive)]/85\",\n outline:\n \"border-border [--btn-background:transparent] [--btn-foreground:var(--color-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-accent)] [--btn-ring:var(--color-ring)]/20\",\n plain:\n \"border-transparent [--btn-background:transparent] [--btn-foreground:var(--color-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-accent)] [--btn-ring:var(--color-ring)]/20\",\n },\n size: {\n xs: [\n \"gap-x-1 px-2.5 py-1.5 text-sm sm:px-2 sm:py-[--spacing(1.4)] sm:text-xs/4\",\n \"*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n \"[&_svg.lucide]:size-3.5 sm:[&_svg.lucide]:size-3\",\n \"*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n ],\n sm: [\n \"gap-x-1.5 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/5\",\n \"*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-4.5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n ],\n md: [\n \"gap-x-2 px-3.5 py-2 sm:px-3 sm:py-1.5 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n ],\n lg: [\n \"gap-x-2 px-4 py-2.5 sm:px-3.5 sm:py-2 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4.5\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n ],\n \"sq-xs\":\n \"size-8 *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3 sm:*:data-[slot=loader]:size-3\",\n \"sq-sm\":\n \"size-9 *:data-[slot=icon]:size-4.5 [&_svg.lucide]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-md\":\n \"size-10 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-lg\":\n \"size-11 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-4.5 sm:[&_svg.lucide]:size-4.5 sm:*:data-[slot=loader]:size-4.5\",\n },\n\n isCircle: {\n true: \"rounded-full\",\n false: \"rounded-lg\",\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n isPending: {\n true: \"opacity-50\",\n },\n isPressed: {\n true: \"not-aria-[haspopup]:translate-y-px\",\n },\n },\n defaultVariants: {\n intent: \"primary\",\n size: \"md\",\n isCircle: false,\n },\n compoundVariants: [\n {\n size: [\"xs\", \"sq-xs\"],\n className:\n \"rounded-md *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5\",\n },\n ],\n})\n\ninterface ButtonProps\n extends ButtonPrimitiveProps, VariantProps {\n ref?: React.Ref\n}\n\nconst Button = ({\n className,\n intent,\n size,\n isCircle,\n ref,\n ...props\n}: ButtonProps) => {\n return (\n \n buttonStyles({\n ...renderProps,\n intent,\n size,\n isCircle,\n className,\n })\n )}\n >\n {(values) => (\n <>\n {values.isPending && typeof props.children !== \"function\" && (\n \n )}\n {typeof props.children === \"function\"\n ? props.children(values)\n : props.children}\n \n )}\n \n )\n}\n\nexport { Button, buttonStyles }\nexport type { ButtonProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/command-menu.json b/apps/preskok/public/r/command-menu.json index df9e43a8b..11ae8fdd2 100644 --- a/apps/preskok/public/r/command-menu.json +++ b/apps/preskok/public/r/command-menu.json @@ -16,7 +16,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/command-menu.tsx", - "content": "\"use client\"\n\nimport { createContext, use, useEffect } from \"react\"\nimport { SearchIcon } from \"lucide-react\"\nimport type { AutocompleteProps } from \"react-aria-components/Autocomplete\"\nimport { Autocomplete, useFilter } from \"react-aria-components/Autocomplete\"\nimport type { CollectionRenderer } from \"react-aria-components/CollectionBuilder\"\nimport {\n CollectionRendererContext,\n DefaultCollectionRenderer,\n} from \"react-aria-components/CollectionBuilder\"\nimport { OverlayTriggerStateContext } from \"react-aria-components/Dialog\"\nimport type { MenuProps, MenuTriggerProps } from \"react-aria-components/Menu\"\nimport {\n Collection,\n Header,\n Menu as MenuPrimitive,\n MenuSection,\n} from \"react-aria-components/Menu\"\nimport {\n Button,\n Dialog,\n Modal,\n ModalContext,\n ModalOverlay,\n} from \"react-aria-components/Modal\"\nimport type { SearchFieldProps } from \"react-aria-components/SearchField\"\nimport { Input, SearchField } from \"react-aria-components/SearchField\"\nimport { twJoin, twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport { DropdownKeyboard } from \"./dropdown\"\nimport { Loader } from \"./loader\"\nimport {\n MenuDescription,\n MenuItem,\n MenuLabel,\n MenuSeparator,\n type MenuSectionProps,\n} from \"./menu\"\n\ninterface CommandMenuProviderProps {\n isPending?: boolean\n escapeButton?: boolean\n}\n\nconst CommandMenuContext = createContext(\n undefined\n)\n\nconst useCommandMenu = () => {\n const context = use(CommandMenuContext)\n\n if (!context) {\n throw new Error(\n \"useCommandMenu must be used within a \"\n )\n }\n\n return context\n}\n\nconst sizes = {\n xs: \"sm:max-w-xs\",\n sm: \"sm:max-w-sm\",\n md: \"sm:max-w-md\",\n lg: \"sm:max-w-lg\",\n xl: \"sm:max-w-xl\",\n \"2xl\": \"sm:max-w-2xl\",\n \"3xl\": \"sm:max-w-3xl\",\n}\n\ninterface CommandMenuProps\n extends AutocompleteProps, MenuTriggerProps, CommandMenuProviderProps {\n isDismissable?: boolean\n \"aria-label\"?: string\n shortcut?: string\n isBlurred?: boolean\n className?: string\n size?: keyof typeof sizes\n}\n\nconst CommandMenu = ({\n onOpenChange,\n className,\n isDismissable = true,\n escapeButton = true,\n isPending,\n size = \"lg\",\n isBlurred,\n shortcut,\n ...props\n}: CommandMenuProps) => {\n const { contains } = useFilter({ sensitivity: \"base\" })\n const filter = (textValue: string, inputValue: string) =>\n contains(textValue, inputValue)\n useEffect(() => {\n if (!shortcut) {\n return\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === shortcut && (e.metaKey || e.ctrlKey)) {\n onOpenChange?.(true)\n }\n }\n\n document.addEventListener(\"keydown\", onKeyDown)\n return () => document.removeEventListener(\"keydown\", onKeyDown)\n }, [shortcut, onOpenChange])\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\ninterface CommandMenuSearchProps extends SearchFieldProps {\n placeholder?: string\n className?: string\n}\n\nconst CommandMenuSearch = ({\n className,\n placeholder,\n ...props\n}: CommandMenuSearchProps) => {\n const state = use(OverlayTriggerStateContext)\n const { isPending, escapeButton } = useCommandMenu()\n return (\n \n {isPending ? (\n \n ) : (\n \n )}\n \n {escapeButton && (\n state?.close()}\n className=\"hover:bg-muted hidden cursor-default rounded border text-current/90 lg:inline lg:px-1.5 lg:py-0.5 lg:text-xs\"\n >\n Esc\n \n )}\n \n )\n}\n\nconst CommandMenuList = ({\n className,\n ...props\n}: MenuProps) => {\n return (\n \n \n \n )\n}\n\nconst CommandMenuSection = ({\n className,\n ref,\n ...props\n}: MenuSectionProps) => {\n return (\n \n {\"label\" in props && (\n
\n {props.label}\n
\n )}\n {props.children}\n \n )\n}\n\nconst CommandMenuItem = ({\n className,\n ...props\n}: React.ComponentProps) => {\n const textValue =\n props.textValue ||\n (typeof props.children === \"string\" ? props.children : undefined)\n return (\n \n )\n}\n\ntype CommandMenuDescriptionProps = React.ComponentProps\n\nconst CommandMenuDescription = ({\n className,\n ...props\n}: CommandMenuDescriptionProps) => {\n return (\n \n )\n}\n\nconst renderer: CollectionRenderer = {\n CollectionRoot(props) {\n if (props.collection.size === 0) {\n return (\n
\n No results found.\n
\n )\n }\n return \n },\n CollectionBranch: DefaultCollectionRenderer.CollectionBranch,\n}\n\nconst CommandMenuSeparator = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n)\n\nconst CommandMenuFooter = ({\n className,\n ...props\n}: React.ComponentProps<\"div\">) => {\n return (\n \n )\n}\n\nconst CommandMenuLabel = MenuLabel\nconst CommandMenuShortcut = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n)\n\nexport {\n CommandMenu,\n CommandMenuDescription,\n CommandMenuFooter,\n CommandMenuItem,\n CommandMenuLabel,\n CommandMenuList,\n CommandMenuSearch,\n CommandMenuSection,\n CommandMenuSeparator,\n CommandMenuShortcut,\n}\nexport type {\n CommandMenuDescriptionProps,\n CommandMenuProps,\n CommandMenuSearchProps,\n}\n", + "content": "\"use client\"\n\nimport { createContext, use, useEffect } from \"react\"\nimport { SearchIcon } from \"lucide-react\"\nimport type { AutocompleteProps } from \"react-aria-components/Autocomplete\"\nimport { Autocomplete, useFilter } from \"react-aria-components/Autocomplete\"\nimport type { CollectionRenderer } from \"react-aria-components/CollectionBuilder\"\nimport {\n CollectionRendererContext,\n DefaultCollectionRenderer,\n} from \"react-aria-components/CollectionBuilder\"\nimport { OverlayTriggerStateContext } from \"react-aria-components/Dialog\"\nimport type { MenuProps, MenuTriggerProps } from \"react-aria-components/Menu\"\nimport {\n Collection,\n Header,\n Menu as MenuPrimitive,\n MenuSection,\n} from \"react-aria-components/Menu\"\nimport {\n Button,\n Dialog,\n Modal,\n ModalContext,\n ModalOverlay,\n} from \"react-aria-components/Modal\"\nimport type { SearchFieldProps } from \"react-aria-components/SearchField\"\nimport { Input, SearchField } from \"react-aria-components/SearchField\"\nimport { twJoin, twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport { DropdownKeyboard } from \"./dropdown\"\nimport { Loader } from \"./loader\"\nimport {\n MenuDescription,\n MenuItem,\n MenuLabel,\n MenuSeparator,\n type MenuSectionProps,\n} from \"./menu\"\n\ninterface CommandMenuProviderProps {\n isPending?: boolean\n escapeButton?: boolean\n}\n\nconst CommandMenuContext = createContext(\n undefined\n)\n\nconst useCommandMenu = () => {\n const context = use(CommandMenuContext)\n\n if (!context) {\n throw new Error(\n \"useCommandMenu must be used within a \"\n )\n }\n\n return context\n}\n\nconst sizes = {\n xs: \"sm:max-w-xs\",\n sm: \"sm:max-w-sm\",\n md: \"sm:max-w-md\",\n lg: \"sm:max-w-lg\",\n xl: \"sm:max-w-xl\",\n \"2xl\": \"sm:max-w-2xl\",\n \"3xl\": \"sm:max-w-3xl\",\n}\n\ninterface CommandMenuProps\n extends AutocompleteProps, MenuTriggerProps, CommandMenuProviderProps {\n isDismissable?: boolean\n \"aria-label\"?: string\n shortcut?: string\n isBlurred?: boolean\n className?: string\n size?: keyof typeof sizes\n}\n\nconst CommandMenu = ({\n onOpenChange,\n className,\n isDismissable = true,\n escapeButton = true,\n isPending,\n size = \"lg\",\n isBlurred,\n shortcut,\n ...props\n}: CommandMenuProps) => {\n const { contains } = useFilter({ sensitivity: \"base\" })\n const filter = (textValue: string, inputValue: string) =>\n contains(textValue, inputValue)\n useEffect(() => {\n if (!shortcut) {\n return\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === shortcut && (e.metaKey || e.ctrlKey)) {\n onOpenChange?.(true)\n }\n }\n\n document.addEventListener(\"keydown\", onKeyDown)\n return () => document.removeEventListener(\"keydown\", onKeyDown)\n }, [shortcut, onOpenChange])\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\ninterface CommandMenuSearchProps extends SearchFieldProps {\n placeholder?: string\n className?: string\n}\n\nconst CommandMenuSearch = ({\n className,\n placeholder,\n ...props\n}: CommandMenuSearchProps) => {\n const state = use(OverlayTriggerStateContext)\n const { isPending, escapeButton } = useCommandMenu()\n return (\n \n {isPending ? (\n \n ) : (\n \n )}\n \n {escapeButton && (\n state?.close()}\n className=\"hover:bg-accent hidden cursor-default rounded border text-current/90 lg:inline lg:px-1.5 lg:py-0.5 lg:text-xs\"\n >\n Esc\n \n )}\n \n )\n}\n\nconst CommandMenuList = ({\n className,\n ...props\n}: MenuProps) => {\n return (\n \n \n \n )\n}\n\nconst CommandMenuSection = ({\n className,\n ref,\n ...props\n}: MenuSectionProps) => {\n return (\n \n {\"label\" in props && (\n
\n {props.label}\n
\n )}\n {props.children}\n \n )\n}\n\nconst CommandMenuItem = ({\n className,\n ...props\n}: React.ComponentProps) => {\n const textValue =\n props.textValue ||\n (typeof props.children === \"string\" ? props.children : undefined)\n return (\n \n )\n}\n\ntype CommandMenuDescriptionProps = React.ComponentProps\n\nconst CommandMenuDescription = ({\n className,\n ...props\n}: CommandMenuDescriptionProps) => {\n return (\n \n )\n}\n\nconst renderer: CollectionRenderer = {\n CollectionRoot(props) {\n if (props.collection.size === 0) {\n return (\n
\n No results found.\n
\n )\n }\n return \n },\n CollectionBranch: DefaultCollectionRenderer.CollectionBranch,\n}\n\nconst CommandMenuSeparator = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n)\n\nconst CommandMenuFooter = ({\n className,\n ...props\n}: React.ComponentProps<\"div\">) => {\n return (\n \n )\n}\n\nconst CommandMenuLabel = MenuLabel\nconst CommandMenuShortcut = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n)\n\nexport {\n CommandMenu,\n CommandMenuDescription,\n CommandMenuFooter,\n CommandMenuItem,\n CommandMenuLabel,\n CommandMenuList,\n CommandMenuSearch,\n CommandMenuSection,\n CommandMenuSeparator,\n CommandMenuShortcut,\n}\nexport type {\n CommandMenuDescriptionProps,\n CommandMenuProps,\n CommandMenuSearchProps,\n}\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/default.json b/apps/preskok/public/r/default.json index afe224c28..c0c9ac083 100644 --- a/apps/preskok/public/r/default.json +++ b/apps/preskok/public/r/default.json @@ -181,8 +181,8 @@ "--primary-foreground": "oklch(1 0 0)", "--secondary": "oklch(0.238 0.007 34.298)", "--secondary-foreground": "oklch(0.985 0.001 106.423)", - "--accent": "oklch(0.546 0.245 262.881)", - "--accent-foreground": "oklch(1 0 0)", + "--accent": "oklch(0.269 0.007 34.298)", + "--accent-foreground": "oklch(0.985 0.001 106.423)", "--muted": "oklch(0.216 0.006 56.043)", "--muted-foreground": "oklch(0.709 0.01 56.259)", "--overlay": "oklch(0.186 0.006 56.043)", diff --git a/apps/preskok/public/r/dropdown.json b/apps/preskok/public/r/dropdown.json index a5c6c1dbe..11a65b4e2 100644 --- a/apps/preskok/public/r/dropdown.json +++ b/apps/preskok/public/r/dropdown.json @@ -14,7 +14,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/dropdown.tsx", - "content": "\"use client\"\n\nimport { CheckIcon } from \"lucide-react\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n ListBoxItemProps,\n ListBoxSectionProps,\n TextProps,\n} from \"react-aria-components/ListBox\"\nimport {\n Collection,\n Header,\n ListBoxItem as ListBoxItemPrimitive,\n ListBoxSection,\n Text,\n} from \"react-aria-components/ListBox\"\nimport type { SeparatorProps } from \"react-aria-components/Separator\"\nimport { Separator } from \"react-aria-components/Separator\"\nimport { twJoin, twMerge } from \"tailwind-merge\"\nimport { tv } from \"tailwind-variants\"\n\nimport { Keyboard } from \"./keyboard\"\n\nconst dropdownSectionStyles = tv({\n slots: {\n section: \"col-span-full grid grid-cols-[auto_1fr]\",\n header:\n \"col-span-full px-3 py-2 font-medium text-muted-foreground text-sm/6 sm:px-2.5 sm:py-1.5 sm:text-xs/3\",\n },\n})\n\nconst { section, header } = dropdownSectionStyles()\n\ninterface DropdownSectionProps extends ListBoxSectionProps {\n title?: string\n}\n\nconst DropdownSection = ({\n className,\n children,\n ...props\n}: DropdownSectionProps) => {\n return (\n \n {\"title\" in props &&
{props.title}
}\n {children}\n \n )\n}\n\nconst dropdownItemStyles = tv({\n base: [\n \"min-w-0 [--mr-icon:--spacing(2.5)] sm:[--mr-icon:--spacing(2)]\",\n \"col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] px-3 py-2 supports-[grid-template-columns:subgrid]:grid-cols-subgrid sm:px-2.5 sm:py-1.5\",\n \"not-has-[[slot=description]]:items-center\",\n \"group relative cursor-default select-none rounded-[calc(var(--radius-xl)-(--spacing(1)))] text-base/6 text-foreground outline-0 sm:text-sm/6\",\n \"**:data-[slot=avatar]:*:mr-(--mr-icon) **:data-[slot=avatar]:mr-(--mr-icon) **:data-[slot=avatar]:[--avatar-size:--spacing(6)] sm:**:data-[slot=avatar]:[--avatar-size:--spacing(5)]\",\n \"*:data-[slot=icon]:mr-(--mr-icon) **:data-[slot=icon]:h-5 **:data-[slot=icon]:w-5 **:data-[slot=icon]:shrink-0 has-[[slot=description]]:**:data-[slot=icon]:h-[1lh] sm:**:data-[slot=icon]:h-4 sm:**:data-[slot=icon]:w-4 [&_[data-slot='icon']:not([class*='text-'])]:text-muted-foreground\",\n \"[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-1\",\n \"forced-color-adjust-none forced-colors:text-[CanvasText] forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-focus:**:data-[slot=icon]:text-[CanvasText]\",\n ],\n variants: {\n intent: {\n danger: [\n \"text-destructive focus:text-destructive [&_[data-slot='icon']:not([class*='text-'])]:text-destructive/70\",\n \"*:[[slot=description]]:text-destructive/80 focus:*:[[slot=description]]:text-destructive focus:*:[[slot=label]]:text-destructive\",\n \"focus:bg-destructive/10 focus:text-destructive forced-colors:focus:text-[Mark] focus:[&_[data-slot='icon']:not([class*='text-'])]:text-destructive\",\n ],\n warning: [\n \"text-warning focus:text-warning [&_[data-slot='icon']:not([class*='text-'])]:text-warning/70\",\n \"*:[[slot=description]]:text-warning/80 focus:*:[[slot=description]]:text-warning focus:*:[[slot=label]]:text-warning\",\n \"focus:bg-warning/10 focus:text-warning focus:[&_[data-slot='icon']:not([class*='text-'])]:text-warning\",\n ],\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n isSelected: {\n true: \"**:data-[slot=icon]:text-accent-foreground\",\n },\n isFocused: {\n true: [\n \"**:data-[slot=icon]:text-accent-foreground **:[kbd]:text-accent-foreground\",\n \"bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n \"[&_.text-muted-foreground]:text-accent-foreground/80 *:[[slot=description]]:text-accent-foreground *:[[slot=label]]:text-accent-foreground\",\n ],\n },\n isHovered: {\n true: [\n \"**:data-[slot=icon]:text-accent-foreground **:[kbd]:text-accent-foreground\",\n \"bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n \"[&_.text-muted-foreground]:text-accent-foreground/80 *:[[slot=description]]:text-accent-foreground *:[[slot=label]]:text-accent-foreground\",\n ],\n },\n },\n})\n\ninterface DropdownItemProps extends ListBoxItemProps {\n intent?: \"danger\" | \"warning\"\n}\n\nconst DropdownItem = ({\n className,\n children,\n intent,\n ...props\n}: DropdownItemProps) => {\n const textValue = typeof children === \"string\" ? children : undefined\n return (\n \n dropdownItemStyles({ ...renderProps, intent, className })\n )}\n {...props}\n >\n {composeRenderProps(children, (children, { isSelected }) => (\n <>\n {isSelected && (\n \n )}\n {typeof children === \"string\" ? (\n {children}\n ) : (\n children\n )}\n \n ))}\n \n )\n}\n\ninterface DropdownLabelProps extends TextProps {\n ref?: React.Ref\n}\n\nconst DropdownLabel = ({ className, ref, ...props }: DropdownLabelProps) => (\n \n)\n\ninterface DropdownDescriptionProps extends TextProps {\n ref?: React.Ref\n}\n\nconst DropdownDescription = ({\n className,\n ref,\n ...props\n}: DropdownDescriptionProps) => (\n \n)\n\nconst DropdownSeparator = ({ className, ...props }: SeparatorProps) => (\n \n)\n\ntype DropdownKeyboardProps = React.ComponentProps & {\n keys?: React.ReactNode\n}\n\nconst DropdownKeyboard = ({ className, ...props }: DropdownKeyboardProps) => {\n return (\n \n )\n}\n\n/**\n * Note: This is not exposed component, but it's used in other components to render dropdowns.\n * @internal\n */\nexport {\n DropdownDescription,\n DropdownItem,\n dropdownItemStyles,\n DropdownKeyboard,\n DropdownLabel,\n DropdownSection,\n dropdownSectionStyles,\n DropdownSeparator,\n}\nexport type {\n DropdownDescriptionProps,\n DropdownItemProps,\n DropdownLabelProps,\n DropdownSectionProps,\n}\n", + "content": "\"use client\"\n\nimport { CheckIcon } from \"lucide-react\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n ListBoxItemProps,\n ListBoxSectionProps,\n TextProps,\n} from \"react-aria-components/ListBox\"\nimport {\n Collection,\n Header,\n ListBoxItem as ListBoxItemPrimitive,\n ListBoxSection,\n Text,\n} from \"react-aria-components/ListBox\"\nimport type { SeparatorProps } from \"react-aria-components/Separator\"\nimport { Separator } from \"react-aria-components/Separator\"\nimport { twJoin, twMerge } from \"tailwind-merge\"\nimport { tv } from \"tailwind-variants\"\n\nimport { Keyboard } from \"./keyboard\"\n\nconst dropdownSectionStyles = tv({\n slots: {\n section: \"col-span-full grid grid-cols-[auto_1fr]\",\n header:\n \"col-span-full px-3 py-2 font-medium text-muted-foreground text-sm/6 sm:px-2.5 sm:py-1.5 sm:text-xs/3\",\n },\n})\n\nconst { section, header } = dropdownSectionStyles()\n\ninterface DropdownSectionProps extends ListBoxSectionProps {\n title?: string\n}\n\nconst DropdownSection = ({\n className,\n children,\n ...props\n}: DropdownSectionProps) => {\n return (\n \n {\"title\" in props &&
{props.title}
}\n {children}\n \n )\n}\n\nconst dropdownItemStyles = tv({\n base: [\n \"min-w-0 [--mr-icon:--spacing(2.5)] sm:[--mr-icon:--spacing(2)]\",\n \"col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] px-3 py-2 supports-[grid-template-columns:subgrid]:grid-cols-subgrid sm:px-2.5 sm:py-1.5\",\n \"not-has-[[slot=description]]:items-center\",\n \"group relative cursor-default select-none rounded-[calc(var(--radius-xl)-(--spacing(1)))] text-base/6 text-foreground outline-0 sm:text-sm/6\",\n \"**:data-[slot=avatar]:*:mr-(--mr-icon) **:data-[slot=avatar]:mr-(--mr-icon) **:data-[slot=avatar]:[--avatar-size:--spacing(6)] sm:**:data-[slot=avatar]:[--avatar-size:--spacing(5)]\",\n \"*:data-[slot=icon]:mr-(--mr-icon) **:data-[slot=icon]:h-5 **:data-[slot=icon]:w-5 **:data-[slot=icon]:shrink-0 has-[[slot=description]]:**:data-[slot=icon]:h-[1lh] sm:**:data-[slot=icon]:h-4 sm:**:data-[slot=icon]:w-4 [&_[data-slot='icon']:not([class*='text-'])]:text-muted-foreground\",\n \"[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-1\",\n \"forced-color-adjust-none forced-colors:text-[CanvasText] forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-focus:**:data-[slot=icon]:text-[CanvasText]\",\n ],\n variants: {\n intent: {\n danger: [\n \"text-destructive focus:text-destructive [&_[data-slot='icon']:not([class*='text-'])]:text-destructive/70\",\n \"*:[[slot=description]]:text-destructive/80 focus:*:[[slot=description]]:text-destructive focus:*:[[slot=label]]:text-destructive\",\n \"focus:bg-destructive/10 focus:text-destructive forced-colors:focus:text-[Mark] focus:[&_[data-slot='icon']:not([class*='text-'])]:text-destructive\",\n ],\n warning: [\n \"text-warning focus:text-warning [&_[data-slot='icon']:not([class*='text-'])]:text-warning/70\",\n \"*:[[slot=description]]:text-warning/80 focus:*:[[slot=description]]:text-warning focus:*:[[slot=label]]:text-warning\",\n \"focus:bg-warning/10 focus:text-warning focus:[&_[data-slot='icon']:not([class*='text-'])]:text-warning\",\n ],\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n isSelected: {\n true: \"**:data-[slot=icon]:text-foreground\",\n },\n isFocused: {\n true: \"bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n },\n isHovered: {\n true: \"bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n },\n },\n})\n\ninterface DropdownItemProps extends ListBoxItemProps {\n intent?: \"danger\" | \"warning\"\n}\n\nconst DropdownItem = ({\n className,\n children,\n intent,\n ...props\n}: DropdownItemProps) => {\n const textValue = typeof children === \"string\" ? children : undefined\n return (\n \n dropdownItemStyles({ ...renderProps, intent, className })\n )}\n {...props}\n >\n {composeRenderProps(children, (children, { isSelected }) => (\n <>\n {isSelected && (\n \n )}\n {typeof children === \"string\" ? (\n {children}\n ) : (\n children\n )}\n \n ))}\n \n )\n}\n\ninterface DropdownLabelProps extends TextProps {\n ref?: React.Ref\n}\n\nconst DropdownLabel = ({ className, ref, ...props }: DropdownLabelProps) => (\n \n)\n\ninterface DropdownDescriptionProps extends TextProps {\n ref?: React.Ref\n}\n\nconst DropdownDescription = ({\n className,\n ref,\n ...props\n}: DropdownDescriptionProps) => (\n \n)\n\nconst DropdownSeparator = ({ className, ...props }: SeparatorProps) => (\n \n)\n\ntype DropdownKeyboardProps = React.ComponentProps & {\n keys?: React.ReactNode\n}\n\nconst DropdownKeyboard = ({ className, ...props }: DropdownKeyboardProps) => {\n return (\n \n )\n}\n\n/**\n * Note: This is not exposed component, but it's used in other components to render dropdowns.\n * @internal\n */\nexport {\n DropdownDescription,\n DropdownItem,\n dropdownItemStyles,\n DropdownKeyboard,\n DropdownLabel,\n DropdownSection,\n dropdownSectionStyles,\n DropdownSeparator,\n}\nexport type {\n DropdownDescriptionProps,\n DropdownItemProps,\n DropdownLabelProps,\n DropdownSectionProps,\n}\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/grid-list.json b/apps/preskok/public/r/grid-list.json index c81afc1d0..9f34a0ef9 100644 --- a/apps/preskok/public/r/grid-list.json +++ b/apps/preskok/public/r/grid-list.json @@ -13,7 +13,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/grid-list.tsx", - "content": "\"use client\"\n\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n GridListItemProps,\n GridListProps,\n TextProps,\n} from \"react-aria-components/GridList\"\nimport {\n Button,\n GridListHeader as GridListHeaderPrimitive,\n GridListItem as GridListItemPrimitive,\n GridList as GridListPrimitive,\n GridListSection as GridListSectionPrimitive,\n Text,\n} from \"react-aria-components/GridList\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport { Checkbox } from \"./checkbox\"\n\nconst GridList = ({\n className,\n ...props\n}: GridListProps) => (\n \n)\n\nconst GridListSection = ({\n className,\n ...props\n}: React.ComponentProps>) => {\n return (\n \n )\n}\n\nconst GridListHeader = ({\n className,\n ...props\n}: React.ComponentProps) => {\n return (\n \n )\n}\n\nconst GridListItem = ({ className, children, ...props }: GridListItemProps) => {\n const textValue = typeof children === \"string\" ? children : undefined\n return (\n \n twMerge(\n \"[--grid-list-item-background-active:color-mix(in_oklab,var(--color-primary)_10%,transparent)] [--grid-list-item-text-active:var(--color-primary)]\",\n \"group inset-ring-border rounded-lg px-3 py-2.5 inset-ring\",\n \"relative min-w-0 outline-hidden [--mr-icon:--spacing(2)]\",\n \"flex min-w-0 cursor-default items-center gap-2 sm:gap-2.5\",\n \"dragging:cursor-grab dragging:opacity-70 dragging:**:[[slot=drag]]:text-(--grid-list-item-text-active)\",\n \"**:data-[slot=icon]:text-muted-foreground **:data-[slot=icon]:size-5 **:data-[slot=icon]:shrink-0 sm:**:data-[slot=icon]:size-4\",\n (isSelected || isHovered || isFocusVisible) &&\n \"inset-ring-ring/70 bg-(--grid-list-item-background-active) text-(--grid-list-item-text-active) **:[.text-muted-foreground]:text-(--grid-list-item-text-active)/60\",\n \"href\" in props && \"cursor-pointer\",\n className\n )\n )}\n >\n {(values) => (\n <>\n {values.allowsDragging && (\n \n )}\n\n {values.selectionMode === \"multiple\" &&\n values.selectionBehavior === \"toggle\" && (\n \n )}\n {typeof children === \"function\" ? children(values) : children}\n \n )}\n \n )\n}\n\nconst GridListEmptyState = ({\n ref,\n className,\n ...props\n}: React.ComponentProps<\"div\">) => (\n
\n)\n\nconst GridListSpacer = ({\n className,\n ref,\n ...props\n}: React.ComponentProps<\"div\">) => {\n return (\n \n )\n}\n\nconst GridListStart = ({\n className,\n ref,\n ...props\n}: React.ComponentProps<\"div\">) => {\n return (\n \n )\n}\n\ninterface GridListTextProps extends TextProps {\n ref?: React.Ref\n}\n\nconst GridListLabel = ({ className, ref, ...props }: GridListTextProps) => (\n \n)\n\nconst GridListDescription = ({\n className,\n ref,\n ...props\n}: GridListTextProps) => (\n \n)\n\nexport {\n GridList,\n GridListDescription,\n GridListEmptyState,\n GridListHeader,\n GridListItem,\n GridListLabel,\n GridListSection,\n GridListSpacer,\n GridListStart,\n}\nexport type { GridListItemProps, GridListProps }\n", + "content": "\"use client\"\n\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n GridListItemProps,\n GridListProps,\n TextProps,\n} from \"react-aria-components/GridList\"\nimport {\n Button,\n GridListHeader as GridListHeaderPrimitive,\n GridListItem as GridListItemPrimitive,\n GridList as GridListPrimitive,\n GridListSection as GridListSectionPrimitive,\n Text,\n} from \"react-aria-components/GridList\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport { Checkbox } from \"./checkbox\"\n\nconst GridList = ({\n className,\n ...props\n}: GridListProps) => (\n \n)\n\nconst GridListSection = ({\n className,\n ...props\n}: React.ComponentProps>) => {\n return (\n \n )\n}\n\nconst GridListHeader = ({\n className,\n ...props\n}: React.ComponentProps) => {\n return (\n \n )\n}\n\nconst GridListItem = ({ className, children, ...props }: GridListItemProps) => {\n const textValue = typeof children === \"string\" ? children : undefined\n return (\n \n twMerge(\n \"group inset-ring-border rounded-lg px-3 py-2.5 inset-ring\",\n \"relative min-w-0 outline-hidden [--mr-icon:--spacing(2)]\",\n \"flex min-w-0 cursor-default items-center gap-2 sm:gap-2.5\",\n \"dragging:cursor-grab dragging:opacity-70 dragging:**:[[slot=drag]]:text-foreground\",\n \"**:data-[slot=icon]:text-muted-foreground **:data-[slot=icon]:size-5 **:data-[slot=icon]:shrink-0 sm:**:data-[slot=icon]:size-4\",\n isHovered && \"bg-accent/50\",\n isSelected && \"bg-accent\",\n isFocusVisible && \"inset-ring-ring\",\n \"href\" in props && \"cursor-pointer\",\n className\n )\n )}\n >\n {(values) => (\n <>\n {values.allowsDragging && (\n \n )}\n\n {values.selectionMode === \"multiple\" &&\n values.selectionBehavior === \"toggle\" && (\n \n )}\n {typeof children === \"function\" ? children(values) : children}\n \n )}\n \n )\n}\n\nconst GridListEmptyState = ({\n ref,\n className,\n ...props\n}: React.ComponentProps<\"div\">) => (\n
\n)\n\nconst GridListSpacer = ({\n className,\n ref,\n ...props\n}: React.ComponentProps<\"div\">) => {\n return (\n \n )\n}\n\nconst GridListStart = ({\n className,\n ref,\n ...props\n}: React.ComponentProps<\"div\">) => {\n return (\n \n )\n}\n\ninterface GridListTextProps extends TextProps {\n ref?: React.Ref\n}\n\nconst GridListLabel = ({ className, ref, ...props }: GridListTextProps) => (\n \n)\n\nconst GridListDescription = ({\n className,\n ref,\n ...props\n}: GridListTextProps) => (\n \n)\n\nexport {\n GridList,\n GridListDescription,\n GridListEmptyState,\n GridListHeader,\n GridListItem,\n GridListLabel,\n GridListSection,\n GridListSpacer,\n GridListStart,\n}\nexport type { GridListItemProps, GridListProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/input.json b/apps/preskok/public/r/input.json index 35c55b345..a2f6ea9f4 100644 --- a/apps/preskok/public/r/input.json +++ b/apps/preskok/public/r/input.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/input.tsx", - "content": "\"use client\"\n\nimport { Group, type GroupProps } from \"react-aria-components/Group\"\nimport {\n Input as InputPrimitive,\n type InputProps as PrimitiveInputProps,\n} from \"react-aria-components/Input\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\nimport {\n Button,\n type ButtonProps,\n} from \"@/components/ui/preskok-ui/button\"\n\ninterface InputProps extends PrimitiveInputProps {\n ref?: React.RefObject\n}\n\nexport function Input({ className, ref, ...props }: InputProps) {\n return (\n \n \n \n )\n}\n\ninterface InputGroupProps extends Omit {\n className?: string\n}\n\nexport function InputGroup({ className, ...props }: InputGroupProps) {\n return (\n [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col\",\n \"has-[>[data-align=block-end]]:[&_[data-slot=input-group-control]]:pt-3 has-[>[data-align=block-start]]:[&_[data-slot=input-group-control]]:pb-3\",\n \"has-[>[data-align=inline-end]]:[&_[data-slot=input-group-control]]:pr-1.5 has-[>[data-align=inline-start]]:[&_[data-slot=input-group-control]]:pl-1.5\",\n \"[&>[data-slot=control]]:min-w-0 [&>[data-slot=control]]:flex-1 [&>[data-slot=control]]:self-stretch\",\n \"[&_[data-slot=input-group-control]]:h-full [&_[data-slot=input-group-control]]:rounded-none [&_[data-slot=input-group-control]]:border-0 [&_[data-slot=input-group-control]]:bg-transparent [&_[data-slot=input-group-control]]:shadow-none [&_[data-slot=input-group-control]]:ring-0\",\n \"[&_[data-slot=input-group-control]]:focus:border-transparent [&_[data-slot=input-group-control]]:focus:ring-0 [&_[data-slot=input-group-control]]:focus:outline-hidden\",\n \"[&_[data-slot=input-group-control]]:invalid:border-transparent [&_[data-slot=input-group-control]]:focus:invalid:border-transparent [&_[data-slot=input-group-control]]:focus:invalid:ring-0\",\n \"[&_[data-slot=input-group-control]]:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\ninterface InputGroupAddonProps extends React.ComponentProps<\"div\"> {\n align?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"\n}\n\nconst inputGroupAddonStyles = {\n \"inline-start\": \"order-first pl-2 has-[>button]:pl-px has-[>kbd]:pl-1.5\",\n \"inline-end\": \"order-last pr-2 has-[>button]:pr-px has-[>kbd]:pr-1.5\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n}\n\nexport function InputGroupAddon({\n className,\n align = \"inline-start\",\n onClick,\n ...props\n}: InputGroupAddonProps) {\n return (\n kbd]:rounded-[calc(var(--radius-lg)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n inputGroupAddonStyles[align],\n className\n )}\n onClick={(event) => {\n onClick?.(event)\n\n if (\n event.defaultPrevented ||\n (event.target as HTMLElement).closest(\"button\")\n ) {\n return\n }\n\n event.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\ninterface InputGroupButtonProps extends Omit {\n size?: \"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\"\n}\n\nconst inputGroupButtonSizes = {\n xs: {\n button: \"xs\",\n className:\n \"h-6 gap-1 rounded-[calc(var(--radius-lg)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n },\n sm: {\n button: \"sm\",\n className:\n \"h-7 rounded-[calc(var(--radius-lg)-2px)] px-2.5 [&>svg:not([class*='size-'])]:size-4\",\n },\n \"icon-xs\": {\n button: \"sq-xs\",\n className: \"size-6 rounded-[calc(var(--radius-lg)-3px)] p-0\",\n },\n \"icon-sm\": {\n button: \"sq-sm\",\n className: \"size-8 rounded-[calc(var(--radius-lg)-2px)] p-0\",\n },\n} as const\n\nexport function InputGroupButton({\n className,\n type = \"button\",\n intent = \"plain\",\n size = \"xs\",\n ...props\n}: InputGroupButtonProps) {\n const sizeStyles = inputGroupButtonSizes[size]\n\n return (\n \n )\n}\n\nexport function InputGroupText({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport function InputGroupInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n", + "content": "\"use client\"\n\nimport { Group, type GroupProps } from \"react-aria-components/Group\"\nimport {\n Input as InputPrimitive,\n type InputProps as PrimitiveInputProps,\n} from \"react-aria-components/Input\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\nimport {\n Button,\n type ButtonProps,\n} from \"@/components/ui/preskok-ui/button\"\n\ninterface InputProps extends PrimitiveInputProps {\n ref?: React.RefObject\n}\n\nexport function Input({ className, ref, ...props }: InputProps) {\n return (\n \n \n \n )\n}\n\ninterface InputGroupProps extends Omit {\n className?: string\n}\n\nexport function InputGroup({ className, ...props }: InputGroupProps) {\n return (\n [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col\",\n \"has-[>[data-align=block-end]]:[&_[data-slot=input-group-control]]:pt-3 has-[>[data-align=block-start]]:[&_[data-slot=input-group-control]]:pb-3\",\n \"has-[>[data-align=inline-end]]:[&_[data-slot=input-group-control]]:pr-1.5 has-[>[data-align=inline-start]]:[&_[data-slot=input-group-control]]:pl-1.5\",\n \"[&>[data-slot=control]]:min-w-0 [&>[data-slot=control]]:flex-1 [&>[data-slot=control]]:self-stretch\",\n \"[&_[data-slot=input-group-control]]:h-full [&_[data-slot=input-group-control]]:rounded-none [&_[data-slot=input-group-control]]:border-0 [&_[data-slot=input-group-control]]:bg-transparent [&_[data-slot=input-group-control]]:shadow-none [&_[data-slot=input-group-control]]:ring-0\",\n \"[&_[data-slot=input-group-control]]:focus:border-transparent [&_[data-slot=input-group-control]]:focus:ring-0 [&_[data-slot=input-group-control]]:focus:outline-hidden\",\n \"[&_[data-slot=input-group-control]]:invalid:border-transparent [&_[data-slot=input-group-control]]:focus:invalid:border-transparent [&_[data-slot=input-group-control]]:focus:invalid:ring-0\",\n \"[&_[data-slot=input-group-control]]:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\ninterface InputGroupAddonProps extends React.ComponentProps<\"div\"> {\n align?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"\n}\n\nconst inputGroupAddonStyles = {\n \"inline-start\": \"order-first pl-2 has-[>button]:pl-px has-[>kbd]:pl-1.5\",\n \"inline-end\": \"order-last pr-1.25 has-[>button]:pr-px has-[>kbd]:pr-1.5\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n}\n\nexport function InputGroupAddon({\n className,\n align = \"inline-start\",\n onClick,\n ...props\n}: InputGroupAddonProps) {\n return (\n kbd]:rounded-[calc(var(--radius-lg)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n inputGroupAddonStyles[align],\n className\n )}\n onClick={(event) => {\n onClick?.(event)\n\n if (\n event.defaultPrevented ||\n (event.target as HTMLElement).closest(\"button\")\n ) {\n return\n }\n\n event.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\ninterface InputGroupButtonProps extends Omit {\n size?: \"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\"\n}\n\nconst inputGroupButtonSizes = {\n xs: {\n button: \"xs\",\n className:\n \"h-6 gap-1 rounded-[calc(var(--radius-lg)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n },\n sm: {\n button: \"sm\",\n className:\n \"h-7 rounded-[calc(var(--radius-lg)-2px)] px-2.5 [&>svg:not([class*='size-'])]:size-4\",\n },\n \"icon-xs\": {\n button: \"sq-xs\",\n className: \"size-6 rounded-[calc(var(--radius-lg)-3px)] p-0\",\n },\n \"icon-sm\": {\n button: \"sq-sm\",\n className: \"size-8 rounded-[calc(var(--radius-lg)-2px)] p-0\",\n },\n} as const\n\nexport function InputGroupButton({\n className,\n type = \"button\",\n intent = \"plain\",\n size = \"xs\",\n ...props\n}: InputGroupButtonProps) {\n const sizeStyles = inputGroupButtonSizes[size]\n\n return (\n \n )\n}\n\nexport function InputGroupText({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport function InputGroupInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/menu.json b/apps/preskok/public/r/menu.json index 488cd7a4b..264bc3ba9 100644 --- a/apps/preskok/public/r/menu.json +++ b/apps/preskok/public/r/menu.json @@ -16,7 +16,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/menu.tsx", - "content": "\"use client\"\n\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport type { ButtonProps } from \"react-aria-components/Button\"\nimport { Button } from \"react-aria-components/Button\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n MenuItemProps as MenuItemPrimitiveProps,\n MenuProps as MenuPrimitiveProps,\n MenuSectionProps as MenuSectionPrimitiveProps,\n MenuTriggerProps as MenuTriggerPrimitiveProps,\n} from \"react-aria-components/Menu\"\nimport {\n Collection,\n Header,\n MenuItem as MenuItemPrimitive,\n Menu as MenuPrimitive,\n MenuSection as MenuSectionPrimitive,\n MenuTrigger as MenuTriggerPrimitive,\n SubmenuTrigger as SubmenuTriggerPrimitive,\n} from \"react-aria-components/Menu\"\nimport { twJoin, twMerge } from \"tailwind-merge\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport {\n DropdownDescription,\n dropdownItemStyles,\n DropdownKeyboard,\n DropdownLabel,\n dropdownSectionStyles,\n DropdownSeparator,\n} from \"./dropdown\"\nimport { PopoverContent, type PopoverContentProps } from \"./popover\"\n\nconst Menu = (props: MenuTriggerPrimitiveProps) => (\n \n)\n\nconst MenuSubMenu = ({ delay = 0, ...props }) => (\n \n {props.children}\n \n)\n\ninterface MenuTriggerProps extends ButtonProps {\n ref?: React.Ref\n}\n\nconst MenuTrigger = ({ className, ref, ...props }: MenuTriggerProps) => (\n \n)\n\ninterface MenuContentProps\n extends MenuPrimitiveProps, Pick {\n className?: string\n popover?: Pick<\n PopoverContentProps,\n | \"arrow\"\n | \"className\"\n | \"placement\"\n | \"offset\"\n | \"crossOffset\"\n | \"arrowBoundaryOffset\"\n | \"triggerRef\"\n | \"isOpen\"\n | \"onOpenChange\"\n | \"shouldFlip\"\n >\n}\n\nconst menuContentStyles = tv({\n base: \"grid max-h-[inherit] grid-cols-[auto_1fr] gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain p-1 outline-hidden [clip-path:inset(0_0_0_0_round_calc(var(--radius-xl)-(--spacing(1))))] *:[[role='group']+[role=group]]:mt-3\",\n})\n\nconst MenuContent = ({\n className,\n placement,\n popover,\n ...props\n}: MenuContentProps) => {\n return (\n \n \n \n )\n}\n\ninterface MenuItemProps\n extends MenuItemPrimitiveProps, VariantProps {}\n\nconst MenuItem = ({ className, intent, children, ...props }: MenuItemProps) => {\n const textValue =\n props.textValue || (typeof children === \"string\" ? children : undefined)\n return (\n \n dropdownItemStyles({\n ...renderProps,\n intent,\n className: hasSubmenu\n ? twMerge(\n intent === \"danger\" &&\n \"open:bg-destructive/10 open:text-destructive\",\n intent === \"warning\" &&\n \"open:bg-warning/10 open:text-warning\",\n intent === undefined &&\n \"open:bg-accent open:text-accent-foreground open:*:data-[slot=icon]:text-accent-foreground open:*:[.text-muted-foreground]:text-accent-foreground\",\n className\n )\n : className,\n })\n )}\n textValue={textValue}\n {...props}\n >\n {(values) => (\n <>\n {values.isSelected && (\n \n {values.selectionMode === \"single\" && (\n \n )}\n {values.selectionMode === \"multiple\" && (\n \n )}\n \n )}\n\n {typeof children === \"function\" ? children(values) : children}\n\n {values.hasSubmenu && (\n \n )}\n \n )}\n \n )\n}\n\nexport interface MenuHeaderProps extends React.ComponentProps {\n separator?: boolean\n}\n\nconst MenuHeader = ({\n className,\n separator = false,\n ...props\n}: MenuHeaderProps) => (\n \n)\n\nconst { section, header } = dropdownSectionStyles()\n\ninterface MenuSectionProps extends MenuSectionPrimitiveProps {\n ref?: React.Ref\n label?: string\n}\n\nconst MenuSection = ({\n className,\n ref,\n ...props\n}: MenuSectionProps) => {\n return (\n \n {\"label\" in props &&
{props.label}
}\n {props.children}\n \n )\n}\n\nconst MenuSeparator = DropdownSeparator\nconst MenuShortcut = DropdownKeyboard\nconst MenuLabel = DropdownLabel\nconst MenuDescription = DropdownDescription\n\nexport {\n Menu,\n MenuContent,\n menuContentStyles,\n MenuDescription,\n MenuHeader,\n MenuItem,\n MenuLabel,\n MenuSection,\n MenuSeparator,\n MenuShortcut,\n MenuSubMenu,\n MenuTrigger,\n}\nexport type {\n MenuContentProps,\n MenuItemProps,\n MenuSectionProps,\n MenuTriggerProps,\n}\n", + "content": "\"use client\"\n\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport type { ButtonProps } from \"react-aria-components/Button\"\nimport { Button } from \"react-aria-components/Button\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n MenuItemProps as MenuItemPrimitiveProps,\n MenuProps as MenuPrimitiveProps,\n MenuSectionProps as MenuSectionPrimitiveProps,\n MenuTriggerProps as MenuTriggerPrimitiveProps,\n} from \"react-aria-components/Menu\"\nimport {\n Collection,\n Header,\n MenuItem as MenuItemPrimitive,\n Menu as MenuPrimitive,\n MenuSection as MenuSectionPrimitive,\n MenuTrigger as MenuTriggerPrimitive,\n SubmenuTrigger as SubmenuTriggerPrimitive,\n} from \"react-aria-components/Menu\"\nimport { twJoin, twMerge } from \"tailwind-merge\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport {\n DropdownDescription,\n dropdownItemStyles,\n DropdownKeyboard,\n DropdownLabel,\n dropdownSectionStyles,\n DropdownSeparator,\n} from \"./dropdown\"\nimport { PopoverContent, type PopoverContentProps } from \"./popover\"\n\nconst Menu = (props: MenuTriggerPrimitiveProps) => (\n \n)\n\nconst MenuSubMenu = ({ delay = 0, ...props }) => (\n \n {props.children}\n \n)\n\ninterface MenuTriggerProps extends ButtonProps {\n ref?: React.Ref\n}\n\nconst MenuTrigger = ({ className, ref, ...props }: MenuTriggerProps) => (\n \n)\n\ninterface MenuContentProps\n extends MenuPrimitiveProps, Pick {\n className?: string\n popover?: Pick<\n PopoverContentProps,\n | \"arrow\"\n | \"className\"\n | \"placement\"\n | \"offset\"\n | \"crossOffset\"\n | \"arrowBoundaryOffset\"\n | \"triggerRef\"\n | \"isOpen\"\n | \"onOpenChange\"\n | \"shouldFlip\"\n >\n}\n\nconst menuContentStyles = tv({\n base: \"grid max-h-[inherit] grid-cols-[auto_1fr] gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain p-1 outline-hidden [clip-path:inset(0_0_0_0_round_calc(var(--radius-xl)-(--spacing(1))))] *:[[role='group']+[role=group]]:mt-3\",\n})\n\nconst MenuContent = ({\n className,\n placement,\n popover,\n ...props\n}: MenuContentProps) => {\n return (\n \n \n \n )\n}\n\ninterface MenuItemProps\n extends MenuItemPrimitiveProps, VariantProps {}\n\nconst MenuItem = ({ className, intent, children, ...props }: MenuItemProps) => {\n const textValue =\n props.textValue || (typeof children === \"string\" ? children : undefined)\n return (\n \n dropdownItemStyles({\n ...renderProps,\n intent,\n className: hasSubmenu\n ? twMerge(\n intent === \"danger\" &&\n \"open:bg-destructive/10 open:text-destructive\",\n intent === \"warning\" &&\n \"open:bg-warning/10 open:text-warning\",\n intent === undefined && \"open:bg-accent\",\n className\n )\n : className,\n })\n )}\n textValue={textValue}\n {...props}\n >\n {(values) => (\n <>\n {values.isSelected && (\n \n {values.selectionMode === \"single\" && (\n \n )}\n {values.selectionMode === \"multiple\" && (\n \n )}\n \n )}\n\n {typeof children === \"function\" ? children(values) : children}\n\n {values.hasSubmenu && (\n \n )}\n \n )}\n \n )\n}\n\nexport interface MenuHeaderProps extends React.ComponentProps {\n separator?: boolean\n}\n\nconst MenuHeader = ({\n className,\n separator = false,\n ...props\n}: MenuHeaderProps) => (\n \n)\n\nconst { section, header } = dropdownSectionStyles()\n\ninterface MenuSectionProps extends MenuSectionPrimitiveProps {\n ref?: React.Ref\n label?: string\n}\n\nconst MenuSection = ({\n className,\n ref,\n ...props\n}: MenuSectionProps) => {\n return (\n \n {\"label\" in props &&
{props.label}
}\n {props.children}\n \n )\n}\n\nconst MenuSeparator = DropdownSeparator\nconst MenuShortcut = DropdownKeyboard\nconst MenuLabel = DropdownLabel\nconst MenuDescription = DropdownDescription\n\nexport {\n Menu,\n MenuContent,\n menuContentStyles,\n MenuDescription,\n MenuHeader,\n MenuItem,\n MenuLabel,\n MenuSection,\n MenuSeparator,\n MenuShortcut,\n MenuSubMenu,\n MenuTrigger,\n}\nexport type {\n MenuContentProps,\n MenuItemProps,\n MenuSectionProps,\n MenuTriggerProps,\n}\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/registry.json b/apps/preskok/public/r/registry.json index 48d61cb47..f8ad7a685 100644 --- a/apps/preskok/public/r/registry.json +++ b/apps/preskok/public/r/registry.json @@ -197,8 +197,8 @@ "--primary-foreground": "oklch(1 0 0)", "--secondary": "oklch(0.238 0.007 34.298)", "--secondary-foreground": "oklch(0.985 0.001 106.423)", - "--accent": "oklch(0.546 0.245 262.881)", - "--accent-foreground": "oklch(1 0 0)", + "--accent": "oklch(0.269 0.007 34.298)", + "--accent-foreground": "oklch(0.985 0.001 106.423)", "--muted": "oklch(0.216 0.006 56.043)", "--muted-foreground": "oklch(0.709 0.01 56.259)", "--overlay": "oklch(0.186 0.006 56.043)", diff --git a/apps/preskok/public/r/select.json b/apps/preskok/public/r/select.json index 5cd39e88c..386a5a59f 100644 --- a/apps/preskok/public/r/select.json +++ b/apps/preskok/public/r/select.json @@ -16,7 +16,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/select.tsx", - "content": "\"use client\"\n\nimport { ChevronsUpDownIcon } from \"lucide-react\"\nimport type {\n ListBoxProps,\n PopoverProps,\n SelectProps as SelectPrimitiveProps,\n} from \"react-aria-components/Select\"\nimport {\n Button,\n ListBox,\n Select as SelectPrimitive,\n SelectValue,\n} from \"react-aria-components/Select\"\nimport { twJoin } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport {\n DropdownDescription,\n DropdownItem,\n DropdownLabel,\n DropdownSection,\n DropdownSeparator,\n} from \"./dropdown\"\nimport { fieldStyles } from \"./field\"\nimport { PopoverContent } from \"./popover\"\n\ninterface SelectProps<\n T extends object,\n M extends \"single\" | \"multiple\" = \"single\",\n> extends SelectPrimitiveProps {\n items?: Iterable\n}\n\nconst Select = ({\n className,\n ...props\n}: SelectProps) => {\n return (\n \n )\n}\n\ninterface SelectListProps extends Omit<\n ListBoxProps,\n \"layout\" | \"orientation\"\n> {\n items?: Iterable\n popover?: Omit\n}\n\nconst SelectContent = ({\n items,\n className,\n popover,\n ...props\n}: SelectListProps) => {\n return (\n \n \n \n )\n}\n\ninterface SelectTriggerProps extends React.ComponentProps {\n prefix?: React.ReactNode\n className?: string\n}\n\nconst SelectTrigger = ({\n children,\n className,\n ...props\n}: SelectTriggerProps) => {\n return (\n \n \n {(values) => (\n <>\n {props.prefix && (\n {props.prefix}\n )}\n {typeof children === \"function\" ? children(values) : children}\n\n {!children && (\n <>\n \n \n \n )}\n \n )}\n \n \n )\n}\n\nconst SelectSection = DropdownSection\nconst SelectSeparator = DropdownSeparator\nconst SelectLabel = DropdownLabel\nconst SelectDescription = DropdownDescription\nconst SelectItem = DropdownItem\n\nexport {\n Select,\n SelectContent,\n SelectDescription,\n SelectItem,\n SelectLabel,\n SelectSection,\n SelectSeparator,\n SelectTrigger,\n}\nexport type { SelectProps, SelectTriggerProps }\n", + "content": "\"use client\"\n\nimport { ChevronsUpDownIcon } from \"lucide-react\"\nimport type {\n ListBoxProps,\n PopoverProps,\n SelectProps as SelectPrimitiveProps,\n} from \"react-aria-components/Select\"\nimport {\n Button,\n ListBox,\n Select as SelectPrimitive,\n SelectValue,\n} from \"react-aria-components/Select\"\nimport { twJoin } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\nimport {\n DropdownDescription,\n DropdownItem,\n DropdownLabel,\n DropdownSection,\n DropdownSeparator,\n} from \"./dropdown\"\nimport { fieldStyles } from \"./field\"\nimport { PopoverContent } from \"./popover\"\n\ninterface SelectProps<\n T extends object,\n M extends \"single\" | \"multiple\" = \"single\",\n> extends SelectPrimitiveProps {\n items?: Iterable\n}\n\nconst Select = ({\n className,\n ...props\n}: SelectProps) => {\n return (\n \n )\n}\n\ninterface SelectListProps extends Omit<\n ListBoxProps,\n \"layout\" | \"orientation\"\n> {\n items?: Iterable\n popover?: Omit\n}\n\nconst SelectContent = ({\n items,\n className,\n popover,\n ...props\n}: SelectListProps) => {\n return (\n \n \n \n )\n}\n\ninterface SelectTriggerProps extends React.ComponentProps {\n prefix?: React.ReactNode\n className?: string\n}\n\nconst SelectTrigger = ({\n children,\n className,\n ...props\n}: SelectTriggerProps) => {\n return (\n \n \n {(values) => (\n <>\n {props.prefix && (\n {props.prefix}\n )}\n {typeof children === \"function\" ? children(values) : children}\n\n {!children && (\n <>\n \n \n \n )}\n \n )}\n \n \n )\n}\n\nconst SelectSection = DropdownSection\nconst SelectSeparator = DropdownSeparator\nconst SelectLabel = DropdownLabel\nconst SelectDescription = DropdownDescription\nconst SelectItem = DropdownItem\n\nexport {\n Select,\n SelectContent,\n SelectDescription,\n SelectItem,\n SelectLabel,\n SelectSection,\n SelectSeparator,\n SelectTrigger,\n}\nexport type { SelectProps, SelectTriggerProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/tabs.json b/apps/preskok/public/r/tabs.json index 88f7ab1e1..50997debb 100644 --- a/apps/preskok/public/r/tabs.json +++ b/apps/preskok/public/r/tabs.json @@ -12,7 +12,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/tabs.tsx", - "content": "\"use client\"\n\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { useSlottedContext } from \"react-aria-components/slots\"\nimport type {\n TabListProps as TabListPrimitiveProps,\n TabPanelProps as TabPanelPrimitiveProps,\n TabProps as TabPrimitiveProps,\n TabsProps as TabsPrimitiveProps,\n} from \"react-aria-components/Tabs\"\nimport {\n SelectionIndicator,\n TabList as TabListPrimitive,\n TabPanel as TabPanelPrimitive,\n Tab as TabPrimitive,\n TabsContext,\n Tabs as TabsPrimitive,\n} from \"react-aria-components/Tabs\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\ninterface TabsProps extends TabsPrimitiveProps {\n ref?: React.RefObject\n}\nconst Tabs = ({\n className,\n ref,\n orientation = \"horizontal\",\n ...props\n}: TabsProps) => {\n return (\n \n \n \n )\n}\n\ninterface TabListProps extends TabListPrimitiveProps {\n ref?: React.RefObject\n}\nconst TabList = ({\n className,\n ref,\n ...props\n}: TabListProps) => {\n return (\n \n twMerge([\n \"[--tab-list-gutter:--spacing(1)]\",\n \"relative flex forced-color-adjust-none\",\n orientation === \"horizontal\" &&\n \"flex-row gap-x-(--tab-list-gutter) rounded-(--tab-list-rounded) border-b py-(--tab-list-gutter)\",\n orientation === \"vertical\" &&\n \"min-w-56 shrink-0 flex-col items-start gap-y-(--tab-list-gutter) border-l px-(--tab-list-gutter) [--tab-list-gutter:--spacing(2)]\",\n className,\n ])\n )}\n />\n )\n}\n\ninterface TabProps extends TabPrimitiveProps {\n ref?: React.RefObject\n}\nconst Tab = ({ children, className, ref, ...props }: TabProps) => {\n const { orientation } = useSlottedContext(TabsContext)!\n return (\n \n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n \n \n )}\n \n )\n}\n\ninterface TabPanelProps extends TabPanelPrimitiveProps {\n ref?: React.RefObject\n}\nconst TabPanel = ({ className, ref, ...props }: TabPanelProps) => {\n return (\n \n )\n}\n\nexport { Tab, TabList, TabPanel, Tabs }\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps }\n", + "content": "\"use client\"\n\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { useSlottedContext } from \"react-aria-components/slots\"\nimport type {\n TabListProps as TabListPrimitiveProps,\n TabPanelProps as TabPanelPrimitiveProps,\n TabProps as TabPrimitiveProps,\n TabsProps as TabsPrimitiveProps,\n} from \"react-aria-components/Tabs\"\nimport {\n SelectionIndicator,\n TabList as TabListPrimitive,\n TabPanel as TabPanelPrimitive,\n Tab as TabPrimitive,\n TabsContext,\n Tabs as TabsPrimitive,\n} from \"react-aria-components/Tabs\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { cx } from \"@/lib/primitive\"\n\ninterface TabsProps extends TabsPrimitiveProps {\n ref?: React.RefObject\n}\nconst Tabs = ({\n className,\n ref,\n orientation = \"horizontal\",\n ...props\n}: TabsProps) => {\n return (\n \n \n \n )\n}\n\ninterface TabListProps extends TabListPrimitiveProps {\n ref?: React.RefObject\n}\nconst TabList = ({\n className,\n ref,\n ...props\n}: TabListProps) => {\n return (\n \n twMerge([\n \"[--tab-list-gutter:--spacing(1)]\",\n \"relative flex forced-color-adjust-none\",\n orientation === \"horizontal\" &&\n \"flex-row gap-x-(--tab-list-gutter) rounded-(--tab-list-rounded) border-b py-(--tab-list-gutter)\",\n orientation === \"vertical\" &&\n \"min-w-56 shrink-0 flex-col items-start gap-y-(--tab-list-gutter) border-l px-(--tab-list-gutter) [--tab-list-gutter:--spacing(2)]\",\n className,\n ])\n )}\n />\n )\n}\n\ninterface TabProps extends TabPrimitiveProps {\n ref?: React.RefObject\n}\nconst Tab = ({ children, className, ref, ...props }: TabProps) => {\n const { orientation } = useSlottedContext(TabsContext)!\n return (\n \n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n \n \n )}\n \n )\n}\n\ninterface TabPanelProps extends TabPanelPrimitiveProps {\n ref?: React.RefObject\n}\nconst TabPanel = ({ className, ref, ...props }: TabPanelProps) => {\n return (\n \n )\n}\n\nexport { Tab, TabList, TabPanel, Tabs }\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/toggle-group.json b/apps/preskok/public/r/toggle-group.json index b98192031..650aec0e7 100644 --- a/apps/preskok/public/r/toggle-group.json +++ b/apps/preskok/public/r/toggle-group.json @@ -13,7 +13,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/toggle-group.tsx", - "content": "\"use client\"\n\nimport { createContext, use } from \"react\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport {\n ToggleButton,\n ToggleButtonGroup,\n type ToggleButtonGroupProps,\n type ToggleButtonProps,\n} from \"react-aria-components/ToggleButtonGroup\"\nimport { twMerge } from \"tailwind-merge\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cx } from \"@/lib/primitive\"\n\ntype ToggleSize =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"sq-xs\"\n | \"sq-sm\"\n | \"sq-md\"\n | \"sq-lg\"\n\ninterface ToggleGroupContextValue extends Pick<\n ToggleButtonGroupProps,\n \"selectionMode\" | \"orientation\"\n> {\n size?: ToggleSize\n}\n\nconst ToggleGroupContext = createContext({\n size: \"md\",\n selectionMode: \"single\",\n orientation: \"horizontal\",\n})\n\nconst useToggleGroupContext = () => use(ToggleGroupContext)\n\ninterface ToggleGroupProps extends ToggleButtonGroupProps {\n size?: ToggleSize\n isCircle?: boolean\n}\n\nconst ToggleGroup = ({\n size = \"md\",\n orientation = \"horizontal\",\n selectionMode = \"single\",\n isCircle,\n className,\n ...props\n}: ToggleGroupProps) => {\n return (\n \n \n \n )\n}\n\ninterface ToggleGroupItemProps extends ToggleButtonProps {\n size?: ToggleSize\n}\n\nconst toggleGroupItemStyles = tv({\n base: [\n \"relative isolate\",\n \"inline-flex flex-row items-center font-medium text-(--toggle-foreground) outline-hidden\",\n \"inset-ring inset-ring-transparent\",\n \"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90\",\n \"forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]\",\n ],\n variants: {\n orientation: {\n horizontal: \"justify-center\",\n vertical: \"justify-start\",\n },\n selectionMode: {\n single: \"rounded-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n multiple: \"rounded-none\",\n },\n size: {\n xs: [\n \"min-h-8 gap-x-1.5 px-1.5 py-1 text-sm sm:min-h-7 sm:px-1 sm:py-1 sm:text-xs/4\",\n \"*:data-[slot=icon]:-mx-px *:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n \"*:data-[slot=loader]:-mx-px *:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n ],\n sm: [\n \"min-h-9 gap-x-1.5 px-2 py-1 sm:min-h-8 sm:px-1.5 sm:py-1 sm:text-sm/5\",\n \"*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4\",\n \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n ],\n md: [\n \"min-h-10 gap-x-2 px-2.5 py-1.5 sm:min-h-9 sm:px-2 sm:py-1 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n ],\n lg: [\n \"min-h-11 gap-x-2 px-3 py-2 sm:min-h-10 sm:px-2.5 sm:py-1.5 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n ],\n \"sq-xs\":\n \"touch-target size-8 *:data-[slot=icon]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:*:data-[slot=loader]:size-3\",\n \"sq-sm\":\n \"touch-target size-9 *:data-[slot=icon]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-md\":\n \"touch-target size-10 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:*:data-[slot=loader]:size-4.5\",\n \"sq-lg\":\n \"touch-target size-11 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:*:data-[slot=loader]:size-5\",\n },\n isSelected: {\n true: \"inset-ring-foreground/20 bg-(--toggle-selected-background) text-(--toggle-selected-foreground) [--toggle-icon:var(--primary-foreground)] hover:bg-(--toggle-selected-background)/90\",\n },\n isFocused: {\n true: \"not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground) not-selected:[--toggle-icon:var(--toggle-focused-foreground)]\",\n },\n isHovered: {\n true: \"enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground) enabled:not-selected:[--toggle-icon:var(--toggle-hover-foreground)]\",\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n compoundVariants: [\n {\n selectionMode: \"multiple\",\n orientation: \"horizontal\",\n className:\n \"not-first:-ml-px first:rounded-l-[calc(var(--toggle-group-radius)-var(--toggle-gutter))] last:rounded-r-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n },\n {\n selectionMode: \"multiple\",\n orientation: \"vertical\",\n className:\n \"not-first:-mt-px first:rounded-t-[calc(var(--toggle-group-radius)-var(--toggle-gutter))] last:rounded-b-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n },\n ],\n})\n\nconst ToggleGroupItem = ({ className, ...props }: ToggleGroupItemProps) => {\n const { size, selectionMode, orientation } = useToggleGroupContext()\n\n return (\n \n twMerge(\n toggleGroupItemStyles({\n ...renderProps,\n size,\n orientation,\n selectionMode,\n className,\n })\n )\n )}\n {...props}\n />\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\nexport type { ToggleGroupItemProps, ToggleGroupProps }\n", + "content": "\"use client\"\n\nimport { createContext, use } from \"react\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport {\n ToggleButton,\n ToggleButtonGroup,\n type ToggleButtonGroupProps,\n type ToggleButtonProps,\n} from \"react-aria-components/ToggleButtonGroup\"\nimport { twMerge } from \"tailwind-merge\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cx } from \"@/lib/primitive\"\n\ntype ToggleSize =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"sq-xs\"\n | \"sq-sm\"\n | \"sq-md\"\n | \"sq-lg\"\n\ninterface ToggleGroupContextValue extends Pick<\n ToggleButtonGroupProps,\n \"selectionMode\" | \"orientation\"\n> {\n size?: ToggleSize\n}\n\nconst ToggleGroupContext = createContext({\n size: \"md\",\n selectionMode: \"single\",\n orientation: \"horizontal\",\n})\n\nconst useToggleGroupContext = () => use(ToggleGroupContext)\n\ninterface ToggleGroupProps extends ToggleButtonGroupProps {\n size?: ToggleSize\n isCircle?: boolean\n}\n\nconst ToggleGroup = ({\n size = \"md\",\n orientation = \"horizontal\",\n selectionMode = \"single\",\n isCircle,\n className,\n ...props\n}: ToggleGroupProps) => {\n return (\n \n \n \n )\n}\n\ninterface ToggleGroupItemProps extends ToggleButtonProps {\n size?: ToggleSize\n}\n\nconst toggleGroupItemStyles = tv({\n base: [\n \"relative isolate\",\n \"inline-flex flex-row items-center font-medium text-(--toggle-foreground) outline-hidden\",\n \"inset-ring inset-ring-transparent\",\n \"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center\",\n \"[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center\",\n \"[&_svg:not([class*='size-'])]:size-4\",\n \"[&_svg]:shrink-0\",\n ],\n variants: {\n orientation: {\n horizontal: \"justify-center\",\n vertical: \"justify-start\",\n },\n selectionMode: {\n single: \"rounded-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n multiple:\n \"rounded-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n },\n size: {\n xs: [\n \"min-h-8 gap-x-1.5 px-1.5 py-1 text-sm sm:min-h-7 sm:px-1 sm:py-1 sm:text-xs/4\",\n \"*:data-[slot=icon]:-mx-px *:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n \"[&_svg.lucide]:-mx-px [&_svg.lucide]:size-3.5 sm:[&_svg.lucide]:size-3\",\n \"*:data-[slot=loader]:-mx-px *:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n ],\n sm: [\n \"min-h-9 gap-x-1.5 px-2 py-1 sm:min-h-8 sm:px-1.5 sm:py-1 sm:text-sm/5\",\n \"*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-4.5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n ],\n md: [\n \"min-h-10 gap-x-2 px-2.5 py-1.5 sm:min-h-9 sm:px-2 sm:py-1 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n ],\n lg: [\n \"min-h-11 gap-x-2 px-3 py-2 sm:min-h-10 sm:px-2.5 sm:py-1.5 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4.5\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n ],\n \"sq-xs\":\n \"touch-target size-8 *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3 sm:*:data-[slot=loader]:size-3\",\n \"sq-sm\":\n \"touch-target size-9 *:data-[slot=icon]:size-4.5 [&_svg.lucide]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-md\":\n \"touch-target size-10 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:[&_svg.lucide]:size-4.5 sm:*:data-[slot=loader]:size-4.5\",\n \"sq-lg\":\n \"touch-target size-11 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:[&_svg.lucide]:size-5 sm:*:data-[slot=loader]:size-5\",\n },\n isSelected: {\n true: \"bg-(--toggle-selected-background) text-(--toggle-selected-foreground) hover:bg-(--toggle-selected-background)/90\",\n },\n isFocused: {\n true: \"not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground)\",\n },\n isHovered: {\n true: \"enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground)\",\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n compoundVariants: [],\n})\n\nconst ToggleGroupItem = ({ className, ...props }: ToggleGroupItemProps) => {\n const { size, selectionMode, orientation } = useToggleGroupContext()\n\n return (\n \n twMerge(\n toggleGroupItemStyles({\n ...renderProps,\n size,\n orientation,\n selectionMode,\n className,\n })\n )\n )}\n {...props}\n />\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\nexport type { ToggleGroupItemProps, ToggleGroupProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/public/r/toggle.json b/apps/preskok/public/r/toggle.json index eb1ea1a2b..fee5d70b9 100644 --- a/apps/preskok/public/r/toggle.json +++ b/apps/preskok/public/r/toggle.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/preskok/ui/preskok-ui/toggle.tsx", - "content": "\"use client\"\n\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type { ToggleButtonProps } from \"react-aria-components/ToggleButton\"\nimport { ToggleButton } from \"react-aria-components/ToggleButton\"\nimport { twMerge } from \"tailwind-merge\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nconst toggleStyles = tv({\n base: [\n \"[--toggle-foreground:var(--color-foreground)] [--toggle-selected-background:var(--color-muted)]/90 [--toggle-selected-foreground:var(--color-foreground)]\",\n \"[--toggle-focused-background:var(--color-muted)] [--toggle-focused-foreground:var(--color-foreground)]\",\n \"[--toggle-hover-background:var(--toggle-focused-background)]/70 [--toggle-hover-foreground:var(--toggle-focused-foreground)]\",\n \"[--toggle-icon:color-mix(in_oklab,var(--toggle-focused-foreground)_50%,var(--toggle-focused-background))]\",\n \"relative isolate\",\n \"inline-flex items-center justify-center font-medium text-(--toggle-foreground) outline-hidden\",\n \"inset-ring inset-ring-transparent\",\n \"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90\",\n \"forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]\",\n \"*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon)\",\n ],\n variants: {\n size: {\n xs: [\n \"gap-x-1 px-1.5 py-1 text-sm sm:px-1 sm:py-1 sm:text-xs/4\",\n \"*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n \"*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n ],\n sm: [\n \"gap-x-1.5 px-2 py-1 sm:px-1.5 sm:py-1 sm:text-sm/5\",\n \"*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4\",\n \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n ],\n md: [\n \"gap-x-2 px-2.5 py-1.5 sm:px-2 sm:py-1 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n ],\n lg: [\n \"gap-x-2 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n ],\n \"sq-xs\":\n \"touch-target size-8 *:data-[slot=icon]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:*:data-[slot=loader]:size-3\",\n \"sq-sm\":\n \"touch-target size-9 *:data-[slot=icon]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-md\":\n \"touch-target size-10 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:*:data-[slot=loader]:size-4.5\",\n \"sq-lg\":\n \"touch-target size-11 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:*:data-[slot=loader]:size-5\",\n },\n isCircle: {\n true: \"rounded-full\",\n false: \"rounded-lg\",\n },\n isSelected: {\n true: \"bg-(--toggle-selected-background) text-(--toggle-selected-foreground) [--toggle-icon:var(--primary-foreground)] hover:bg-(--toggle-selected-background)/90\",\n },\n isFocused: {\n true: \"not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground) not-selected:[--toggle-icon:var(--toggle-focused-foreground)]\",\n },\n isHovered: {\n true: \"enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground) enabled:not-selected:[--toggle-icon:var(--toggle-hover-foreground)]\",\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n isCircle: false,\n },\n compoundVariants: [\n {\n size: [\"xs\", \"sq-xs\"],\n className:\n \"rounded-md *:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n },\n ],\n})\n\ninterface ToggleProps\n extends ToggleButtonProps, VariantProps {\n ref?: React.Ref\n}\nconst Toggle = ({ className, size, ref, ...props }: ToggleProps) => {\n return (\n \n twMerge(\n toggleStyles({\n ...renderProps,\n size,\n className,\n })\n )\n )}\n {...props}\n />\n )\n}\nexport { Toggle }\nexport type { ToggleProps }\n", + "content": "\"use client\"\n\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type { ToggleButtonProps } from \"react-aria-components/ToggleButton\"\nimport { ToggleButton } from \"react-aria-components/ToggleButton\"\nimport { twMerge } from \"tailwind-merge\"\nimport { tv, type VariantProps } from \"tailwind-variants\"\n\nconst toggleStyles = tv({\n base: [\n \"[--toggle-foreground:var(--color-foreground)] [--toggle-selected-background:var(--color-accent)] [--toggle-selected-foreground:var(--color-accent-foreground)]\",\n \"[--toggle-focused-background:var(--color-accent)] [--toggle-focused-foreground:var(--color-accent-foreground)]\",\n \"[--toggle-hover-background:var(--toggle-focused-background)]/70 [--toggle-hover-foreground:var(--toggle-focused-foreground)]\",\n \"relative isolate\",\n \"inline-flex items-center justify-center font-medium text-(--toggle-foreground) outline-hidden\",\n \"inset-ring inset-ring-transparent\",\n \"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center\",\n \"[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center\",\n \"*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center\",\n \"[&_svg:not([class*='size-'])]:size-4\",\n \"[&_svg]:shrink-0\",\n ],\n variants: {\n size: {\n xs: [\n \"gap-x-1 px-1.5 py-1 text-sm sm:px-1 sm:py-1 sm:text-xs/4\",\n \"*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3\",\n \"[&_svg.lucide]:size-3.5 sm:[&_svg.lucide]:size-3\",\n \"*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n ],\n sm: [\n \"gap-x-1.5 px-2 py-1 sm:px-1.5 sm:py-1 sm:text-sm/5\",\n \"*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-4.5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n ],\n md: [\n \"gap-x-2 px-2.5 py-1.5 sm:px-2 sm:py-1 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n ],\n lg: [\n \"gap-x-2 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/6\",\n \"*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5\",\n \"[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4.5\",\n \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n ],\n \"sq-xs\":\n \"touch-target size-8 *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3 sm:*:data-[slot=loader]:size-3\",\n \"sq-sm\":\n \"touch-target size-9 *:data-[slot=icon]:size-4.5 [&_svg.lucide]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4\",\n \"sq-md\":\n \"touch-target size-10 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:[&_svg.lucide]:size-4.5 sm:*:data-[slot=loader]:size-4.5\",\n \"sq-lg\":\n \"touch-target size-11 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:[&_svg.lucide]:size-5 sm:*:data-[slot=loader]:size-5\",\n },\n isCircle: {\n true: \"rounded-full\",\n false: \"rounded-lg\",\n },\n isSelected: {\n true: \"bg-(--toggle-selected-background) text-(--toggle-selected-foreground) hover:bg-(--toggle-selected-background)/90\",\n },\n isFocused: {\n true: \"not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground)\",\n },\n isHovered: {\n true: \"enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground)\",\n },\n isDisabled: {\n true: \"opacity-50 forced-colors:text-[GrayText]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n isCircle: false,\n },\n compoundVariants: [\n {\n size: [\"xs\", \"sq-xs\"],\n className:\n \"rounded-md *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3\",\n },\n ],\n})\n\ninterface ToggleProps\n extends ToggleButtonProps, VariantProps {\n ref?: React.Ref\n}\nconst Toggle = ({ className, size, isCircle, ref, ...props }: ToggleProps) => {\n return (\n \n twMerge(\n toggleStyles({\n ...renderProps,\n size,\n isCircle,\n className,\n })\n )\n )}\n {...props}\n />\n )\n}\nexport { Toggle }\nexport type { ToggleProps }\n", "type": "registry:ui" } ], diff --git a/apps/preskok/registry.json b/apps/preskok/registry.json index 48d61cb47..f8ad7a685 100644 --- a/apps/preskok/registry.json +++ b/apps/preskok/registry.json @@ -197,8 +197,8 @@ "--primary-foreground": "oklch(1 0 0)", "--secondary": "oklch(0.238 0.007 34.298)", "--secondary-foreground": "oklch(0.985 0.001 106.423)", - "--accent": "oklch(0.546 0.245 262.881)", - "--accent-foreground": "oklch(1 0 0)", + "--accent": "oklch(0.269 0.007 34.298)", + "--accent-foreground": "oklch(0.985 0.001 106.423)", "--muted": "oklch(0.216 0.006 56.043)", "--muted-foreground": "oklch(0.709 0.01 56.259)", "--overlay": "oklch(0.186 0.006 56.043)", diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/badge.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/badge.tsx index 5df5f462d..b518e49a6 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/badge.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/badge.tsx @@ -10,9 +10,7 @@ const badgeIntents = { "dark:bg-primary/15 text-primary dark:text-(--badge-primary-foreground) dark:group-hover:bg-primary/25", "group-hover:bg-[color-mix(in_oklab,var(--color-primary)_15%,white_85%)] dark:group-hover:bg-primary/20", ], - secondary: [ - "bg-secondary group-hover:bg-muted dark:bg-secondary dark:group-hover:bg-muted text-secondary-foreground", - ], + secondary: ["bg-secondary group-hover:bg-border text-secondary-foreground"], success: [ "bg-emerald-500/15 text-emerald-700 group-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20", ], diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/button.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/button.tsx index a5d188357..a9fe9066a 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/button.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/button.tsx @@ -12,12 +12,12 @@ import { Loader } from "@/registry/preskok/ui/preskok-ui/loader" const buttonStyles = tv({ base: [ - "[--btn-border:var(--color-foreground)]/15 [--btn-icon-active:var(--btn-foreground)] [--btn-outline:var(--btn-background)] [--btn-ring:var(--btn-background)]/20", + "[--btn-border:var(--color-foreground)]/15 [--btn-icon:var(--btn-foreground)] [--btn-outline:var(--btn-background)] [--btn-ring:var(--btn-background)]/20", "bg-(--btn-background) pressed:bg-(--btn-overlay) text-(--btn-foreground) outline-(--btn-outline) ring-(--btn-ring) hover:bg-(--btn-overlay) focus-visible:bg-(--btn-overlay)", "relative border border-(--btn-border) isolate inline-flex items-center justify-center font-medium", "focus:outline-0 focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-background transition-transform duration-150", - "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) pressed:*:data-[slot=icon]:text-(--btn-icon-active) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:my-1 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]", - "[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:my-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center [&_svg.lucide]:text-(--btn-icon) pressed:[&_svg.lucide]:text-(--btn-icon-active) focus-visible:[&_svg.lucide]:text-(--btn-icon-active)/80 hover:[&_svg.lucide]:text-(--btn-icon-active)/90 sm:[&_svg.lucide]:my-1", + "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1 forced-colors:[--btn-icon:ButtonText]", + "[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:my-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center [&_svg.lucide]:text-(--btn-icon) sm:[&_svg.lucide]:my-1", "*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:my-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:my-1", "[&_svg:not([class*='size-'])]:size-4", "[&_svg]:shrink-0", @@ -25,17 +25,17 @@ const buttonStyles = tv({ variants: { intent: { primary: - "[--btn-background:var(--color-primary)] [--btn-foreground:var(--color-primary-foreground)] [--btn-icon:color-mix(in_oklab,var(--primary-foreground)_60%,var(--primary))] [--btn-overlay:var(--color-primary)]/85", + "[--btn-background:var(--color-primary)] [--btn-foreground:var(--color-primary-foreground)] [--btn-overlay:var(--color-primary)]/85", secondary: - "[--btn-background:var(--color-secondary)] [--btn-foreground:var(--color-secondary-foreground)] [--btn-icon:var(--color-muted-foreground)] [--btn-outline:var(--color-secondary-foreground)] [--btn-overlay:var(--color-secondary)]/85 [--btn-ring:var(--color-muted-foreground)]/20", + "[--btn-background:var(--color-secondary)] [--btn-foreground:var(--color-secondary-foreground)] [--btn-outline:var(--color-secondary-foreground)] [--btn-overlay:var(--color-secondary)]/85 [--btn-ring:var(--color-muted-foreground)]/20", warning: - "[--btn-background:var(--color-warning)] [--btn-foreground:var(--color-warning-foreground)] [--btn-icon:color-mix(in_oklab,var(--warning-foreground)_60%,var(--warning))] [--btn-overlay:var(--color-warning)]/85", + "[--btn-background:var(--color-warning)] [--btn-foreground:var(--color-warning-foreground)] [--btn-overlay:var(--color-warning)]/85", danger: - "[--btn-background:var(--color-destructive)] [--btn-foreground:var(--color-destructive-foreground)] [--btn-icon:color-mix(in_oklab,var(--destructive-foreground)_60%,var(--destructive))] [--btn-overlay:var(--color-destructive)]/85", + "[--btn-background:var(--color-destructive)] [--btn-foreground:var(--color-destructive-foreground)] [--btn-overlay:var(--color-destructive)]/85", outline: - "border-border [--btn-background:transparent] [--btn-icon:var(--color-muted-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-muted)] [--btn-ring:var(--color-ring)]/20", + "border-border [--btn-background:transparent] [--btn-foreground:var(--color-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-accent)] [--btn-ring:var(--color-ring)]/20", plain: - "border-transparent [--btn-background:transparent] [--btn-icon:var(--color-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-muted)] [--btn-ring:var(--color-ring)]/20", + "border-transparent [--btn-background:transparent] [--btn-foreground:var(--color-foreground)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-accent)] [--btn-ring:var(--color-ring)]/20", }, size: { xs: [ diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/command-menu.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/command-menu.tsx index f376ee59d..c921fd2a2 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/command-menu.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/command-menu.tsx @@ -181,7 +181,7 @@ const CommandMenuSearch = ({ {escapeButton && ( diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/dropdown.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/dropdown.tsx index a9c9f69af..d19803f6f 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/dropdown.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/dropdown.tsx @@ -76,21 +76,13 @@ const dropdownItemStyles = tv({ true: "opacity-50 forced-colors:text-[GrayText]", }, isSelected: { - true: "**:data-[slot=icon]:text-accent-foreground", + true: "**:data-[slot=icon]:text-foreground", }, isFocused: { - true: [ - "**:data-[slot=icon]:text-accent-foreground **:[kbd]:text-accent-foreground", - "bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]", - "[&_.text-muted-foreground]:text-accent-foreground/80 *:[[slot=description]]:text-accent-foreground *:[[slot=label]]:text-accent-foreground", - ], + true: "bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]", }, isHovered: { - true: [ - "**:data-[slot=icon]:text-accent-foreground **:[kbd]:text-accent-foreground", - "bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]", - "[&_.text-muted-foreground]:text-accent-foreground/80 *:[[slot=description]]:text-accent-foreground *:[[slot=label]]:text-accent-foreground", - ], + true: "bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]", }, }, }) @@ -188,10 +180,7 @@ type DropdownKeyboardProps = React.ComponentProps & { const DropdownKeyboard = ({ className, ...props }: DropdownKeyboardProps) => { return ( ) diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/grid-list.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/grid-list.tsx index f1c92ef62..9cc5ff8da 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/grid-list.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/grid-list.tsx @@ -27,7 +27,7 @@ const GridList = ({ { className, (className, { isHovered, isFocusVisible, isSelected }) => twMerge( - "[--grid-list-item-background-active:color-mix(in_oklab,var(--color-primary)_10%,transparent)] [--grid-list-item-text-active:var(--color-primary)]", "group inset-ring-border rounded-lg px-3 py-2.5 inset-ring", "relative min-w-0 outline-hidden [--mr-icon:--spacing(2)]", "flex min-w-0 cursor-default items-center gap-2 sm:gap-2.5", - "dragging:cursor-grab dragging:opacity-70 dragging:**:[[slot=drag]]:text-(--grid-list-item-text-active)", + "dragging:cursor-grab dragging:opacity-70 dragging:**:[[slot=drag]]:text-foreground", "**:data-[slot=icon]:text-muted-foreground **:data-[slot=icon]:size-5 **:data-[slot=icon]:shrink-0 sm:**:data-[slot=icon]:size-4", - (isSelected || isHovered || isFocusVisible) && - "inset-ring-ring/70 bg-(--grid-list-item-background-active) text-(--grid-list-item-text-active) **:[.text-muted-foreground]:text-(--grid-list-item-text-active)/60", + isHovered && "bg-accent/50", + isSelected && "bg-accent", + isFocusVisible && "inset-ring-ring", "href" in props && "cursor-pointer", className ) @@ -150,7 +150,7 @@ const GridListSpacer = ({
) @@ -178,7 +178,11 @@ interface GridListTextProps extends TextProps { } const GridListLabel = ({ className, ref, ...props }: GridListTextProps) => ( - + ) const GridListDescription = ({ @@ -189,7 +193,10 @@ const GridListDescription = ({ ) diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/input.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/input.tsx index 28ed0d77e..2138b158e 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/input.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/input.tsx @@ -75,7 +75,7 @@ interface InputGroupAddonProps extends React.ComponentProps<"div"> { const inputGroupAddonStyles = { "inline-start": "order-first pl-2 has-[>button]:pl-px has-[>kbd]:pl-1.5", - "inline-end": "order-last pr-2 has-[>button]:pr-px has-[>kbd]:pr-1.5", + "inline-end": "order-last pr-1.25 has-[>button]:pr-px has-[>kbd]:pr-1.5", "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2", "block-end": diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/menu.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/menu.tsx index 6f1ac4c54..b3b52a9a6 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/menu.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/menu.tsx @@ -125,8 +125,7 @@ const MenuItem = ({ className, intent, children, ...props }: MenuItemProps) => { "open:bg-destructive/10 open:text-destructive", intent === "warning" && "open:bg-warning/10 open:text-warning", - intent === undefined && - "open:bg-accent open:text-accent-foreground open:*:data-[slot=icon]:text-accent-foreground open:*:[.text-muted-foreground]:text-accent-foreground", + intent === undefined && "open:bg-accent", className ) : className, diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/select.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/select.tsx index f4bd0a2fd..039d112cd 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/select.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/select.tsx @@ -102,8 +102,8 @@ const SelectTrigger = ({ "enabled:hover:border-muted-foreground/30", "group-open/select:border-ring/70 group-open/select:ring-ring/20 group-open/select:ring-3", "group-open/select:invalid:border-destructive/70 group-open/select:invalid:ring-destructive/20 group-invalid/select:border-destructive/70 group-invalid/select:ring-destructive/20 group-invalid/select:enabled:hover:border-destructive/80 group-focus/select:group-invalid/select:border-destructive/70 group-focus/select:group-invalid/select:ring-destructive/20 group-focus/select:group-invalid/select:enabled:hover:border-destructive/80 group-open/select:invalid:ring-3", - "pressed:*:data-[slot=icon]:text-(--btn-icon-active) *:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 enabled:hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]", - "*:data-[slot=loader]:size-5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:size-4", + "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center sm:*:data-[slot=icon]:size-4", + "*:data-[slot=loader]:size-5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center sm:*:data-[slot=loader]:size-4", "forced-colors:group-invalid/select:border-[Mark] forced-colors:group-focus/select:border-[Highlight] forced-colors:group-focus/select:group-invalid/select:border-[Mark]", "group-disabled/select:bg-muted group-disabled/select:opacity-50 forced-colors:group-disabled/select:border-[GrayText] forced-colors:group-disabled/select:text-[GrayText]", "in-disabled:bg-muted in-disabled:opacity-50 forced-colors:in-disabled:border-[GrayText] forced-colors:in-disabled:text-[GrayText]", diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/tabs.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/tabs.tsx index 296a9cee1..c85237074 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/tabs.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/tabs.tsx @@ -91,7 +91,7 @@ const Tab = ({ children, className, ref, ...props }: TabProps) => { "relative isolate flex cursor-default items-center text-sm/6 font-medium whitespace-nowrap outline-hidden transition", "px-(--tab-gutter-x) py-(--tab-gutter-y)", "*:data-[slot=icon]:text-muted-foreground selected:*:data-[slot=icon]:text-primary *:data-[slot=icon]:mr-2 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center", - "selected:text-primary text-muted-foreground hover:bg-secondary selected:hover:bg-primary/20 hover:text-foreground selected:hover:text-primary focus:ring-0", + "selected:text-primary text-muted-foreground hover:bg-accent selected:hover:bg-accent hover:text-foreground selected:hover:text-primary focus:ring-0", "disabled:opacity-50", "href" in props ? "cursor-pointer" : "cursor-default", className diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/toggle-group.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/toggle-group.tsx index 3fac64264..17032a8fe 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/toggle-group.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/toggle-group.tsx @@ -59,20 +59,14 @@ const ToggleGroup = ({ className={cx( [ "[--toggle-group-radius:var(--radius-lg)] [--toggle-gutter:--spacing(0.5)]", - "[--toggle-foreground:var(--color-foreground)] [--toggle-selected-background:var(--color-muted)]/90 [--toggle-selected-foreground:var(--color-foreground)]", - "[--toggle-focused-background:var(--color-muted)] [--toggle-focused-foreground:var(--color-foreground)]", + "[--toggle-foreground:var(--color-foreground)] [--toggle-selected-background:var(--color-accent)] [--toggle-selected-foreground:var(--color-accent-foreground)]", + "[--toggle-focused-background:var(--color-accent)] [--toggle-focused-foreground:var(--color-accent-foreground)]", "[--toggle-hover-background:var(--toggle-focused-background)]/70 [--toggle-hover-foreground:var(--toggle-focused-foreground)]", - "[--toggle-icon:color-mix(in_oklab,var(--toggle-focused-foreground)_50%,var(--toggle-focused-background))]", "inset-ring-border inline-flex overflow-hidden p-(--toggle-gutter) inset-ring", orientation === "horizontal" ? "flex-row" : "flex-col", - selectionMode === "single" ? "gap-(--toggle-gutter)" : "gap-0", + "gap-(--toggle-gutter)", isCircle ? "rounded-full" : "rounded-(--toggle-group-radius)", - selectionMode === "single" && - isCircle && - "*:data-[slot=toggle-group-item]:rounded-full", - selectionMode === "multiple" && - isCircle && - "*:data-[slot=toggle-group-item]:first:rounded-l-full *:data-[slot=toggle-group-item]:last:rounded-r-full", + isCircle && "*:data-[slot=toggle-group-item]:rounded-full", ], className )} @@ -91,8 +85,10 @@ const toggleGroupItemStyles = tv({ "relative isolate", "inline-flex flex-row items-center font-medium text-(--toggle-foreground) outline-hidden", "inset-ring inset-ring-transparent", - "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90", - "forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]", + "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center", + "[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center", + "[&_svg:not([class*='size-'])]:size-4", + "[&_svg]:shrink-0", ], variants: { orientation: { @@ -101,46 +97,51 @@ const toggleGroupItemStyles = tv({ }, selectionMode: { single: "rounded-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]", - multiple: "rounded-none", + multiple: + "rounded-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]", }, size: { xs: [ "min-h-8 gap-x-1.5 px-1.5 py-1 text-sm sm:min-h-7 sm:px-1 sm:py-1 sm:text-xs/4", "*:data-[slot=icon]:-mx-px *:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3", + "[&_svg.lucide]:-mx-px [&_svg.lucide]:size-3.5 sm:[&_svg.lucide]:size-3", "*:data-[slot=loader]:-mx-px *:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3", ], sm: [ "min-h-9 gap-x-1.5 px-2 py-1 sm:min-h-8 sm:px-1.5 sm:py-1 sm:text-sm/5", "*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4", + "[&_svg.lucide]:size-4.5 sm:[&_svg.lucide]:size-4", "*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4", ], md: [ "min-h-10 gap-x-2 px-2.5 py-1.5 sm:min-h-9 sm:px-2 sm:py-1 sm:text-sm/6", "*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4", + "[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4", "*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4", ], lg: [ "min-h-11 gap-x-2 px-3 py-2 sm:min-h-10 sm:px-2.5 sm:py-1.5 sm:text-sm/6", "*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5", + "[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4.5", "*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5", ], "sq-xs": - "touch-target size-8 *:data-[slot=icon]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:*:data-[slot=loader]:size-3", + "touch-target size-8 *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3 sm:*:data-[slot=loader]:size-3", "sq-sm": - "touch-target size-9 *:data-[slot=icon]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4", + "touch-target size-9 *:data-[slot=icon]:size-4.5 [&_svg.lucide]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4", "sq-md": - "touch-target size-10 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:*:data-[slot=loader]:size-4.5", + "touch-target size-10 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:[&_svg.lucide]:size-4.5 sm:*:data-[slot=loader]:size-4.5", "sq-lg": - "touch-target size-11 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:*:data-[slot=loader]:size-5", + "touch-target size-11 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:[&_svg.lucide]:size-5 sm:*:data-[slot=loader]:size-5", }, isSelected: { - true: "inset-ring-foreground/20 bg-(--toggle-selected-background) text-(--toggle-selected-foreground) [--toggle-icon:var(--primary-foreground)] hover:bg-(--toggle-selected-background)/90", + true: "bg-(--toggle-selected-background) text-(--toggle-selected-foreground) hover:bg-(--toggle-selected-background)/90", }, isFocused: { - true: "not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground) not-selected:[--toggle-icon:var(--toggle-focused-foreground)]", + true: "not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground)", }, isHovered: { - true: "enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground) enabled:not-selected:[--toggle-icon:var(--toggle-hover-foreground)]", + true: "enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground)", }, isDisabled: { true: "opacity-50 forced-colors:text-[GrayText]", @@ -149,20 +150,7 @@ const toggleGroupItemStyles = tv({ defaultVariants: { size: "md", }, - compoundVariants: [ - { - selectionMode: "multiple", - orientation: "horizontal", - className: - "not-first:-ml-px first:rounded-l-[calc(var(--toggle-group-radius)-var(--toggle-gutter))] last:rounded-r-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]", - }, - { - selectionMode: "multiple", - orientation: "vertical", - className: - "not-first:-mt-px first:rounded-t-[calc(var(--toggle-group-radius)-var(--toggle-gutter))] last:rounded-b-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]", - }, - ], + compoundVariants: [], }) const ToggleGroupItem = ({ className, ...props }: ToggleGroupItemProps) => { diff --git a/apps/preskok/registry/preskok/ui/preskok-ui/toggle.tsx b/apps/preskok/registry/preskok/ui/preskok-ui/toggle.tsx index 08260e1c8..5f6cc8f53 100644 --- a/apps/preskok/registry/preskok/ui/preskok-ui/toggle.tsx +++ b/apps/preskok/registry/preskok/ui/preskok-ui/toggle.tsx @@ -8,60 +8,65 @@ import { tv, type VariantProps } from "tailwind-variants" const toggleStyles = tv({ base: [ - "[--toggle-foreground:var(--color-foreground)] [--toggle-selected-background:var(--color-muted)]/90 [--toggle-selected-foreground:var(--color-foreground)]", - "[--toggle-focused-background:var(--color-muted)] [--toggle-focused-foreground:var(--color-foreground)]", + "[--toggle-foreground:var(--color-foreground)] [--toggle-selected-background:var(--color-accent)] [--toggle-selected-foreground:var(--color-accent-foreground)]", + "[--toggle-focused-background:var(--color-accent)] [--toggle-focused-foreground:var(--color-accent-foreground)]", "[--toggle-hover-background:var(--toggle-focused-background)]/70 [--toggle-hover-foreground:var(--toggle-focused-foreground)]", - "[--toggle-icon:color-mix(in_oklab,var(--toggle-focused-foreground)_50%,var(--toggle-focused-background))]", "relative isolate", "inline-flex items-center justify-center font-medium text-(--toggle-foreground) outline-hidden", "inset-ring inset-ring-transparent", - "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90", - "forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]", - "*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon)", + "*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center", + "[&_svg.lucide]:-mx-0.5 [&_svg.lucide]:shrink-0 [&_svg.lucide]:self-center", + "*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center", + "[&_svg:not([class*='size-'])]:size-4", + "[&_svg]:shrink-0", ], variants: { size: { xs: [ "gap-x-1 px-1.5 py-1 text-sm sm:px-1 sm:py-1 sm:text-xs/4", "*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3", + "[&_svg.lucide]:size-3.5 sm:[&_svg.lucide]:size-3", "*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3", ], sm: [ "gap-x-1.5 px-2 py-1 sm:px-1.5 sm:py-1 sm:text-sm/5", "*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4", + "[&_svg.lucide]:size-4.5 sm:[&_svg.lucide]:size-4", "*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4", ], md: [ "gap-x-2 px-2.5 py-1.5 sm:px-2 sm:py-1 sm:text-sm/6", "*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4", + "[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4", "*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4", ], lg: [ "gap-x-2 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/6", "*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5", + "[&_svg.lucide]:size-5 sm:[&_svg.lucide]:size-4.5", "*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5", ], "sq-xs": - "touch-target size-8 *:data-[slot=icon]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:*:data-[slot=loader]:size-3", + "touch-target size-8 *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3 sm:*:data-[slot=loader]:size-3", "sq-sm": - "touch-target size-9 *:data-[slot=icon]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4", + "touch-target size-9 *:data-[slot=icon]:size-4.5 [&_svg.lucide]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:[&_svg.lucide]:size-4 sm:*:data-[slot=loader]:size-4", "sq-md": - "touch-target size-10 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:*:data-[slot=loader]:size-4.5", + "touch-target size-10 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4.5 sm:[&_svg.lucide]:size-4.5 sm:*:data-[slot=loader]:size-4.5", "sq-lg": - "touch-target size-11 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:*:data-[slot=loader]:size-5", + "touch-target size-11 *:data-[slot=icon]:size-5 [&_svg.lucide]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-5 sm:[&_svg.lucide]:size-5 sm:*:data-[slot=loader]:size-5", }, isCircle: { true: "rounded-full", false: "rounded-lg", }, isSelected: { - true: "bg-(--toggle-selected-background) text-(--toggle-selected-foreground) [--toggle-icon:var(--primary-foreground)] hover:bg-(--toggle-selected-background)/90", + true: "bg-(--toggle-selected-background) text-(--toggle-selected-foreground) hover:bg-(--toggle-selected-background)/90", }, isFocused: { - true: "not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground) not-selected:[--toggle-icon:var(--toggle-focused-foreground)]", + true: "not-selected:bg-(--toggle-focused-background) not-selected:text-(--toggle-focused-foreground)", }, isHovered: { - true: "enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground) enabled:not-selected:[--toggle-icon:var(--toggle-hover-foreground)]", + true: "enabled:not-selected:bg-(--toggle-hover-background) enabled:not-selected:text-(--toggle-hover-foreground)", }, isDisabled: { true: "opacity-50 forced-colors:text-[GrayText]", @@ -75,7 +80,7 @@ const toggleStyles = tv({ { size: ["xs", "sq-xs"], className: - "rounded-md *:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3", + "rounded-md *:data-[slot=icon]:size-3.5 [&_svg.lucide]:size-3.5 sm:*:data-[slot=icon]:size-3 sm:[&_svg.lucide]:size-3", }, ], }) @@ -84,7 +89,7 @@ interface ToggleProps extends ToggleButtonProps, VariantProps { ref?: React.Ref } -const Toggle = ({ className, size, ref, ...props }: ToggleProps) => { +const Toggle = ({ className, size, isCircle, ref, ...props }: ToggleProps) => { return ( { toggleStyles({ ...renderProps, size, + isCircle, className, }) ) diff --git a/apps/preskok/styles/globals.css b/apps/preskok/styles/globals.css index 8a3e65021..61abc7ea8 100644 --- a/apps/preskok/styles/globals.css +++ b/apps/preskok/styles/globals.css @@ -215,8 +215,8 @@ --secondary: oklch(0.238 0.007 34.298); --secondary-foreground: oklch(0.985 0.001 106.423); - --accent: oklch(0.546 0.245 262.881); - --accent-foreground: oklch(1 0 0); + --accent: oklch(0.269 0.007 34.298); + --accent-foreground: oklch(0.985 0.001 106.423); --muted: oklch(0.216 0.006 56.043); --muted-foreground: oklch(0.709 0.01 56.259); @@ -511,53 +511,63 @@ html.dark .shiki span { /* Tighter documentation typography — aligned to the shadcn/ui docs scale. Fumadocs' prose defaults run a little loose (1.75+ line-height, larger, heavier headings). These unlayered rules win over the plugin's `:where()` - selectors and pull the type/spacing in without touching node_modules. */ + selectors and pull the type/spacing in without touching node_modules. + Like the plugin, every element rule carries a `not-prose` escape hatch so + rendered components (e.g. docs previews) don't inherit article spacing. */ .prose { line-height: 1.6; } -.prose :where(p, li, blockquote) { +.prose + :where(p, li, blockquote):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) { line-height: 1.6; } -.prose :where(p) { +.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.875rem; /* 20px -> 14px */ margin-bottom: 0.875rem; } /* Lists + nested lists: tighter item rhythm. */ -.prose :where(ul, ol) { +.prose + :where(ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.875rem; margin-bottom: 0.875rem; } -.prose :where(li) { +.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.25rem; margin-bottom: 0.25rem; } -.prose :where(li > p) { +.prose + :where(li > p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Code blocks, images, tables, callouts: rein in the 2em block gaps. */ -.prose :where(figure, pre, img, table) { +.prose + :where(figure, pre, img, table):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) { margin-top: 1rem; margin-bottom: 1rem; } -.prose :where(hr) { +.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2rem; /* 48px -> 32px */ margin-bottom: 2rem; } -.prose :where(h1) { +.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 600; letter-spacing: -0.025em; } -.prose :where(h2) { +.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: var(--text-xl); /* 24px -> 20px */ line-height: 1.4; font-weight: 600; @@ -566,7 +576,7 @@ html.dark .shiki span { margin-bottom: 0.625rem; /* 24px -> 10px */ } -.prose :where(h3) { +.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: var(--text-lg); /* 20px -> 18px */ line-height: 1.4; font-weight: 600; @@ -575,7 +585,7 @@ html.dark .shiki span { margin-bottom: 0.5rem; } -.prose :where(h4) { +.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: 600; letter-spacing: -0.0125em; margin-top: 1.25rem; @@ -584,7 +594,11 @@ html.dark .shiki span { /* Preserve the plugin's "first element after a heading has no top margin" reset, which our spacing rules above would otherwise re-introduce. */ -.prose :where(h1, h2, h3, h4, hr) + * { +.prose + :where(h1, h2, h3, h4, hr):not( + :where([class~="not-prose"], [class~="not-prose"] *) + ) + + * { margin-top: 0; }