@cytario/design 3.0.0 → 3.1.0

package/dist/index.d.ts

@@ -7,14 +7,15 @@ import React__default, { ReactNode } from 'react';
 import { TreeApi } from 'react-arborist';
 export { TreeApi } from 'react-arborist';
 
+type Size = "sm" | "md" | "lg";
 type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive" | "default" | "success" | "info" | "neutral";
-type ButtonSize = "sm" | "md" | "lg";
 
+type ButtonSize$1 = Size;
 interface ButtonProps extends ButtonProps$1 {
     /** Visual style variant */
     variant?: ButtonVariant;
     /** Size preset */
-    size?: ButtonSize;
+    size?: ButtonSize$1;
     /** Shows a spinner and disables interaction */
     isLoading?: boolean;
     /** Lucide icon rendered before children */
@@ -94,7 +95,7 @@ interface InputProps extends Omit<TextFieldProps, "children" | "className"> {
     /** HTML input type */
     type?: "text" | "email" | "password" | "number";
     /** Controls padding and font size */
-    size?: "sm" | "md" | "lg";
+    size?: Size;
     /** Text prefix shown inside the input on the left (e.g., "$", "https://") */
     prefix?: string;
     /** Text alignment within the input */
@@ -113,11 +114,13 @@ interface SelectProps extends Omit<SelectProps$1<SelectItem>, "children"> {
     label?: string;
     placeholder?: string;
     errorMessage?: string;
+    /** Controls padding and font size */
+    size?: Size;
     /** Custom visual renderer for items in the dropdown and trigger.
      *  `item.name` remains the accessible label (used for typeahead and screen readers). */
     renderItem?: (item: SelectItem) => React__default.ReactNode;
 }
-declare function Select({ label, items, placeholder, errorMessage, isDisabled, isRequired, className, renderItem, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ label, items, placeholder, errorMessage, size, isDisabled, isRequired, className, renderItem, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
 type TableSize = "compact" | "comfortable";
 interface DataTableProps extends TableProps {
@@ -303,6 +306,7 @@ interface BreadcrumbsProps {
 }
 declare function Breadcrumbs({ items, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
+type ButtonSize = Size;
 interface ButtonLinkProps extends Omit<LinkProps$1, "className"> {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -1022,4 +1026,4 @@ declare const LineHeightTight = 1.25;
 declare const LineHeightNormal = 1.5;
 declare const LineHeightRelaxed = 1.625;
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorAmber100, ColorAmber200, ColorAmber300, ColorAmber400, ColorAmber50, ColorAmber500, ColorAmber600, ColorAmber700, ColorAmber800, ColorAmber900, ColorBadgeAmberBg, ColorBadgeAmberText, ColorBadgeGreenBg, ColorBadgeGreenText, ColorBadgeNeutralBg, ColorBadgeNeutralText, ColorBadgePurpleBg, ColorBadgePurpleText, ColorBadgeRoseBg, ColorBadgeRoseText, ColorBadgeSlateBg, ColorBadgeSlateText, ColorBadgeTealBg, ColorBadgeTealText, ColorBannerDangerBg, ColorBannerDangerBorder, ColorBannerDangerIcon, ColorBannerDangerText, ColorBannerInfoBg, ColorBannerInfoBorder, ColorBannerInfoIcon, ColorBannerInfoText, ColorBannerSuccessBg, ColorBannerSuccessBorder, ColorBannerSuccessIcon, ColorBannerSuccessText, ColorBannerWarningBg, ColorBannerWarningBorder, ColorBannerWarningIcon, ColorBannerWarningText, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorDeltaDecreaseBg, ColorDeltaDecreaseIcon, ColorDeltaDecreaseText, ColorDeltaFlatBg, ColorDeltaFlatIcon, ColorDeltaFlatText, ColorDeltaIncreaseBg, ColorDeltaIncreaseIcon, ColorDeltaIncreaseText, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorProgressFill, ColorProgressFillDanger, ColorProgressFillSuccess, ColorProgressFillWarning, ColorProgressTrack, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple50, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorRose100, ColorRose200, ColorRose300, ColorRose400, ColorRose50, ColorRose500, ColorRose600, ColorRose700, ColorRose800, ColorRose900, ColorSlate100, ColorSlate200, ColorSlate300, ColorSlate400, ColorSlate50, ColorSlate500, ColorSlate600, ColorSlate700, ColorSlate800, ColorSlate900, ColorStatusDanger, ColorStatusInfo, ColorStatusSuccess, ColorStatusWarning, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceHover, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfacePressed, ColorSurfaceSelected, ColorSurfaceSelectedHover, ColorSurfaceSubtle, ColorSurfaceSuccess, ColorSurfaceWarning, ColorTeal100, ColorTeal200, ColorTeal300, ColorTeal400, ColorTeal50, ColorTeal500, ColorTeal600, ColorTeal700, ColorTeal800, ColorTeal900, ColorTextAccent, ColorTextBrand, ColorTextDanger, ColorTextInfo, ColorTextInverse, ColorTextPrimary, ColorTextSecondary, ColorTextSuccess, ColorTextTertiary, ColorTextWarning, Column, type DataTableProps, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileCard, type FileCardProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, type GroupPosition, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, type IconProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupContext, type InputGroupProps, type InputProps, Label, type LabelProps, LineHeightNormal, LineHeightRelaxed, LineHeightTight, Link, type LinkProps, type LinkVariant, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, PathPill, type PathPillProps, Pill, type PillColor, type PillProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SectionHeader, type SectionHeaderProps, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, Spacing1, Spacing12, Spacing16, Spacing2, Spacing3, Spacing4, Spacing6, Spacing8, Spinner, type SpinnerProps, StorageConnectionCard, type StorageConnectionCardProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem, type ToggleButtonGroupItemProps, type ToggleButtonGroupProps, type ToggleButtonGroupSize, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, pillColorFromName, useFormWizard, useInputGroup, useToast };
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize$1 as ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorAmber100, ColorAmber200, ColorAmber300, ColorAmber400, ColorAmber50, ColorAmber500, ColorAmber600, ColorAmber700, ColorAmber800, ColorAmber900, ColorBadgeAmberBg, ColorBadgeAmberText, ColorBadgeGreenBg, ColorBadgeGreenText, ColorBadgeNeutralBg, ColorBadgeNeutralText, ColorBadgePurpleBg, ColorBadgePurpleText, ColorBadgeRoseBg, ColorBadgeRoseText, ColorBadgeSlateBg, ColorBadgeSlateText, ColorBadgeTealBg, ColorBadgeTealText, ColorBannerDangerBg, ColorBannerDangerBorder, ColorBannerDangerIcon, ColorBannerDangerText, ColorBannerInfoBg, ColorBannerInfoBorder, ColorBannerInfoIcon, ColorBannerInfoText, ColorBannerSuccessBg, ColorBannerSuccessBorder, ColorBannerSuccessIcon, ColorBannerSuccessText, ColorBannerWarningBg, ColorBannerWarningBorder, ColorBannerWarningIcon, ColorBannerWarningText, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorDeltaDecreaseBg, ColorDeltaDecreaseIcon, ColorDeltaDecreaseText, ColorDeltaFlatBg, ColorDeltaFlatIcon, ColorDeltaFlatText, ColorDeltaIncreaseBg, ColorDeltaIncreaseIcon, ColorDeltaIncreaseText, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorProgressFill, ColorProgressFillDanger, ColorProgressFillSuccess, ColorProgressFillWarning, ColorProgressTrack, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple50, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorRose100, ColorRose200, ColorRose300, ColorRose400, ColorRose50, ColorRose500, ColorRose600, ColorRose700, ColorRose800, ColorRose900, ColorSlate100, ColorSlate200, ColorSlate300, ColorSlate400, ColorSlate50, ColorSlate500, ColorSlate600, ColorSlate700, ColorSlate800, ColorSlate900, ColorStatusDanger, ColorStatusInfo, ColorStatusSuccess, ColorStatusWarning, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceHover, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfacePressed, ColorSurfaceSelected, ColorSurfaceSelectedHover, ColorSurfaceSubtle, ColorSurfaceSuccess, ColorSurfaceWarning, ColorTeal100, ColorTeal200, ColorTeal300, ColorTeal400, ColorTeal50, ColorTeal500, ColorTeal600, ColorTeal700, ColorTeal800, ColorTeal900, ColorTextAccent, ColorTextBrand, ColorTextDanger, ColorTextInfo, ColorTextInverse, ColorTextPrimary, ColorTextSecondary, ColorTextSuccess, ColorTextTertiary, ColorTextWarning, Column, type DataTableProps, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileCard, type FileCardProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, type GroupPosition, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, type IconProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupContext, type InputGroupProps, type InputProps, Label, type LabelProps, LineHeightNormal, LineHeightRelaxed, LineHeightTight, Link, type LinkProps, type LinkVariant, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, PathPill, type PathPillProps, Pill, type PillColor, type PillProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SectionHeader, type SectionHeaderProps, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, Spacing1, Spacing12, Spacing16, Spacing2, Spacing3, Spacing4, Spacing6, Spacing8, Spinner, type SpinnerProps, StorageConnectionCard, type StorageConnectionCardProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem, type ToggleButtonGroupItemProps, type ToggleButtonGroupProps, type ToggleButtonGroupSize, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, pillColorFromName, useFormWizard, useInputGroup, useToast };

package/dist/index.js

@@ -10,6 +10,11 @@ import {
 import { twMerge } from "tailwind-merge";
 
 // src/components/_shared/styles.ts
+var sizeStyles = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
 var variantStyles = {
   primary: [
     "bg-(--color-action-primary) text-(--color-text-inverse)",
@@ -54,11 +59,6 @@ var variantStyles = {
     "pressed:bg-(--color-surface-muted)"
   ].join(" ")
 };
-var sizeStyles = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-6 py-3 text-lg"
-};
 
 // src/components/Icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
@@ -333,16 +333,6 @@ import {
   Text
 } from "react-aria-components";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var sizeClasses = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-4 py-3 text-lg"
-};
-var prefixSizeClasses = {
-  sm: "px-3 text-sm",
-  md: "px-3 text-base",
-  lg: "px-4 text-lg"
-};
 var alignClasses = {
   left: "text-left",
   center: "text-center",
@@ -438,7 +428,7 @@ function Input({
                     "bg-(--color-surface-subtle)",
                     "border-r border-r-(--color-border-default)",
                     "text-(--color-text-secondary)",
-                    prefixSizeClasses[size]
+                    sizeStyles[size]
                   ].join(" "),
                   children: prefix
                 }
@@ -449,7 +439,7 @@ function Input({
                   placeholder,
                   className: [
                     "w-full bg-transparent",
-                    sizeClasses[size],
+                    sizeStyles[size],
                     alignClasses[align],
                     "text-(--color-text-primary)",
                     "placeholder:text-(--color-text-tertiary)",
@@ -465,7 +455,7 @@ function Input({
             placeholder,
             className: [
               "w-full",
-              sizeClasses[size],
+              sizeStyles[size],
               alignClasses[align],
               radiusClass,
               "border",
@@ -519,6 +509,7 @@ function Select({
   items,
   placeholder = "Select an option",
   errorMessage,
+  size = "md",
   isDisabled,
   isRequired,
   className,
@@ -550,14 +541,17 @@ function Select({
           Button2,
           {
             className: twMerge2(
-              "inline-flex items-center justify-between",
-              "w-full rounded-md px-4 py-2",
-              "text-base text-left",
-              "border outline-none transition-colors",
-              hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)",
-              "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
-              "cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
-              "bg-(--color-surface-default)"
+              `
+            inline-flex items-center justify-between
+            w-full rounded-md
+            text-left
+            border outline-none transition-colors
+            focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2
+            cursor-pointer disabled:opacity-50 disabled:pointer-events-none
+            bg-(--color-surface-default)
+          `,
+              sizeStyles[size],
+              hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)"
             ),
             children: [
               /* @__PURE__ */ jsx7(
@@ -578,7 +572,10 @@ function Select({
                 ChevronDown,
                 {
                   "aria-hidden": true,
-                  className: "h-4 w-4 shrink-0 text-(--color-text-secondary)"
+                  className: twMerge2(
+                    "shrink-0 text-(--color-text-secondary)",
+                    size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
+                  )
                 }
               )
             ]
@@ -604,13 +601,16 @@ function Select({
                 id: item.id,
                 textValue: item.name,
                 className: twMerge2(
-                  "flex items-center justify-between gap-2",
-                  "px-4 py-2 rounded-sm",
-                  "text-base text-(--color-text-primary)",
-                  "cursor-pointer outline-none",
-                  "hover:bg-(--color-surface-muted)",
-                  "focus-visible:bg-(--color-surface-muted)",
-                  "selected:text-(--color-action-primary) selected:font-medium"
+                  `
+                  flex items-center justify-between gap-2
+                  rounded-sm
+                  text-(--color-text-primary)
+                  cursor-pointer outline-none
+                  hover:bg-(--color-surface-muted)
+                  focus-visible:bg-(--color-surface-muted)
+                  selected:text-(--color-action-primary) selected:font-medium
+                `,
+                  sizeStyles[size]
                 ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
                   /* @__PURE__ */ jsx7("span", { className: "truncate", children: renderItem ? renderItem(item) : item.name }),