@bergetai/ui 0.11.0 → 0.11.2

package/dist/index.d.cts

@@ -45,7 +45,7 @@ declare const buttonVariants: (props?: ({
 declare function Button$1({ className, variant, size, ...props }: Button$2.Props & VariantProps<typeof buttonVariants>): react_jsx_runtime.JSX.Element;
 
 /** Variants exposed by the Berget wrapper. */
-type CustomVariant = 'default' | 'primary' | 'destructive' | 'link';
+type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'link';
 /** Props for the Berget Button wrapper. */
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'variant' | 'ref'> {
     /** Visual style variant. `primary` is Berget-specific. */
@@ -70,6 +70,7 @@ declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & Re
 declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
@@ -672,4 +673,4 @@ interface FogIllustrationProps {
 }
 declare const FogIllustration: ({ palette, speed, className }: FogIllustrationProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };

package/dist/index.d.ts

@@ -45,7 +45,7 @@ declare const buttonVariants: (props?: ({
 declare function Button$1({ className, variant, size, ...props }: Button$2.Props & VariantProps<typeof buttonVariants>): react_jsx_runtime.JSX.Element;
 
 /** Variants exposed by the Berget wrapper. */
-type CustomVariant = 'default' | 'primary' | 'destructive' | 'link';
+type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'link';
 /** Props for the Berget Button wrapper. */
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'variant' | 'ref'> {
     /** Visual style variant. `primary` is Berget-specific. */
@@ -70,6 +70,7 @@ declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & Re
 declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
@@ -672,4 +673,4 @@ interface FogIllustrationProps {
 }
 declare const FogIllustration: ({ palette, speed, className }: FogIllustrationProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };

package/dist/index.js

@@ -301,9 +301,28 @@ function brandVariantClasses(variant) {
         disabledClasses,
         "disabled:bg-berget-button-destructive-disabled-bg"
       );
+    case "outline":
+      return cn(
+        // Transparent fill with a theme-foreground-derived border (25% of the
+        // foreground). The state treatment is static: hover, press and
+        // keyboard focus render identically to rest — only the shared focus
+        // outline and the disabled treatment deviate.
+        "bg-transparent border-berget-button-outline-border text-berget-button-outline-fg",
+        // Hover: slight brightening (hover bg token); the border and
+        // foreground stay at rest. The dark:hover twin also neutralises
+        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the
+        // fill back to transparent (a pressed element is still hovered, so
+        // an explicit active override is needed in both colour schemes).
+        "hover:bg-berget-button-outline-hover dark:hover:bg-berget-button-outline-hover",
+        "active:bg-transparent dark:active:bg-transparent",
+        // Keep the resting border on focus — the shared outline is the indicator.
+        "focus-visible:border-berget-button-outline-border",
+        disabledClasses,
+        "disabled:bg-transparent disabled:border-berget-button-disabled-border"
+      );
     case "link":
       return cn(
-        "h-auto bg-transparent p-0 text-berget-button-link-fg underline-offset-4 shadow-none",
+        "h-auto bg-transparent p-0 text-berget-button-link-fg font-medium underline-offset-4 shadow-none",
         "hover:bg-transparent hover:text-berget-button-link-hover-fg",
         // On press, return to the resting foreground (hover fg otherwise sticks).
         "active:text-berget-button-link-fg",
@@ -334,6 +353,7 @@ function primitiveVariant(variant) {
   switch (variant) {
     case "primary":
     case "destructive":
+    case "outline":
       return "ghost";
     default:
       return variant;
@@ -362,6 +382,14 @@ function Button2({
     // larger button text. h-auto drops the primitive's fixed h-* so the
     // vertical paddings take effect.
     !isLink && !isIcon && "py-[0.57em] px-[1.14em] h-auto",
+    // Text ladder: size = typography scale; the em-based padding above
+    // follows automatically, so no per-size paddings are needed. Only
+    // default/lg/sm need overrides — xs keeps the primitive's text-xs.
+    !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : "text-base"),
+    // Normal weight for every non-link variant — tailwind-merge strips the
+    // primitive's font-medium (font-weight: var(--font-weight-medium)); the
+    // link variant keeps medium via its own classes above.
+    !isLink && "font-normal",
     brandVariantClasses(variant),
     interactionClasses,
     !isLink && width === "full" && "w-full",
@@ -514,6 +542,19 @@ function CardDescription({ className, ...props }) {
     }
   );
 }
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn3(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx6(
     "div",
@@ -4364,6 +4405,7 @@ export {
   Button2 as Button,
   COUNTRIES,
   Card2 as Card,
+  CardAction,
   CardContent,
   CardDescription,
   CardFooter,