@kanso-labs/kanso-ui 0.22.0 → 0.23.0

package/README.md

@@ -6,7 +6,7 @@ sourced from a single
 [W3C Design Tokens (DTCG)](https://design-tokens.github.io/community-group/format/)
 file and compiled via [Style Dictionary](https://styledictionary.com).
 
-Every component is documented in Storybook, published from `main` at
+Every component is documented in Storybook, published from the latest release at
 **[kanso-ui.kansolabs.org](https://kanso-ui.kansolabs.org/)**.
 
 ## Installation

package/dist/components/color-wheel/index.d.ts

@@ -0,0 +1,44 @@
+import { ColorWheelProps } from "react-aria-components";
+//#region src/components/color-wheel/index.d.ts
+type ColorWheelProps$1 = Omit<ColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {
+  /** A function may compute the class from the wheel's render state. */
+  className?: string;
+  /**
+   * How far the ring reaches from the centre, in pixels. The wheel is twice
+   * this across.
+   * @default 100
+   */
+  outerRadius?: number;
+  /** Lands on the wheel, as `className` does. */
+  style?: React.CSSProperties;
+  /**
+   * How wide the band is, in pixels. The inner radius is this in from
+   * `outerRadius`, so the two cannot disagree.
+   * @default 16
+   */
+  thickness?: number;
+};
+/**
+ * Hue as a ring, with a handle on it. The value is React Aria's: pass
+ * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour
+ * string or a `Color` from `parseColor`, which this package re-exports.
+ *
+ * ```tsx
+ * <ColorWheel defaultValue="hsl(200, 100%, 50%)" />
+ * ```
+ *
+ * A wheel slides hue and nothing else, so unlike `ColorSlider` and
+ * `ColorArea` it names no channel and there is no space for one to be
+ * missing from — a hex value works here.
+ *
+ * The middle is genuinely empty rather than filled, so a `ColorArea` or a
+ * `ColorSwatch` can sit inside one. React Aria names the handle "Hue" and
+ * announces the value; pass `aria-label` to say something else.
+ *
+ * The call site's `className` and `style` land on the wheel, which is the
+ * element a layout positions. Its size comes from `outerRadius`.
+ */
+declare function ColorWheel$1({ className, isDisabled, outerRadius, style, thickness, ...props }: ColorWheelProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorWheelProps$1 as ColorWheelProps, ColorWheel$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-wheel/index.js

@@ -0,0 +1,64 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { thumbClassName } from "../../styles/color.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColorThumb, ColorWheel, ColorWheelTrack } from "react-aria-components";
+//#region src/components/color-wheel/index.tsx
+const DEFAULT_OUTER_RADIUS = 100;
+const DEFAULT_THICKNESS = 16;
+const _temp = {
+	kX1K2I: "xwjwp01",
+	"$$css": true
+};
+const styles = {
+	track: {
+		kkrTdU: "x1ypdohk",
+		$$css: true
+	},
+	trackDisabled: {
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	trackRing: (inner) => [_temp, { "--x-maskImage": `radial-gradient(circle at center, transparent ${Math.max(0, inner - .5)}px, #000 ${inner + .5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - .5)}px, #000 ${inner + .5}px)` : void 0 }]
+};
+/**
+* Hue as a ring, with a handle on it. The value is React Aria's: pass
+* `value` with `onChange` to control it, or `defaultValue`, as a CSS colour
+* string or a `Color` from `parseColor`, which this package re-exports.
+*
+* ```tsx
+* <ColorWheel defaultValue="hsl(200, 100%, 50%)" />
+* ```
+*
+* A wheel slides hue and nothing else, so unlike `ColorSlider` and
+* `ColorArea` it names no channel and there is no space for one to be
+* missing from — a hex value works here.
+*
+* The middle is genuinely empty rather than filled, so a `ColorArea` or a
+* `ColorSwatch` can sit inside one. React Aria names the handle "Hue" and
+* announces the value; pass `aria-label` to say something else.
+*
+* The call site's `className` and `style` land on the wheel, which is the
+* element a layout positions. Its size comes from `outerRadius`.
+*/
+function ColorWheel$1({ className, isDisabled = false, outerRadius = DEFAULT_OUTER_RADIUS, style, thickness = DEFAULT_THICKNESS, ...props$1 }) {
+	const innerRadius = Math.max(0, outerRadius - thickness);
+	return /* @__PURE__ */ jsxs(ColorWheel, {
+		innerRadius,
+		isDisabled,
+		outerRadius,
+		...props$1,
+		...mergeStyles({
+			0: { className: "x9f619 x1rg5ohu x14ju556" },
+			1: { className: "x9f619 x1rg5ohu x14ju556 x1ppv7y9" }
+		}[!!isDisabled << 0], {
+			className,
+			style
+		}),
+		children: [/* @__PURE__ */ jsx(ColorWheelTrack, { ...props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled) }), /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })]
+	});
+}
+//#endregion
+export { ColorWheel$1 as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/color-wheel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: string;\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** Lands on the wheel, as `className` does. */\n  style?: React.CSSProperties;\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":";;;;;;AA8BA,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,QAAQ;CACZ,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,YAAY,UAAkB,CAAC,OAAO,EACpC,iBAAiB,iDAAiD,KAAK,IAAI,GAAG,QAAQ,EAAG,EAAC,WAAY,QAAQ,GAAG,QAAS,OAAO,iDAAiD,KAAK,IAAI,GAAG,QAAQ,EAAG,EAAC,WAAY,QAAQ,GAAG,OAAQ,KAAA,EAC3O,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAS,aAAW,EAClB,WACA,aAAa,OACb,cAAc,sBACd,OACA,YAAY,mBACZ,GAAG,WACe;CAClB,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,SAAS;CACvD,OAAO,qBAAC,YAAD;EAA4B;EAAyB;EAAyB;EAAa,GAAI;EAAO,GAAI,YAAY;GAC3H,GAAG,EACD,WAAW,2BACb;GACA,GAAG,EACD,WAAW,oCACb;EACF,EAAE,CAAC,CAAC,cAAc,IAAI;GACpB;GACA;EACF,CAAC;EAVM,UAAA,CAWH,oBAAC,iBAAD,EAAoB,GAAI,MAAa,OAAO,OAAO,OAAO,UAAU,WAAW,GAAG,cAAc,OAAO,aAAa,EAAE,CAAA,GACtH,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA,CAC5B;;AACnB"}

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ import ColorArea, { ColorAreaProps } from "./color-area/index.js";
 import ColorSlider, { ColorSliderProps } from "./color-slider/index.js";
 import ColorSwatch, { ColorSwatchProps } from "./color-swatch/index.js";
 import ColorSwatchPicker, { ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
+import ColorWheel, { ColorWheelProps } from "./color-wheel/index.js";
 import ComboBox, { ComboBoxProps } from "./combo-box/index.js";
 import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
@@ -64,4 +65,4 @@ import TokenField, { TokenFieldProps } from "./token-field/index.js";
 import Toolbar, { ToolbarProps } from "./toolbar/index.js";
 import Tooltip, { TooltipProps } from "./tooltip/index.js";
 import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./tree/index.js";
-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, ColorArea, type ColorAreaProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, 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, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, 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, 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, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };
+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, ColorArea, type ColorAreaProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, 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, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, 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, 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, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import ColorArea, { ColorAreaProps } from "./components/color-area/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 ColorWheel, { ColorWheelProps } from "./components/color-wheel/index.js";
 import ComboBox, { ComboBoxProps } from "./components/combo-box/index.js";
 import Container, { ContainerProps } from "./components/container/index.js";
 import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
@@ -69,4 +70,4 @@ 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, 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, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, 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, 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 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, 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, 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 };

package/dist/index.js

@@ -17,6 +17,7 @@ import ColorArea from "./components/color-area/index.js";
 import ColorSlider from "./components/color-slider/index.js";
 import ColorSwatch from "./components/color-swatch/index.js";
 import ColorSwatchPicker from "./components/color-swatch-picker/index.js";
+import ColorWheel from "./components/color-wheel/index.js";
 import ListBox from "./components/list-box/index.js";
 import ComboBox from "./components/combo-box/index.js";
 import Container from "./components/container/index.js";
@@ -68,4 +69,4 @@ import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, 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, Autocomplete, Avatar, Breadcrumbs, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Code, Collection, ColorArea, ColorSlider, ColorSwatch, ColorSwatchPicker, ComboBox, Container, CopyField, Currency, DIRECTORY_DRAG_TYPE, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, DropZone, Feed, FileTrigger, Focusable, Form, GridLayout, I18nProvider, IconButton, Keycap, Link, List, ListBox, ListDetail, ListItem, ListLayout, Menu, Meter, NavigationTree, NumberField, Popover, Pressable, ProductIcon, ProgressIndicator, Radio, RadioGroup, RangeCalendar, RouterProvider, SearchField, SegmentedButton, Select, Separator, Sheet, Slider, Snackbar, Stack, SupportingPane, Switch, Table, TableLayout, Tabs, Tag, Text, TextArea, TextField, TimeField, TokenField, TokenFieldValue, Toolbar, Tooltip, Tree, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, Autocomplete, Avatar, Breadcrumbs, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Code, Collection, ColorArea, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, ComboBox, Container, CopyField, Currency, DIRECTORY_DRAG_TYPE, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, DropZone, Feed, FileTrigger, Focusable, Form, GridLayout, I18nProvider, IconButton, Keycap, Link, List, ListBox, ListDetail, ListItem, ListLayout, Menu, Meter, NavigationTree, NumberField, Popover, Pressable, ProductIcon, ProgressIndicator, Radio, RadioGroup, RangeCalendar, RouterProvider, SearchField, SegmentedButton, Select, Separator, Sheet, Slider, Snackbar, Stack, SupportingPane, Switch, Table, TableLayout, Tabs, Tag, Text, TextArea, TextField, TimeField, TokenField, TokenFieldValue, Toolbar, Tooltip, Tree, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/styles.css

@@ -1531,6 +1531,11 @@
     margin-inline-start: var(--x3km7fe);
   }
 
+  .xwjwp01 {
+    -webkit-mask-image: var(--x-maskImage);
+    mask-image: var(--x-maskImage);
+  }
+
   .x19kjcj4 {
     object-fit: contain;
   }
@@ -3066,6 +3071,11 @@
   inherits: false
 }
 
+@property --x-maskImage {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-maxInlineSize {
   syntax: "*";
   inherits: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.22.0",
+  "version": "0.23.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",