@cube-dev/ui-kit 0.0.0-canary-2757f7b → 0.0.0-canary-8b6ee8a

package/dist/components/content/use-auto-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-auto-tooltip.js","names":[],"sources":["../../../src/components/content/use-auto-tooltip.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\n\nimport {\n  CubeTooltipProviderProps,\n  TooltipProvider,\n} from '../overlays/Tooltip/TooltipProvider';\n\nimport type { Props } from '../../props';\n\nexport type AutoTooltipValue =\n  | string\n  | boolean\n  | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n\nexport interface UseAutoTooltipOptions {\n  tooltip: AutoTooltipValue | undefined;\n  children: ReactNode;\n  labelProps?: Props;\n  isDynamicLabel?: boolean;\n}\n\nexport function useAutoTooltip({\n  tooltip,\n  children,\n  labelProps,\n  isDynamicLabel = false,\n}: UseAutoTooltipOptions) {\n  // Determine if auto tooltip is enabled\n  // Auto tooltip only works when children is a string (overflow detection needs text)\n  const isAutoTooltipEnabled = useMemo(() => {\n    if (typeof children !== 'string') return false;\n\n    // Boolean true enables auto overflow detection\n    if (tooltip === true) return true;\n    if (typeof tooltip === 'object') {\n      // If title is provided and auto is explicitly true, enable auto overflow detection\n      if (tooltip.title) {\n        return tooltip.auto === true;\n      }\n\n      // If no title is provided, default to auto=true unless explicitly disabled\n      const autoValue = tooltip.auto !== undefined ? tooltip.auto : true;\n      return !!autoValue;\n    }\n    return false;\n  }, [tooltip, children]);\n\n  // Track label overflow for auto tooltip (only when enabled)\n  const externalLabelRef = (labelProps as any)?.ref;\n  const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const checkLabelOverflow = useCallback(() => {\n    const label = elementRef.current;\n    if (!label) {\n      setIsLabelOverflowed(false);\n      return;\n    }\n\n    const hasOverflow = label.scrollWidth > label.clientWidth;\n    setIsLabelOverflowed(hasOverflow);\n  }, []);\n\n  useEffect(() => {\n    if (isAutoTooltipEnabled) {\n      checkLabelOverflow();\n    }\n  }, [isAutoTooltipEnabled, checkLabelOverflow]);\n\n  // Attach ResizeObserver via callback ref to handle DOM node changes\n  const handleLabelElementRef = useCallback(\n    (element: HTMLElement | null) => {\n      // Call external callback ref to notify external refs\n      if (externalLabelRef) {\n        if (typeof externalLabelRef === 'function') {\n          externalLabelRef(element);\n        } else {\n          (externalLabelRef as any).current = element;\n        }\n      }\n\n      // Disconnect previous observer\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n\n      elementRef.current = element;\n\n      if (element && isAutoTooltipEnabled) {\n        // Create a fresh observer to capture the latest callback\n        const obs = new ResizeObserver(() => {\n          checkLabelOverflow();\n        });\n        resizeObserverRef.current = obs;\n        obs.observe(element);\n        // Initial check\n        checkLabelOverflow();\n      } else {\n        setIsLabelOverflowed(false);\n      }\n    },\n    [externalLabelRef, isAutoTooltipEnabled, checkLabelOverflow],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n      elementRef.current = null;\n    };\n  }, []);\n\n  const finalLabelProps = useMemo(() => {\n    const props = {\n      ...(labelProps || {}),\n    };\n\n    delete props.ref;\n\n    return props;\n  }, [labelProps]);\n\n  const renderWithTooltip = (\n    renderElement: (\n      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n      tooltipRef?: RefObject<HTMLElement>,\n    ) => ReactNode,\n    defaultTooltipPlacement: OverlayProps['placement'],\n  ) => {\n    // Handle tooltip rendering based on tooltip prop type\n    if (tooltip) {\n      // String tooltip - simple case\n      if (typeof tooltip === 'string') {\n        return (\n          <TooltipProvider placement={defaultTooltipPlacement} title={tooltip}>\n            {(triggerProps, ref) => renderElement(triggerProps, ref)}\n          </TooltipProvider>\n        );\n      }\n\n      // Boolean tooltip - auto tooltip on overflow\n      if (tooltip === true) {\n        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              title={children}\n              isDisabled={!isLabelOverflowed && isDynamicLabel}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n      }\n\n      // Object tooltip - advanced configuration\n      if (typeof tooltip === 'object') {\n        const { auto, ...tooltipProps } = tooltip;\n\n        // If title is provided and auto is not explicitly true, always show the tooltip\n        if (tooltipProps.title && auto !== true) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              {...tooltipProps}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n\n        // If title is provided with auto=true, OR no title but auto behavior enabled\n        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              title={tooltipProps.title ?? children}\n              isDisabled={\n                !isLabelOverflowed &&\n                isDynamicLabel &&\n                tooltipProps.isDisabled !== true\n              }\n              {...tooltipProps}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n      }\n    }\n\n    return renderElement();\n  };\n\n  return {\n    labelRef: handleLabelElementRef,\n    labelProps: finalLabelProps,\n    isLabelOverflowed,\n    isAutoTooltipEnabled,\n    hasTooltip: !!tooltip,\n    renderWithTooltip,\n  };\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,eAAe,EAC7B,SACA,UACA,YACA,iBAAiB,SACO;CAGxB,MAAM,uBAAuB,cAAc;AACzC,MAAI,OAAO,aAAa,SAAU,QAAO;AAGzC,MAAI,YAAY,KAAM,QAAO;AAC7B,MAAI,OAAO,YAAY,UAAU;AAE/B,OAAI,QAAQ,MACV,QAAO,QAAQ,SAAS;AAK1B,UAAO,CAAC,EADU,QAAQ,SAAS,SAAY,QAAQ,OAAO;;AAGhE,SAAO;IACN,CAAC,SAAS,SAAS,CAAC;CAGvB,MAAM,mBAAoB,YAAoB;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,oBAAoB,OAA8B,KAAK;CAE7D,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,wBAAqB,MAAM;AAC3B;;AAIF,uBADoB,MAAM,cAAc,MAAM,YACb;IAChC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,qBACF,qBAAoB;IAErB,CAAC,sBAAsB,mBAAmB,CAAC;CAG9C,MAAM,wBAAwB,aAC3B,YAAgC;AAE/B,MAAI,iBACF,KAAI,OAAO,qBAAqB,WAC9B,kBAAiB,QAAQ;MAEzB,CAAC,iBAAyB,UAAU;AAKxC,MAAI,kBAAkB,SAAS;AAC7B,OAAI;AACF,sBAAkB,QAAQ,YAAY;WAChC;AAGR,qBAAkB,UAAU;;AAG9B,aAAW,UAAU;AAErB,MAAI,WAAW,sBAAsB;GAEnC,MAAM,MAAM,IAAI,qBAAqB;AACnC,wBAAoB;KACpB;AACF,qBAAkB,UAAU;AAC5B,OAAI,QAAQ,QAAQ;AAEpB,uBAAoB;QAEpB,sBAAqB,MAAM;IAG/B;EAAC;EAAkB;EAAsB;EAAmB,CAC7D;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,kBAAkB,SAAS;AAC7B,QAAI;AACF,uBAAkB,QAAQ,YAAY;YAChC;AAGR,sBAAkB,UAAU;;AAE9B,cAAW,UAAU;;IAEtB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;EACpC,MAAM,QAAQ,EACZ,GAAI,cAAc,EAAE,EACrB;AAED,SAAO,MAAM;AAEb,SAAO;IACN,CAAC,WAAW,CAAC;CAEhB,MAAM,qBACJ,eAIA,4BACG;AAEH,MAAI,SAAS;AAEX,OAAI,OAAO,YAAY,SACrB,QACE,oBAAC;IAAgB,WAAW;IAAyB,OAAO;eACxD,cAAc,QAAQ,cAAc,cAAc,IAAI;KACxC;AAKtB,OAAI,YAAY,MACd;SAAK,YAAY,gBAAgB,qBAAqB,gBACpD,QACE,oBAAC;KACC,WAAW;KACX,OAAO;KACP,YAAY,CAAC,qBAAqB;gBAEhC,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;;AAMxB,OAAI,OAAO,YAAY,UAAU;IAC/B,MAAM,EAAE,MAAM,GAAG,iBAAiB;AAGlC,QAAI,aAAa,SAAS,SAAS,KACjC,QACE,oBAAC;KACC,WAAW;KACX,GAAI;gBAEF,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;AAKtB,SAAK,YAAY,gBAAgB,qBAAqB,gBACpD,QACE,oBAAC;KACC,WAAW;KACX,OAAO,aAAa,SAAS;KAC7B,YACE,CAAC,qBACD,kBACA,aAAa,eAAe;KAE9B,GAAI;gBAEF,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;;;AAM1B,SAAO,eAAe;;AAGxB,QAAO;EACL,UAAU;EACV,YAAY;EACZ;EACA;EACA,YAAY,CAAC,CAAC;EACd;EACD"}
+{"version":3,"file":"use-auto-tooltip.js","names":[],"sources":["../../../src/components/content/use-auto-tooltip.tsx"],"sourcesContent":["import { Props } from '@tenphi/tasty';\nimport {\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\n\nimport {\n  CubeTooltipProviderProps,\n  TooltipProvider,\n} from '../overlays/Tooltip/TooltipProvider';\n\nexport type AutoTooltipValue =\n  | string\n  | boolean\n  | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n\nexport interface UseAutoTooltipOptions {\n  tooltip: AutoTooltipValue | undefined;\n  children: ReactNode;\n  labelProps?: Props;\n  isDynamicLabel?: boolean;\n}\n\nexport function useAutoTooltip({\n  tooltip,\n  children,\n  labelProps,\n  isDynamicLabel = false,\n}: UseAutoTooltipOptions) {\n  // Determine if auto tooltip is enabled\n  // Auto tooltip only works when children is a string (overflow detection needs text)\n  const isAutoTooltipEnabled = useMemo(() => {\n    if (typeof children !== 'string') return false;\n\n    // Boolean true enables auto overflow detection\n    if (tooltip === true) return true;\n    if (typeof tooltip === 'object') {\n      // If title is provided and auto is explicitly true, enable auto overflow detection\n      if (tooltip.title) {\n        return tooltip.auto === true;\n      }\n\n      // If no title is provided, default to auto=true unless explicitly disabled\n      const autoValue = tooltip.auto !== undefined ? tooltip.auto : true;\n      return !!autoValue;\n    }\n    return false;\n  }, [tooltip, children]);\n\n  // Track label overflow for auto tooltip (only when enabled)\n  const externalLabelRef = (labelProps as any)?.ref;\n  const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const checkLabelOverflow = useCallback(() => {\n    const label = elementRef.current;\n    if (!label) {\n      setIsLabelOverflowed(false);\n      return;\n    }\n\n    const hasOverflow = label.scrollWidth > label.clientWidth;\n    setIsLabelOverflowed(hasOverflow);\n  }, []);\n\n  useEffect(() => {\n    if (isAutoTooltipEnabled) {\n      checkLabelOverflow();\n    }\n  }, [isAutoTooltipEnabled, checkLabelOverflow]);\n\n  // Attach ResizeObserver via callback ref to handle DOM node changes\n  const handleLabelElementRef = useCallback(\n    (element: HTMLElement | null) => {\n      // Call external callback ref to notify external refs\n      if (externalLabelRef) {\n        if (typeof externalLabelRef === 'function') {\n          externalLabelRef(element);\n        } else {\n          (externalLabelRef as any).current = element;\n        }\n      }\n\n      // Disconnect previous observer\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n\n      elementRef.current = element;\n\n      if (element && isAutoTooltipEnabled) {\n        // Create a fresh observer to capture the latest callback\n        const obs = new ResizeObserver(() => {\n          checkLabelOverflow();\n        });\n        resizeObserverRef.current = obs;\n        obs.observe(element);\n        // Initial check\n        checkLabelOverflow();\n      } else {\n        setIsLabelOverflowed(false);\n      }\n    },\n    [externalLabelRef, isAutoTooltipEnabled, checkLabelOverflow],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n      elementRef.current = null;\n    };\n  }, []);\n\n  const finalLabelProps = useMemo(() => {\n    const props = {\n      ...(labelProps || {}),\n    };\n\n    delete props.ref;\n\n    return props;\n  }, [labelProps]);\n\n  const renderWithTooltip = (\n    renderElement: (\n      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n      tooltipRef?: RefObject<HTMLElement>,\n    ) => ReactNode,\n    defaultTooltipPlacement: OverlayProps['placement'],\n  ) => {\n    // Handle tooltip rendering based on tooltip prop type\n    if (tooltip) {\n      // String tooltip - simple case\n      if (typeof tooltip === 'string') {\n        return (\n          <TooltipProvider placement={defaultTooltipPlacement} title={tooltip}>\n            {(triggerProps, ref) => renderElement(triggerProps, ref)}\n          </TooltipProvider>\n        );\n      }\n\n      // Boolean tooltip - auto tooltip on overflow\n      if (tooltip === true) {\n        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              title={children}\n              isDisabled={!isLabelOverflowed && isDynamicLabel}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n      }\n\n      // Object tooltip - advanced configuration\n      if (typeof tooltip === 'object') {\n        const { auto, ...tooltipProps } = tooltip;\n\n        // If title is provided and auto is not explicitly true, always show the tooltip\n        if (tooltipProps.title && auto !== true) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              {...tooltipProps}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n\n        // If title is provided with auto=true, OR no title but auto behavior enabled\n        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              title={tooltipProps.title ?? children}\n              isDisabled={\n                !isLabelOverflowed &&\n                isDynamicLabel &&\n                tooltipProps.isDisabled !== true\n              }\n              {...tooltipProps}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n      }\n    }\n\n    return renderElement();\n  };\n\n  return {\n    labelRef: handleLabelElementRef,\n    labelProps: finalLabelProps,\n    isLabelOverflowed,\n    isAutoTooltipEnabled,\n    hasTooltip: !!tooltip,\n    renderWithTooltip,\n  };\n}\n"],"mappings":";;;;;;AA8BA,SAAgB,eAAe,EAC7B,SACA,UACA,YACA,iBAAiB,SACO;CAGxB,MAAM,uBAAuB,cAAc;AACzC,MAAI,OAAO,aAAa,SAAU,QAAO;AAGzC,MAAI,YAAY,KAAM,QAAO;AAC7B,MAAI,OAAO,YAAY,UAAU;AAE/B,OAAI,QAAQ,MACV,QAAO,QAAQ,SAAS;AAK1B,UAAO,CAAC,EADU,QAAQ,SAAS,SAAY,QAAQ,OAAO;;AAGhE,SAAO;IACN,CAAC,SAAS,SAAS,CAAC;CAGvB,MAAM,mBAAoB,YAAoB;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,oBAAoB,OAA8B,KAAK;CAE7D,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,wBAAqB,MAAM;AAC3B;;AAIF,uBADoB,MAAM,cAAc,MAAM,YACb;IAChC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,qBACF,qBAAoB;IAErB,CAAC,sBAAsB,mBAAmB,CAAC;CAG9C,MAAM,wBAAwB,aAC3B,YAAgC;AAE/B,MAAI,iBACF,KAAI,OAAO,qBAAqB,WAC9B,kBAAiB,QAAQ;MAEzB,CAAC,iBAAyB,UAAU;AAKxC,MAAI,kBAAkB,SAAS;AAC7B,OAAI;AACF,sBAAkB,QAAQ,YAAY;WAChC;AAGR,qBAAkB,UAAU;;AAG9B,aAAW,UAAU;AAErB,MAAI,WAAW,sBAAsB;GAEnC,MAAM,MAAM,IAAI,qBAAqB;AACnC,wBAAoB;KACpB;AACF,qBAAkB,UAAU;AAC5B,OAAI,QAAQ,QAAQ;AAEpB,uBAAoB;QAEpB,sBAAqB,MAAM;IAG/B;EAAC;EAAkB;EAAsB;EAAmB,CAC7D;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,kBAAkB,SAAS;AAC7B,QAAI;AACF,uBAAkB,QAAQ,YAAY;YAChC;AAGR,sBAAkB,UAAU;;AAE9B,cAAW,UAAU;;IAEtB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;EACpC,MAAM,QAAQ,EACZ,GAAI,cAAc,EAAE,EACrB;AAED,SAAO,MAAM;AAEb,SAAO;IACN,CAAC,WAAW,CAAC;CAEhB,MAAM,qBACJ,eAIA,4BACG;AAEH,MAAI,SAAS;AAEX,OAAI,OAAO,YAAY,SACrB,QACE,oBAAC;IAAgB,WAAW;IAAyB,OAAO;eACxD,cAAc,QAAQ,cAAc,cAAc,IAAI;KACxC;AAKtB,OAAI,YAAY,MACd;SAAK,YAAY,gBAAgB,qBAAqB,gBACpD,QACE,oBAAC;KACC,WAAW;KACX,OAAO;KACP,YAAY,CAAC,qBAAqB;gBAEhC,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;;AAMxB,OAAI,OAAO,YAAY,UAAU;IAC/B,MAAM,EAAE,MAAM,GAAG,iBAAiB;AAGlC,QAAI,aAAa,SAAS,SAAS,KACjC,QACE,oBAAC;KACC,WAAW;KACX,GAAI;gBAEF,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;AAKtB,SAAK,YAAY,gBAAgB,qBAAqB,gBACpD,QACE,oBAAC;KACC,WAAW;KACX,OAAO,aAAa,SAAS;KAC7B,YACE,CAAC,qBACD,kBACA,aAAa,eAAe;KAE9B,GAAI;gBAEF,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;;;AAM1B,SAAO,eAAe;;AAGxB,QAAO;EACL,UAAU;EACV,YAAY;EACZ;EACA;EACA,YAAY,CAAC,CAAC;EACd;EACD"}

package/dist/components/fields/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 
-import { FieldBaseProps } from "../../../shared/form.js";
+import { FieldBaseProps, ToggleSelectionProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import { CubeCheckboxGroupProps, _CheckboxGroup } from "./CheckboxGroup.js";
@@ -9,7 +9,7 @@ import { AriaCheckboxProps, useCheckbox } from "react-aria";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/fields/Checkbox/Checkbox.d.ts
-interface CubeCheckboxProps extends BaseProps, ContainerStyleProps, AriaCheckboxProps, FieldBaseProps {
+interface CubeCheckboxProps extends BaseProps, ContainerStyleProps, AriaCheckboxProps, ToggleSelectionProps, FieldBaseProps {
   inputStyles?: Styles;
   isIndeterminate?: boolean;
   value?: string;

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
@@ -85,7 +85,7 @@ function Checkbox(props, ref) {
 		}),
 		unsafe__isDisabled: !!groupState
 	});
-	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, isInvalid, isValid, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, ...otherProps } = props;
+	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, isInvalid, isValid, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, onChange, ...otherProps } = props;
 	let styles = extractStyles(props, CONTAINER_STYLES);
 	labelStyles = useMemo(() => ({
 		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,

package/dist/components/fields/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, props);\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            ...getValidationMods({ isInvalid, isValid }),\n            disabled: isDisabled,\n          }}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInputBase.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n} from '../../form';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nimport type { Props } from '../../../props';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  isInvalid?: boolean;\n  isValid?: boolean;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    isInvalid,\n    isValid,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        ...getValidationMods({ isInvalid, isValid }),\n        suffix: showValidationIndicator || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAoBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,WACA,SACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,MAAM,0BAA0B,uBAAuB;EACrD;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC5C,QAAQ,2BAA2B,CAAC,CAAC;GACtC;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACL,2BAA2B,SAC1B,qBAAC;GAAI,gBAAa;cAChB,oBAAC;IACY;IACF;IACE;KACX,EACD;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}
+{"version":3,"file":"DateInputBase.js","names":["mergeProps"],"sources":["../../../../src/components/fields/DatePicker/DateInputBase.tsx"],"sourcesContent":["import { mergeRefs } from '@react-aria/utils';\nimport {\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, { useRef } from 'react';\nimport { useFocusRing } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n} from '../../form';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\nconst DateInputWrapperElement = tasty({\n  qa: 'DateInputWrapper',\n  role: 'presentation',\n  styles: {\n    ...INPUT_WRAPPER_STYLES,\n    display: 'flex',\n  },\n});\n\nconst DateInputElement = tasty({\n  role: 'presentation',\n  styles: {\n    ...DEFAULT_INPUT_STYLES,\n    height: {\n      '': '($size-md - 2bw)',\n      'size=small': '($size-sm - 2bw)',\n      'size=large': '($size-lg - 2bw)',\n    },\n    display: 'flex',\n    flow: 'row',\n    placeItems: 'center start',\n  },\n});\n\ninterface CubeDateAtomInputProps extends ContainerStyleProps {\n  qa?: string;\n  inputType?: string;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n  fieldProps?: Props;\n  style?: React.CSSProperties;\n  disableFocusRing?: boolean;\n  autoFocus?: boolean;\n  styles?: Styles;\n  inputStyles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  isInvalid?: boolean;\n  isValid?: boolean;\n  isLoading?: boolean;\n  suffix?: React.ReactNode;\n}\n\nfunction DateInputBase(props: CubeDateAtomInputProps, ref) {\n  let inputRef = useRef(null);\n  let {\n    qa,\n    inputType,\n    isDisabled,\n    inputStyles,\n    children,\n    fieldProps,\n    style,\n    disableFocusRing,\n    autoFocus,\n    isInvalid,\n    isValid,\n    isLoading,\n    size = 'medium',\n    suffix,\n  } = props;\n\n  let styles = extractStyles(props, CONTAINER_STYLES);\n\n  let { focusProps, isFocused } = useFocusRing({\n    isTextInput: true,\n    within: true,\n    autoFocus,\n  });\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  return (\n    <DateInputWrapperElement\n      qa={qa || 'DateTimeInput'}\n      styles={styles}\n      data-size={size}\n      data-input-type={inputType ? inputType : 'datetimeinput'}\n      mods={{\n        disabled: isDisabled,\n        focused: isFocused && !disableFocusRing,\n        ...getValidationMods({ isInvalid, isValid }),\n        suffix: showValidationIndicator || !!suffix,\n      }}\n      {...mergeProps(fieldProps ?? {}, focusProps)}\n      style={style}\n    >\n      <div data-element=\"Contents\" role=\"presentation\">\n        <DateInputElement\n          ref={mergeRefs(ref, inputRef)}\n          data-size={size}\n          role=\"presentation\"\n          styles={inputStyles}\n        >\n          {children}\n        </DateInputElement>\n      </div>\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffix}\n        </div>\n      ) : null}\n    </DateInputWrapperElement>\n  );\n}\n\nconst _DateInputBase = React.forwardRef(DateInputBase);\n\n_DateInputBase.displayName = 'DateInputBase';\n\nexport { _DateInputBase as DateInputBase };\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,GAAG;EACH,SAAS;EACV;CACF,CAAC;AAEF,MAAM,mBAAmB,MAAM;CAC7B,MAAM;CACN,QAAQ;EACN,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACD,SAAS;EACT,MAAM;EACN,YAAY;EACb;CACF,CAAC;AAoBF,SAAS,cAAc,OAA+B,KAAK;CACzD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,EACF,IACA,WACA,YACA,aACA,UACA,YACA,OACA,kBACA,WACA,WACA,SACA,WACA,OAAO,UACP,WACE;CAEJ,IAAI,SAAS,cAAc,OAAO,iBAAiB;CAEnD,IAAI,EAAE,YAAY,cAAc,aAAa;EAC3C,aAAa;EACb,QAAQ;EACR;EACD,CAAC;CAEF,MAAM,0BAA0B,uBAAuB;EACrD;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACC,IAAI,MAAM;EACF;EACR,aAAW;EACX,mBAAiB,YAAY,YAAY;EACzC,MAAM;GACJ,UAAU;GACV,SAAS,aAAa,CAAC;GACvB,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC5C,QAAQ,2BAA2B,CAAC,CAAC;GACtC;EACD,GAAIA,aAAW,cAAc,EAAE,EAAE,WAAW;EACrC;aAEP,oBAAC;GAAI,gBAAa;GAAW,MAAK;aAChC,oBAAC;IACC,KAAK,UAAU,KAAK,SAAS;IAC7B,aAAW;IACX,MAAK;IACL,QAAQ;IAEP;KACgB;IACf,EACL,2BAA2B,SAC1B,qBAAC;GAAI,gBAAa;cAChB,oBAAC;IACY;IACF;IACE;KACX,EACD;IACG,GACJ;GACoB;;AAI9B,MAAM,iBAAiB,MAAM,WAAW,cAAc;AAEtD,eAAe,cAAc"}

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.d.ts

@@ -1,8 +1,7 @@
 
-import { Props } from "../../../props.js";
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import { BaseProps, BlockStyleProps, ContainerStyleProps, PositionStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, BlockStyleProps, ContainerStyleProps, PositionStyleProps, Props, Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { RefObject } from "react";
 import { AriaTextFieldProps } from "react-aria";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FileInput/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\nimport type { Props } from '../../../props';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractContents(element, callback) {\n  const files = element?.files;\n\n  if (files && files.length > 0) {\n    const fileReader = new FileReader();\n\n    fileReader.onload = function () {\n      callback(fileReader.result);\n    };\n\n    fileReader.readAsText(files[0]);\n  }\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(props: CubeFileInputProps, ref) {\n  const { t } = useI18n();\n\n  props = useFieldProps(\n    { ...props },\n    {\n      defaultValidationTrigger: 'onChange',\n      valuePropsMapper: ({ value, onChange }) => ({\n        onChange,\n        value: props.type === 'file' || !props.type ? value : undefined,\n      }),\n    },\n  );\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const defaultValue = useMemo(\n    () => (type === 'file' ? value : undefined),\n    [type, value],\n  );\n  const defaultFileName = useMemo(\n    () => extractFileNameFromValue(defaultValue),\n    [],\n  );\n  const [fileName, setFileName] = useState<string | undefined>(defaultFileName);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  const onLocalChange = useCallback(\n    (event: any) => {\n      const value = event.target.value;\n\n      setFileName(extractFileNameFromValue(value));\n\n      if (type === 'file') {\n        onChange?.(value);\n      } else {\n        extractContents(event.target, onChange);\n      }\n    },\n    [onChange],\n  );\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!value,\n        'drag-hover': dragHover,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../src/components/fields/FileInput/FileInput.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  PositionStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Action } from '../../actions';\nimport {\n  getValidationMods,\n  useFieldProps,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { AriaTextFieldProps } from 'react-aria';\n\nconst FileInputElement = tasty(Action, {\n  qa: 'FileInputWrapper',\n  styles: {\n    display: 'inline-flex',\n    position: 'relative',\n    preset: 't3',\n    padding: '.5x 1x',\n    gap: '1x',\n    flow: 'row',\n    placeItems: 'center start',\n    fill: {\n      '': '#surface',\n      'drag-hover': '#primary.16',\n      ':hover': '#primary.08',\n      disabled: '#disabled-surface',\n    },\n    border: {\n      '': true,\n      valid: '#success-text.50',\n      invalid: '#danger-text.50',\n      ':focus-within & :focus-visible': '#primary-text',\n    },\n    radius: true,\n    cursor: '$pointer',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n\n    Button: {\n      radius: true,\n      border: {\n        '': '#clear',\n        pressed: '#primary.30',\n      },\n      fill: '#primary.12',\n      color: {\n        '': '#primary',\n        disabled: '#dark.30',\n      },\n      padding: '.5x (1.5x - 1px)',\n      transition: 'theme',\n    },\n\n    Placeholder: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    Value: {\n      color: '#dark-02',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n      width: 'max 100%',\n      overflow: 'hidden',\n    },\n\n    State: {\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    ValidationIcon: {\n      $: '> State >',\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min 2x',\n      fontSize: '$icon-size',\n    },\n\n    Input: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      radius: '$content-radius',\n      opacity: 0.01,\n      cursor: '$pointer',\n      zIndex: 10,\n    },\n  },\n});\n\nexport interface CubeFileInputProps\n  extends BaseProps,\n    PositionStyleProps,\n    ContainerStyleProps,\n    BlockStyleProps,\n    AriaTextFieldProps,\n    FieldBaseProps {\n  /**\n   * The size of the input\n   * @default default\n   */\n  size?: 'small' | 'default' | 'large' | string;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /**\n   * The type of the input\n   * @default file\n   */\n  type?: 'file' | 'text';\n  /** Direct input props */\n  inputProps?: Props;\n  /** The file types that the input should accept */\n  accept?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n}\n\nfunction extractContents(element, callback) {\n  const files = element?.files;\n\n  if (files && files.length > 0) {\n    const fileReader = new FileReader();\n\n    fileReader.onload = function () {\n      callback(fileReader.result);\n    };\n\n    fileReader.readAsText(files[0]);\n  }\n}\n\nfunction extractFileNameFromValue(value?: string) {\n  return typeof value === 'string'\n    ? (value as string).split('\\\\')?.pop()\n    : undefined;\n}\n\nfunction FileInput(props: CubeFileInputProps, ref) {\n  const { t } = useI18n();\n\n  props = useFieldProps(\n    { ...props },\n    {\n      defaultValidationTrigger: 'onChange',\n      valuePropsMapper: ({ value, onChange }) => ({\n        onChange,\n        value: props.type === 'file' || !props.type ? value : undefined,\n      }),\n    },\n  );\n\n  let {\n    id,\n    name,\n    qa,\n    value,\n    onChange,\n    placeholder,\n    inputRef,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    type = 'file',\n    inputProps,\n    accept,\n    form,\n    ...otherProps\n  } = props;\n\n  const [dragHover, setDragHover] = useState(false);\n  const defaultValue = useMemo(\n    () => (type === 'file' ? value : undefined),\n    [type, value],\n  );\n  const defaultFileName = useMemo(\n    () => extractFileNameFromValue(defaultValue),\n    [],\n  );\n  const [fileName, setFileName] = useState<string | undefined>(defaultFileName);\n\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  const onLocalChange = useCallback(\n    (event: any) => {\n      const value = event.target.value;\n\n      setFileName(extractFileNameFromValue(value));\n\n      if (type === 'file') {\n        onChange?.(value);\n      } else {\n        extractContents(event.target, onChange);\n      }\n    },\n    [onChange],\n  );\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const fileInput = (\n    <FileInputElement\n      ref={domRef}\n      styles={inputStyles}\n      isDisabled={isDisabled}\n      mods={{\n        selected: !!value,\n        'drag-hover': dragHover,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === 'Space') {\n          inputRef?.current?.click();\n        }\n      }}\n    >\n      <input\n        ref={inputRef}\n        id={id}\n        name={name}\n        accept={accept}\n        data-qa={qa || 'FileInput'}\n        data-input-type=\"fileinput\"\n        data-element=\"Input\"\n        disabled={isDisabled}\n        type=\"file\"\n        multiple={false}\n        tabIndex={-1}\n        onChange={onLocalChange}\n        onDragEnter={() => {\n          setDragHover(true);\n        }}\n        onDragLeave={() => {\n          setDragHover(false);\n        }}\n        onDrop={() => {\n          setDragHover(false);\n        }}\n        {...inputProps}\n      />\n      <div data-element=\"Button\">\n        {t('fileInput.chooseFile', 'Choose file')}\n      </div>\n      <div data-element={fileName ? 'Value' : 'Placeholder'}>\n        {fileName ||\n          placeholder ||\n          t('fileInput.noFileSelected', 'No file selected')}\n      </div>\n      <ValidationIndicator isInvalid={isInvalid} isValid={isValid} />\n    </FileInputElement>\n  );\n\n  return wrapWithField(fileInput, domRef, {\n    ...props,\n  });\n}\n\n/**\n * FileInputs are file inputs that allow users to select local files to\n * upload them to the server.\n */\nconst _FileInput = forwardRef(FileInput);\n\n_FileInput.displayName = 'FileInput';\n\nexport { _FileInput as FileInput };\n"],"mappings":"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"}

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/FilterPicker/FilterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { _FileInput } from "../FileInput/FileInput.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Portal } from "../../portal/Portal.js";

package/dist/components/fields/ListBoxPopover/index.d.ts

@@ -1,3 +1,4 @@
 
 import "./ListBoxPopover.js";
+import "./useCompositeFocus.js";
 import { ListStateLike, TextFilterFn } from "./listNavigation.js";

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -0,0 +1,2 @@
+
+import React, { RefObject } from "react";

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { useCallback, useEffect, useRef } from "react";
 
 //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts

package/dist/components/fields/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableNumberValue } from "../../../utils/react/nullableValue.js";

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";

package/dist/components/fields/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/RadioGroup/Radio.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

package/dist/components/fields/RadioGroup/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";

package/dist/components/fields/SearchInput/SearchInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/Select/Select.d.ts

@@ -1,5 +1,4 @@
 
-import { Props } from "../../../props.js";
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
@@ -9,7 +8,7 @@ import "../../actions/index.js";
 import { CubeCollectionItemProps, _CollectionItem } from "../../CollectionItem.js";
 import "../../../index.js";
 import * as _tenphi_tasty0 from "@tenphi/tasty";
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Props, Styles } from "@tenphi/tasty";
 import React, { ReactElement, ReactNode, RefObject } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaSelectProps } from "react-aria";

package/dist/components/fields/Select/Select.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2757f7b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8b6ee8a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";