@kanso-labs/kanso-ui 0.26.6 → 0.28.0

package/dist/index.d.ts

@@ -1,75 +1,76 @@
+import { FieldVariant } from "./field/index.js";
 import AppBar, { AppBarProps } from "./components/app-bar/index.js";
-import Autocomplete, { AutocompleteProps } from "./components/autocomplete/index.js";
+import Autocomplete, { AutocompleteFilter, AutocompleteProps } from "./components/autocomplete/index.js";
 import Avatar, { AvatarProps } from "./components/avatar/index.js";
-import Breadcrumbs, { BreadcrumbsProps } from "./components/breadcrumbs/index.js";
-import Button, { ButtonProps } from "./components/button/index.js";
+import Breadcrumbs, { BreadcrumbsItemProps, BreadcrumbsProps } from "./components/breadcrumbs/index.js";
+import Button, { ButtonProps, ButtonSize, ButtonVariant } from "./components/button/index.js";
 import Calendar, { CalendarProps } from "./components/calendar/index.js";
 import Card, { CardProps } from "./components/card/index.js";
 import Checkbox, { CheckboxProps } from "./components/checkbox/index.js";
 import CheckboxGroup, { CheckboxGroupProps } from "./components/checkbox-group/index.js";
 import Chip, { ChipProps } from "./components/chip/index.js";
-import ChipGroup, { ChipGroupProps } from "./components/chip-group/index.js";
+import ChipGroup, { ChipGroupChipProps, ChipGroupProps } from "./components/chip-group/index.js";
 import Code, { CodeProps } from "./components/code/index.js";
 import ColorArea, { ColorAreaProps } from "./components/color-area/index.js";
 import ColorField, { ColorFieldProps } from "./components/color-field/index.js";
 import ColorPicker, { ColorPickerProps } from "./components/color-picker/index.js";
 import ColorSlider, { ColorSliderProps } from "./components/color-slider/index.js";
 import ColorSwatch, { ColorSwatchProps } from "./components/color-swatch/index.js";
-import ColorSwatchPicker, { ColorSwatchPickerProps } from "./components/color-swatch-picker/index.js";
+import ColorSwatchPicker, { ColorSwatchPickerItemProps, ColorSwatchPickerProps } from "./components/color-swatch-picker/index.js";
 import ColorWheel, { ColorWheelProps } from "./components/color-wheel/index.js";
-import ComboBox, { ComboBoxProps } from "./components/combo-box/index.js";
+import ComboBox, { ComboBoxProps, ComboBoxSelectionMode } from "./components/combo-box/index.js";
 import Container, { ContainerProps } from "./components/container/index.js";
 import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
 import Currency, { CurrencyProps } from "./components/currency/index.js";
 import DateField, { DateFieldProps } from "./components/date-field/index.js";
 import DatePicker, { DatePickerProps } from "./components/date-picker/index.js";
 import DateRangePicker, { DateRangePickerProps } from "./components/date-range-picker/index.js";
-import Dialog, { DialogProps } from "./components/dialog/index.js";
-import Disclosure, { DisclosureProps } from "./components/disclosure/index.js";
+import Dialog, { DialogContentProps, DialogProps, DialogTitleProps } from "./components/dialog/index.js";
+import Disclosure, { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps } from "./components/disclosure/index.js";
 import DisclosureGroup, { DisclosureGroupProps } from "./components/disclosure-group/index.js";
 import DropZone, { DropZoneProps, FileTrigger, FileTriggerProps } from "./components/drop-zone/index.js";
 import Feed, { FeedProps } from "./components/feed/index.js";
 import Form, { FormProps } from "./components/form/index.js";
-import IconButton, { IconButtonProps } from "./components/icon-button/index.js";
+import IconButton, { IconButtonProps, IconButtonSize, IconButtonVariant } from "./components/icon-button/index.js";
 import Keycap, { KeycapProps } from "./components/keycap/index.js";
-import Link, { LinkProps } from "./components/link/index.js";
-import List, { ListProps } from "./components/list/index.js";
-import ListBox, { ListBoxProps } from "./components/list-box/index.js";
+import Link, { LinkProps, LinkTone, LinkUnderline } from "./components/link/index.js";
+import List, { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps } from "./components/list/index.js";
+import ListBox, { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps } from "./components/list-box/index.js";
 import ListDetail, { ListDetailProps } from "./components/list-detail/index.js";
 import ListItem, { ListItemProps } from "./components/list-item/index.js";
-import Separator, { SeparatorProps } from "./components/separator/index.js";
-import Menu, { MenuProps } from "./components/menu/index.js";
-import Meter, { MeterProps } from "./components/meter/index.js";
+import Separator, { SeparatorInset, SeparatorProps } from "./components/separator/index.js";
+import Menu, { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps } from "./components/menu/index.js";
+import Meter, { MeterProps, MeterTone } from "./components/meter/index.js";
 import NavigationTree, { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps } from "./components/navigation-tree/index.js";
 import NumberField, { NumberFieldProps } from "./components/number-field/index.js";
-import Popover, { PopoverProps } from "./components/popover/index.js";
+import Popover, { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger } from "./components/popover/index.js";
 import ProductIcon, { ProductIconProps } from "./components/product-icon/index.js";
-import ProgressIndicator, { ProgressIndicatorProps } from "./components/progress-indicator/index.js";
+import ProgressIndicator, { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant } from "./components/progress-indicator/index.js";
 import RadioGroup, { Radio, RadioGroupProps, RadioProps } from "./components/radio-group/index.js";
 import RangeCalendar, { RangeCalendarProps } from "./components/range-calendar/index.js";
 import SearchField, { SearchFieldProps } from "./components/search-field/index.js";
 import SegmentedButton, { SegmentedButtonProps, SegmentedButtonSegmentProps } from "./components/segmented-button/index.js";
 import Select, { SelectProps } from "./components/select/index.js";
-import Sheet, { SheetProps } from "./components/sheet/index.js";
+import Sheet, { SheetContentProps, SheetProps, SheetTitleProps } from "./components/sheet/index.js";
 import Slider, { SliderProps } from "./components/slider/index.js";
-import Snackbar, { SnackbarProps } from "./components/snackbar/index.js";
+import Snackbar, { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, SnackbarRegionRenderProps as ToastRegionRenderProps } from "./components/snackbar/index.js";
 import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./components/stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./components/supporting-pane/index.js";
 import Switch, { SwitchProps } from "./components/switch/index.js";
-import Table, { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableProps, TableRowProps } from "./components/table/index.js";
-import Tabs, { TabsProps } from "./components/tabs/index.js";
+import Table, { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps } from "./components/table/index.js";
+import Tabs, { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps } from "./components/tabs/index.js";
 import Tag, { TagProps } from "./components/tag/index.js";
 import Text, { TextProps } from "./components/text/index.js";
 import TextArea, { TextAreaProps } from "./components/text-area/index.js";
 import TextField, { TextFieldProps } from "./components/text-field/index.js";
 import TimeField, { TimeFieldProps } from "./components/time-field/index.js";
-import TokenField, { TokenFieldProps } from "./components/token-field/index.js";
-import Toolbar, { ToolbarProps } from "./components/toolbar/index.js";
-import Tooltip, { TooltipProps } from "./components/tooltip/index.js";
+import TokenField, { TokenFieldProps, TokenSegment } from "./components/token-field/index.js";
+import Toolbar, { ToolbarProps, ToolbarTone } from "./components/toolbar/index.js";
+import Tooltip, { TooltipAlign, TooltipProps, TooltipSide } from "./components/tooltip/index.js";
 import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./components/tree/index.js";
 import "./components/index.js";
 import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, Key, ListLayout, PressEvent, Pressable, RouterProvider, Selection, SharedElement, SharedElementTransition, SortDescriptor, TableLayout, TokenFieldValue, Virtualizer, VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter, useListData, useLocale, useTreeData } from "./react-aria.js";
 import "./styles.css";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type Key, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorProps, SharedElement, SharedElementTransition, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type SortDescriptor, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, TableLayout, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, TokenFieldValue, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogContentProps, type DialogProps, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureHeaderProps, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type Key, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, type ListBoxItemProps, type ListBoxLoadMoreProps, type ListBoxProps, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, Menu, type MenuAlign, type MenuContentProps, type MenuItemProps, type MenuLoadMoreProps, type MenuProps, type MenuSectionProps, type MenuSeparatorProps, type MenuSide, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, type PopoverContentProps, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, type PopoverTitleProps, type PopoverTrigger, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, SharedElement, SharedElementTransition, Sheet, type SheetContentProps, type SheetProps, type SheetTitleProps, Slider, type SliderProps, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, type SortDescriptor, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, TableLayout, type TableLoadMoreProps, type TableProps, type TableRowProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, TokenFieldValue, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/styles.css

@@ -1767,26 +1767,6 @@
     touch-action: none;
   }
 
-  .x18ouj0k {
-    transform-origin: bottom;
-  }
-
-  .x1g0ag68 {
-    transform-origin: center;
-  }
-
-  .x1nf803f {
-    transform-origin: 0;
-  }
-
-  .xyibjs4 {
-    transform-origin: 100%;
-  }
-
-  .x1dp6rp6 {
-    transform-origin: top;
-  }
-
   .x1c071of {
     transform: none;
   }
@@ -1811,6 +1791,26 @@
     transform: translateY(-50%);
   }
 
+  .x18ouj0k {
+    transform-origin: bottom;
+  }
+
+  .x1g0ag68 {
+    transform-origin: center;
+  }
+
+  .x1nf803f {
+    transform-origin: 0;
+  }
+
+  .xyibjs4 {
+    transform-origin: 100%;
+  }
+
+  .x1dp6rp6 {
+    transform-origin: top;
+  }
+
   .xjl7l83 {
     transition-duration: .105s;
   }
@@ -2703,6 +2703,12 @@
     overflow-y: auto;
   }
 
+  @media (width < 600px) {
+    .xd76zvj.xd76zvj {
+      padding: 0;
+    }
+  }
+
   .x18d9i69 {
     padding-bottom: 0;
   }
@@ -2739,12 +2745,6 @@
     padding-top: var(--xod9tvo);
   }
 
-  @media (width < 600px) {
-    .xd76zvj.xd76zvj {
-      padding: 0;
-    }
-  }
-
   .x13vifvy {
     top: 0;
   }
@@ -2987,6 +2987,10 @@
     .xkgydl7.xkgydl7 {
       grid-template-columns: 360px minmax(0, 1fr);
     }
+
+    .x1674ulc.x1674ulc {
+      grid-template-columns: minmax(0, 1fr) 360px;
+    }
   }
 
   @media (width >= 1600px) {
@@ -2995,12 +2999,6 @@
     }
   }
 
-  @media (width >= 840px) {
-    .x1674ulc.x1674ulc {
-      grid-template-columns: minmax(0, 1fr) 360px;
-    }
-  }
-
   @media (width < 600px) {
     .x1upgybz.x1upgybz {
       inset-inline-start: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.26.6",
+  "version": "0.28.0",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -73,14 +73,14 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.5.0",
+    "@kanso-labs/unplugin-style-dictionary": "0.6.0",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-vitest": "10.6.0",
     "@storybook/builder-vite": "10.6.0",
     "@storybook/react-vite": "10.6.0",
-    "@stylexjs/unplugin": "0.19.0",
+    "@stylexjs/unplugin": "0.19.1",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",