@shipfox/react-ui 0.14.0 → 0.15.0

package/.storybook/preview.tsx

@@ -18,6 +18,13 @@ const preview: Preview = {
             height: '2000px',
           },
         },
+        extraLarge: {
+          name: 'Extra Large Viewport',
+          styles: {
+            width: '1920px',
+            height: '2000px',
+          },
+        },
       },
     },
     options: {

package/.turbo/turbo-build.log

@@ -1,19 +1,19 @@
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.14.0 build /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.15.0 build /runner/_work/tooling/tooling/libs/react/ui
 > swc && pnpm run build:css
 
-Successfully compiled: 141 files with swc (415.03ms)
+Successfully compiled: 186 files with swc (407.4ms)
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.14.0 build:css /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.15.0 build:css /runner/_work/tooling/tooling/libs/react/ui
 > vite build --config vite.css.config.ts && rm -f dist/css-entry.js dist/css-entry.js.map
 
-vite v7.2.7 building client environment for production...
+vite v7.3.0 building client environment for production...
 transforming...
 ✓ 2 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/styles.css    92.87 kB │ gzip: 14.70 kB
-dist/css-entry.js   0.00 kB │ gzip:  0.02 kB
-✓ built in 599ms
+dist/styles.css    106.21 kB │ gzip: 16.96 kB
+dist/css-entry.js    0.00 kB │ gzip:  0.02 kB
+✓ built in 2.51s

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.14.0 check /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.15.0 check /runner/_work/tooling/tooling/libs/react/ui
 > biome-check --fix
 
-Checked 160 files in 291ms. No fixes applied.
+Checked 205 files in 737ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.14.0 type /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.15.0 type /runner/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @shipfox/react-ui
 
+## 0.15.0
+
+### Minor Changes
+
+- 9bd4839: Add dashboard story
+- 4e13ba7: Add button group, command, kbd, select, search, and skeleton components
+- f3c145d: Add Table component
+
+  Fix DataTable pagination issue where changing page size could result in an out-of-bounds page index, causing the table to display no rows and hide pagination controls.
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/components/avatar/avatar.js

@@ -8,7 +8,7 @@ export const avatarVariants = cva('relative flex shrink-0 overflow-hidden bg-bac
     variants: {
         radius: {
             full: 'rounded-full',
-            rounded: 'rounded-6'
+            rounded: 'rounded-4'
         },
         size: {
             '3xs': 'size-[18px]',

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps, ReactNode} from 'react';\nimport {getInitial, getPlaceholderImageUrl} from 'utils';\nimport {cn} from 'utils/cn';\nimport {Icon, type IconName} from '../icon/icon';\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden bg-background-button-neutral-default text-foreground-neutral-base ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',\n  {\n    variants: {\n      radius: {\n        full: 'rounded-full',\n        rounded: 'rounded-6',\n      },\n      size: {\n        '3xs': 'size-[18px]',\n        '2xs': 'size-[20px]',\n        xs: 'size-[24px]',\n        sm: 'size-[28px]',\n        md: 'size-[32px]',\n        lg: 'size-[36px]',\n        xl: 'size-[40px]',\n        '2xl': 'size-[80px]',\n        '3xl': 'size-[120px]',\n      },\n    },\n    defaultVariants: {\n      radius: 'full',\n      size: 'md',\n    },\n  },\n);\n\nconst avatarInnerVariants = cva('flex h-full w-full items-center justify-center', {\n  variants: {\n    size: {\n      '3xs': 'text-[10px] leading-[10px]',\n      '2xs': 'text-[11px] leading-[11px]',\n      xs: 'text-xs leading-4',\n      sm: 'text-xs leading-5',\n      md: 'text-sm leading-5',\n      lg: 'text-sm leading-5',\n      xl: 'text-base leading-6',\n      '2xl': 'text-2xl leading-8',\n      '3xl': 'text-4xl leading-[56px]',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type AvatarContent = 'letters' | 'logo' | 'logoPlaceholder' | 'image' | 'upload';\n\nconst UPLOAD_ICON_SIZE_MAP: Record<\n  NonNullable<VariantProps<typeof avatarVariants>['size']>,\n  string\n> = {\n  '3xs': 'size-[10px]',\n  '2xs': 'size-[12px]',\n  xs: 'size-[14px]',\n  sm: 'size-[16px]',\n  md: 'size-[18px]',\n  lg: 'size-[20px]',\n  xl: 'size-[24px]',\n  '2xl': 'size-[40px]',\n  '3xl': 'size-[60px]',\n} as const;\n\nfunction AvatarRoot({\n  className,\n  radius,\n  size,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(avatarVariants({radius, size}), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({className, ...props}: ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({className, ...props}: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-name\"\n      className={cn('flex size-full items-center justify-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> &\n  VariantProps<typeof avatarVariants> & {\n    content?: AvatarContent;\n    src?: string;\n    alt?: string;\n    fallback?: string;\n    animateOnHover?: boolean;\n    logoName?: IconName;\n    logoClassName?: string;\n  };\n\nexport function Avatar({\n  className,\n  radius,\n  size = 'md',\n  content = 'letters',\n  src,\n  alt,\n  fallback,\n  animateOnHover = false,\n  logoName = 'shipfox',\n  logoClassName,\n  ...props\n}: AvatarProps) {\n  const innerClassName =\n    'flex h-full w-full items-center justify-center rounded-inherit relative bg-background-neutral-base dark:bg-background-components-base text-foreground-neutral-subtle';\n\n  const renderContent = (): ReactNode => {\n    if (content === 'image') {\n      const imageSrc = src || getPlaceholderImageUrl(fallback);\n      return (\n        <>\n          <AvatarImage\n            src={imageSrc}\n            alt={alt || 'Avatar image'}\n            className=\"object-scale-down rounded-inherit\"\n          />\n          <AvatarFallback className={innerClassName}>\n            <div\n              className={cn(\n                'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n                avatarInnerVariants({size}),\n              )}\n            >\n              <span className=\"font-medium\">{getInitial(fallback)}</span>\n            </div>\n          </AvatarFallback>\n        </>\n      );\n    }\n\n    if (content === 'logo') {\n      return (\n        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>\n          <Icon name={logoName} className=\"h-full w-full\" />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'logoPlaceholder') {\n      return (\n        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>\n          <Icon\n            name={logoName}\n            color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n            className=\"h-full w-full opacity-50\"\n          />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'letters') {\n      return (\n        <AvatarFallback className={innerClassName}>\n          <div\n            className={cn(\n              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n              avatarInnerVariants({size}),\n            )}\n          >\n            <span className=\"font-medium\">{getInitial(fallback)}</span>\n          </div>\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'upload') {\n      const iconSizeClass = UPLOAD_ICON_SIZE_MAP[size as keyof typeof UPLOAD_ICON_SIZE_MAP];\n      return (\n        <AvatarFallback className={innerClassName}>\n          <Icon name=\"imageAdd\" className={cn('text-foreground-neutral-subtle', iconSizeClass)} />\n        </AvatarFallback>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <AvatarRoot\n      className={cn(\n        animateOnHover ? 'hover:-translate-y-8 transition-transform duration-300 ease-out' : '',\n        className,\n      )}\n      radius={radius}\n      size={size}\n      {...props}\n    >\n      {renderContent()}\n    </AvatarRoot>\n  );\n}\n\nexport {AvatarRoot, AvatarImage, AvatarFallback};\n"],"names":["AvatarPrimitive","cva","getInitial","getPlaceholderImageUrl","cn","Icon","avatarVariants","variants","radius","full","rounded","size","xs","sm","md","lg","xl","defaultVariants","avatarInnerVariants","UPLOAD_ICON_SIZE_MAP","AvatarRoot","className","props","Root","data-slot","AvatarImage","Image","AvatarFallback","Fallback","Avatar","content","src","alt","fallback","animateOnHover","logoName","logoClassName","innerClassName","renderContent","imageSrc","div","span","name","color","iconSizeClass"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps, ReactNode} from 'react';\nimport {getInitial, getPlaceholderImageUrl} from 'utils';\nimport {cn} from 'utils/cn';\nimport {Icon, type IconName} from '../icon/icon';\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden bg-background-button-neutral-default text-foreground-neutral-base ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',\n  {\n    variants: {\n      radius: {\n        full: 'rounded-full',\n        rounded: 'rounded-4',\n      },\n      size: {\n        '3xs': 'size-[18px]',\n        '2xs': 'size-[20px]',\n        xs: 'size-[24px]',\n        sm: 'size-[28px]',\n        md: 'size-[32px]',\n        lg: 'size-[36px]',\n        xl: 'size-[40px]',\n        '2xl': 'size-[80px]',\n        '3xl': 'size-[120px]',\n      },\n    },\n    defaultVariants: {\n      radius: 'full',\n      size: 'md',\n    },\n  },\n);\n\nconst avatarInnerVariants = cva('flex h-full w-full items-center justify-center', {\n  variants: {\n    size: {\n      '3xs': 'text-[10px] leading-[10px]',\n      '2xs': 'text-[11px] leading-[11px]',\n      xs: 'text-xs leading-4',\n      sm: 'text-xs leading-5',\n      md: 'text-sm leading-5',\n      lg: 'text-sm leading-5',\n      xl: 'text-base leading-6',\n      '2xl': 'text-2xl leading-8',\n      '3xl': 'text-4xl leading-[56px]',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type AvatarContent = 'letters' | 'logo' | 'logoPlaceholder' | 'image' | 'upload';\n\nconst UPLOAD_ICON_SIZE_MAP: Record<\n  NonNullable<VariantProps<typeof avatarVariants>['size']>,\n  string\n> = {\n  '3xs': 'size-[10px]',\n  '2xs': 'size-[12px]',\n  xs: 'size-[14px]',\n  sm: 'size-[16px]',\n  md: 'size-[18px]',\n  lg: 'size-[20px]',\n  xl: 'size-[24px]',\n  '2xl': 'size-[40px]',\n  '3xl': 'size-[60px]',\n} as const;\n\nfunction AvatarRoot({\n  className,\n  radius,\n  size,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(avatarVariants({radius, size}), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({className, ...props}: ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({className, ...props}: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-name\"\n      className={cn('flex size-full items-center justify-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> &\n  VariantProps<typeof avatarVariants> & {\n    content?: AvatarContent;\n    src?: string;\n    alt?: string;\n    fallback?: string;\n    animateOnHover?: boolean;\n    logoName?: IconName;\n    logoClassName?: string;\n  };\n\nexport function Avatar({\n  className,\n  radius,\n  size = 'md',\n  content = 'letters',\n  src,\n  alt,\n  fallback,\n  animateOnHover = false,\n  logoName = 'shipfox',\n  logoClassName,\n  ...props\n}: AvatarProps) {\n  const innerClassName =\n    'flex h-full w-full items-center justify-center rounded-inherit relative bg-background-neutral-base dark:bg-background-components-base text-foreground-neutral-subtle';\n\n  const renderContent = (): ReactNode => {\n    if (content === 'image') {\n      const imageSrc = src || getPlaceholderImageUrl(fallback);\n      return (\n        <>\n          <AvatarImage\n            src={imageSrc}\n            alt={alt || 'Avatar image'}\n            className=\"object-scale-down rounded-inherit\"\n          />\n          <AvatarFallback className={innerClassName}>\n            <div\n              className={cn(\n                'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n                avatarInnerVariants({size}),\n              )}\n            >\n              <span className=\"font-medium\">{getInitial(fallback)}</span>\n            </div>\n          </AvatarFallback>\n        </>\n      );\n    }\n\n    if (content === 'logo') {\n      return (\n        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>\n          <Icon name={logoName} className=\"h-full w-full\" />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'logoPlaceholder') {\n      return (\n        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>\n          <Icon\n            name={logoName}\n            color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n            className=\"h-full w-full opacity-50\"\n          />\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'letters') {\n      return (\n        <AvatarFallback className={innerClassName}>\n          <div\n            className={cn(\n              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n              avatarInnerVariants({size}),\n            )}\n          >\n            <span className=\"font-medium\">{getInitial(fallback)}</span>\n          </div>\n        </AvatarFallback>\n      );\n    }\n\n    if (content === 'upload') {\n      const iconSizeClass = UPLOAD_ICON_SIZE_MAP[size as keyof typeof UPLOAD_ICON_SIZE_MAP];\n      return (\n        <AvatarFallback className={innerClassName}>\n          <Icon name=\"imageAdd\" className={cn('text-foreground-neutral-subtle', iconSizeClass)} />\n        </AvatarFallback>\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <AvatarRoot\n      className={cn(\n        animateOnHover ? 'hover:-translate-y-8 transition-transform duration-300 ease-out' : '',\n        className,\n      )}\n      radius={radius}\n      size={size}\n      {...props}\n    >\n      {renderContent()}\n    </AvatarRoot>\n  );\n}\n\nexport {AvatarRoot, AvatarImage, AvatarFallback};\n"],"names":["AvatarPrimitive","cva","getInitial","getPlaceholderImageUrl","cn","Icon","avatarVariants","variants","radius","full","rounded","size","xs","sm","md","lg","xl","defaultVariants","avatarInnerVariants","UPLOAD_ICON_SIZE_MAP","AvatarRoot","className","props","Root","data-slot","AvatarImage","Image","AvatarFallback","Fallback","Avatar","content","src","alt","fallback","animateOnHover","logoName","logoClassName","innerClassName","renderContent","imageSrc","div","span","name","color","iconSizeClass"],"mappings":"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"}

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonGroupProps = ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
+declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+type ButtonGroupTextProps = ComponentProps<'div'> & {
+    asChild?: boolean;
+};
+declare function ButtonGroupText({ className, asChild, ...props }: ButtonGroupTextProps): import("react/jsx-runtime").JSX.Element;
+type ButtonGroupSeparatorProps = ComponentProps<'div'> & {
+    orientation?: 'horizontal' | 'vertical';
+};
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,QAAA,MAAM,mBAAmB;;8EAwCxB,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEzF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAWxE;AAED,KAAK,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,OAAe,EAAE,GAAG,KAAK,EAAC,EAAE,oBAAoB,2CAiBpF;AAED,KAAK,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAe3B;AAED,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAC,CAAC"}

package/dist/components/button-group/button-group.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+const buttonGroupVariants = cva([
+    'flex w-fit items-stretch',
+    // Apply shadow to the group container instead of individual children
+    'rounded-6 shadow-button-neutral',
+    // Focus management
+    '[&>*]:focus-visible:z-10 [&>*]:focus-visible:relative',
+    // Select trigger sizing
+    "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
+    // Input flex
+    '[&>input]:flex-1',
+    // Nested button groups
+    'has-[>[data-slot=button-group]]:gap-8',
+    // Remove shadows from all children to prevent inner shadow artifacts
+    '[&>*]:shadow-none'
+], {
+    variants: {
+        orientation: {
+            horizontal: [
+                // Remove left border-radius and left border from all but first child
+                '[&>*:not(:first-child)]:rounded-l-none',
+                '[&>*:not(:first-child)]:border-l-0',
+                // Remove right border-radius from all but last child
+                '[&>*:not(:last-child)]:rounded-r-none'
+            ],
+            vertical: [
+                'flex-col',
+                // Remove top border-radius and top border from all but first child
+                '[&>*:not(:first-child)]:rounded-t-none',
+                '[&>*:not(:first-child)]:border-t-0',
+                // Remove bottom border-radius from all but last child
+                '[&>*:not(:last-child)]:rounded-b-none'
+            ]
+        }
+    },
+    defaultVariants: {
+        orientation: 'horizontal'
+    }
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return(// biome-ignore lint/a11y/useSemanticElements: role="group" is semantically correct for button groups
+    /*#__PURE__*/ _jsx("div", {
+        role: "group",
+        "data-slot": "button-group",
+        "data-orientation": orientation,
+        className: cn(buttonGroupVariants({
+            orientation
+        }), className),
+        ...props
+    }));
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ _jsx(Comp, {
+        "data-slot": "button-group-text",
+        className: cn('flex items-center gap-8 rounded-6 px-12', 'bg-background-field-base text-foreground-neutral-subtle', 'text-sm leading-20 font-medium', 'shadow-button-neutral', "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16", className),
+        ...props
+    });
+}
+function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "aria-hidden": "true",
+        "data-slot": "button-group-separator",
+        "data-orientation": orientation,
+        className: cn('shrink-0 self-stretch', 'bg-border-neutral-strong', orientation === 'vertical' ? 'h-auto w-px' : 'h-px w-auto', className),
+        ...props
+    });
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nconst buttonGroupVariants = cva(\n  [\n    'flex w-fit items-stretch',\n    // Apply shadow to the group container instead of individual children\n    'rounded-6 shadow-button-neutral',\n    // Focus management\n    '[&>*]:focus-visible:z-10 [&>*]:focus-visible:relative',\n    // Select trigger sizing\n    \"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit\",\n    // Input flex\n    '[&>input]:flex-1',\n    // Nested button groups\n    'has-[>[data-slot=button-group]]:gap-8',\n    // Remove shadows from all children to prevent inner shadow artifacts\n    '[&>*]:shadow-none',\n  ],\n  {\n    variants: {\n      orientation: {\n        horizontal: [\n          // Remove left border-radius and left border from all but first child\n          '[&>*:not(:first-child)]:rounded-l-none',\n          '[&>*:not(:first-child)]:border-l-0',\n          // Remove right border-radius from all but last child\n          '[&>*:not(:last-child)]:rounded-r-none',\n        ],\n        vertical: [\n          'flex-col',\n          // Remove top border-radius and top border from all but first child\n          '[&>*:not(:first-child)]:rounded-t-none',\n          '[&>*:not(:first-child)]:border-t-0',\n          // Remove bottom border-radius from all but last child\n          '[&>*:not(:last-child)]:rounded-b-none',\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  },\n);\n\ntype ButtonGroupProps = ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;\n\nfunction ButtonGroup({className, orientation, ...props}: ButtonGroupProps) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" is semantically correct for button groups\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({orientation}), className)}\n      {...props}\n    />\n  );\n}\n\ntype ButtonGroupTextProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nfunction ButtonGroupText({className, asChild = false, ...props}: ButtonGroupTextProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"button-group-text\"\n      className={cn(\n        'flex items-center gap-8 rounded-6 px-12',\n        'bg-background-field-base text-foreground-neutral-subtle',\n        'text-sm leading-20 font-medium',\n        'shadow-button-neutral',\n        \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype ButtonGroupSeparatorProps = ComponentProps<'div'> & {\n  orientation?: 'horizontal' | 'vertical';\n};\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ButtonGroupSeparatorProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"button-group-separator\"\n      data-orientation={orientation}\n      className={cn(\n        'shrink-0 self-stretch',\n        'bg-border-neutral-strong',\n        orientation === 'vertical' ? 'h-auto w-px' : 'h-px w-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};\n"],"names":["Slot","cva","cn","buttonGroupVariants","variants","orientation","horizontal","vertical","defaultVariants","ButtonGroup","className","props","div","role","data-slot","data-orientation","ButtonGroupText","asChild","Comp","ButtonGroupSeparator","aria-hidden"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,MAAMC,sBAAsBF,IAC1B;IACE;IACA,qEAAqE;IACrE;IACA,mBAAmB;IACnB;IACA,wBAAwB;IACxB;IACA,aAAa;IACb;IACA,uBAAuB;IACvB;IACA,qEAAqE;IACrE;CACD,EACD;IACEG,UAAU;QACRC,aAAa;YACXC,YAAY;gBACV,qEAAqE;gBACrE;gBACA;gBACA,qDAAqD;gBACrD;aACD;YACDC,UAAU;gBACR;gBACA,mEAAmE;gBACnE;gBACA;gBACA,sDAAsD;gBACtD;aACD;QACH;IACF;IACAC,iBAAiB;QACfH,aAAa;IACf;AACF;AAKF,SAASI,YAAY,EAACC,SAAS,EAAEL,WAAW,EAAE,GAAGM,OAAwB;IACvE,OACE,qGAAqG;kBACrG,KAACC;QACCC,MAAK;QACLC,aAAU;QACVC,oBAAkBV;QAClBK,WAAWR,GAAGC,oBAAoB;YAACE;QAAW,IAAIK;QACjD,GAAGC,KAAK;;AAGf;AAMA,SAASK,gBAAgB,EAACN,SAAS,EAAEO,UAAU,KAAK,EAAE,GAAGN,OAA4B;IACnF,MAAMO,OAAOD,UAAUjB,OAAO;IAE9B,qBACE,KAACkB;QACCJ,aAAU;QACVJ,WAAWR,GACT,2CACA,2DACA,kCACA,yBACA,qEACAQ;QAED,GAAGC,KAAK;;AAGf;AAMA,SAASQ,qBAAqB,EAC5BT,SAAS,EACTL,cAAc,UAAU,EACxB,GAAGM,OACuB;IAC1B,qBACE,KAACC;QACCQ,eAAY;QACZN,aAAU;QACVC,oBAAkBV;QAClBK,WAAWR,GACT,yBACA,4BACAG,gBAAgB,aAAa,gBAAgB,eAC7CK;QAED,GAAGC,KAAK;;AAGf;AAEA,SAAQF,WAAW,EAAEU,oBAAoB,EAAEH,eAAe,EAAEb,mBAAmB,GAAE"}