@mlola-ui/registry 1.0.2 → 1.0.4

package/snapshot/source/packages/components/combobox/combobox.tsx

@@ -116,11 +116,36 @@ export function ComboboxList({ id, options, active, onActiveChange, onPick, isSe
   );
 }
 
-/** Open the list above the field when there is not enough room below it. */
+/** The visible band a list can open into: the viewport, cut down by any ancestor that clips its content. */
+function visibleBand(element: HTMLElement) {
+  let top = 0;
+  let bottom = window.innerHeight;
+  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (/(hidden|clip|auto|scroll)/.test(style.overflowY) || /(hidden|clip|auto|scroll)/.test(style.overflow)) {
+      const rect = node.getBoundingClientRect();
+      top = Math.max(top, rect.top);
+      bottom = Math.min(bottom, rect.bottom);
+    }
+  }
+  return { top, bottom };
+}
+
+/**
+ * Open the list below the field unless there is too little room there and
+ * more above, counting only space that is actually visible (a card that clips
+ * its content counts as an edge). The room found is left on the field as
+ * --ml-combobox-room, so the list never grows past what can be seen.
+ */
 export function sideFor(element: HTMLElement | null, room = 280): "top" | "bottom" {
   if (!element) return "bottom";
   const rect = element.getBoundingClientRect();
-  return window.innerHeight - rect.bottom < room && rect.top > window.innerHeight - rect.bottom ? "top" : "bottom";
+  const band = visibleBand(element);
+  const below = band.bottom - rect.bottom - 12;
+  const above = rect.top - band.top - 12;
+  const side = below < room && above > below ? "top" : "bottom";
+  element.style.setProperty("--ml-combobox-room", `${Math.max(120, Math.floor(side === "top" ? above : below))}px`);
+  return side;
 }
 
 export interface ComboboxProps {
@@ -148,7 +173,7 @@ export interface ComboboxProps {
  * long lists such as countries, people or repositories. Arrows move, Enter
  * chooses, Escape restores; with `onCreate`, a missing option can be added.
  */
-export function Combobox({
+export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(function Combobox({
   options,
   value,
   defaultValue = null,
@@ -164,7 +189,7 @@ export function Combobox({
   required,
   id,
   className,
-}: ComboboxProps) {
+}: ComboboxProps, ref) {
   const autoId = React.useId();
   const fieldId = id ?? autoId;
   const listId = `${fieldId}-list`;
@@ -253,6 +278,7 @@ export function Combobox({
           </span>
         ) : null}
         <input
+          ref={ref}
           id={fieldId}
           className="ml-input ml-combobox-input"
           data-leading={chosen?.leading && !typed.current ? "" : undefined}
@@ -286,7 +312,7 @@ export function Combobox({
         {clearable && current && !disabled ? (
           <button
             type="button"
-            className="ml-combobox-clear"
+            className="ml-combobox-clear" data-hit="expand"
             aria-label="Clear"
             tabIndex={-1}
             onMouseDown={(event) => event.preventDefault()}
@@ -317,4 +343,5 @@ export function Combobox({
       </div>
     </Field>
   );
-}
+});
+Combobox.displayName = "Combobox";

package/snapshot/source/packages/components/date-picker/date-picker.tsx

@@ -78,7 +78,7 @@ export function rangePresets(today = todayOf()): DatePreset[] {
  * beside two months. The field shows the choice in the reader's own format;
  * the value stays an ISO date, so it round-trips through forms and APIs.
  */
-export function DatePicker(props: DatePickerProps) {
+export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker(props: DatePickerProps, ref) {
   const { label, hint, error, placeholder, min, max, disabledDates, enabledDates, isDisabled, presets, weekStart, locale = "en", clearable = true, disabled, required, id, today, className } = props;
   const mode = props.mode ?? "single";
   const autoId = React.useId();
@@ -111,6 +111,7 @@ export function DatePicker(props: DatePickerProps) {
 
   const trigger = (
     <button
+      ref={ref}
       id={fieldId}
       type="button"
       className="ml-input ml-date-picker-trigger"
@@ -175,11 +176,12 @@ export function DatePicker(props: DatePickerProps) {
           </div>
         </Popover>
         {clearable && text && !disabled ? (
-          <button type="button" className="ml-date-picker-clear" aria-label="Clear date" onClick={() => commit(null)}>
+          <button type="button" className="ml-date-picker-clear" data-hit="expand" aria-label="Clear date" onClick={() => commit(null)}>
             <IconX aria-hidden="true" size="0.9em" />
           </button>
         ) : null}
       </div>
     </Field>
   );
-}
+});
+DatePicker.displayName = "DatePicker";

package/snapshot/source/packages/components/dropzone/dropzone.tsx

@@ -161,7 +161,7 @@ export function Dropzone({ onFiles, files = [], onRemove, accept, maxSize, maxFi
                 {file.status === "error" ? file.error ?? "Upload failed" : file.status === "uploading" ? `${Math.round(file.progress ?? 0)}%` : formatBytes(file.size)}
               </span>
               {onRemove ? (
-                <button type="button" className="ml-dropzone-remove" aria-label={`Remove ${file.name}`} onClick={() => onRemove(file)}>
+                <button type="button" className="ml-dropzone-remove" data-hit="expand" aria-label={`Remove ${file.name}`} onClick={() => onRemove(file)}>
                   <IconX aria-hidden="true" size="0.875em" />
                 </button>
               ) : null}

package/snapshot/source/packages/components/empty-state/empty-state.tsx

@@ -8,7 +8,7 @@ export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>,
   description?: React.ReactNode;
   /** The way forward: usually one primary action and one secondary. */
   actions?: React.ReactNode;
-  /** "page" centres in a large area; "inline" sits inside a card or table. */
+  /** "page" centers in a large area; "inline" sits inside a card or table. */
   size?: "inline" | "page";
 }
 

package/snapshot/source/packages/components/hover-card/hover-card.tsx

@@ -6,7 +6,7 @@ import { cx } from "../_internal/react";
 import { useFloating, usePortalNode, type Align, type Side } from "../_internal/floating";
 
 export interface HoverCardProps {
-  /** The link or name that shows the card; it keeps its own behaviour. */
+  /** The link or name that shows the card; it keeps its own behavior. */
   children: React.ReactElement<Record<string, unknown>>;
   /** The preview: a profile, a page summary, a repository. */
   content: React.ReactNode;

package/snapshot/source/packages/components/number-input/number-input.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { IconMinus, IconPlus } from "@mlola-ui/icons";
 import { Field, fieldDescription } from "../input/input";
-import { cx } from "../_internal/react";
+import { composeRefs, cx } from "../_internal/react";
 import { parseNumber, settle, stepValue } from "./number";
 
 export { parseNumber, settle, stepValue } from "./number";
@@ -40,7 +40,7 @@ export interface NumberInputProps {
  * (Shift for ten), Page keys take large steps, Home and End go to the
  * bounds, and holding − or + keeps counting.
  */
-export function NumberInput({
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput({
   value,
   defaultValue = null,
   onValueChange,
@@ -60,7 +60,7 @@ export function NumberInput({
   required,
   id,
   className,
-}: NumberInputProps) {
+}: NumberInputProps, ref) {
   const autoId = React.useId();
   const fieldId = id ?? autoId;
   const [inner, setInner] = React.useState<number | null>(defaultValue);
@@ -144,7 +144,7 @@ export function NumberInput({
     <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-number-input", className)}>
       <div className="ml-number-input-control" data-disabled={disabled || undefined} data-invalid={error ? "" : undefined}>
         <input
-          ref={input}
+          ref={composeRefs(input, ref)}
           id={fieldId}
           className="ml-number-input-field"
           role="spinbutton"
@@ -181,4 +181,5 @@ export function NumberInput({
       </div>
     </Field>
   );
-}
+});
+NumberInput.displayName = "NumberInput";

package/snapshot/source/packages/components/otp-input/otp-input.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { useControllableState } from "../_internal/react";
+import { composeRefs, useControllableState } from "../_internal/react";
 import { Field, fieldDescription } from "../input/input";
 
 export interface OtpInputProps {
@@ -28,7 +28,7 @@ export interface OtpInputProps {
  * forward, Backspace moves back, arrows move freely, and pasting or the
  * phone's SMS autofill fills every box at once.
  */
-export function OtpInput({
+export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(function OtpInput({
   length = 6,
   value,
   defaultValue = "",
@@ -42,7 +42,7 @@ export function OtpInput({
   groupSize,
   id,
   className,
-}: OtpInputProps) {
+}: OtpInputProps, ref) {
   const [code, setCode] = useControllableState({ value, defaultValue, onChange: onValueChange });
   const boxes = React.useRef<Array<HTMLInputElement | null>>([]);
   const generated = React.useId();
@@ -75,6 +75,7 @@ export function OtpInput({
             <input
               ref={(node) => {
                 boxes.current[index] = node;
+                if (index === 0) composeRefs(ref)(node);
               }}
               id={index === 0 ? fieldId : undefined}
               className="ml-otp-box"
@@ -113,4 +114,5 @@ export function OtpInput({
       </div>
     </Field>
   );
-}
+});
+OtpInput.displayName = "OtpInput";

package/snapshot/source/packages/components/progress/progress.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { cx } from "../_internal/react";
 
-/** The meaning of the fill, from the theme's colour roles. */
+/** The meaning of the fill, from the theme's color roles. */
 export type ProgressTone = "primary" | "info" | "success" | "warning" | "danger";
 type ProgressSize = "sm" | "md" | "lg";
 export interface ProgressProps {

package/snapshot/source/packages/components/segmented-control/segmented-control.tsx

@@ -17,7 +17,7 @@ export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivEleme
   onValueChange?: (value: string) => void;
 }
 
-export function SegmentedControl({
+export const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(function SegmentedControl({
   options,
   label,
   value,
@@ -25,7 +25,7 @@ export function SegmentedControl({
   onValueChange,
   className,
   ...props
-}: SegmentedControlProps) {
+}: SegmentedControlProps, ref) {
   const [current, setCurrent] = useControllableState({
     value,
     defaultValue: defaultValue ?? options[0]?.value ?? "",
@@ -48,6 +48,7 @@ export function SegmentedControl({
   return (
     <div
       {...props}
+      ref={ref}
       className={cx("ml-segmented-control", className)}
       role="radiogroup"
       aria-label={label}
@@ -75,4 +76,5 @@ export function SegmentedControl({
       })}
     </div>
   );
-}
+});
+SegmentedControl.displayName = "SegmentedControl";

package/snapshot/source/packages/components/select/select.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { rovingIndex } from "@mlola-ui/behavior/logic";
 import { useFloating, usePortalNode } from "../_internal/floating";
-import { cx, useControllableState } from "../_internal/react";
+import { composeRefs, cx, useControllableState } from "../_internal/react";
 import { IconCheck, IconChevronDown, IconX } from "@mlola-ui/icons";
 
 export interface SelectOption {
@@ -56,7 +56,7 @@ interface SelectMultipleProps {
 
 export type SelectProps = SelectBaseProps & (SelectSingleProps | SelectMultipleProps);
 
-export function Select(props: SelectProps) {
+export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function Select(props: SelectProps, ref) {
   const {
     options,
     maxVisibleChips = 3,
@@ -209,7 +209,7 @@ export function Select(props: SelectProps) {
       {label ? <span id={labelId} className={hideLabel ? "ml-visually-hidden" : "ml-select-label"}>{label}</span> : null}
       <div ref={controlRef} className="ml-select-control">
         <button
-          ref={triggerRef}
+          ref={composeRefs(triggerRef, ref)}
           type="button"
           role="combobox"
           aria-haspopup="listbox"
@@ -256,7 +256,7 @@ export function Select(props: SelectProps) {
           <button
             type="button"
             aria-label={`Clear ${label ?? "selection"}`}
-            className="ml-select-clear"
+            className="ml-select-clear" data-hit="expand"
             onClick={() => {
               if (multiple) setSelectedValues([]);
               else setSelectedValue("");
@@ -329,4 +329,5 @@ export function Select(props: SelectProps) {
       {error ? <p id={errorId} role="alert" className="ml-select-error">{error}</p> : null}
     </div>
   );
-}
+});
+Select.displayName = "Select";

package/snapshot/source/packages/components/tag-input/tag-input.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { IconX } from "@mlola-ui/icons";
 import { ComboboxList, filterOptions, sideFor, type ComboboxOption } from "../combobox/combobox";
 import { Field, fieldDescription } from "../input/input";
-import { cx } from "../_internal/react";
+import { composeRefs, cx } from "../_internal/react";
 
 export interface TagInputProps {
   value?: string[];
@@ -43,7 +43,7 @@ export function splitTags(text: string) {
  * marks the last tag and then removes it, and arrows move between tags.
  * Suggestions, validation and a limit are optional.
  */
-export function TagInput({
+export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(function TagInput({
   value,
   defaultValue = [],
   onValueChange,
@@ -60,7 +60,7 @@ export function TagInput({
   required,
   id,
   className,
-}: TagInputProps) {
+}: TagInputProps, ref) {
   const autoId = React.useId();
   const fieldId = id ?? autoId;
   const listId = `${fieldId}-list`;
@@ -195,7 +195,7 @@ export function TagInput({
             <li key={tag} className="ml-tag-input-tag" data-armed={armed === index || undefined}>
               <span className="ml-tag-input-text">{tag}</span>
               {disabled ? null : (
-                <button type="button" className="ml-tag-input-remove" tabIndex={-1} aria-label={`Remove ${tag}`} onMouseDown={(event) => event.preventDefault()} onClick={() => remove(index)}>
+                <button type="button" className="ml-tag-input-remove" data-hit="expand" tabIndex={-1} aria-label={`Remove ${tag}`} onMouseDown={(event) => event.preventDefault()} onClick={() => remove(index)}>
                   <IconX aria-hidden="true" size="0.8em" />
                 </button>
               )}
@@ -203,7 +203,7 @@ export function TagInput({
           ))}
         </ul>
         <input
-          ref={input}
+          ref={composeRefs(input, ref)}
           id={fieldId}
           className="ml-tag-input-field"
           role={suggestions ? "combobox" : undefined}
@@ -270,4 +270,5 @@ export function TagInput({
       </p>
     </Field>
   );
-}
+});
+TagInput.displayName = "TagInput";

package/snapshot/source/packages/components/textarea/textarea.tsx

@@ -17,7 +17,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 
 /**
  * Multi-line text that grows as it is written. With a `maxLength`, a counter
- * appears near the limit and turns to the danger colour past it.
+ * appears near the limit and turns to the danger color past it.
  */
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ label, hint, error, maxRows = 12, showCount = false, containerClassName, className, id, disabled, required, rows = 3, maxLength, onChange, value, defaultValue, style, "aria-describedby": describedBy, ...props }, ref) => {

package/snapshot/source/packages/components/time-picker/time-picker.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { IconClock } from "@mlola-ui/icons";
 import { Field, fieldDescription } from "../input/input";
 import { Popover } from "../popover/popover";
-import { cx } from "../_internal/react";
+import { composeRefs, cx } from "../_internal/react";
 import { fromMinutes, isTimeAllowed, nearestAllowed, nextAllowed, toMinutes, type TimeMatchers, type TimeRules } from "./times";
 
 export type { TimeMatcher, TimeMatchers } from "./times";
@@ -51,7 +51,7 @@ type Segment = "hour" | "minute" | "period";
  * the field moves on by itself. A quick list offers common times. The value
  * is always "HH:MM" in 24-hour time, whatever the reader sees.
  */
-export function TimePicker({
+export const TimePicker = React.forwardRef<HTMLSpanElement, TimePickerProps>(function TimePicker({
   label,
   hint,
   error,
@@ -70,7 +70,7 @@ export function TimePicker({
   required,
   id,
   className,
-}: TimePickerProps) {
+}: TimePickerProps, ref) {
   const autoId = React.useId();
   const fieldId = id ?? autoId;
   const [inner, setInner] = React.useState<string | null>(defaultValue);
@@ -185,7 +185,7 @@ export function TimePicker({
   const options = enabledTimes === undefined ? grid : [...new Set([...grid, ...exact])].sort((a, b) => a - b).filter((at) => isTimeAllowed(at, rules));
   const shownAt = total !== null ? options.reduce((best, at) => (Math.abs(at - total) < Math.abs(best - total) ? at : best), options[0] ?? low) : (options.find((at) => isTimeAllowed(at, rules)) ?? low);
 
-  // Open the list centred on the current time, once the popover has laid out.
+  // Open the list centered on the current time, once the popover has laid out.
   // Only the list scrolls, never the page.
   React.useEffect(() => {
     if (!open) return;
@@ -204,6 +204,8 @@ export function TimePicker({
     ref: (element: HTMLSpanElement | null) => {
       if (element) segments.current.set(segment, element);
       else segments.current.delete(segment);
+      // The forwarded ref is the first segment: the one a form focuses.
+      if (segment === "hour") composeRefs(ref)(element);
     },
     role: "spinbutton",
     tabIndex: disabled ? -1 : 0,
@@ -283,4 +285,5 @@ export function TimePicker({
       </div>
     </Field>
   );
-}
+});
+TimePicker.displayName = "TimePicker";

package/snapshot/source/packages/components/timeline/timeline.tsx

@@ -19,7 +19,7 @@ Timeline.displayName = "Timeline";
 interface TimelineItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
   /** Progress through a sequence: done, happening now, or still to come. */
   status?: TimelineStatus;
-  /** Colours an event marker, for activity feeds: a failed deploy, a merged change. */
+  /** Colors an event marker, for activity feeds: a failed deploy, a merged change. */
   tone?: TimelineTone;
   time?: React.ReactNode;
   /** A machine-readable time for `<time dateTime>`. */

package/snapshot/source/packages/components/toast/toast.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { IconCircleCheck, IconCircleX, IconInfo, IconTriangleAlert, IconX } from "@mlola-ui/icons";
 import { cx } from "../_internal/react";
 
-/** The meaning of the message, from the theme's colour roles. */
+/** The meaning of the message, from the theme's color roles. */
 export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
 export type ToastPosition = "top-right" | "top-center" | "bottom-right" | "bottom-center";
 

package/snapshot/source/packages/components/toggle/toggle.tsx

@@ -30,6 +30,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
           data-state={on ? "checked" : "unchecked"}
           data-size={size}
           className={cx("ml-toggle", className)}
+          data-hit="expand"
           onClick={(event) => {
             onClick?.(event);
             if (!event.defaultPrevented) setOn(!on);

package/snapshot/source/packages/components/tour/tour.tsx

@@ -8,7 +8,7 @@ import { usePortalNode, type Side } from "../_internal/floating";
 import { placeFloating } from "../_internal/anchor";
 
 export interface TourStep {
-  /** A CSS selector or a ref for the element to point at; none shows the card centred. */
+  /** A CSS selector or a ref for the element to point at; none shows the card centered. */
   target?: string | React.RefObject<HTMLElement | null>;
   title: string;
   body?: React.ReactNode;
@@ -55,7 +55,7 @@ export function Tour({ steps, open, onOpenChange, step: stepProp, defaultStep =
   const titleId = React.useId();
   const current = steps[index];
 
-  // Place the card beside the spotlight whenever the target moves; centre it when there is none.
+  // Place the card beside the spotlight whenever the target moves; center it when there is none.
   React.useLayoutEffect(() => {
     const element = card.current;
     if (!element) return;
@@ -128,7 +128,7 @@ export function Tour({ steps, open, onOpenChange, step: stepProp, defaultStep =
       <div
         ref={card}
         className="ml-tour-card"
-        data-centred={rect ? undefined : ""}
+        data-centered={rect ? undefined : ""}
         role="dialog"
         aria-modal="true"
         aria-label={`${label}: step ${index + 1} of ${steps.length}`}

package/snapshot/source-manifest.json

@@ -8,43 +8,43 @@
   "packages/components/accordion/accordion.tsx": "sha256-0ALaLJd1fvj8Vbx86HLBKm3qUItrtwbrGJTykVfNSMg=",
   "packages/components/activity-heatmap/activity-heatmap.tsx": "sha256-fMGDlXKpOfIOy0hmbpR8hKrbbN3fC386tXK27A21ZwM=",
   "packages/components/activity-heatmap/calendar.ts": "sha256-NB+AjXY5Xc+KzR8MMTRBgZxdzOeoHhkW0KQOW7WJPuQ=",
-  "packages/components/alert/alert.tsx": "sha256-kg//PTcUW7j7AEnhfO/pZFddm++RIo8yKur46OeoeNo=",
+  "packages/components/alert/alert.tsx": "sha256-j680akXvCIh4MTVnUo79acvVrv51XyQ3UBJ5FBAy8Dw=",
   "packages/components/app-shell/app-shell.tsx": "sha256-XAq82XOTH3ZR+hxTkYFu8P7Ih2aI6ERy/TpXc2VMUwM=",
   "packages/components/avatar/avatar.tsx": "sha256-hvZUGhatN95ZyX6p6NBhTRf6h1/rrJ+bJrqBMtIspq0=",
-  "packages/components/badge/badge.tsx": "sha256-+mgudoxlPn+mjpQycUfQmv8sC/e/K5FXfXm2+wnH7bI=",
-  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-SiIpg0oAieyoZbMlBwwQDZhR/KVIFLFCLCQJ6vwv7Fs=",
+  "packages/components/badge/badge.tsx": "sha256-flEH8S2jZ/64n3Y/ROhC9+9rvF7wXaN0xLcMMwqNOVQ=",
+  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-Mt9mvmwwDgdp5/+mj5byIrh8+hicsp7R6UcvUlK0yog=",
   "packages/components/button/button.tsx": "sha256-khqYxcV3hlZ+Q+cYNTRXEpAfIijDFSvkuDJXMPtlk7g=",
   "packages/components/calendar/calendar.tsx": "sha256-uE22LI4jpU8ErR/oBmAkeKiu+Rp0bz3IXZVCurycpwc=",
   "packages/components/calendar/dates.ts": "sha256-mygYkoC70av2ZQ0vkxf885trwW97Wd10I4dptYQe+4A=",
   "packages/components/card/card.tsx": "sha256-aMKbv5DWYYWq7GZAFR9O1fuYE0H61WCjkvEbRMOd894=",
-  "packages/components/carousel/carousel.tsx": "sha256-LAPKz9DG9vEBv/8jKjqgH7XiSEERkWWLr4n/Kve1omQ=",
-  "packages/components/checkbox/checkbox.tsx": "sha256-cqTFwYwNPRxKiBnXXWkcFeDlJ6tpJ9GX4IdqrYRp9Fs=",
-  "packages/components/color-picker/color-picker.tsx": "sha256-UziuULSI7dIGLfu4jjWIz6Cbh2/HiaY2KYXlfQ+6iQg=",
-  "packages/components/color-picker/color.ts": "sha256-3IO6DaelZ6TVn2aw+6o6pZCQGAQdeNRkN7sPypUzddE=",
-  "packages/components/combobox/combobox.tsx": "sha256-CnuJP01m0ZPMB4MGjoKbJCBQ7inI6bPf5aMDrq4m1qI=",
+  "packages/components/carousel/carousel.tsx": "sha256-pamugpB6Ujt9Ylxd37jNF/ZwSb8iRkW/MoYe12nY3i4=",
+  "packages/components/checkbox/checkbox.tsx": "sha256-hz4YbGwOxv/aJpJHrLXR4MKSWJGyjzoJEIGvdhyML9M=",
+  "packages/components/color-picker/color-picker.tsx": "sha256-E+QB6MbSxg+3AZX3A7bOkst4arxgpmFL2ZmochoWCl8=",
+  "packages/components/color-picker/color.ts": "sha256-YqSgYjzn7XfPWAHuyzbwOhbg/ScaSfB7V73e9w+OjJs=",
+  "packages/components/combobox/combobox.tsx": "sha256-CvuYc/hJoS7yw6QM9vv1SIkwflx0Kwd95UjchtC+AOs=",
   "packages/components/command-menu/command-menu.tsx": "sha256-mF1z92yrPY609pjx5Dt1l5EhGHl9EWV8F8Sq0hyJRw4=",
   "packages/components/context-menu/context-menu.tsx": "sha256-YgYsIzvLGFcJG1XX5zFJwrid5Z1Kn0lyWVzmLKmbMVU=",
-  "packages/components/date-picker/date-picker.tsx": "sha256-pX7snZCO3SxVftkCvI/f5b82bNHPconUa50BJnjYNWc=",
+  "packages/components/date-picker/date-picker.tsx": "sha256-rsmDweD3RVfKTXR2i+/pnTb/MsrDAZXmHAYBvcUGxig=",
   "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-xgybCu9HBxIieafu5CjAtY4aCOQoaAj/VUCH6D6vLP8=",
-  "packages/components/dropzone/dropzone.tsx": "sha256-jMVEnTki4Suhx7pOWfLX9MO1Q3nLz0xqDJ/2EPHdpYg=",
-  "packages/components/empty-state/empty-state.tsx": "sha256-AWwOuZgm71hossjCGYygtvzGcDy6JOPryF+U1UrsLhM=",
-  "packages/components/hover-card/hover-card.tsx": "sha256-HZyB9SUDcRPG8MvRX1sHqHA2rNcO63yVevH9hiGqVAA=",
+  "packages/components/dropzone/dropzone.tsx": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4=",
+  "packages/components/empty-state/empty-state.tsx": "sha256-uCKqYpr9vkozXZHpdl4GFtdX9ijcGOriCHvgyarBqRw=",
+  "packages/components/hover-card/hover-card.tsx": "sha256-AyRbxfqDOYBgGlgjgrtQZm5DipArLEzQn6XnzjPd0ro=",
   "packages/components/input/input.tsx": "sha256-lbbheo+ydQTzyujTf0W7DD96TogOjifCyqj9c3h3W0g=",
   "packages/components/kbd/kbd.tsx": "sha256-wrPqzn1e82zJYoKzO7u94Bgq4+nPc0DXLc8GJ/4/3nY=",
   "packages/components/modal/modal.tsx": "sha256-vybxgBGYCrMYvJRnO1wDAc2VFQylu+mQIf5OZIcabX4=",
-  "packages/components/number-input/number-input.tsx": "sha256-D+8jH2YaW4lCv/F02qvkc9Huhxvz0y1idzgOBwsjiN8=",
+  "packages/components/number-input/number-input.tsx": "sha256-BDOyvCNtMULD/HK7uWHsYbGg79lrRDrVqtGQQrYHpmM=",
   "packages/components/number-input/number.ts": "sha256-IrHCQrEhI5ein9ifMFuSViSoxQUBoT3tNmmCu/paGGM=",
-  "packages/components/otp-input/otp-input.tsx": "sha256-MWDyTP99wVAQSYJsF78ol1Kv9LKOj1lybmp2zOomVqo=",
+  "packages/components/otp-input/otp-input.tsx": "sha256-QURn8g5HqCQXBTdeENPbVxoPlqs3ZtoAPLRlFjQDxmI=",
   "packages/components/pagination/pagination.tsx": "sha256-FBwk8tq4JcsK2D0dlWEYiDSRx3owgBmGzEIlVRaNBoE=",
   "packages/components/popover/popover.tsx": "sha256-/kTiAuFklU4IuP97XaiCUGdEpKtNyMPLPS359mfzPHw=",
   "packages/components/priority-icon/labels.ts": "sha256-zhmJIb7/gS16wU+xCJ7hkReBi9q5RI3SMwdjkJvvvKU=",
   "packages/components/priority-icon/priority-icon.tsx": "sha256-3D6hFRpht3YuWouLhakE2DFdldavmJx0B/povEDwrtQ=",
-  "packages/components/progress/progress.tsx": "sha256-3SOA1JX54msiq/pF2UolesQqQZm0zSVyZQi6W38lOOA=",
+  "packages/components/progress/progress.tsx": "sha256-9OjecRNPWn7Bfe+C5IyXaKsW1NJae6X5gco1o0X5XkE=",
   "packages/components/radio-group/radio-group.tsx": "sha256-jhnSEBLkdpe8dv5us/Q1sMsQF4sKGRgDXWGKm2JSFew=",
   "packages/components/rating/rating.tsx": "sha256-zgPOQXzAiRE4qGNPQ8qat3SP1XSI/7567kA5VaT51P0=",
   "packages/components/resizable/resizable.tsx": "sha256-40sK2UyIR9Ek72KAu5nvbr44tKEY6JhC5Ftb++Wf6cI=",
-  "packages/components/segmented-control/segmented-control.tsx": "sha256-sExMN2WHtzxcaCu7xN/1jaP+sRVwJ2OAW1WkKGhNYnU=",
-  "packages/components/select/select.tsx": "sha256-MWHL/mlAO2ob4H3EmYSBZcC1qqy+M3cF1Z4s0R+frrc=",
+  "packages/components/segmented-control/segmented-control.tsx": "sha256-MCBG5XHFWCwbACctsYKbqe8mvSSR6pf60tyRgdCDKDA=",
+  "packages/components/select/select.tsx": "sha256-m8QmKUGC4386XcklosSntal0XwUAFjKosTBQSF0dduQ=",
   "packages/components/sheet/sheet.tsx": "sha256-EIn3OeRDmXGHbYf/uihRh8aw3LmzarIFiyC9DUsL1jg=",
   "packages/components/skeleton/skeleton.tsx": "sha256-2Fk72NbLr3+CrXH7jGbHNsc3t+vskMqSyySe/UwbGCs=",
   "packages/components/slider/slider.tsx": "sha256-l+VrBqPYHIIcemiVixxwDxNDB0HEMmYRZekx/H5HroQ=",
@@ -53,15 +53,15 @@
   "packages/components/stepper/stepper.tsx": "sha256-uI/dRmkbijlixHiGUceWcpaDzpEixrzQ1UTmoPbGZAY=",
   "packages/components/table/table.tsx": "sha256-ed1Qn2sIpxRvGdPDAb5ih5AcXr5PmHTHdlrJLYDYRp8=",
   "packages/components/tabs/tabs.tsx": "sha256-kWAQjE9mshqZL7V3NJTUiurp6M5Nu3vx5O1LsIgdV5Y=",
-  "packages/components/tag-input/tag-input.tsx": "sha256-+R1f2XljDYInsfuggKkpqz5m9TqEa0g3QYKMX2TE6h0=",
-  "packages/components/textarea/textarea.tsx": "sha256-jeyvAlzFr25eWZ/Inkxo1UEOHXlCPB/QHeId124SfR8=",
-  "packages/components/time-picker/time-picker.tsx": "sha256-OyIfJN6xVv6TwUYtRirkemJe5VMcu2HXxjaJj8fvu9I=",
+  "packages/components/tag-input/tag-input.tsx": "sha256-EK7xJTe3Y/S5Kn3vS0zBQg9lC+RVoGvky6HOAt+DnAw=",
+  "packages/components/textarea/textarea.tsx": "sha256-C9jMYZ63w+m6bgdLvHjvULRuoCe26q5zbgS4+ahWzr8=",
+  "packages/components/time-picker/time-picker.tsx": "sha256-og8Cbf+e8oFYewfagUgjRzLHSIIlAZh+1OpAn9yNq70=",
   "packages/components/time-picker/times.ts": "sha256-V/4uqFZPn9gVnyx8cB9vwp/RocmTYaPmLxjfy8DPQOI=",
-  "packages/components/timeline/timeline.tsx": "sha256-FDZx+ihL5tbIY/sEl0444uj27JWHE5xl0vl8IqRUUPY=",
-  "packages/components/toast/toast.tsx": "sha256-RrqUAAfKavEkZaLjywJHc0iTNHC1DHlIGVX97kftDkg=",
-  "packages/components/toggle/toggle.tsx": "sha256-zwTbHMSs3n0eg5XIpREDnySYLXHaLly1Ew4FWlzvgJY=",
+  "packages/components/timeline/timeline.tsx": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU=",
+  "packages/components/toast/toast.tsx": "sha256-FvZnwN6Lk/QEHmcNxo7sVlEvR3Lx54aT5cH9lwrthhE=",
+  "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
   "packages/components/tooltip/tooltip.tsx": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc=",
-  "packages/components/tour/tour.tsx": "sha256-1aSh7hMVt/DM/kH3WGJzJMGNsNqYEOmnwAZwc8dwRv8=",
+  "packages/components/tour/tour.tsx": "sha256-mrAE8aVDBVIibGvQah9Gh3mzIiWDFxB6aObzqFo5xXU=",
   "packages/components/virtual-list/virtual-list.tsx": "sha256-raGEFn4HlAOIohqZcy0DgptsnUIPS/6bWLYeTe+M9E8=",
   "packages/components/virtual-list/virtual.ts": "sha256-PyDIj3C2Vwb1i4ZssxSlYjgKmZPBIFLZFNq8YCW2Z78="
 }