@bergetai/ui 0.15.0 → 0.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/alert/Alert.d.cts +1 -1
- package/dist/components/alert/Alert.d.mts +1 -1
- package/dist/components/alert-dialog/AlertDialog.cjs +26 -5
- package/dist/components/alert-dialog/AlertDialog.cjs.map +1 -1
- package/dist/components/alert-dialog/AlertDialog.d.cts.map +1 -1
- package/dist/components/alert-dialog/AlertDialog.d.mts.map +1 -1
- package/dist/components/alert-dialog/AlertDialog.mjs +26 -5
- package/dist/components/alert-dialog/AlertDialog.mjs.map +1 -1
- package/dist/components/badge/Badge.cjs +12 -3
- package/dist/components/badge/Badge.cjs.map +1 -1
- package/dist/components/badge/Badge.d.cts +1 -1
- package/dist/components/badge/Badge.d.cts.map +1 -1
- package/dist/components/badge/Badge.d.mts +1 -1
- package/dist/components/badge/Badge.d.mts.map +1 -1
- package/dist/components/badge/Badge.mjs +12 -3
- package/dist/components/badge/Badge.mjs.map +1 -1
- package/dist/components/box/Box.cjs +3 -1
- package/dist/components/box/Box.cjs.map +1 -1
- package/dist/components/box/Box.d.cts +2 -2
- package/dist/components/box/Box.d.mts +2 -2
- package/dist/components/box/Box.mjs +3 -1
- package/dist/components/box/Box.mjs.map +1 -1
- package/dist/components/bubble/index.d.cts +2 -0
- package/dist/components/bubble/index.d.mts +2 -0
- package/dist/components/button/Button.cjs +40 -6
- package/dist/components/button/Button.cjs.map +1 -1
- package/dist/components/button/Button.d.cts.map +1 -1
- package/dist/components/button/Button.d.mts.map +1 -1
- package/dist/components/button/Button.mjs +40 -6
- package/dist/components/button/Button.mjs.map +1 -1
- package/dist/components/card/Card.cjs +2 -2
- package/dist/components/card/Card.cjs.map +1 -1
- package/dist/components/card/Card.mjs +2 -2
- package/dist/components/card/Card.mjs.map +1 -1
- package/dist/components/checkbox/Checkbox.cjs +28 -11
- package/dist/components/checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/checkbox/Checkbox.d.cts.map +1 -1
- package/dist/components/checkbox/Checkbox.d.mts.map +1 -1
- package/dist/components/checkbox/Checkbox.mjs +28 -11
- package/dist/components/checkbox/Checkbox.mjs.map +1 -1
- package/dist/components/code-block/CodeBlock.cjs +10 -7
- package/dist/components/code-block/CodeBlock.cjs.map +1 -1
- package/dist/components/code-block/CodeBlock.mjs +10 -7
- package/dist/components/code-block/CodeBlock.mjs.map +1 -1
- package/dist/components/container/Container.cjs +16 -5
- package/dist/components/container/Container.cjs.map +1 -1
- package/dist/components/container/Container.d.cts.map +1 -1
- package/dist/components/container/Container.d.mts.map +1 -1
- package/dist/components/container/Container.mjs +16 -5
- package/dist/components/container/Container.mjs.map +1 -1
- package/dist/components/country-select/CountrySelect.cjs +22 -13
- package/dist/components/country-select/CountrySelect.cjs.map +1 -1
- package/dist/components/country-select/CountrySelect.mjs +22 -13
- package/dist/components/country-select/CountrySelect.mjs.map +1 -1
- package/dist/components/dialog/Dialog.cjs +23 -5
- package/dist/components/dialog/Dialog.cjs.map +1 -1
- package/dist/components/dialog/Dialog.d.cts.map +1 -1
- package/dist/components/dialog/Dialog.d.mts.map +1 -1
- package/dist/components/dialog/Dialog.mjs +23 -5
- package/dist/components/dialog/Dialog.mjs.map +1 -1
- package/dist/components/divider/Divider.cjs +5 -5
- package/dist/components/divider/Divider.cjs.map +1 -1
- package/dist/components/divider/Divider.mjs +5 -5
- package/dist/components/divider/Divider.mjs.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.cjs +8 -2
- package/dist/components/dropdown-menu/DropdownMenu.cjs.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.d.cts +2 -2
- package/dist/components/dropdown-menu/DropdownMenu.d.cts.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.d.mts +2 -2
- package/dist/components/dropdown-menu/DropdownMenu.d.mts.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.mjs +8 -2
- package/dist/components/dropdown-menu/DropdownMenu.mjs.map +1 -1
- package/dist/components/empty/Empty.cjs +4 -1
- package/dist/components/empty/Empty.cjs.map +1 -1
- package/dist/components/empty/Empty.d.cts.map +1 -1
- package/dist/components/empty/Empty.d.mts.map +1 -1
- package/dist/components/empty/Empty.mjs +4 -1
- package/dist/components/empty/Empty.mjs.map +1 -1
- package/dist/components/grid/Grid.cjs +11 -1
- package/dist/components/grid/Grid.cjs.map +1 -1
- package/dist/components/grid/Grid.d.cts +2 -2
- package/dist/components/grid/Grid.d.mts +2 -2
- package/dist/components/grid/Grid.mjs +11 -1
- package/dist/components/grid/Grid.mjs.map +1 -1
- package/dist/components/input-group/InputGroup.cjs +50 -0
- package/dist/components/input-group/InputGroup.cjs.map +1 -0
- package/dist/components/input-group/InputGroup.d.cts +33 -0
- package/dist/components/input-group/InputGroup.d.cts.map +1 -0
- package/dist/components/input-group/InputGroup.d.mts +33 -0
- package/dist/components/input-group/InputGroup.d.mts.map +1 -0
- package/dist/components/input-group/InputGroup.mjs +45 -0
- package/dist/components/input-group/InputGroup.mjs.map +1 -0
- package/dist/components/input-group/index.d.cts +3 -0
- package/dist/components/input-group/index.d.mts +3 -0
- package/dist/components/item/Item.cjs +4 -1
- package/dist/components/item/Item.cjs.map +1 -1
- package/dist/components/item/Item.d.cts.map +1 -1
- package/dist/components/item/Item.d.mts.map +1 -1
- package/dist/components/item/Item.mjs +4 -1
- package/dist/components/item/Item.mjs.map +1 -1
- package/dist/components/link/Link.cjs +32 -8
- package/dist/components/link/Link.cjs.map +1 -1
- package/dist/components/link/Link.d.cts +1 -1
- package/dist/components/link/Link.d.cts.map +1 -1
- package/dist/components/link/Link.d.mts +1 -1
- package/dist/components/link/Link.d.mts.map +1 -1
- package/dist/components/link/Link.mjs +32 -8
- package/dist/components/link/Link.mjs.map +1 -1
- package/dist/components/list/List.cjs +15 -6
- package/dist/components/list/List.cjs.map +1 -1
- package/dist/components/list/List.d.cts.map +1 -1
- package/dist/components/list/List.d.mts.map +1 -1
- package/dist/components/list/List.mjs +15 -6
- package/dist/components/list/List.mjs.map +1 -1
- package/dist/components/message/index.d.cts +2 -0
- package/dist/components/message/index.d.mts +2 -0
- package/dist/components/message-scroller/index.d.cts +2 -0
- package/dist/components/message-scroller/index.d.mts +2 -0
- package/dist/components/model-card/ModelCard.cjs +12 -9
- package/dist/components/model-card/ModelCard.cjs.map +1 -1
- package/dist/components/model-card/ModelCard.mjs +12 -9
- package/dist/components/model-card/ModelCard.mjs.map +1 -1
- package/dist/components/navigation-menu/NavigationMenu.cjs +43 -7
- package/dist/components/navigation-menu/NavigationMenu.cjs.map +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.cts.map +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.mts.map +1 -1
- package/dist/components/navigation-menu/NavigationMenu.mjs +43 -7
- package/dist/components/navigation-menu/NavigationMenu.mjs.map +1 -1
- package/dist/components/progress/Progress.cjs +4 -1
- package/dist/components/progress/Progress.cjs.map +1 -1
- package/dist/components/progress/Progress.mjs +4 -1
- package/dist/components/progress/Progress.mjs.map +1 -1
- package/dist/components/search-input/SearchInput.cjs +1 -1
- package/dist/components/search-input/SearchInput.cjs.map +1 -1
- package/dist/components/search-input/SearchInput.mjs +1 -1
- package/dist/components/search-input/SearchInput.mjs.map +1 -1
- package/dist/components/sidebar/Sidebar.cjs +15 -6
- package/dist/components/sidebar/Sidebar.cjs.map +1 -1
- package/dist/components/sidebar/Sidebar.d.cts.map +1 -1
- package/dist/components/sidebar/Sidebar.d.mts.map +1 -1
- package/dist/components/sidebar/Sidebar.mjs +15 -6
- package/dist/components/sidebar/Sidebar.mjs.map +1 -1
- package/dist/components/slider/Slider.cjs +23 -0
- package/dist/components/slider/Slider.cjs.map +1 -0
- package/dist/components/slider/Slider.d.cts +20 -0
- package/dist/components/slider/Slider.d.cts.map +1 -0
- package/dist/components/slider/Slider.d.mts +20 -0
- package/dist/components/slider/Slider.d.mts.map +1 -0
- package/dist/components/slider/Slider.mjs +23 -0
- package/dist/components/slider/Slider.mjs.map +1 -0
- package/dist/components/slider/index.d.cts +2 -0
- package/dist/components/slider/index.d.mts +2 -0
- package/dist/components/switch/Switch.cjs +42 -11
- package/dist/components/switch/Switch.cjs.map +1 -1
- package/dist/components/switch/Switch.d.cts.map +1 -1
- package/dist/components/switch/Switch.d.mts.map +1 -1
- package/dist/components/switch/Switch.mjs +42 -11
- package/dist/components/switch/Switch.mjs.map +1 -1
- package/dist/components/table/Table.cjs +22 -5
- package/dist/components/table/Table.cjs.map +1 -1
- package/dist/components/table/Table.d.cts.map +1 -1
- package/dist/components/table/Table.d.mts.map +1 -1
- package/dist/components/table/Table.mjs +22 -5
- package/dist/components/table/Table.mjs.map +1 -1
- package/dist/components/theme-provider/ThemeToggle.cjs +9 -3
- package/dist/components/theme-provider/ThemeToggle.cjs.map +1 -1
- package/dist/components/theme-provider/ThemeToggle.mjs +9 -3
- package/dist/components/theme-provider/ThemeToggle.mjs.map +1 -1
- package/dist/components/tooltip/Tooltip.d.cts +1 -1
- package/dist/components/tooltip/Tooltip.d.mts +1 -1
- package/dist/components/typography/Typography.cjs +19 -13
- package/dist/components/typography/Typography.cjs.map +1 -1
- package/dist/components/typography/Typography.d.cts.map +1 -1
- package/dist/components/typography/Typography.d.mts.map +1 -1
- package/dist/components/typography/Typography.mjs +19 -13
- package/dist/components/typography/Typography.mjs.map +1 -1
- package/dist/components/window-frame/WindowFrame.cjs +18 -8
- package/dist/components/window-frame/WindowFrame.cjs.map +1 -1
- package/dist/components/window-frame/WindowFrame.mjs +18 -8
- package/dist/components/window-frame/WindowFrame.mjs.map +1 -1
- package/dist/index.cjs +49 -1
- package/dist/index.d.cts +12 -1
- package/dist/index.d.mts +12 -1
- package/dist/index.mjs +8 -2
- package/dist/primitives/bubble.cjs +80 -0
- package/dist/primitives/bubble.cjs.map +1 -0
- package/dist/primitives/bubble.d.cts +19 -0
- package/dist/primitives/bubble.d.cts.map +1 -0
- package/dist/primitives/bubble.d.mts +19 -0
- package/dist/primitives/bubble.d.mts.map +1 -0
- package/dist/primitives/bubble.mjs +75 -0
- package/dist/primitives/bubble.mjs.map +1 -0
- package/dist/primitives/button.cjs +1 -2
- package/dist/primitives/button.cjs.map +1 -1
- package/dist/primitives/button.d.cts +2 -2
- package/dist/primitives/button.d.cts.map +1 -1
- package/dist/primitives/button.d.mts +2 -2
- package/dist/primitives/button.d.mts.map +1 -1
- package/dist/primitives/button.mjs +1 -2
- package/dist/primitives/button.mjs.map +1 -1
- package/dist/primitives/field.d.cts +1 -1
- package/dist/primitives/field.d.mts +1 -1
- package/dist/primitives/input-group.cjs +37 -1
- package/dist/primitives/input-group.cjs.map +1 -1
- package/dist/primitives/input-group.d.cts +21 -0
- package/dist/primitives/input-group.d.cts.map +1 -0
- package/dist/primitives/input-group.d.mts +21 -0
- package/dist/primitives/input-group.d.mts.map +1 -0
- package/dist/primitives/input-group.mjs +34 -2
- package/dist/primitives/input-group.mjs.map +1 -1
- package/dist/primitives/item.d.cts +1 -1
- package/dist/primitives/item.d.mts +1 -1
- package/dist/primitives/message-scroller.cjs +69 -0
- package/dist/primitives/message-scroller.cjs.map +1 -0
- package/dist/primitives/message-scroller.d.cts +13 -0
- package/dist/primitives/message-scroller.d.cts.map +1 -0
- package/dist/primitives/message-scroller.d.mts +13 -0
- package/dist/primitives/message-scroller.d.mts.map +1 -0
- package/dist/primitives/message-scroller.mjs +62 -0
- package/dist/primitives/message-scroller.mjs.map +1 -0
- package/dist/primitives/message.cjs +58 -0
- package/dist/primitives/message.cjs.map +1 -0
- package/dist/primitives/message.d.cts +13 -0
- package/dist/primitives/message.d.cts.map +1 -0
- package/dist/primitives/message.d.mts +13 -0
- package/dist/primitives/message.d.mts.map +1 -0
- package/dist/primitives/message.mjs +51 -0
- package/dist/primitives/message.mjs.map +1 -0
- package/dist/primitives/sidebar.cjs +1 -1
- package/dist/primitives/sidebar.mjs +1 -1
- package/dist/primitives/slider.cjs +35 -0
- package/dist/primitives/slider.cjs.map +1 -0
- package/dist/primitives/slider.d.cts +6 -0
- package/dist/primitives/slider.d.cts.map +1 -0
- package/dist/primitives/slider.d.mts +6 -0
- package/dist/primitives/slider.d.mts.map +1 -0
- package/dist/primitives/slider.mjs +35 -0
- package/dist/primitives/slider.mjs.map +1 -0
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","names":["cn","buttonVariants","ButtonPrimitive","asChildRender"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n React.ComponentProps<typeof ButtonPrimitive>,\n 'variant' | 'ref'\n> {\n /** Visual style variant. `primary` is Berget-specific. */\n variant?: CustomVariant;\n /** Full width or auto width. */\n width?: 'default' | 'full';\n /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n asChild?: boolean;\n ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n * real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n * (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n * WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n * own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n * muted tokens so every variant stays legible (≥3:1, and disabled UI is\n * exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\nconst interactionClasses = cn(\n // Outline-based focus indicator; neutralise the primitive's ring (the\n // ring colour class is left — harmless at width 0).\n 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:ring-0',\n // Neutralise the primitive's disabled fade; variants apply their own tokens.\n 'disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed',\n // No press movement: same compound selector as the primitive base's 1px\n // active translate so tailwind-merge strips it down to 0.\n 'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive. */\nfunction brandVariantClasses(variant?: CustomVariant): string {\n switch (variant) {\n case 'primary':\n return cn(\n // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n 'bg-berget-button-primary-bg text-berget-button-primary-fg',\n 'hover:bg-berget-button-primary-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the primary fg token.\n 'hover:text-berget-button-primary-fg',\n 'active:bg-berget-button-primary-active',\n // Keep the resting (transparent) border on focus — the outline is the indicator.\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-primary-disabled-bg',\n );\n case 'destructive':\n return cn(\n 'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n 'hover:bg-berget-button-destructive-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the destructive fg token.\n 'hover:text-berget-button-destructive-hover-fg',\n 'active:bg-berget-button-destructive-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-destructive-disabled-bg',\n );\n case 'outline':\n return cn(\n // Transparent fill with a theme-foreground-derived border (25% of the\n // foreground). The state treatment is static: hover, press and\n // keyboard focus render identically to rest — only the shared focus\n // outline and the disabled treatment deviate.\n 'bg-transparent border-berget-button-outline-border text-berget-button-outline-fg',\n // Hover: slight brightening (hover bg token); the border and\n // foreground stay at rest. The dark:hover twin also neutralises\n // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n // fill back to transparent (a pressed element is still hovered, so\n // an explicit active override is needed in both colour schemes).\n 'hover:bg-berget-button-outline-hover dark:hover:bg-berget-button-outline-hover',\n 'active:bg-transparent dark:active:bg-transparent',\n // Keep the resting border on focus — the shared outline is the indicator.\n 'focus-visible:border-berget-button-outline-border',\n disabledClasses,\n 'disabled:bg-transparent disabled:border-berget-button-disabled-border',\n );\n case 'ghost':\n // Transparent fill with foreground text; hover and press add subtle\n // theme-foreground-derived fills (10% / 5%). No border of its own —\n // the primitive's resting transparent border persists. The primitive\n // ghost variant's aria-expanded state (bg-muted + foreground text)\n // passes through for dropdown-trigger use.\n return cn(\n 'bg-transparent text-berget-button-ghost-fg',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which is the same value here but pinned\n // explicitly for parity with the other fg-token variants.\n 'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n // The dark:hover twin neutralises the primitive ghost's\n // dark:hover:bg-muted/50 so only the token fill applies.\n 'dark:hover:bg-berget-button-ghost-hover',\n 'active:bg-berget-button-ghost-active dark:active:bg-berget-button-ghost-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-transparent',\n );\n case 'link':\n // Rendered without buttonVariants — needs its own sizing, focus ring and\n // disabled treatment (the primitive's fade is not legible on text links).\n return cn(\n 'h-auto bg-transparent p-0 text-berget-button-link-fg font-medium underline-offset-4 shadow-none',\n 'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n // On press, return to the resting foreground (hover fg otherwise sticks).\n 'active:text-berget-button-link-fg',\n 'focus:bg-transparent',\n // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n // which land on link too (the primitive merges its cva base under\n // every variant): the outline above is the only focus indicator.\n 'focus-visible:border-transparent focus-visible:ring-0',\n 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:rounded-berget-xs',\n 'disabled:text-berget-button-disabled-fg disabled:no-underline',\n 'disabled:opacity-100 disabled:cursor-not-allowed',\n );\n\n case 'default':\n default:\n return cn(\n // Solid granite-800 fill with a granite-700 border on dark surfaces\n // (ink glass in light theme).\n 'bg-berget-button-default-bg border-berget-button-default-border text-berget-button-default-fg',\n 'hover:bg-berget-button-default-hover',\n 'active:bg-berget-button-default-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-default-disabled-bg',\n );\n }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n switch (variant) {\n case 'primary':\n case 'destructive':\n case 'outline':\n case 'ghost':\n return 'ghost';\n default:\n return variant;\n }\n}\n\nexport function Button({\n className,\n variant = 'default',\n size,\n asChild = false,\n width = 'default',\n type = 'button',\n ref,\n children,\n ...props\n}: ButtonProps) {\n const isIcon = typeof size === 'string' && size.startsWith('icon');\n const isLink = variant === 'link';\n\n const baseClass = cn(\n !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n // Berget brand overrides — full-width buttons use the square radius;\n // everything else stays pill-shaped.\n !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale\n // values at the default text-sm (14px) and scales down/up with smaller or\n // larger button text. h-auto drops the primitive's fixed h-* so the\n // vertical paddings take effect.\n !isLink && !isIcon && 'py-[0.57em] px-[1.14em] h-auto',\n // Text ladder: size = typography scale; the em-based padding above\n // follows automatically, so no per-size paddings are needed. Only\n // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n !isLink &&\n !isIcon &&\n (size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : size === 'xs' ? '' : 'text-base'),\n // Normal weight for every non-link variant — tailwind-merge strips the\n // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n // link variant keeps medium via its own classes above.\n !isLink && 'font-normal',\n brandVariantClasses(variant),\n interactionClasses,\n !isLink && width === 'full' && 'w-full',\n isIcon && 'rounded-full shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]',\n className,\n );\n\n const content = (\n <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n );\n\n return (\n <ButtonPrimitive\n className={baseClass}\n ref={ref}\n render={asChildRender(asChild, children)}\n type={type}\n {...props}\n >\n {asChild ? undefined : content}\n </ButtonPrimitive>\n );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqBA,cAAAA,GAGzB,0JAEA,iFAGA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,QAAQ,SAAR;EACE,KAAK,WACH,OAAOA,cAAAA,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAOA,cAAAA,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,WACH,OAAOA,cAAAA,GAKL,oFAMA,kFACA,oDAEA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAOA,cAAAA,GACL,8CAIA,wEAGA,2CACA,kFACA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAOA,cAAAA,GACL,mGACA,+DAEA,qCACA,wBAIA,yDACA,qKACA,iEACA,kDACF;EAGF,SACE,OAAOA,cAAAA,GAGL,iGACA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAYA,cAAAA,GAChB,CAAC,UAAUC,eAAAA,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,CAAC,UACC,CAAC,WACA,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS,OAAO,KAAK,cAIhF,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UAAU,sFACV,SACF;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAWD,cAAAA,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,QAAD;EACE,WAAW;EACN;EACL,QAAQC,cAAAA,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
|
|
1
|
+
{"version":3,"file":"Button.cjs","names":["cn","buttonVariants","ButtonPrimitive","asChildRender"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n React.ComponentProps<typeof ButtonPrimitive>,\n 'variant' | 'ref'\n> {\n /** Visual style variant. `primary` is Berget-specific. */\n variant?: CustomVariant;\n /** Full width or auto width. */\n width?: 'default' | 'full';\n /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n asChild?: boolean;\n ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n * real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n * (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n * WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n * own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n * muted tokens so every variant stays legible (≥3:1, and disabled UI is\n * exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\nconst interactionClasses = cn(\n // Outline-based focus indicator; neutralise the primitive's ring (the\n // ring colour class is left — harmless at width 0).\n `\n focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n `,\n // Neutralise the primitive's disabled fade; variants apply their own tokens.\n `\n disabled:pointer-events-none disabled:cursor-not-allowed\n disabled:opacity-100\n `,\n // No press movement: same compound selector as the primitive base's 1px\n // active translate so tailwind-merge strips it down to 0.\n 'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive. */\nfunction brandVariantClasses(variant?: CustomVariant): string {\n switch (variant) {\n case 'primary':\n return cn(\n // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n 'bg-berget-button-primary-bg text-berget-button-primary-fg',\n 'hover:bg-berget-button-primary-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the primary fg token.\n 'hover:text-berget-button-primary-fg',\n 'active:bg-berget-button-primary-active',\n // Keep the resting (transparent) border on focus — the outline is the indicator.\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-primary-disabled-bg',\n );\n case 'destructive':\n return cn(\n 'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n 'hover:bg-berget-button-destructive-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the destructive fg token.\n 'hover:text-berget-button-destructive-hover-fg',\n 'active:bg-berget-button-destructive-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-destructive-disabled-bg',\n );\n case 'outline':\n return cn(\n // Transparent fill with a theme-foreground-derived border (25% of the\n // foreground). The state treatment is static: hover, press and\n // keyboard focus render identically to rest — only the shared focus\n // outline and the disabled treatment deviate.\n `\n border-berget-button-outline-border bg-transparent\n text-berget-button-outline-fg\n `,\n // Hover: slight brightening (hover bg token); the border and\n // foreground stay at rest. The dark:hover twin also neutralises\n // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n // fill back to transparent (a pressed element is still hovered, so\n // an explicit active override is needed in both colour schemes).\n `\n hover:bg-berget-button-outline-hover\n dark:hover:bg-berget-button-outline-hover\n `,\n `\n active:bg-transparent\n dark:active:bg-transparent\n `,\n // Keep the resting border on focus — the shared outline is the indicator.\n 'focus-visible:border-berget-button-outline-border',\n disabledClasses,\n 'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n );\n case 'ghost':\n // Transparent fill with foreground text; hover and press add subtle\n // theme-foreground-derived fills (10% / 5%). No border of its own —\n // the primitive's resting transparent border persists. The primitive\n // ghost variant's aria-expanded state (bg-muted + foreground text)\n // passes through for dropdown-trigger use.\n return cn(\n 'bg-transparent text-berget-button-ghost-fg',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which is the same value here but pinned\n // explicitly for parity with the other fg-token variants.\n 'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n // The dark:hover twin neutralises the primitive ghost's\n // dark:hover:bg-muted/50 so only the token fill applies.\n 'dark:hover:bg-berget-button-ghost-hover',\n `\n active:bg-berget-button-ghost-active\n dark:active:bg-berget-button-ghost-active\n `,\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-transparent',\n );\n case 'link':\n // Rendered without buttonVariants — needs its own sizing, focus ring and\n // disabled treatment (the primitive's fade is not legible on text links).\n return cn(\n `\n h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n underline-offset-4 shadow-none\n `,\n 'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n // On press, return to the resting foreground (hover fg otherwise sticks).\n 'active:text-berget-button-link-fg',\n 'focus:bg-transparent',\n // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n // which land on link too (the primitive merges its cva base under\n // every variant): the outline above is the only focus indicator.\n 'focus-visible:border-transparent focus-visible:ring-0',\n `\n focus-visible:rounded-berget-xs focus-visible:outline-2\n focus-visible:outline-offset-2\n focus-visible:outline-berget-button-focus-ring\n focus-visible:outline-solid\n `,\n 'disabled:text-berget-button-disabled-fg disabled:no-underline',\n 'disabled:cursor-not-allowed disabled:opacity-100',\n );\n\n case 'default':\n default:\n return cn(\n // Solid granite-800 fill with a granite-700 border on dark surfaces\n // (ink glass in light theme).\n `\n border-berget-button-default-border bg-berget-button-default-bg\n text-berget-button-default-fg\n `,\n 'hover:bg-berget-button-default-hover',\n 'active:bg-berget-button-default-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-default-disabled-bg',\n );\n }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n switch (variant) {\n case 'primary':\n case 'destructive':\n case 'outline':\n case 'ghost':\n return 'ghost';\n default:\n return variant;\n }\n}\n\nexport function Button({\n className,\n variant = 'default',\n size,\n asChild = false,\n width = 'default',\n type = 'button',\n ref,\n children,\n ...props\n}: ButtonProps) {\n const isIcon = typeof size === 'string' && size.startsWith('icon');\n const isLink = variant === 'link';\n\n const baseClass = cn(\n !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n // Berget brand overrides — full-width buttons use the square radius;\n // everything else stays pill-shaped.\n !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale\n // values at the default text-sm (14px) and scales down/up with smaller or\n // larger button text. h-auto drops the primitive's fixed h-* so the\n // vertical paddings take effect.\n !isLink && !isIcon && 'h-auto px-[1.14em] py-[0.57em]',\n // Text ladder: size = typography scale; the em-based padding above\n // follows automatically, so no per-size paddings are needed. Only\n // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n !isLink &&\n !isIcon &&\n (size === 'lg'\n ? 'text-lg'\n : size === 'sm'\n ? 'text-sm'\n : size === 'xs'\n ? ''\n : `\n text-base\n `),\n // Normal weight for every non-link variant — tailwind-merge strips the\n // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n // link variant keeps medium via its own classes above.\n !isLink && 'font-normal',\n brandVariantClasses(variant),\n interactionClasses,\n !isLink && width === 'full' && 'w-full',\n isIcon &&\n `\n rounded-full\n shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n `,\n className,\n );\n\n const content = (\n <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n );\n\n return (\n <ButtonPrimitive\n className={baseClass}\n ref={ref}\n render={asChildRender(asChild, children)}\n type={type}\n {...props}\n >\n {asChild ? undefined : content}\n </ButtonPrimitive>\n );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqBA,cAAAA,GAGzB;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,QAAQ,SAAR;EACE,KAAK,WACH,OAAOA,cAAAA,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAOA,cAAAA,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,WACH,OAAOA,cAAAA,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAOA,cAAAA,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAOA,cAAAA,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAOA,cAAAA,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAYA,cAAAA,GAChB,CAAC,UAAUC,eAAAA,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,CAAC,UACC,CAAC,WACA,SAAS,OACN,YACA,SAAS,OACP,YACA,SAAS,OACP,KACA;;UAMV,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAWD,cAAAA,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,QAAD;EACE,WAAW;EACN;EACL,QAAQC,cAAAA,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.cts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;KAQK;;iBAGY,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;
|
|
1
|
+
{"version":3,"file":"Button.d.cts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;KAQK;;iBAGY,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAqLF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.mts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;KAQK;;iBAGY,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;
|
|
1
|
+
{"version":3,"file":"Button.d.mts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;KAQK;;iBAGY,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAqLF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}
|
|
@@ -24,7 +24,13 @@ import { jsx } from "react/jsx-runtime";
|
|
|
24
24
|
* `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the
|
|
25
25
|
* Berget theme. Theme switching is driven entirely by the semantic tokens.
|
|
26
26
|
*/
|
|
27
|
-
const interactionClasses = cn(
|
|
27
|
+
const interactionClasses = cn(`
|
|
28
|
+
focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2
|
|
29
|
+
focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid
|
|
30
|
+
`, `
|
|
31
|
+
disabled:pointer-events-none disabled:cursor-not-allowed
|
|
32
|
+
disabled:opacity-100
|
|
33
|
+
`, "active:not-aria-[haspopup]:translate-y-0");
|
|
28
34
|
/** Disabled treatment shared by every variant. */
|
|
29
35
|
const disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow-none";
|
|
30
36
|
/** Brand-specific classes applied *on top* of the upstream primitive. */
|
|
@@ -32,10 +38,33 @@ function brandVariantClasses(variant) {
|
|
|
32
38
|
switch (variant) {
|
|
33
39
|
case "primary": return cn("bg-berget-button-primary-bg text-berget-button-primary-fg", "hover:bg-berget-button-primary-hover", "hover:text-berget-button-primary-fg", "active:bg-berget-button-primary-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-primary-disabled-bg");
|
|
34
40
|
case "destructive": return cn("bg-berget-button-destructive-bg text-berget-button-destructive-fg", "hover:bg-berget-button-destructive-hover", "hover:text-berget-button-destructive-hover-fg", "active:bg-berget-button-destructive-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-destructive-disabled-bg");
|
|
35
|
-
case "outline": return cn(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
41
|
+
case "outline": return cn(`
|
|
42
|
+
border-berget-button-outline-border bg-transparent
|
|
43
|
+
text-berget-button-outline-fg
|
|
44
|
+
`, `
|
|
45
|
+
hover:bg-berget-button-outline-hover
|
|
46
|
+
dark:hover:bg-berget-button-outline-hover
|
|
47
|
+
`, `
|
|
48
|
+
active:bg-transparent
|
|
49
|
+
dark:active:bg-transparent
|
|
50
|
+
`, "focus-visible:border-berget-button-outline-border", disabledClasses, "disabled:border-berget-button-disabled-border disabled:bg-transparent");
|
|
51
|
+
case "ghost": return cn("bg-transparent text-berget-button-ghost-fg", "hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg", "dark:hover:bg-berget-button-ghost-hover", `
|
|
52
|
+
active:bg-berget-button-ghost-active
|
|
53
|
+
dark:active:bg-berget-button-ghost-active
|
|
54
|
+
`, "focus-visible:border-transparent", disabledClasses, "disabled:bg-transparent");
|
|
55
|
+
case "link": return cn(`
|
|
56
|
+
h-auto bg-transparent p-0 font-medium text-berget-button-link-fg
|
|
57
|
+
underline-offset-4 shadow-none
|
|
58
|
+
`, "hover:bg-transparent hover:text-berget-button-link-hover-fg", "active:text-berget-button-link-fg", "focus:bg-transparent", "focus-visible:border-transparent focus-visible:ring-0", `
|
|
59
|
+
focus-visible:rounded-berget-xs focus-visible:outline-2
|
|
60
|
+
focus-visible:outline-offset-2
|
|
61
|
+
focus-visible:outline-berget-button-focus-ring
|
|
62
|
+
focus-visible:outline-solid
|
|
63
|
+
`, "disabled:text-berget-button-disabled-fg disabled:no-underline", "disabled:cursor-not-allowed disabled:opacity-100");
|
|
64
|
+
default: return cn(`
|
|
65
|
+
border-berget-button-default-border bg-berget-button-default-bg
|
|
66
|
+
text-berget-button-default-fg
|
|
67
|
+
`, "hover:bg-berget-button-default-hover", "active:bg-berget-button-default-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-default-disabled-bg");
|
|
39
68
|
}
|
|
40
69
|
}
|
|
41
70
|
/** Map custom variants to the closest upstream primitive variant. */
|
|
@@ -54,7 +83,12 @@ function Button({ className, variant = "default", size, asChild = false, width =
|
|
|
54
83
|
const baseClass = cn(!isLink && buttonVariants({
|
|
55
84
|
variant: primitiveVariant(variant),
|
|
56
85
|
size
|
|
57
|
-
}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "
|
|
86
|
+
}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "h-auto px-[1.14em] py-[0.57em]", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `
|
|
87
|
+
text-base
|
|
88
|
+
`), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && `
|
|
89
|
+
rounded-full
|
|
90
|
+
shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]
|
|
91
|
+
`, className);
|
|
58
92
|
const content = /* @__PURE__ */ jsx("span", {
|
|
59
93
|
className: cn("inline-flex items-center", !isIcon && "gap-2"),
|
|
60
94
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n React.ComponentProps<typeof ButtonPrimitive>,\n 'variant' | 'ref'\n> {\n /** Visual style variant. `primary` is Berget-specific. */\n variant?: CustomVariant;\n /** Full width or auto width. */\n width?: 'default' | 'full';\n /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n asChild?: boolean;\n ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n * real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n * (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n * WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n * own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n * muted tokens so every variant stays legible (≥3:1, and disabled UI is\n * exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\nconst interactionClasses = cn(\n // Outline-based focus indicator; neutralise the primitive's ring (the\n // ring colour class is left — harmless at width 0).\n 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:ring-0',\n // Neutralise the primitive's disabled fade; variants apply their own tokens.\n 'disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed',\n // No press movement: same compound selector as the primitive base's 1px\n // active translate so tailwind-merge strips it down to 0.\n 'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive. */\nfunction brandVariantClasses(variant?: CustomVariant): string {\n switch (variant) {\n case 'primary':\n return cn(\n // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n 'bg-berget-button-primary-bg text-berget-button-primary-fg',\n 'hover:bg-berget-button-primary-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the primary fg token.\n 'hover:text-berget-button-primary-fg',\n 'active:bg-berget-button-primary-active',\n // Keep the resting (transparent) border on focus — the outline is the indicator.\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-primary-disabled-bg',\n );\n case 'destructive':\n return cn(\n 'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n 'hover:bg-berget-button-destructive-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the destructive fg token.\n 'hover:text-berget-button-destructive-hover-fg',\n 'active:bg-berget-button-destructive-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-destructive-disabled-bg',\n );\n case 'outline':\n return cn(\n // Transparent fill with a theme-foreground-derived border (25% of the\n // foreground). The state treatment is static: hover, press and\n // keyboard focus render identically to rest — only the shared focus\n // outline and the disabled treatment deviate.\n 'bg-transparent border-berget-button-outline-border text-berget-button-outline-fg',\n // Hover: slight brightening (hover bg token); the border and\n // foreground stay at rest. The dark:hover twin also neutralises\n // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n // fill back to transparent (a pressed element is still hovered, so\n // an explicit active override is needed in both colour schemes).\n 'hover:bg-berget-button-outline-hover dark:hover:bg-berget-button-outline-hover',\n 'active:bg-transparent dark:active:bg-transparent',\n // Keep the resting border on focus — the shared outline is the indicator.\n 'focus-visible:border-berget-button-outline-border',\n disabledClasses,\n 'disabled:bg-transparent disabled:border-berget-button-disabled-border',\n );\n case 'ghost':\n // Transparent fill with foreground text; hover and press add subtle\n // theme-foreground-derived fills (10% / 5%). No border of its own —\n // the primitive's resting transparent border persists. The primitive\n // ghost variant's aria-expanded state (bg-muted + foreground text)\n // passes through for dropdown-trigger use.\n return cn(\n 'bg-transparent text-berget-button-ghost-fg',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which is the same value here but pinned\n // explicitly for parity with the other fg-token variants.\n 'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n // The dark:hover twin neutralises the primitive ghost's\n // dark:hover:bg-muted/50 so only the token fill applies.\n 'dark:hover:bg-berget-button-ghost-hover',\n 'active:bg-berget-button-ghost-active dark:active:bg-berget-button-ghost-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-transparent',\n );\n case 'link':\n // Rendered without buttonVariants — needs its own sizing, focus ring and\n // disabled treatment (the primitive's fade is not legible on text links).\n return cn(\n 'h-auto bg-transparent p-0 text-berget-button-link-fg font-medium underline-offset-4 shadow-none',\n 'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n // On press, return to the resting foreground (hover fg otherwise sticks).\n 'active:text-berget-button-link-fg',\n 'focus:bg-transparent',\n // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n // which land on link too (the primitive merges its cva base under\n // every variant): the outline above is the only focus indicator.\n 'focus-visible:border-transparent focus-visible:ring-0',\n 'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:rounded-berget-xs',\n 'disabled:text-berget-button-disabled-fg disabled:no-underline',\n 'disabled:opacity-100 disabled:cursor-not-allowed',\n );\n\n case 'default':\n default:\n return cn(\n // Solid granite-800 fill with a granite-700 border on dark surfaces\n // (ink glass in light theme).\n 'bg-berget-button-default-bg border-berget-button-default-border text-berget-button-default-fg',\n 'hover:bg-berget-button-default-hover',\n 'active:bg-berget-button-default-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-default-disabled-bg',\n );\n }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n switch (variant) {\n case 'primary':\n case 'destructive':\n case 'outline':\n case 'ghost':\n return 'ghost';\n default:\n return variant;\n }\n}\n\nexport function Button({\n className,\n variant = 'default',\n size,\n asChild = false,\n width = 'default',\n type = 'button',\n ref,\n children,\n ...props\n}: ButtonProps) {\n const isIcon = typeof size === 'string' && size.startsWith('icon');\n const isLink = variant === 'link';\n\n const baseClass = cn(\n !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n // Berget brand overrides — full-width buttons use the square radius;\n // everything else stays pill-shaped.\n !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale\n // values at the default text-sm (14px) and scales down/up with smaller or\n // larger button text. h-auto drops the primitive's fixed h-* so the\n // vertical paddings take effect.\n !isLink && !isIcon && 'py-[0.57em] px-[1.14em] h-auto',\n // Text ladder: size = typography scale; the em-based padding above\n // follows automatically, so no per-size paddings are needed. Only\n // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n !isLink &&\n !isIcon &&\n (size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : size === 'xs' ? '' : 'text-base'),\n // Normal weight for every non-link variant — tailwind-merge strips the\n // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n // link variant keeps medium via its own classes above.\n !isLink && 'font-normal',\n brandVariantClasses(variant),\n interactionClasses,\n !isLink && width === 'full' && 'w-full',\n isIcon && 'rounded-full shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]',\n className,\n );\n\n const content = (\n <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n );\n\n return (\n <ButtonPrimitive\n className={baseClass}\n ref={ref}\n render={asChildRender(asChild, children)}\n type={type}\n {...props}\n >\n {asChild ? undefined : content}\n </ButtonPrimitive>\n );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqB,GAGzB,0JAEA,iFAGA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,QAAQ,SAAR;EACE,KAAK,WACH,OAAO,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAO,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,WACH,OAAO,GAKL,oFAMA,kFACA,oDAEA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAO,GACL,8CAIA,wEAGA,2CACA,kFACA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAO,GACL,mGACA,+DAEA,qCACA,wBAIA,yDACA,qKACA,iEACA,kDACF;EAGF,SACE,OAAO,GAGL,iGACA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAChB,CAAC,UAAU,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,CAAC,UACC,CAAC,WACA,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS,OAAO,KAAK,cAIhF,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UAAU,sFACV,SACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,oBAACA,UAAD;EACE,WAAW;EACN;EACL,QAAQ,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
|
|
1
|
+
{"version":3,"file":"Button.mjs","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n React.ComponentProps<typeof ButtonPrimitive>,\n 'variant' | 'ref'\n> {\n /** Visual style variant. `primary` is Berget-specific. */\n variant?: CustomVariant;\n /** Full width or auto width. */\n width?: 'default' | 'full';\n /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n asChild?: boolean;\n ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n * real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n * (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n * WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n * own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n * muted tokens so every variant stays legible (≥3:1, and disabled UI is\n * exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\nconst interactionClasses = cn(\n // Outline-based focus indicator; neutralise the primitive's ring (the\n // ring colour class is left — harmless at width 0).\n `\n focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n `,\n // Neutralise the primitive's disabled fade; variants apply their own tokens.\n `\n disabled:pointer-events-none disabled:cursor-not-allowed\n disabled:opacity-100\n `,\n // No press movement: same compound selector as the primitive base's 1px\n // active translate so tailwind-merge strips it down to 0.\n 'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive. */\nfunction brandVariantClasses(variant?: CustomVariant): string {\n switch (variant) {\n case 'primary':\n return cn(\n // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n 'bg-berget-button-primary-bg text-berget-button-primary-fg',\n 'hover:bg-berget-button-primary-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the primary fg token.\n 'hover:text-berget-button-primary-fg',\n 'active:bg-berget-button-primary-active',\n // Keep the resting (transparent) border on focus — the outline is the indicator.\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-primary-disabled-bg',\n );\n case 'destructive':\n return cn(\n 'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n 'hover:bg-berget-button-destructive-hover',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which would override the destructive fg token.\n 'hover:text-berget-button-destructive-hover-fg',\n 'active:bg-berget-button-destructive-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-destructive-disabled-bg',\n );\n case 'outline':\n return cn(\n // Transparent fill with a theme-foreground-derived border (25% of the\n // foreground). The state treatment is static: hover, press and\n // keyboard focus render identically to rest — only the shared focus\n // outline and the disabled treatment deviate.\n `\n border-berget-button-outline-border bg-transparent\n text-berget-button-outline-fg\n `,\n // Hover: slight brightening (hover bg token); the border and\n // foreground stay at rest. The dark:hover twin also neutralises\n // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n // fill back to transparent (a pressed element is still hovered, so\n // an explicit active override is needed in both colour schemes).\n `\n hover:bg-berget-button-outline-hover\n dark:hover:bg-berget-button-outline-hover\n `,\n `\n active:bg-transparent\n dark:active:bg-transparent\n `,\n // Keep the resting border on focus — the shared outline is the indicator.\n 'focus-visible:border-berget-button-outline-border',\n disabledClasses,\n 'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n );\n case 'ghost':\n // Transparent fill with foreground text; hover and press add subtle\n // theme-foreground-derived fills (10% / 5%). No border of its own —\n // the primitive's resting transparent border persists. The primitive\n // ghost variant's aria-expanded state (bg-muted + foreground text)\n // passes through for dropdown-trigger use.\n return cn(\n 'bg-transparent text-berget-button-ghost-fg',\n // Pin the foreground on hover — the underlying primitive ghost adds\n // hover:text-foreground, which is the same value here but pinned\n // explicitly for parity with the other fg-token variants.\n 'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n // The dark:hover twin neutralises the primitive ghost's\n // dark:hover:bg-muted/50 so only the token fill applies.\n 'dark:hover:bg-berget-button-ghost-hover',\n `\n active:bg-berget-button-ghost-active\n dark:active:bg-berget-button-ghost-active\n `,\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-transparent',\n );\n case 'link':\n // Rendered without buttonVariants — needs its own sizing, focus ring and\n // disabled treatment (the primitive's fade is not legible on text links).\n return cn(\n `\n h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n underline-offset-4 shadow-none\n `,\n 'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n // On press, return to the resting foreground (hover fg otherwise sticks).\n 'active:text-berget-button-link-fg',\n 'focus:bg-transparent',\n // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n // which land on link too (the primitive merges its cva base under\n // every variant): the outline above is the only focus indicator.\n 'focus-visible:border-transparent focus-visible:ring-0',\n `\n focus-visible:rounded-berget-xs focus-visible:outline-2\n focus-visible:outline-offset-2\n focus-visible:outline-berget-button-focus-ring\n focus-visible:outline-solid\n `,\n 'disabled:text-berget-button-disabled-fg disabled:no-underline',\n 'disabled:cursor-not-allowed disabled:opacity-100',\n );\n\n case 'default':\n default:\n return cn(\n // Solid granite-800 fill with a granite-700 border on dark surfaces\n // (ink glass in light theme).\n `\n border-berget-button-default-border bg-berget-button-default-bg\n text-berget-button-default-fg\n `,\n 'hover:bg-berget-button-default-hover',\n 'active:bg-berget-button-default-active',\n 'focus-visible:border-transparent',\n disabledClasses,\n 'disabled:bg-berget-button-default-disabled-bg',\n );\n }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n switch (variant) {\n case 'primary':\n case 'destructive':\n case 'outline':\n case 'ghost':\n return 'ghost';\n default:\n return variant;\n }\n}\n\nexport function Button({\n className,\n variant = 'default',\n size,\n asChild = false,\n width = 'default',\n type = 'button',\n ref,\n children,\n ...props\n}: ButtonProps) {\n const isIcon = typeof size === 'string' && size.startsWith('icon');\n const isLink = variant === 'link';\n\n const baseClass = cn(\n !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n // Berget brand overrides — full-width buttons use the square radius;\n // everything else stays pill-shaped.\n !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale\n // values at the default text-sm (14px) and scales down/up with smaller or\n // larger button text. h-auto drops the primitive's fixed h-* so the\n // vertical paddings take effect.\n !isLink && !isIcon && 'h-auto px-[1.14em] py-[0.57em]',\n // Text ladder: size = typography scale; the em-based padding above\n // follows automatically, so no per-size paddings are needed. Only\n // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n !isLink &&\n !isIcon &&\n (size === 'lg'\n ? 'text-lg'\n : size === 'sm'\n ? 'text-sm'\n : size === 'xs'\n ? ''\n : `\n text-base\n `),\n // Normal weight for every non-link variant — tailwind-merge strips the\n // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n // link variant keeps medium via its own classes above.\n !isLink && 'font-normal',\n brandVariantClasses(variant),\n interactionClasses,\n !isLink && width === 'full' && 'w-full',\n isIcon &&\n `\n rounded-full\n shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n `,\n className,\n );\n\n const content = (\n <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n );\n\n return (\n <ButtonPrimitive\n className={baseClass}\n ref={ref}\n render={asChildRender(asChild, children)}\n type={type}\n {...props}\n >\n {asChild ? undefined : content}\n </ButtonPrimitive>\n );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqB,GAGzB;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,QAAQ,SAAR;EACE,KAAK,WACH,OAAO,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAO,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,WACH,OAAO,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAO,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAO,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAO,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAChB,CAAC,UAAU,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,CAAC,UACC,CAAC,WACA,SAAS,OACN,YACA,SAAS,OACP,YACA,SAAS,OACP,KACA;;UAMV,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,oBAACA,UAAD;EACE,WAAW;EACN;EACL,QAAQ,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
|
|
@@ -8,8 +8,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
8
8
|
//#region src/components/card/Card.tsx
|
|
9
9
|
const cardVariants = (0, require("class-variance-authority").cva)("ring-0", {
|
|
10
10
|
variants: { variant: {
|
|
11
|
-
outlined: "
|
|
12
|
-
filled: "bg-berget-card-filled-bg
|
|
11
|
+
outlined: "border border-berget-border-subtle bg-transparent",
|
|
12
|
+
filled: "border border-berget-border-subtle bg-berget-card-filled-bg"
|
|
13
13
|
} },
|
|
14
14
|
defaultVariants: { variant: "outlined" }
|
|
15
15
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","names":["cva","React","CardPrimitive","cn"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n Card as CardPrimitive,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n variants: {\n variant: {\n outlined: '
|
|
1
|
+
{"version":3,"file":"Card.cjs","names":["cva","React","CardPrimitive","cn"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n Card as CardPrimitive,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n variants: {\n variant: {\n outlined: 'border border-berget-border-subtle bg-transparent',\n filled: 'border border-berget-border-subtle bg-berget-card-filled-bg',\n },\n },\n defaultVariants: {\n variant: 'outlined',\n },\n});\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n /** Spacing scale of the card. `sm` uses a compact 16px spacing, `default` 24px. */\n size?: 'default' | 'sm';\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant, size, children, ...props }, ref) => {\n return (\n <CardPrimitive\n ref={ref}\n size={size}\n className={cn(cardVariants({ variant }), className)}\n {...props}\n >\n {children}\n </CardPrimitive>\n );\n },\n);\nCard.displayName = 'Card';\n\nexport {\n Card,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n CardAction,\n cardVariants,\n};\n"],"mappings":";;;;;;;;AAeA,MAAM,gBAAA,G,kCAAeA,CAAAA,CAAAA,IAAAA,CAAI,UAAU;CACjC,UAAU,EACR,SAAS;EACP,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC;AAQD,MAAM,OAAOC,MAAM,YAChB,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,SAAS,QAAQ;CACzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;EACO;EACC;EACN,WAAWC,cAAAA,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,GAAI;EAEH;CACY,CAAA;AAEnB,CACF;AACA,KAAK,cAAc"}
|
|
@@ -7,8 +7,8 @@ import { cva } from "class-variance-authority";
|
|
|
7
7
|
//#region src/components/card/Card.tsx
|
|
8
8
|
const cardVariants = cva("ring-0", {
|
|
9
9
|
variants: { variant: {
|
|
10
|
-
outlined: "
|
|
11
|
-
filled: "bg-berget-card-filled-bg
|
|
10
|
+
outlined: "border border-berget-border-subtle bg-transparent",
|
|
11
|
+
filled: "border border-berget-border-subtle bg-berget-card-filled-bg"
|
|
12
12
|
} },
|
|
13
13
|
defaultVariants: { variant: "outlined" }
|
|
14
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","names":["CardPrimitive"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n Card as CardPrimitive,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n variants: {\n variant: {\n outlined: '
|
|
1
|
+
{"version":3,"file":"Card.mjs","names":["CardPrimitive"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n Card as CardPrimitive,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n variants: {\n variant: {\n outlined: 'border border-berget-border-subtle bg-transparent',\n filled: 'border border-berget-border-subtle bg-berget-card-filled-bg',\n },\n },\n defaultVariants: {\n variant: 'outlined',\n },\n});\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n /** Spacing scale of the card. `sm` uses a compact 16px spacing, `default` 24px. */\n size?: 'default' | 'sm';\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, variant, size, children, ...props }, ref) => {\n return (\n <CardPrimitive\n ref={ref}\n size={size}\n className={cn(cardVariants({ variant }), className)}\n {...props}\n >\n {children}\n </CardPrimitive>\n );\n },\n);\nCard.displayName = 'Card';\n\nexport {\n Card,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n CardAction,\n cardVariants,\n};\n"],"mappings":";;;;;;;AAeA,MAAM,eAAe,IAAI,UAAU;CACjC,UAAU,EACR,SAAS;EACP,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC;AAQD,MAAM,OAAO,MAAM,YAChB,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,SAAS,QAAQ;CACzD,OACE,oBAACA,QAAD;EACO;EACC;EACN,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,GAAI;EAEH;CACY,CAAA;AAEnB,CACF;AACA,KAAK,cAAc"}
|
|
@@ -10,17 +10,34 @@ let class_variance_authority = require("class-variance-authority");
|
|
|
10
10
|
let lucide_react = require("lucide-react");
|
|
11
11
|
let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
|
|
12
12
|
//#region src/components/checkbox/Checkbox.tsx
|
|
13
|
-
const checkboxVariants = (0, class_variance_authority.cva)(
|
|
13
|
+
const checkboxVariants = (0, class_variance_authority.cva)(`
|
|
14
|
+
inline-flex items-center justify-center rounded-berget-xs transition-all
|
|
15
|
+
duration-200
|
|
16
|
+
focus-visible:outline-none
|
|
17
|
+
disabled:cursor-not-allowed disabled:opacity-50
|
|
18
|
+
`, {
|
|
14
19
|
variants: {
|
|
15
20
|
variant: {
|
|
16
|
-
default:
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
default: `
|
|
22
|
+
border border-berget-border-interactive bg-berget-surface-subtle
|
|
23
|
+
text-foreground
|
|
24
|
+
hover:bg-berget-surface-raised
|
|
25
|
+
`,
|
|
26
|
+
error: `
|
|
27
|
+
border border-berget-destructive-border bg-berget-destructive
|
|
28
|
+
text-berget-destructive-foreground
|
|
29
|
+
hover:bg-berget-destructive/90
|
|
30
|
+
`,
|
|
31
|
+
success: `
|
|
32
|
+
border border-berget-success-border bg-berget-success
|
|
33
|
+
text-berget-success-foreground
|
|
34
|
+
hover:bg-berget-success/90
|
|
35
|
+
`
|
|
19
36
|
},
|
|
20
37
|
size: {
|
|
21
|
-
sm: "
|
|
22
|
-
default: "
|
|
23
|
-
lg: "
|
|
38
|
+
sm: "size-4",
|
|
39
|
+
default: "size-5",
|
|
40
|
+
lg: "size-6"
|
|
24
41
|
}
|
|
25
42
|
},
|
|
26
43
|
defaultVariants: {
|
|
@@ -46,10 +63,10 @@ const Checkbox = react.forwardRef(({ "aria-label": ariaLabel, className, variant
|
|
|
46
63
|
className: require_utils.cn(checkboxVariants({
|
|
47
64
|
variant,
|
|
48
65
|
size
|
|
49
|
-
}), "cursor-pointer", disabled && "cursor-not-allowed
|
|
66
|
+
}), "cursor-pointer", disabled && "pointer-events-none cursor-not-allowed", className),
|
|
50
67
|
...props,
|
|
51
68
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Indicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
|
|
52
|
-
className: "
|
|
69
|
+
className: "size-4 stroke-current text-current",
|
|
53
70
|
style: {
|
|
54
71
|
color: "currentColor",
|
|
55
72
|
stroke: "currentColor"
|
|
@@ -61,7 +78,7 @@ const Checkbox = react.forwardRef(({ "aria-label": ariaLabel, className, variant
|
|
|
61
78
|
children: [
|
|
62
79
|
label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
|
|
63
80
|
htmlFor: checkboxId,
|
|
64
|
-
className: require_utils.cn("text-sm
|
|
81
|
+
className: require_utils.cn("font-sans text-sm leading-none", disabled ? "cursor-not-allowed text-white/40" : variant === "error" ? "cursor-pointer text-berget-destructive-foreground" : variant === "success" ? "cursor-pointer text-berget-success-foreground" : "cursor-pointer", error && "text-berget-destructive-foreground"),
|
|
65
82
|
children: label
|
|
66
83
|
}),
|
|
67
84
|
description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
@@ -72,7 +89,7 @@ const Checkbox = react.forwardRef(({ "aria-label": ariaLabel, className, variant
|
|
|
72
89
|
error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
73
90
|
variant: "xs",
|
|
74
91
|
id: errorId,
|
|
75
|
-
className: "text-berget-destructive-foreground",
|
|
92
|
+
className: "\n text-berget-destructive-foreground\n ",
|
|
76
93
|
children: error
|
|
77
94
|
})
|
|
78
95
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":["cva","React","CheckboxBase","cn","CheckboxPrimitive","Check","Typography"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":["cva","React","CheckboxBase","cn","CheckboxPrimitive","Check","Typography"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n `\n inline-flex items-center justify-center rounded-berget-xs transition-all\n duration-200\n focus-visible:outline-none\n disabled:cursor-not-allowed disabled:opacity-50\n `,\n {\n variants: {\n variant: {\n default: `\n border border-berget-border-interactive bg-berget-surface-subtle\n text-foreground\n hover:bg-berget-surface-raised\n `,\n error: `\n border border-berget-destructive-border bg-berget-destructive\n text-berget-destructive-foreground\n hover:bg-berget-destructive/90\n `,\n success: `\n border border-berget-success-border bg-berget-success\n text-berget-success-foreground\n hover:bg-berget-success/90\n `,\n },\n size: {\n sm: 'size-4',\n default: 'size-5',\n lg: 'size-6',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport interface CheckboxProps\n extends\n Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'className'>,\n VariantProps<typeof checkboxVariants> {\n label?: string;\n description?: string;\n error?: string;\n className?: string;\n}\n\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n className,\n variant,\n size,\n label,\n description,\n error,\n id,\n disabled,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const checkboxId = id || generatedId;\n const errorId = `${checkboxId}-error`;\n\n return (\n <div className=\"flex items-start gap-3\">\n <div className=\"relative flex items-start pt-0.5\">\n <CheckboxBase\n ref={ref}\n id={checkboxId}\n disabled={disabled}\n aria-invalid={!!error}\n aria-describedby={error ? errorId : undefined}\n aria-label={ariaLabel || label || undefined}\n className={cn(\n checkboxVariants({ variant, size }),\n 'cursor-pointer',\n disabled && 'pointer-events-none cursor-not-allowed',\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator>\n <Check\n className=\"size-4 stroke-current text-current\"\n style={{ color: 'currentColor', stroke: 'currentColor' }}\n />\n </CheckboxPrimitive.Indicator>\n </CheckboxBase>\n </div>\n\n {(label || description || error) && (\n <div className=\"flex flex-col gap-1\">\n {label && (\n <label\n htmlFor={checkboxId}\n className={cn(\n 'font-sans text-sm leading-none',\n disabled\n ? 'cursor-not-allowed text-white/40'\n : variant === 'error'\n ? 'cursor-pointer text-berget-destructive-foreground'\n : variant === 'success'\n ? 'cursor-pointer text-berget-success-foreground'\n : 'cursor-pointer',\n error && 'text-berget-destructive-foreground',\n )}\n >\n {label}\n </label>\n )}\n {description && (\n <Typography variant=\"xs\" color=\"muted\">\n {description}\n </Typography>\n )}\n {error && (\n <Typography\n variant=\"xs\"\n id={errorId}\n className=\"\n text-berget-destructive-foreground\n \"\n >\n {error}\n </Typography>\n )}\n </div>\n )}\n </div>\n );\n },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, checkboxVariants };\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,oBAAA,GAAmBA,yBAAAA,IAAAA,CACvB;;;;;KAMA;CACE,UAAU;EACR,SAAS;GACP,SAAS;;;;;GAKT,OAAO;;;;;GAKP,SAAS;;;;;EAKX;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAYA,MAAM,WAAWC,MAAM,YAEnB,EACE,cAAc,WACd,WACA,SACA,MACA,OACA,aACA,OACA,IACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAcA,MAAM,MAAM;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,UAAU,GAAG,WAAW;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,CAAC,CAAC;IAChB,oBAAkB,QAAQ,UAAU,KAAA;IACpC,cAAY,aAAa,SAAS,KAAA;IAClC,WAAWC,cAAAA,GACT,iBAAiB;KAAE;KAAS;IAAK,CAAC,GAClC,kBACA,YAAY,0CACZ,SACF;IACA,GAAI;IAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,SAAkB,WAAnB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD;KACE,WAAU;KACV,OAAO;MAAE,OAAO;MAAgB,QAAQ;KAAe;IACxD,CAAA,EAC0B,CAAA;GACjB,CAAA;EACX,CAAA,IAEH,SAAS,eAAe,UACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACE,SAAS;KACT,WAAWF,cAAAA,GACT,kCACA,WACI,qCACA,YAAY,UACV,sDACA,YAAY,YACV,kDACA,kBACR,SAAS,oCACX;KAEC,UAAA;IACI,CAAA;IAER,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD;KAAY,SAAQ;KAAK,OAAM;KAC5B,UAAA;IACS,CAAA;IAEb,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;KACE,SAAQ;KACR,IAAI;KACJ,WAAU;KAIT,UAAA;IACS,CAAA;GAEX;EAEJ,CAAA,CAAA;;AAET,CACF;AACA,SAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.cts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.cts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;6CAqCrB;iBAEgB,sBAEb,KAAK,MAAM,gCAAgCA,SAAkB,qBAC7D,oBAAoB;EACtB;EACA;EACA;EACA;;cAGIC,YAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.mts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.mts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;6CAqCrB;iBAEgB,sBAEb,KAAK,MAAM,gCAAgCA,SAAkB,qBAC7D,oBAAoB;EACtB;EACA;EACA;EACA;;cAGIC,YAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}
|
|
@@ -8,17 +8,34 @@ import { cva } from "class-variance-authority";
|
|
|
8
8
|
import { Check } from "lucide-react";
|
|
9
9
|
import { Checkbox } from "@base-ui/react/checkbox";
|
|
10
10
|
//#region src/components/checkbox/Checkbox.tsx
|
|
11
|
-
const checkboxVariants = cva(
|
|
11
|
+
const checkboxVariants = cva(`
|
|
12
|
+
inline-flex items-center justify-center rounded-berget-xs transition-all
|
|
13
|
+
duration-200
|
|
14
|
+
focus-visible:outline-none
|
|
15
|
+
disabled:cursor-not-allowed disabled:opacity-50
|
|
16
|
+
`, {
|
|
12
17
|
variants: {
|
|
13
18
|
variant: {
|
|
14
|
-
default:
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
default: `
|
|
20
|
+
border border-berget-border-interactive bg-berget-surface-subtle
|
|
21
|
+
text-foreground
|
|
22
|
+
hover:bg-berget-surface-raised
|
|
23
|
+
`,
|
|
24
|
+
error: `
|
|
25
|
+
border border-berget-destructive-border bg-berget-destructive
|
|
26
|
+
text-berget-destructive-foreground
|
|
27
|
+
hover:bg-berget-destructive/90
|
|
28
|
+
`,
|
|
29
|
+
success: `
|
|
30
|
+
border border-berget-success-border bg-berget-success
|
|
31
|
+
text-berget-success-foreground
|
|
32
|
+
hover:bg-berget-success/90
|
|
33
|
+
`
|
|
17
34
|
},
|
|
18
35
|
size: {
|
|
19
|
-
sm: "
|
|
20
|
-
default: "
|
|
21
|
-
lg: "
|
|
36
|
+
sm: "size-4",
|
|
37
|
+
default: "size-5",
|
|
38
|
+
lg: "size-6"
|
|
22
39
|
}
|
|
23
40
|
},
|
|
24
41
|
defaultVariants: {
|
|
@@ -44,10 +61,10 @@ const Checkbox$1 = React.forwardRef(({ "aria-label": ariaLabel, className, varia
|
|
|
44
61
|
className: cn(checkboxVariants({
|
|
45
62
|
variant,
|
|
46
63
|
size
|
|
47
|
-
}), "cursor-pointer", disabled && "cursor-not-allowed
|
|
64
|
+
}), "cursor-pointer", disabled && "pointer-events-none cursor-not-allowed", className),
|
|
48
65
|
...props,
|
|
49
66
|
children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Check, {
|
|
50
|
-
className: "
|
|
67
|
+
className: "size-4 stroke-current text-current",
|
|
51
68
|
style: {
|
|
52
69
|
color: "currentColor",
|
|
53
70
|
stroke: "currentColor"
|
|
@@ -59,7 +76,7 @@ const Checkbox$1 = React.forwardRef(({ "aria-label": ariaLabel, className, varia
|
|
|
59
76
|
children: [
|
|
60
77
|
label && /* @__PURE__ */ jsx("label", {
|
|
61
78
|
htmlFor: checkboxId,
|
|
62
|
-
className: cn("text-sm
|
|
79
|
+
className: cn("font-sans text-sm leading-none", disabled ? "cursor-not-allowed text-white/40" : variant === "error" ? "cursor-pointer text-berget-destructive-foreground" : variant === "success" ? "cursor-pointer text-berget-success-foreground" : "cursor-pointer", error && "text-berget-destructive-foreground"),
|
|
63
80
|
children: label
|
|
64
81
|
}),
|
|
65
82
|
description && /* @__PURE__ */ jsx(Typography, {
|
|
@@ -70,7 +87,7 @@ const Checkbox$1 = React.forwardRef(({ "aria-label": ariaLabel, className, varia
|
|
|
70
87
|
error && /* @__PURE__ */ jsx(Typography, {
|
|
71
88
|
variant: "xs",
|
|
72
89
|
id: errorId,
|
|
73
|
-
className: "text-berget-destructive-foreground",
|
|
90
|
+
className: "\n text-berget-destructive-foreground\n ",
|
|
74
91
|
children: error
|
|
75
92
|
})
|
|
76
93
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","names":["Checkbox","CheckboxBase","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","names":["Checkbox","CheckboxBase","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n `\n inline-flex items-center justify-center rounded-berget-xs transition-all\n duration-200\n focus-visible:outline-none\n disabled:cursor-not-allowed disabled:opacity-50\n `,\n {\n variants: {\n variant: {\n default: `\n border border-berget-border-interactive bg-berget-surface-subtle\n text-foreground\n hover:bg-berget-surface-raised\n `,\n error: `\n border border-berget-destructive-border bg-berget-destructive\n text-berget-destructive-foreground\n hover:bg-berget-destructive/90\n `,\n success: `\n border border-berget-success-border bg-berget-success\n text-berget-success-foreground\n hover:bg-berget-success/90\n `,\n },\n size: {\n sm: 'size-4',\n default: 'size-5',\n lg: 'size-6',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport interface CheckboxProps\n extends\n Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'className'>,\n VariantProps<typeof checkboxVariants> {\n label?: string;\n description?: string;\n error?: string;\n className?: string;\n}\n\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n className,\n variant,\n size,\n label,\n description,\n error,\n id,\n disabled,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const checkboxId = id || generatedId;\n const errorId = `${checkboxId}-error`;\n\n return (\n <div className=\"flex items-start gap-3\">\n <div className=\"relative flex items-start pt-0.5\">\n <CheckboxBase\n ref={ref}\n id={checkboxId}\n disabled={disabled}\n aria-invalid={!!error}\n aria-describedby={error ? errorId : undefined}\n aria-label={ariaLabel || label || undefined}\n className={cn(\n checkboxVariants({ variant, size }),\n 'cursor-pointer',\n disabled && 'pointer-events-none cursor-not-allowed',\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator>\n <Check\n className=\"size-4 stroke-current text-current\"\n style={{ color: 'currentColor', stroke: 'currentColor' }}\n />\n </CheckboxPrimitive.Indicator>\n </CheckboxBase>\n </div>\n\n {(label || description || error) && (\n <div className=\"flex flex-col gap-1\">\n {label && (\n <label\n htmlFor={checkboxId}\n className={cn(\n 'font-sans text-sm leading-none',\n disabled\n ? 'cursor-not-allowed text-white/40'\n : variant === 'error'\n ? 'cursor-pointer text-berget-destructive-foreground'\n : variant === 'success'\n ? 'cursor-pointer text-berget-success-foreground'\n : 'cursor-pointer',\n error && 'text-berget-destructive-foreground',\n )}\n >\n {label}\n </label>\n )}\n {description && (\n <Typography variant=\"xs\" color=\"muted\">\n {description}\n </Typography>\n )}\n {error && (\n <Typography\n variant=\"xs\"\n id={errorId}\n className=\"\n text-berget-destructive-foreground\n \"\n >\n {error}\n </Typography>\n )}\n </div>\n )}\n </div>\n );\n },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, checkboxVariants };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB,IACvB;;;;;KAMA;CACE,UAAU;EACR,SAAS;GACP,SAAS;;;;;GAKT,OAAO;;;;;GAKP,SAAS;;;;;EAKX;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAYA,MAAMA,aAAW,MAAM,YAEnB,EACE,cAAc,WACd,WACA,SACA,MACA,OACA,aACA,OACA,IACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM,MAAM;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,UAAU,GAAG,WAAW;CAE9B,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAACC,YAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,CAAC,CAAC;IAChB,oBAAkB,QAAQ,UAAU,KAAA;IACpC,cAAY,aAAa,SAAS,KAAA;IAClC,WAAW,GACT,iBAAiB;KAAE;KAAS;IAAK,CAAC,GAClC,kBACA,YAAY,0CACZ,SACF;IACA,GAAI;IAEJ,UAAA,oBAACC,SAAkB,WAAnB,EAAA,UACE,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MAAE,OAAO;MAAgB,QAAQ;KAAe;IACxD,CAAA,EAC0B,CAAA;GACjB,CAAA;EACX,CAAA,IAEH,SAAS,eAAe,UACxB,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,SACC,oBAAC,SAAD;KACE,SAAS;KACT,WAAW,GACT,kCACA,WACI,qCACA,YAAY,UACV,sDACA,YAAY,YACV,kDACA,kBACR,SAAS,oCACX;KAEC,UAAA;IACI,CAAA;IAER,eACC,oBAAC,YAAD;KAAY,SAAQ;KAAK,OAAM;KAC5B,UAAA;IACS,CAAA;IAEb,SACC,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;KACJ,WAAU;KAIT,UAAA;IACS,CAAA;GAEX;EAEJ,CAAA,CAAA;;AAET,CACF;AACA,WAAS,cAAc"}
|
|
@@ -24,29 +24,32 @@ function CodeBlock({ code, language = "text", title, className }) {
|
|
|
24
24
|
}, [code]);
|
|
25
25
|
const copyButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
26
26
|
onClick: handleCopy,
|
|
27
|
-
className: "flex items-center justify-center
|
|
27
|
+
className: "\n flex size-6 items-center justify-center text-berget-muted-foreground\n transition-colors\n hover:text-berget-foreground\n ",
|
|
28
28
|
"aria-label": "Copy code",
|
|
29
|
-
children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "
|
|
29
|
+
children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
|
|
30
30
|
});
|
|
31
31
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
32
|
-
className: require_utils.cn(
|
|
32
|
+
className: require_utils.cn(`
|
|
33
|
+
relative isolate overflow-hidden rounded-berget-xs border
|
|
34
|
+
border-berget-border bg-berget-codeblock-bg backdrop-blur-md
|
|
35
|
+
`, className),
|
|
33
36
|
children: [
|
|
34
37
|
title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
35
|
-
className: "
|
|
38
|
+
className: "\n flex h-10! items-center border-b border-berget-border\n bg-berget-codeblock-header-bg px-4! text-xs/normal!\n ",
|
|
36
39
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
37
40
|
className: "text-berget-muted-foreground",
|
|
38
41
|
children: title
|
|
39
42
|
})
|
|
40
43
|
}),
|
|
41
44
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
42
|
-
className: "absolute
|
|
45
|
+
className: "absolute top-2 right-2 z-10",
|
|
43
46
|
children: copyButton
|
|
44
47
|
}),
|
|
45
48
|
html ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
46
|
-
className: "[&_.shiki]
|
|
49
|
+
className: "\n [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n ",
|
|
47
50
|
dangerouslySetInnerHTML: { __html: html }
|
|
48
51
|
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
|
|
49
|
-
className: "
|
|
52
|
+
className: "\n m-0! overflow-x-auto p-4! text-caption/relaxed!\n text-berget-muted-foreground\n ",
|
|
50
53
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: code })
|
|
51
54
|
})
|
|
52
55
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.cjs","names":["useState","useCallback","Check","Copy","cn"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n code: string;\n language?: string;\n title?: string;\n className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n const [html, setHtml] = useState<string | null>(null);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n getHighlighter().then((highlighter) => {\n const loadedLangs = highlighter.getLoadedLanguages();\n const lang = loadedLangs.includes(language) ? language : 'text';\n setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n });\n }, [code, language]);\n\n const handleCopy = useCallback(async () => {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }, [code]);\n\n const copyButton = (\n <button\n onClick={handleCopy}\n className=\"flex items-center justify-center
|
|
1
|
+
{"version":3,"file":"CodeBlock.cjs","names":["useState","useCallback","Check","Copy","cn"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n code: string;\n language?: string;\n title?: string;\n className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n const [html, setHtml] = useState<string | null>(null);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n getHighlighter().then((highlighter) => {\n const loadedLangs = highlighter.getLoadedLanguages();\n const lang = loadedLangs.includes(language) ? language : 'text';\n setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n });\n }, [code, language]);\n\n const handleCopy = useCallback(async () => {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }, [code]);\n\n const copyButton = (\n <button\n onClick={handleCopy}\n className=\"\n flex size-6 items-center justify-center text-berget-muted-foreground\n transition-colors\n hover:text-berget-foreground\n \"\n aria-label=\"Copy code\"\n >\n {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n </button>\n );\n\n return (\n <div\n className={cn(\n `\n relative isolate overflow-hidden rounded-berget-xs border\n border-berget-border bg-berget-codeblock-bg backdrop-blur-md\n `,\n className,\n )}\n >\n {title && (\n <div\n className=\"\n flex h-10! items-center border-b border-berget-border\n bg-berget-codeblock-header-bg px-4! text-xs/normal!\n \"\n >\n <span className=\"text-berget-muted-foreground\">{title}</span>\n </div>\n )}\n <div className=\"absolute top-2 right-2 z-10\">{copyButton}</div>\n {html ? (\n <div\n className=\"\n [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n \"\n dangerouslySetInnerHTML={{ __html: html }}\n />\n ) : (\n <pre\n className=\"\n m-0! overflow-x-auto p-4! text-caption/relaxed!\n text-berget-muted-foreground\n \"\n >\n <code>{code}</code>\n </pre>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAAS,KAAK;CAE1C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,cAAA,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,cAAA,GAAaC,MAAAA,YAAAA,CAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,SAAS;EACT,WAAU;EAKV,cAAW;EAEV,UAAA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD,EAAO,WAAU,WAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD,EAAM,WAAU,WAAY,CAAA;CACjE,CAAA;CAGV,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAWC,cAAAA,GACT;;;WAIA,SACF;EAPF,UAAA;GASG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAKV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAIV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAKV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}
|