@bergetai/ui 0.16.0 → 0.16.2
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-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.map +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.mjs +3 -1
- package/dist/components/box/Box.mjs.map +1 -1
- 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.map +1 -1
- 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.mjs +11 -1
- package/dist/components/grid/Grid.mjs.map +1 -1
- package/dist/components/input-group/InputGroup.cjs +11 -2
- package/dist/components/input-group/InputGroup.cjs.map +1 -1
- package/dist/components/input-group/InputGroup.d.cts.map +1 -1
- package/dist/components/input-group/InputGroup.d.mts.map +1 -1
- package/dist/components/input-group/InputGroup.mjs +11 -2
- package/dist/components/input-group/InputGroup.mjs.map +1 -1
- 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.map +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/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 +8 -6
- package/dist/components/slider/Slider.cjs.map +1 -1
- package/dist/components/slider/Slider.d.cts +7 -5
- package/dist/components/slider/Slider.d.cts.map +1 -1
- package/dist/components/slider/Slider.d.mts +7 -5
- package/dist/components/slider/Slider.d.mts.map +1 -1
- package/dist/components/slider/Slider.mjs +8 -6
- package/dist/components/slider/Slider.mjs.map +1 -1
- 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/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/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.cts","names":["ItemPrimitive"],"sources":["../../../src/components/item/Item.tsx"],"mappings":";;;;iBAkBiB,kBAAkB,MAAM,sBAAsBA;EAC7D,UAAU,oBAAoBA;EAC9B,OAAO,oBAAoBA;;EAE3B;;wBAGc,OAAO,WAAW,SAAS,aAAa,SAAS,wCAAS,IAAA;;
|
|
1
|
+
{"version":3,"file":"Item.d.cts","names":["ItemPrimitive"],"sources":["../../../src/components/item/Item.tsx"],"mappings":";;;;iBAkBiB,kBAAkB,MAAM,sBAAsBA;EAC7D,UAAU,oBAAoBA;EAC9B,OAAO,oBAAoBA;;EAE3B;;wBAGc,OAAO,WAAW,SAAS,aAAa,SAAS,wCAAS,IAAA;;qBA4B7D,WAAS,MAAA,0BAAA,KAAA,MAAA,gBAAA,kBAAA,MAAA,eAAA,kBAAA,cAAA;;6CAWpB,6CAAA,MAAA,cAAA;;qBAIW,WAAS,MAAA,0BAAA,KAAA,MAAA,gBAAA,kBAAA,MAAA,eAAA,0BAAA,MAAA,cAAA;;qBAeT,iBAAe,MAAA,0BAAA,KAAA,MAAA,gBAAA,wBAAA,MAAA,eAAA,gCAAA,MAAA,cAAA;;qBAef,eAAa,MAAA,0BAAA,8BAAA,yBAAA,MAAA,cAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.mts","names":["ItemPrimitive"],"sources":["../../../src/components/item/Item.tsx"],"mappings":";;;;iBAkBiB,kBAAkB,MAAM,sBAAsBA;EAC7D,UAAU,oBAAoBA;EAC9B,OAAO,oBAAoBA;;EAE3B;;wBAGc,OAAO,WAAW,SAAS,aAAa,SAAS,wCAAS,IAAA;;
|
|
1
|
+
{"version":3,"file":"Item.d.mts","names":["ItemPrimitive"],"sources":["../../../src/components/item/Item.tsx"],"mappings":";;;;iBAkBiB,kBAAkB,MAAM,sBAAsBA;EAC7D,UAAU,oBAAoBA;EAC9B,OAAO,oBAAoBA;;EAE3B;;wBAGc,OAAO,WAAW,SAAS,aAAa,SAAS,wCAAS,IAAA;;qBA4B7D,WAAS,MAAA,0BAAA,KAAA,MAAA,gBAAA,kBAAA,MAAA,eAAA,kBAAA,cAAA;;6CAWpB,6CAAA,MAAA,cAAA;;qBAIW,WAAS,MAAA,0BAAA,KAAA,MAAA,gBAAA,kBAAA,MAAA,eAAA,0BAAA,MAAA,cAAA;;qBAeT,iBAAe,MAAA,0BAAA,KAAA,MAAA,gBAAA,wBAAA,MAAA,eAAA,gCAAA,MAAA,cAAA;;qBAef,eAAa,MAAA,0BAAA,8BAAA,yBAAA,MAAA,cAAA"}
|
|
@@ -7,7 +7,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
function Item({ className, asChild, children, ...props }) {
|
|
8
8
|
return /* @__PURE__ */ jsx(Item$1, {
|
|
9
9
|
render: asChild ? children : void 0,
|
|
10
|
-
className: cn("data-[variant=outline]:border-berget-item-outline-border", "data-[variant=muted]:bg-berget-item-muted-bg", "data-[variant=muted]:text-berget-item-muted-fg", "[&_a]:hover:bg-berget-item-link-hover-surface",
|
|
10
|
+
className: cn("data-[variant=outline]:border-berget-item-outline-border", "data-[variant=muted]:bg-berget-item-muted-bg", "data-[variant=muted]:text-berget-item-muted-fg", "[&_a]:hover:bg-berget-item-link-hover-surface", `
|
|
11
|
+
focus-visible:border-berget-item-focus-ring
|
|
12
|
+
focus-visible:ring-berget-item-focus-ring/50
|
|
13
|
+
`, className),
|
|
11
14
|
...props,
|
|
12
15
|
children: asChild ? void 0 : children
|
|
13
16
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.mjs","names":["ItemPrimitive","ItemMediaPrimitive","ItemTitlePrimitive","ItemDescriptionPrimitive","ItemSeparatorPrimitive"],"sources":["../../../src/components/item/Item.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n Item as ItemPrimitive,\n ItemGroup,\n ItemSeparator as ItemSeparatorPrimitive,\n ItemMedia as ItemMediaPrimitive,\n ItemContent,\n ItemTitle as ItemTitlePrimitive,\n ItemDescription as ItemDescriptionPrimitive,\n ItemActions,\n ItemHeader,\n ItemFooter,\n} from '@/primitives/item';\nimport type { VariantProps } from 'class-variance-authority';\n\nexport interface ItemProps extends React.ComponentProps<typeof ItemPrimitive> {\n variant?: VariantProps<typeof ItemPrimitive>['variant'];\n size?: VariantProps<typeof ItemPrimitive>['size'];\n /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n asChild?: boolean;\n}\n\nexport function Item({ className, asChild, children, ...props }: ItemProps) {\n return (\n <ItemPrimitive\n render={asChild ? (children as React.ReactElement) : undefined}\n className={cn(\n /* Variant colours — override primitive defaults */\n 'data-[variant=outline]:border-berget-item-outline-border',\n 'data-[variant=muted]:bg-berget-item-muted-bg',\n 'data-[variant=muted]:text-berget-item-muted-fg',\n /* Hover / focus */\n '[&_a]:hover:bg-berget-item-link-hover-surface',\n
|
|
1
|
+
{"version":3,"file":"Item.mjs","names":["ItemPrimitive","ItemMediaPrimitive","ItemTitlePrimitive","ItemDescriptionPrimitive","ItemSeparatorPrimitive"],"sources":["../../../src/components/item/Item.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n Item as ItemPrimitive,\n ItemGroup,\n ItemSeparator as ItemSeparatorPrimitive,\n ItemMedia as ItemMediaPrimitive,\n ItemContent,\n ItemTitle as ItemTitlePrimitive,\n ItemDescription as ItemDescriptionPrimitive,\n ItemActions,\n ItemHeader,\n ItemFooter,\n} from '@/primitives/item';\nimport type { VariantProps } from 'class-variance-authority';\n\nexport interface ItemProps extends React.ComponentProps<typeof ItemPrimitive> {\n variant?: VariantProps<typeof ItemPrimitive>['variant'];\n size?: VariantProps<typeof ItemPrimitive>['size'];\n /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n asChild?: boolean;\n}\n\nexport function Item({ className, asChild, children, ...props }: ItemProps) {\n return (\n <ItemPrimitive\n render={asChild ? (children as React.ReactElement) : undefined}\n className={cn(\n /* Variant colours — override primitive defaults */\n 'data-[variant=outline]:border-berget-item-outline-border',\n 'data-[variant=muted]:bg-berget-item-muted-bg',\n 'data-[variant=muted]:text-berget-item-muted-fg',\n /* Hover / focus */\n '[&_a]:hover:bg-berget-item-link-hover-surface',\n `\n focus-visible:border-berget-item-focus-ring\n focus-visible:ring-berget-item-focus-ring/50\n `,\n className,\n )}\n {...props}\n >\n {asChild ? undefined : children}\n </ItemPrimitive>\n );\n}\n\n/** Re-export unchanged sub-components. */\nexport { ItemGroup, ItemContent, ItemActions, ItemHeader, ItemFooter };\n\n/** ItemMedia — override icon background. */\nexport const ItemMedia = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof ItemMediaPrimitive>\n>(({ className, ...props }, ref) => {\n return (\n <ItemMediaPrimitive\n ref={ref}\n className={cn('data-[variant=icon]:bg-berget-item-media-icon-bg', className)}\n {...props}\n />\n );\n});\nItemMedia.displayName = 'ItemMedia';\n\n/** ItemTitle — override to use semantic foreground. */\nexport const ItemTitle = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof ItemTitlePrimitive>\n>(({ className, ...props }, ref) => {\n return (\n <ItemTitlePrimitive\n ref={ref}\n className={cn('text-berget-item-default-fg', className)}\n {...props}\n />\n );\n});\nItemTitle.displayName = 'ItemTitle';\n\n/** ItemDescription — override muted text colour. */\nexport const ItemDescription = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentProps<typeof ItemDescriptionPrimitive>\n>(({ className, ...props }, ref) => {\n return (\n <ItemDescriptionPrimitive\n ref={ref}\n className={cn('text-berget-item-description-fg', className)}\n {...props}\n />\n );\n});\nItemDescription.displayName = 'ItemDescription';\n\n/** ItemSeparator — override colour. */\nexport const ItemSeparator = React.forwardRef<\n React.ComponentRef<typeof ItemSeparatorPrimitive>,\n React.ComponentProps<typeof ItemSeparatorPrimitive>\n>(({ className, ...props }, ref) => {\n return (\n <ItemSeparatorPrimitive\n ref={ref}\n className={cn('bg-berget-item-separator', className)}\n {...props}\n />\n );\n});\nItemSeparator.displayName = 'ItemSeparator';\n"],"mappings":";;;;;;AAyBA,SAAgB,KAAK,EAAE,WAAW,SAAS,UAAU,GAAG,SAAoB;CAC1E,OACE,oBAACA,QAAD;EACE,QAAQ,UAAW,WAAkC,KAAA;EACrD,WAAW,GAET,4DACA,gDACA,kDAEA,iDACA;;;WAIA,SACF;EACA,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACV,CAAA;AAEnB;;AAMA,MAAa,YAAY,MAAM,YAG5B,EAAE,WAAW,GAAG,SAAS,QAAQ;CAClC,OACE,oBAACC,aAAD;EACO;EACL,WAAW,GAAG,oDAAoD,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL,CAAC;AACD,UAAU,cAAc;;AAGxB,MAAa,YAAY,MAAM,YAG5B,EAAE,WAAW,GAAG,SAAS,QAAQ;CAClC,OACE,oBAACC,aAAD;EACO;EACL,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL,CAAC;AACD,UAAU,cAAc;;AAGxB,MAAa,kBAAkB,MAAM,YAGlC,EAAE,WAAW,GAAG,SAAS,QAAQ;CAClC,OACE,oBAACC,mBAAD;EACO;EACL,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL,CAAC;AACD,gBAAgB,cAAc;;AAG9B,MAAa,gBAAgB,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAAQ;CAClC,OACE,oBAACC,iBAAD;EACO;EACL,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL,CAAC;AACD,cAAc,cAAc"}
|
|
@@ -8,15 +8,39 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
8
8
|
let class_variance_authority = require("class-variance-authority");
|
|
9
9
|
let lucide_react = require("lucide-react");
|
|
10
10
|
//#region src/components/link/Link.tsx
|
|
11
|
-
const linkVariants = (0, class_variance_authority.cva)(
|
|
11
|
+
const linkVariants = (0, class_variance_authority.cva)(`
|
|
12
|
+
inline-flex cursor-pointer items-center gap-2 transition-all duration-200
|
|
13
|
+
focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2
|
|
14
|
+
focus-visible:ring-offset-background focus-visible:outline-none
|
|
15
|
+
disabled:pointer-events-none disabled:opacity-50
|
|
16
|
+
`, {
|
|
12
17
|
variants: {
|
|
13
18
|
variant: {
|
|
14
|
-
default:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
default: `
|
|
20
|
+
text-foreground
|
|
21
|
+
hover:text-foreground/80
|
|
22
|
+
`,
|
|
23
|
+
primary: `
|
|
24
|
+
text-berget-brand-moss-400
|
|
25
|
+
hover:text-berget-brand-moss-500
|
|
26
|
+
`,
|
|
27
|
+
secondary: `
|
|
28
|
+
text-berget-accent
|
|
29
|
+
hover:text-berget-accent/80
|
|
30
|
+
`,
|
|
31
|
+
ghost: `
|
|
32
|
+
text-muted-foreground
|
|
33
|
+
hover:text-foreground
|
|
34
|
+
`,
|
|
35
|
+
muted: `
|
|
36
|
+
text-muted-foreground
|
|
37
|
+
hover:text-muted-foreground/80
|
|
38
|
+
`,
|
|
39
|
+
code: `
|
|
40
|
+
rounded-sm bg-berget-primary-tint px-2 py-1 font-mono text-sm
|
|
41
|
+
text-berget-brand-moss-400
|
|
42
|
+
hover:bg-berget-primary-tint-hover hover:text-berget-brand-moss-500
|
|
43
|
+
`
|
|
20
44
|
},
|
|
21
45
|
size: {
|
|
22
46
|
sm: "text-sm",
|
|
@@ -53,7 +77,7 @@ const Link = react.forwardRef(({ className, variant, size, external = false, ico
|
|
|
53
77
|
children: icon
|
|
54
78
|
}),
|
|
55
79
|
showExternalIcon && isExternal && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
56
|
-
className: "inline-flex items-center
|
|
80
|
+
className: "ml-1 inline-flex items-center opacity-60",
|
|
57
81
|
"aria-hidden": "true",
|
|
58
82
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
|
|
59
83
|
icon: lucide_react.ExternalLink,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.cjs","names":["cva","React","cn","Icon","ExternalLink"],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { ExternalLink } from 'lucide-react';\n\nconst linkVariants = cva(\n
|
|
1
|
+
{"version":3,"file":"Link.cjs","names":["cva","React","cn","Icon","ExternalLink"],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { ExternalLink } from 'lucide-react';\n\nconst linkVariants = cva(\n `\n inline-flex cursor-pointer items-center gap-2 transition-all duration-200\n focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2\n focus-visible:ring-offset-background focus-visible:outline-none\n disabled:pointer-events-none disabled:opacity-50\n `,\n {\n variants: {\n variant: {\n default: `\n text-foreground\n hover:text-foreground/80\n `,\n primary: `\n text-berget-brand-moss-400\n hover:text-berget-brand-moss-500\n `,\n secondary: `\n text-berget-accent\n hover:text-berget-accent/80\n `,\n ghost: `\n text-muted-foreground\n hover:text-foreground\n `,\n muted: `\n text-muted-foreground\n hover:text-muted-foreground/80\n `,\n code: `\n rounded-sm bg-berget-primary-tint px-2 py-1 font-mono text-sm\n text-berget-brand-moss-400\n hover:bg-berget-primary-tint-hover hover:text-berget-brand-moss-500\n `,\n },\n size: {\n sm: 'text-sm',\n default: 'text-base',\n lg: 'text-lg',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport interface LinkProps\n extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof linkVariants> {\n children: React.ReactNode;\n external?: boolean;\n icon?: React.ReactNode;\n showExternalIcon?: boolean;\n disabled?: boolean;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n className,\n variant,\n size,\n external = false,\n icon,\n showExternalIcon = false,\n disabled = false,\n children,\n ...props\n },\n ref,\n ) => {\n const isExternal =\n external ||\n (typeof props.href === 'string' &&\n (props.href.startsWith('http://') ||\n props.href.startsWith('https://') ||\n props.href.startsWith('mailto:') ||\n props.href.startsWith('tel:')));\n\n return (\n <a\n ref={ref}\n className={cn(linkVariants({ variant, size }), className)}\n {...(disabled && {\n 'aria-disabled': true,\n onClick: (e: React.MouseEvent) => e.preventDefault(),\n })}\n {...props}\n {...(isExternal &&\n !disabled && {\n rel: 'noopener noreferrer',\n target: '_blank',\n })}\n >\n {children}\n {icon && <span className=\"inline-flex items-center\">{icon}</span>}\n {showExternalIcon && isExternal && !disabled && (\n <span className=\"ml-1 inline-flex items-center opacity-60\" aria-hidden=\"true\">\n <Icon icon={ExternalLink} size={16} />\n </span>\n )}\n </a>\n );\n },\n);\nLink.displayName = 'Link';\n\nexport { Link, linkVariants };\n"],"mappings":";;;;;;;;;;AAQA,MAAM,gBAAA,GAAeA,yBAAAA,IAAAA,CACnB;;;;;KAMA;CACE,UAAU;EACR,SAAS;GACP,SAAS;;;;GAIT,SAAS;;;;GAIT,WAAW;;;;GAIX,OAAO;;;;GAIP,OAAO;;;;GAIP,MAAM;;;;;EAKR;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAWA,MAAM,OAAOC,MAAM,YAEf,EACE,WACA,SACA,MACA,WAAW,OACX,MACA,mBAAmB,OACnB,WAAW,OACX,UACA,GAAG,SAEL,QACG;CACH,MAAM,aACJ,YACC,OAAO,MAAM,SAAS,aACpB,MAAM,KAAK,WAAW,SAAS,KAC9B,MAAM,KAAK,WAAW,UAAU,KAChC,MAAM,KAAK,WAAW,SAAS,KAC/B,MAAM,KAAK,WAAW,MAAM;CAElC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;EACO;EACL,WAAWC,cAAAA,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EACxD,GAAK,YAAY;GACf,iBAAiB;GACjB,UAAU,MAAwB,EAAE,eAAe;EACrD;EACA,GAAI;EACJ,GAAK,cACH,CAAC,YAAY;GACX,KAAK;GACL,QAAQ;EACV;EAZJ,UAAA;GAcG;GACA,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA4B,UAAA;GAAW,CAAA;GAC/D,oBAAoB,cAAc,CAAC,YAClC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA2C,eAAY;IACrE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;KAAM,MAAMC,aAAAA;KAAc,MAAM;IAAK,CAAA;GACjC,CAAA;EAEP;;AAEP,CACF;AACA,KAAK,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.cts","names":[],"sources":["../../../src/components/link/Link.tsx"],"mappings":";;;cAQM,eAAY;;;
|
|
1
|
+
{"version":3,"file":"Link.d.cts","names":[],"sources":["../../../src/components/link/Link.tsx"],"mappings":";;;cAQM,eAAY;;;6CA+CjB;iBAEgB,kBACP,MAAM,qBAAqB,oBAAoB,oBAAoB;EAC3E,UAAU,MAAM;EAChB;EACA,OAAO,MAAM;EACb;EACA;;cAGI,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.mts","names":[],"sources":["../../../src/components/link/Link.tsx"],"mappings":";;;cAQM,eAAY;;;
|
|
1
|
+
{"version":3,"file":"Link.d.mts","names":[],"sources":["../../../src/components/link/Link.tsx"],"mappings":";;;cAQM,eAAY;;;6CA+CjB;iBAEgB,kBACP,MAAM,qBAAqB,oBAAoB,oBAAoB;EAC3E,UAAU,MAAM;EAChB;EACA,OAAO,MAAM;EACb;EACA;;cAGI,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}
|
|
@@ -6,15 +6,39 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import { cva } from "class-variance-authority";
|
|
7
7
|
import { ExternalLink } from "lucide-react";
|
|
8
8
|
//#region src/components/link/Link.tsx
|
|
9
|
-
const linkVariants = cva(
|
|
9
|
+
const linkVariants = cva(`
|
|
10
|
+
inline-flex cursor-pointer items-center gap-2 transition-all duration-200
|
|
11
|
+
focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2
|
|
12
|
+
focus-visible:ring-offset-background focus-visible:outline-none
|
|
13
|
+
disabled:pointer-events-none disabled:opacity-50
|
|
14
|
+
`, {
|
|
10
15
|
variants: {
|
|
11
16
|
variant: {
|
|
12
|
-
default:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
default: `
|
|
18
|
+
text-foreground
|
|
19
|
+
hover:text-foreground/80
|
|
20
|
+
`,
|
|
21
|
+
primary: `
|
|
22
|
+
text-berget-brand-moss-400
|
|
23
|
+
hover:text-berget-brand-moss-500
|
|
24
|
+
`,
|
|
25
|
+
secondary: `
|
|
26
|
+
text-berget-accent
|
|
27
|
+
hover:text-berget-accent/80
|
|
28
|
+
`,
|
|
29
|
+
ghost: `
|
|
30
|
+
text-muted-foreground
|
|
31
|
+
hover:text-foreground
|
|
32
|
+
`,
|
|
33
|
+
muted: `
|
|
34
|
+
text-muted-foreground
|
|
35
|
+
hover:text-muted-foreground/80
|
|
36
|
+
`,
|
|
37
|
+
code: `
|
|
38
|
+
rounded-sm bg-berget-primary-tint px-2 py-1 font-mono text-sm
|
|
39
|
+
text-berget-brand-moss-400
|
|
40
|
+
hover:bg-berget-primary-tint-hover hover:text-berget-brand-moss-500
|
|
41
|
+
`
|
|
18
42
|
},
|
|
19
43
|
size: {
|
|
20
44
|
sm: "text-sm",
|
|
@@ -51,7 +75,7 @@ const Link = React.forwardRef(({ className, variant, size, external = false, ico
|
|
|
51
75
|
children: icon
|
|
52
76
|
}),
|
|
53
77
|
showExternalIcon && isExternal && !disabled && /* @__PURE__ */ jsx("span", {
|
|
54
|
-
className: "inline-flex items-center
|
|
78
|
+
className: "ml-1 inline-flex items-center opacity-60",
|
|
55
79
|
"aria-hidden": "true",
|
|
56
80
|
children: /* @__PURE__ */ jsx(Icon, {
|
|
57
81
|
icon: ExternalLink,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { ExternalLink } from 'lucide-react';\n\nconst linkVariants = cva(\n
|
|
1
|
+
{"version":3,"file":"Link.mjs","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { ExternalLink } from 'lucide-react';\n\nconst linkVariants = cva(\n `\n inline-flex cursor-pointer items-center gap-2 transition-all duration-200\n focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2\n focus-visible:ring-offset-background focus-visible:outline-none\n disabled:pointer-events-none disabled:opacity-50\n `,\n {\n variants: {\n variant: {\n default: `\n text-foreground\n hover:text-foreground/80\n `,\n primary: `\n text-berget-brand-moss-400\n hover:text-berget-brand-moss-500\n `,\n secondary: `\n text-berget-accent\n hover:text-berget-accent/80\n `,\n ghost: `\n text-muted-foreground\n hover:text-foreground\n `,\n muted: `\n text-muted-foreground\n hover:text-muted-foreground/80\n `,\n code: `\n rounded-sm bg-berget-primary-tint px-2 py-1 font-mono text-sm\n text-berget-brand-moss-400\n hover:bg-berget-primary-tint-hover hover:text-berget-brand-moss-500\n `,\n },\n size: {\n sm: 'text-sm',\n default: 'text-base',\n lg: 'text-lg',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport interface LinkProps\n extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof linkVariants> {\n children: React.ReactNode;\n external?: boolean;\n icon?: React.ReactNode;\n showExternalIcon?: boolean;\n disabled?: boolean;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n (\n {\n className,\n variant,\n size,\n external = false,\n icon,\n showExternalIcon = false,\n disabled = false,\n children,\n ...props\n },\n ref,\n ) => {\n const isExternal =\n external ||\n (typeof props.href === 'string' &&\n (props.href.startsWith('http://') ||\n props.href.startsWith('https://') ||\n props.href.startsWith('mailto:') ||\n props.href.startsWith('tel:')));\n\n return (\n <a\n ref={ref}\n className={cn(linkVariants({ variant, size }), className)}\n {...(disabled && {\n 'aria-disabled': true,\n onClick: (e: React.MouseEvent) => e.preventDefault(),\n })}\n {...props}\n {...(isExternal &&\n !disabled && {\n rel: 'noopener noreferrer',\n target: '_blank',\n })}\n >\n {children}\n {icon && <span className=\"inline-flex items-center\">{icon}</span>}\n {showExternalIcon && isExternal && !disabled && (\n <span className=\"ml-1 inline-flex items-center opacity-60\" aria-hidden=\"true\">\n <Icon icon={ExternalLink} size={16} />\n </span>\n )}\n </a>\n );\n },\n);\nLink.displayName = 'Link';\n\nexport { Link, linkVariants };\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB;;;;;KAMA;CACE,UAAU;EACR,SAAS;GACP,SAAS;;;;GAIT,SAAS;;;;GAIT,WAAW;;;;GAIX,OAAO;;;;GAIP,OAAO;;;;GAIP,MAAM;;;;;EAKR;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAWA,MAAM,OAAO,MAAM,YAEf,EACE,WACA,SACA,MACA,WAAW,OACX,MACA,mBAAmB,OACnB,WAAW,OACX,UACA,GAAG,SAEL,QACG;CACH,MAAM,aACJ,YACC,OAAO,MAAM,SAAS,aACpB,MAAM,KAAK,WAAW,SAAS,KAC9B,MAAM,KAAK,WAAW,UAAU,KAChC,MAAM,KAAK,WAAW,SAAS,KAC/B,MAAM,KAAK,WAAW,MAAM;CAElC,OACE,qBAAC,KAAD;EACO;EACL,WAAW,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EACxD,GAAK,YAAY;GACf,iBAAiB;GACjB,UAAU,MAAwB,EAAE,eAAe;EACrD;EACA,GAAI;EACJ,GAAK,cACH,CAAC,YAAY;GACX,KAAK;GACL,QAAQ;EACV;EAZJ,UAAA;GAcG;GACA,QAAQ,oBAAC,QAAD;IAAM,WAAU;IAA4B,UAAA;GAAW,CAAA;GAC/D,oBAAoB,cAAc,CAAC,YAClC,oBAAC,QAAD;IAAM,WAAU;IAA2C,eAAY;IACrE,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAc,MAAM;IAAK,CAAA;GACjC,CAAA;EAEP;;AAEP,CACF;AACA,KAAK,cAAc"}
|
|
@@ -21,20 +21,29 @@ const List = react.forwardRef(({ className, children, ...props }, ref) => {
|
|
|
21
21
|
List.displayName = "List";
|
|
22
22
|
const ListItem = react.forwardRef(({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
23
23
|
ref,
|
|
24
|
-
className: require_utils.cn(
|
|
24
|
+
className: require_utils.cn(`
|
|
25
|
+
flex items-center gap-4 px-4 py-3
|
|
26
|
+
sm:px-6 sm:py-4
|
|
27
|
+
`, interactive && `
|
|
28
|
+
cursor-pointer transition-all duration-200
|
|
29
|
+
hover:bg-berget-surface-hover
|
|
30
|
+
`, className),
|
|
25
31
|
...props,
|
|
26
32
|
children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
27
|
-
className: "flex
|
|
33
|
+
className: "flex shrink-0 items-center justify-center",
|
|
28
34
|
children: icon
|
|
29
35
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
30
|
-
className: "
|
|
36
|
+
className: "min-w-0 flex-1",
|
|
31
37
|
children
|
|
32
38
|
})]
|
|
33
39
|
}));
|
|
34
40
|
ListItem.displayName = "ListItem";
|
|
35
41
|
const ListHeader = react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
36
42
|
ref,
|
|
37
|
-
className: require_utils.cn(
|
|
43
|
+
className: require_utils.cn(`
|
|
44
|
+
px-4 py-2 text-sm text-muted-foreground
|
|
45
|
+
sm:px-6 sm:py-3
|
|
46
|
+
`, className),
|
|
38
47
|
...props,
|
|
39
48
|
children
|
|
40
49
|
}));
|
|
@@ -46,8 +55,8 @@ const FeatureList = react.forwardRef(({ items, variant = "bullet", className, ..
|
|
|
46
55
|
...props,
|
|
47
56
|
children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
|
|
48
57
|
className: "flex items-start gap-fluid-md",
|
|
49
|
-
children: [variant === "bullet" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "
|
|
50
|
-
className: "
|
|
58
|
+
children: [variant === "bullet" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "\n mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n " }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
59
|
+
className: "mt-0.5 shrink-0",
|
|
51
60
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
|
|
52
61
|
icon: lucide_react.Check,
|
|
53
62
|
size: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.cjs","names":["React","cn","Divider","Icon","Check","Typography"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n ({ className, children, ...props }, ref) => {\n const childrenArray = React.Children.toArray(children);\n return (\n <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n {childrenArray.map((child, index) => (\n <React.Fragment key={index}>\n {child}\n {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n </React.Fragment>\n ))}\n </div>\n );\n },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n icon?: React.ReactNode;\n children: React.ReactNode;\n interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n ({ className, icon, children, interactive = true, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n
|
|
1
|
+
{"version":3,"file":"List.cjs","names":["React","cn","Divider","Icon","Check","Typography"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n ({ className, children, ...props }, ref) => {\n const childrenArray = React.Children.toArray(children);\n return (\n <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n {childrenArray.map((child, index) => (\n <React.Fragment key={index}>\n {child}\n {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n </React.Fragment>\n ))}\n </div>\n );\n },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n icon?: React.ReactNode;\n children: React.ReactNode;\n interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n ({ className, icon, children, interactive = true, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n `\n flex items-center gap-4 px-4 py-3\n sm:px-6 sm:py-4\n `,\n interactive &&\n `\n cursor-pointer transition-all duration-200\n hover:bg-berget-surface-hover\n `,\n className,\n )}\n {...props}\n >\n {icon && <div className=\"flex shrink-0 items-center justify-center\">{icon}</div>}\n <div className=\"min-w-0 flex-1\">{children}</div>\n </div>\n ),\n);\nListItem.displayName = 'ListItem';\n\nexport interface ListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nconst ListHeader = React.forwardRef<HTMLDivElement, ListHeaderProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n `\n px-4 py-2 text-sm text-muted-foreground\n sm:px-6 sm:py-3\n `,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\nListHeader.displayName = 'ListHeader';\n\nexport interface FeatureListProps extends React.HTMLAttributes<HTMLUListElement> {\n items: string[];\n variant?: 'bullet' | 'checkmark';\n}\n\nconst FeatureList = React.forwardRef<HTMLUListElement, FeatureListProps>(\n ({ items, variant = 'bullet', className, ...props }, ref) => {\n return (\n <ul ref={ref} className={cn('flex flex-col gap-fluid-md', className)} {...props}>\n {items.map((item, index) => (\n <li key={index} className=\"flex items-start gap-fluid-md\">\n {variant === 'bullet' ? (\n <span\n className=\"\n mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n \"\n />\n ) : (\n <div className=\"mt-0.5 shrink-0\">\n <Icon icon={Check} size={24} className=\"text-berget-logo-light\" />\n </div>\n )}\n <Typography variant=\"body\" color=\"muted\">\n {item}\n </Typography>\n </li>\n ))}\n </ul>\n );\n },\n);\nFeatureList.displayName = 'FeatureList';\n\nexport { List, ListItem, ListHeader, FeatureList };\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,OAAOA,MAAM,YAChB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,gBAAgBA,MAAM,SAAS,QAAQ,QAAQ;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAU;EAAK,WAAWC,cAAAA,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC3D,UAAA,cAAc,KAAK,OAAO,UACzB,iBAAA,GAAA,kBAAA,KAAA,CAACD,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,cAAc,SAAS,KAAK,iBAAA,GAAA,kBAAA,IAAA,CAACE,gBAAAA,SAAD,EAAS,SAAQ,SAAU,CAAA,CAClD,EAAA,GAHK,KAGL,CACjB;CACE,CAAA;AAET,CACF;AACA,KAAK,cAAc;AAQnB,MAAM,WAAWF,MAAM,YACpB,EAAE,WAAW,MAAM,UAAU,cAAc,MAAM,GAAG,SAAS,QAC5D,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CACO;CACL,WAAWC,cAAAA,GACT;;;WAIA,eACE;;;aAIF,SACF;CACA,GAAI;CAdN,UAAA,CAgBG,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAA6C,UAAA;CAAU,CAAA,GAC/E,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EAAkB;CAAc,CAAA,CAC5C;AAET,CAAA,CAAA;AACA,SAAS,cAAc;AAMvB,MAAM,aAAaD,MAAM,YACtB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACO;CACL,WAAWC,cAAAA,GACT;;;WAIA,SACF;CACA,GAAI;CAEH;AACE,CAAA,CAET;AACA,WAAW,cAAc;AAOzB,MAAM,cAAcD,MAAM,YACvB,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC3D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAS;EAAK,WAAWC,cAAAA,GAAG,8BAA8B,SAAS;EAAG,GAAI;EACvE,UAAA,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACG,YAAY,WACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EACE,WAAU,iGAGX,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,MAAD;KAAM,MAAMC,aAAAA;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC9D,CAAA,GAEP,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;IAAY,SAAQ;IAAO,OAAM;IAC9B,UAAA;GACS,CAAA,CACV;EAfK,GAAA,KAeL,CACL;CACC,CAAA;AAER,CACF;AACA,YAAY,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.cts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;
|
|
1
|
+
{"version":3,"file":"List.d.cts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;iBAyBG,wBAAwB,MAAM,eAAe;EAC5D,UAAU,MAAM;;cAGZ,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAmBC,yBAAyB,MAAM,eAAe;EAC7D;EACA;;cAGI,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.mts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;
|
|
1
|
+
{"version":3,"file":"List.d.mts","names":[],"sources":["../../../src/components/list/List.tsx"],"mappings":";;iBASiB,kBAAkB,MAAM,eAAe;EACtD,UAAU,MAAM;;cAGZ,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;iBAiBO,sBAAsB,MAAM,eAAe;EAC1D,OAAO,MAAM;EACb,UAAU,MAAM;EAChB;;cAGI,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;iBAyBG,wBAAwB,MAAM,eAAe;EAC5D,UAAU,MAAM;;cAGZ,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;iBAmBC,yBAAyB,MAAM,eAAe;EAC7D;EACA;;cAGI,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}
|
|
@@ -19,20 +19,29 @@ const List = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
|
19
19
|
List.displayName = "List";
|
|
20
20
|
const ListItem = React.forwardRef(({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
21
21
|
ref,
|
|
22
|
-
className: cn(
|
|
22
|
+
className: cn(`
|
|
23
|
+
flex items-center gap-4 px-4 py-3
|
|
24
|
+
sm:px-6 sm:py-4
|
|
25
|
+
`, interactive && `
|
|
26
|
+
cursor-pointer transition-all duration-200
|
|
27
|
+
hover:bg-berget-surface-hover
|
|
28
|
+
`, className),
|
|
23
29
|
...props,
|
|
24
30
|
children: [icon && /* @__PURE__ */ jsx("div", {
|
|
25
|
-
className: "flex
|
|
31
|
+
className: "flex shrink-0 items-center justify-center",
|
|
26
32
|
children: icon
|
|
27
33
|
}), /* @__PURE__ */ jsx("div", {
|
|
28
|
-
className: "
|
|
34
|
+
className: "min-w-0 flex-1",
|
|
29
35
|
children
|
|
30
36
|
})]
|
|
31
37
|
}));
|
|
32
38
|
ListItem.displayName = "ListItem";
|
|
33
39
|
const ListHeader = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
34
40
|
ref,
|
|
35
|
-
className: cn(
|
|
41
|
+
className: cn(`
|
|
42
|
+
px-4 py-2 text-sm text-muted-foreground
|
|
43
|
+
sm:px-6 sm:py-3
|
|
44
|
+
`, className),
|
|
36
45
|
...props,
|
|
37
46
|
children
|
|
38
47
|
}));
|
|
@@ -44,8 +53,8 @@ const FeatureList = React.forwardRef(({ items, variant = "bullet", className, ..
|
|
|
44
53
|
...props,
|
|
45
54
|
children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
|
|
46
55
|
className: "flex items-start gap-fluid-md",
|
|
47
|
-
children: [variant === "bullet" ? /* @__PURE__ */ jsx("span", { className: "
|
|
48
|
-
className: "
|
|
56
|
+
children: [variant === "bullet" ? /* @__PURE__ */ jsx("span", { className: "\n mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n " }) : /* @__PURE__ */ jsx("div", {
|
|
57
|
+
className: "mt-0.5 shrink-0",
|
|
49
58
|
children: /* @__PURE__ */ jsx(Icon, {
|
|
50
59
|
icon: Check,
|
|
51
60
|
size: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n ({ className, children, ...props }, ref) => {\n const childrenArray = React.Children.toArray(children);\n return (\n <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n {childrenArray.map((child, index) => (\n <React.Fragment key={index}>\n {child}\n {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n </React.Fragment>\n ))}\n </div>\n );\n },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n icon?: React.ReactNode;\n children: React.ReactNode;\n interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n ({ className, icon, children, interactive = true, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n
|
|
1
|
+
{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Icon } from '../icon/Icon';\nimport { Divider } from '../divider';\nimport { Typography } from '../typography';\nimport { Check } from 'lucide-react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>(\n ({ className, children, ...props }, ref) => {\n const childrenArray = React.Children.toArray(children);\n return (\n <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n {childrenArray.map((child, index) => (\n <React.Fragment key={index}>\n {child}\n {index < childrenArray.length - 1 && <Divider variant=\"subtle\" />}\n </React.Fragment>\n ))}\n </div>\n );\n },\n);\nList.displayName = 'List';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {\n icon?: React.ReactNode;\n children: React.ReactNode;\n interactive?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(\n ({ className, icon, children, interactive = true, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n `\n flex items-center gap-4 px-4 py-3\n sm:px-6 sm:py-4\n `,\n interactive &&\n `\n cursor-pointer transition-all duration-200\n hover:bg-berget-surface-hover\n `,\n className,\n )}\n {...props}\n >\n {icon && <div className=\"flex shrink-0 items-center justify-center\">{icon}</div>}\n <div className=\"min-w-0 flex-1\">{children}</div>\n </div>\n ),\n);\nListItem.displayName = 'ListItem';\n\nexport interface ListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n\nconst ListHeader = React.forwardRef<HTMLDivElement, ListHeaderProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n `\n px-4 py-2 text-sm text-muted-foreground\n sm:px-6 sm:py-3\n `,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\nListHeader.displayName = 'ListHeader';\n\nexport interface FeatureListProps extends React.HTMLAttributes<HTMLUListElement> {\n items: string[];\n variant?: 'bullet' | 'checkmark';\n}\n\nconst FeatureList = React.forwardRef<HTMLUListElement, FeatureListProps>(\n ({ items, variant = 'bullet', className, ...props }, ref) => {\n return (\n <ul ref={ref} className={cn('flex flex-col gap-fluid-md', className)} {...props}>\n {items.map((item, index) => (\n <li key={index} className=\"flex items-start gap-fluid-md\">\n {variant === 'bullet' ? (\n <span\n className=\"\n mt-2 size-1.5 shrink-0 rounded-full bg-berget-icon-muted\n \"\n />\n ) : (\n <div className=\"mt-0.5 shrink-0\">\n <Icon icon={Check} size={24} className=\"text-berget-logo-light\" />\n </div>\n )}\n <Typography variant=\"body\" color=\"muted\">\n {item}\n </Typography>\n </li>\n ))}\n </ul>\n );\n },\n);\nFeatureList.displayName = 'FeatureList';\n\nexport { List, ListItem, ListHeader, FeatureList };\n"],"mappings":";;;;;;;;;AAaA,MAAM,OAAO,MAAM,YAChB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;CACrD,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC3D,UAAA,cAAc,KAAK,OAAO,UACzB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,cAAc,SAAS,KAAK,oBAAC,SAAD,EAAS,SAAQ,SAAU,CAAA,CAClD,EAAA,GAHK,KAGL,CACjB;CACE,CAAA;AAET,CACF;AACA,KAAK,cAAc;AAQnB,MAAM,WAAW,MAAM,YACpB,EAAE,WAAW,MAAM,UAAU,cAAc,MAAM,GAAG,SAAS,QAC5D,qBAAC,OAAD;CACO;CACL,WAAW,GACT;;;WAIA,eACE;;;aAIF,SACF;CACA,GAAI;CAdN,UAAA,CAgBG,QAAQ,oBAAC,OAAD;EAAK,WAAU;EAA6C,UAAA;CAAU,CAAA,GAC/E,oBAAC,OAAD;EAAK,WAAU;EAAkB;CAAc,CAAA,CAC5C;AAET,CAAA,CAAA;AACA,SAAS,cAAc;AAMvB,MAAM,aAAa,MAAM,YACtB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,oBAAC,OAAD;CACO;CACL,WAAW,GACT;;;WAIA,SACF;CACA,GAAI;CAEH;AACE,CAAA,CAET;AACA,WAAW,cAAc;AAOzB,MAAM,cAAc,MAAM,YACvB,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CAC3D,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW,GAAG,8BAA8B,SAAS;EAAG,GAAI;EACvE,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACG,YAAY,WACX,oBAAC,QAAD,EACE,WAAU,iGAGX,CAAA,IAED,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC9D,CAAA,GAEP,oBAAC,YAAD;IAAY,SAAQ;IAAO,OAAM;IAC9B,UAAA;GACS,CAAA,CACV;EAfK,GAAA,KAeL,CACL;CACC,CAAA;AAER,CACF;AACA,YAAY,cAAc"}
|
|
@@ -35,17 +35,20 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
35
35
|
...props,
|
|
36
36
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.Card, {
|
|
37
37
|
variant: "filled",
|
|
38
|
-
className: "relative flex h-full flex-col bg-berget-card-filled-bg p-5
|
|
38
|
+
className: "\n relative flex h-full flex-col bg-berget-card-filled-bg p-5\n transition-all\n hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n sm:p-6\n ",
|
|
39
39
|
children: [
|
|
40
40
|
lifecycle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
41
|
-
className: "absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm",
|
|
41
|
+
className: "\n absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n ",
|
|
42
42
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
43
|
-
className: require_utils.cn(
|
|
43
|
+
className: require_utils.cn(`
|
|
44
|
+
inline-flex h-6 items-center border-0! px-8 text-sm
|
|
45
|
+
whitespace-nowrap
|
|
46
|
+
`, lifecycleStyles[lifecycle]),
|
|
44
47
|
children: lifecycleLabels[lifecycle]
|
|
45
48
|
})
|
|
46
49
|
}),
|
|
47
50
|
(icon || provider || category) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
48
|
-
className: "flex
|
|
51
|
+
className: "\n flex size-12 shrink-0 items-center justify-center\n rounded-berget-xs border border-berget-border bg-white/5\n text-berget-foreground\n ",
|
|
49
52
|
children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModelLogo.ModelLogo, {
|
|
50
53
|
provider,
|
|
51
54
|
category
|
|
@@ -55,7 +58,7 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
55
58
|
eyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
56
59
|
variant: "xs",
|
|
57
60
|
color: "muted",
|
|
58
|
-
className: "font-medium
|
|
61
|
+
className: "leading-none font-medium tracking-[0.25em] uppercase",
|
|
59
62
|
children: eyebrow
|
|
60
63
|
}),
|
|
61
64
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
@@ -64,7 +67,7 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
64
67
|
as: "h3",
|
|
65
68
|
id: titleId,
|
|
66
69
|
variant: "h5",
|
|
67
|
-
className: "min-w-0 truncate whitespace-nowrap
|
|
70
|
+
className: "min-w-0 truncate leading-tight whitespace-nowrap",
|
|
68
71
|
style: { fontFeatureSettings: "normal" },
|
|
69
72
|
children: title
|
|
70
73
|
})
|
|
@@ -81,11 +84,11 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
81
84
|
children: columns.map((col, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
82
85
|
variant: "xs",
|
|
83
86
|
color: "muted",
|
|
84
|
-
className: "leading-none",
|
|
87
|
+
className: "\n leading-none\n ",
|
|
85
88
|
children: col.label
|
|
86
89
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
87
90
|
variant: "body",
|
|
88
|
-
className: "tabular-nums
|
|
91
|
+
className: "leading-none tabular-nums",
|
|
89
92
|
style: { fontFeatureSettings: "normal" },
|
|
90
93
|
children: col.value
|
|
91
94
|
})] }, i))
|
|
@@ -93,7 +96,7 @@ const ModelCard = react.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
93
96
|
meta && meta.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
|
|
94
97
|
variant: "xs",
|
|
95
98
|
color: "muted",
|
|
96
|
-
className: "text-[0.65rem]
|
|
99
|
+
className: "text-[0.65rem] tracking-[0.15em] uppercase",
|
|
97
100
|
children: meta.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [i > 0 && " ▪ ", item] }, i))
|
|
98
101
|
}),
|
|
99
102
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModelCard.cjs","names":["React","cn","Card","ModelLogo","Typography"],"sources":["../../../src/components/model-card/ModelCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Card } from '../card';\nimport { type ModelCategory, type ModelLogoProvider, ModelLogo } from '../model-logo';\nimport { Typography } from '../typography';\n\n/**\n * ModelCard — a whole-card link tile for presenting AI models in a grid:\n * provider mark, category eyebrow, model name, optional lifecycle tab,\n * per-unit price columns, and fine-print capability facts.\n *\n * Presentational only: all copy is passed in as props; the card itself\n * owns no strings and no domain types.\n */\n/** Lifecycle status shown as a corner tab on the card. */\nexport type ModelLifecycle = 'preview' | 'active' | 'deprecated';\n\nconst lifecycleLabels: Record<ModelLifecycle, string> = {\n preview: 'Preview',\n active: 'Active',\n deprecated: 'Deprecated',\n};\n\n/** Per-status styling for the lifecycle tab (tint classes come from\n * index.css; deprecated uses the granite neutral). Brightens when the\n * card (`group`) is hovered. */\nconst lifecycleStyles: Record<ModelLifecycle, string> = {\n preview: 'berget-tint berget-tint-warning',\n active: 'berget-tint berget-tint-success',\n deprecated: 'bg-berget-brand-granite-700 text-berget-muted-foreground',\n};\n\nexport type { ModelCategory, ModelLogoProvider };\n\nexport interface ModelCardProps extends Omit<React.ComponentProps<'a'>, 'title' | 'children'> {\n /** Provider mark, rendered in a bordered square at the top of the card. */\n icon?: React.ReactNode;\n /**\n * Model family for the icon square — resolved to a bundled brand mark\n * (e.g. `'mistralai'`, `'moonshotai'`, `'berget'`). Ignored when `icon`\n * is set.\n */\n provider?: string;\n /** Fallback category for the icon square when no brand mark exists\n * (maps to the `model_type` values from `GET /v1/models`). */\n category?: ModelCategory;\n /** Small category label above the title (rendered uppercase). */\n eyebrow?: string;\n /** The model name — rendered as an `h3` and truncated when too long. */\n title: React.ReactNode;\n /**\n * Lifecycle status rendered as a corner tab: `preview` (yellow),\n * `active` (green), `deprecated` (gray).\n */\n lifecycle?: ModelLifecycle;\n /** Secondary line under the title, e.g. the provider name. */\n description?: React.ReactNode;\n /** Label-above-value columns, e.g. per-million-token input/output prices. */\n columns?: { label: React.ReactNode; value: React.ReactNode }[];\n /**\n * Fine-print capability facts rendered in one uppercase row with\n * square separators drawn by the card, e.g. ['Vision', '262K context'].\n */\n meta?: React.ReactNode[];\n /** Link target for the whole card. */\n href: string;\n /** Opens the link in a new tab (adds `target`/`rel`). */\n external?: boolean;\n /** Extra content rendered at the bottom of the card. */\n children?: React.ReactNode;\n}\n\nconst ModelCard = React.forwardRef<HTMLAnchorElement, ModelCardProps>(\n (\n {\n icon,\n provider,\n category,\n eyebrow,\n title,\n lifecycle,\n description,\n columns,\n meta,\n href,\n external,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const titleId = React.useId();\n\n return (\n <a\n ref={ref}\n href={href}\n aria-labelledby={titleId}\n {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n className={cn('group block', className)}\n {...props}\n >\n <Card\n variant=\"filled\"\n className=\"relative flex h-full flex-col bg-berget-card-filled-bg p-5
|
|
1
|
+
{"version":3,"file":"ModelCard.cjs","names":["React","cn","Card","ModelLogo","Typography"],"sources":["../../../src/components/model-card/ModelCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { Card } from '../card';\nimport { type ModelCategory, type ModelLogoProvider, ModelLogo } from '../model-logo';\nimport { Typography } from '../typography';\n\n/**\n * ModelCard — a whole-card link tile for presenting AI models in a grid:\n * provider mark, category eyebrow, model name, optional lifecycle tab,\n * per-unit price columns, and fine-print capability facts.\n *\n * Presentational only: all copy is passed in as props; the card itself\n * owns no strings and no domain types.\n */\n/** Lifecycle status shown as a corner tab on the card. */\nexport type ModelLifecycle = 'preview' | 'active' | 'deprecated';\n\nconst lifecycleLabels: Record<ModelLifecycle, string> = {\n preview: 'Preview',\n active: 'Active',\n deprecated: 'Deprecated',\n};\n\n/** Per-status styling for the lifecycle tab (tint classes come from\n * index.css; deprecated uses the granite neutral). Brightens when the\n * card (`group`) is hovered. */\nconst lifecycleStyles: Record<ModelLifecycle, string> = {\n preview: 'berget-tint berget-tint-warning',\n active: 'berget-tint berget-tint-success',\n deprecated: 'bg-berget-brand-granite-700 text-berget-muted-foreground',\n};\n\nexport type { ModelCategory, ModelLogoProvider };\n\nexport interface ModelCardProps extends Omit<React.ComponentProps<'a'>, 'title' | 'children'> {\n /** Provider mark, rendered in a bordered square at the top of the card. */\n icon?: React.ReactNode;\n /**\n * Model family for the icon square — resolved to a bundled brand mark\n * (e.g. `'mistralai'`, `'moonshotai'`, `'berget'`). Ignored when `icon`\n * is set.\n */\n provider?: string;\n /** Fallback category for the icon square when no brand mark exists\n * (maps to the `model_type` values from `GET /v1/models`). */\n category?: ModelCategory;\n /** Small category label above the title (rendered uppercase). */\n eyebrow?: string;\n /** The model name — rendered as an `h3` and truncated when too long. */\n title: React.ReactNode;\n /**\n * Lifecycle status rendered as a corner tab: `preview` (yellow),\n * `active` (green), `deprecated` (gray).\n */\n lifecycle?: ModelLifecycle;\n /** Secondary line under the title, e.g. the provider name. */\n description?: React.ReactNode;\n /** Label-above-value columns, e.g. per-million-token input/output prices. */\n columns?: { label: React.ReactNode; value: React.ReactNode }[];\n /**\n * Fine-print capability facts rendered in one uppercase row with\n * square separators drawn by the card, e.g. ['Vision', '262K context'].\n */\n meta?: React.ReactNode[];\n /** Link target for the whole card. */\n href: string;\n /** Opens the link in a new tab (adds `target`/`rel`). */\n external?: boolean;\n /** Extra content rendered at the bottom of the card. */\n children?: React.ReactNode;\n}\n\nconst ModelCard = React.forwardRef<HTMLAnchorElement, ModelCardProps>(\n (\n {\n icon,\n provider,\n category,\n eyebrow,\n title,\n lifecycle,\n description,\n columns,\n meta,\n href,\n external,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const titleId = React.useId();\n\n return (\n <a\n ref={ref}\n href={href}\n aria-labelledby={titleId}\n {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n className={cn('group block', className)}\n {...props}\n >\n <Card\n variant=\"filled\"\n className=\"\n relative flex h-full flex-col bg-berget-card-filled-bg p-5\n transition-all\n hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n sm:p-6\n \"\n >\n {lifecycle && (\n <div\n className=\"\n absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n \"\n >\n <div\n className={cn(\n `\n inline-flex h-6 items-center border-0! px-8 text-sm\n whitespace-nowrap\n `,\n lifecycleStyles[lifecycle],\n )}\n >\n {lifecycleLabels[lifecycle]}\n </div>\n </div>\n )}\n {(icon || provider || category) && (\n <div\n className=\"\n flex size-12 shrink-0 items-center justify-center\n rounded-berget-xs border border-berget-border bg-white/5\n text-berget-foreground\n \"\n >\n {icon ?? <ModelLogo provider={provider} category={category} />}\n </div>\n )}\n\n {/* Identity cluster: eyebrow, title, description — cb tightly\n grouped; the card's flex gap separates it from other groups. */}\n <header>\n {eyebrow && (\n <Typography\n variant=\"xs\"\n color=\"muted\"\n className=\"leading-none font-medium tracking-[0.25em] uppercase\"\n >\n {eyebrow}\n </Typography>\n )}\n <div className={cn('flex items-baseline gap-3', lifecycle && 'pr-24')}>\n <Typography\n as=\"h3\"\n id={titleId}\n variant=\"h5\"\n className=\"min-w-0 truncate leading-tight whitespace-nowrap\"\n style={{ fontFeatureSettings: 'normal' }}\n >\n {title}\n </Typography>\n </div>\n {description && (\n <Typography variant=\"xs\" color=\"muted\" className=\"leading-none\">\n {description}\n </Typography>\n )}\n </header>\n\n {columns && columns.length > 0 && (\n <div className=\"grid grid-cols-2\">\n {columns.map((col, i) => (\n <div key={i}>\n <Typography\n variant=\"xs\"\n color=\"muted\"\n className=\"\n leading-none\n \"\n >\n {col.label}\n </Typography>\n <Typography\n variant=\"body\"\n className=\"leading-none tabular-nums\"\n style={{ fontFeatureSettings: 'normal' }}\n >\n {col.value}\n </Typography>\n </div>\n ))}\n </div>\n )}\n\n {meta && meta.length > 0 && (\n <Typography\n variant=\"xs\"\n color=\"muted\"\n className=\"text-[0.65rem] tracking-[0.15em] uppercase\"\n >\n {meta.map((item, i) => (\n <React.Fragment key={i}>\n {i > 0 && ' ▪ '}\n {item}\n </React.Fragment>\n ))}\n </Typography>\n )}\n\n {children}\n </Card>\n </a>\n );\n },\n);\nModelCard.displayName = 'ModelCard';\n\nexport { ModelCard };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;;;;AAKA,MAAM,kBAAkD;CACtD,SAAS;CACT,QAAQ;CACR,YAAY;AACd;AA0CA,MAAM,YAAYA,MAAM,YAEpB,EACE,MACA,UACA,UACA,SACA,OACA,WACA,aACA,SACA,MACA,MACA,UACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAUA,MAAM,MAAM;CAE5B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACO;EACC;EACN,mBAAiB;EACjB,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAsB,IAAI,CAAC;EACpE,WAAWC,cAAAA,GAAG,eAAe,SAAS;EACtC,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,aAAAA,MAAD;GACE,SAAQ;GACR,WAAU;GAFZ,UAAA;IASG,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,WAAU;KAIV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACE,WAAWD,cAAAA,GACT;;;qBAIA,gBAAgB,UAClB;MAEC,UAAA,gBAAgB;KACd,CAAA;IACF,CAAA;KAEL,QAAQ,YAAY,aACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,WAAU;KAMT,UAAA,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,WAAD;MAAqB;MAAoB;KAAW,CAAA;IAC1D,CAAA;IAKP,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD,EAAA,UAAA;KACG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAET,UAAA;KACS,CAAA;KAEd,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAWH,cAAAA,GAAG,6BAA6B,aAAa,OAAO;MAClE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD;OACE,IAAG;OACH,IAAI;OACJ,SAAQ;OACR,WAAU;OACV,OAAO,EAAE,qBAAqB,SAAS;OAEtC,UAAA;MACS,CAAA;KACT,CAAA;KACJ,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MAAY,SAAQ;MAAK,OAAM;MAAQ,WAAU;MAC9C,UAAA;KACS,CAAA;IAER,EAAA,CAAA;IAEP,WAAW,QAAQ,SAAS,KAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,QAAQ,KAAK,KAAK,MACjB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MACE,SAAQ;MACR,OAAM;MACN,WAAU;MAIT,UAAA,IAAI;KACK,CAAA,GACZ,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;MACE,SAAQ;MACR,WAAU;MACV,OAAO,EAAE,qBAAqB,SAAS;MAEtC,UAAA,IAAI;KACK,CAAA,CACT,EAAA,GAjBK,CAiBL,CACN;IACE,CAAA;IAGN,QAAQ,KAAK,SAAS,KACrB,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAU;KAET,UAAA,KAAK,KAAK,MAAM,MACf,iBAAA,GAAA,kBAAA,KAAA,CAACJ,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,OACT,IACa,EAAA,GAHK,CAGL,CACjB;IACS,CAAA;IAGb;GACG;;CACL,CAAA;AAEP,CACF;AACA,UAAU,cAAc"}
|
|
@@ -33,17 +33,20 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
33
33
|
...props,
|
|
34
34
|
children: /* @__PURE__ */ jsxs(Card, {
|
|
35
35
|
variant: "filled",
|
|
36
|
-
className: "relative flex h-full flex-col bg-berget-card-filled-bg p-5
|
|
36
|
+
className: "\n relative flex h-full flex-col bg-berget-card-filled-bg p-5\n transition-all\n hover:bg-[color-mix(in_oklab,var(--berget-brand-granite-100)_5%,var(--berget-card-filled-bg))]\n sm:p-6\n ",
|
|
37
37
|
children: [
|
|
38
38
|
lifecycle && /* @__PURE__ */ jsx("div", {
|
|
39
|
-
className: "absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm",
|
|
39
|
+
className: "\n absolute top-0 right-0 z-10 overflow-hidden rounded-bl-berget-sm\n ",
|
|
40
40
|
children: /* @__PURE__ */ jsx("div", {
|
|
41
|
-
className: cn(
|
|
41
|
+
className: cn(`
|
|
42
|
+
inline-flex h-6 items-center border-0! px-8 text-sm
|
|
43
|
+
whitespace-nowrap
|
|
44
|
+
`, lifecycleStyles[lifecycle]),
|
|
42
45
|
children: lifecycleLabels[lifecycle]
|
|
43
46
|
})
|
|
44
47
|
}),
|
|
45
48
|
(icon || provider || category) && /* @__PURE__ */ jsx("div", {
|
|
46
|
-
className: "flex
|
|
49
|
+
className: "\n flex size-12 shrink-0 items-center justify-center\n rounded-berget-xs border border-berget-border bg-white/5\n text-berget-foreground\n ",
|
|
47
50
|
children: icon ?? /* @__PURE__ */ jsx(ModelLogo, {
|
|
48
51
|
provider,
|
|
49
52
|
category
|
|
@@ -53,7 +56,7 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
53
56
|
eyebrow && /* @__PURE__ */ jsx(Typography, {
|
|
54
57
|
variant: "xs",
|
|
55
58
|
color: "muted",
|
|
56
|
-
className: "font-medium
|
|
59
|
+
className: "leading-none font-medium tracking-[0.25em] uppercase",
|
|
57
60
|
children: eyebrow
|
|
58
61
|
}),
|
|
59
62
|
/* @__PURE__ */ jsx("div", {
|
|
@@ -62,7 +65,7 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
62
65
|
as: "h3",
|
|
63
66
|
id: titleId,
|
|
64
67
|
variant: "h5",
|
|
65
|
-
className: "min-w-0 truncate whitespace-nowrap
|
|
68
|
+
className: "min-w-0 truncate leading-tight whitespace-nowrap",
|
|
66
69
|
style: { fontFeatureSettings: "normal" },
|
|
67
70
|
children: title
|
|
68
71
|
})
|
|
@@ -79,11 +82,11 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
79
82
|
children: columns.map((col, i) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
|
|
80
83
|
variant: "xs",
|
|
81
84
|
color: "muted",
|
|
82
|
-
className: "leading-none",
|
|
85
|
+
className: "\n leading-none\n ",
|
|
83
86
|
children: col.label
|
|
84
87
|
}), /* @__PURE__ */ jsx(Typography, {
|
|
85
88
|
variant: "body",
|
|
86
|
-
className: "tabular-nums
|
|
89
|
+
className: "leading-none tabular-nums",
|
|
87
90
|
style: { fontFeatureSettings: "normal" },
|
|
88
91
|
children: col.value
|
|
89
92
|
})] }, i))
|
|
@@ -91,7 +94,7 @@ const ModelCard = React.forwardRef(({ icon, provider, category, eyebrow, title,
|
|
|
91
94
|
meta && meta.length > 0 && /* @__PURE__ */ jsx(Typography, {
|
|
92
95
|
variant: "xs",
|
|
93
96
|
color: "muted",
|
|
94
|
-
className: "text-[0.65rem]
|
|
97
|
+
className: "text-[0.65rem] tracking-[0.15em] uppercase",
|
|
95
98
|
children: meta.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && " ▪ ", item] }, i))
|
|
96
99
|
}),
|
|
97
100
|
children
|