@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/multi-select-BoBHt_Z9.d.mts

@@ -0,0 +1,116 @@
+import { t as Command$1 } from "./command-Bb6SneVI.mjs";
+import { Command } from "cmdk";
+
+//#region packages/components/ui/multi-select.d.ts
+/** Represents a single selectable option in the MultipleSelector. */
+interface Option {
+  /** Unique value used for selection and comparison. */
+  value: string;
+  /** Human-readable label displayed in the dropdown and as a badge. */
+  label: string;
+  /** When true, the option is disabled and cannot be selected. */
+  disable?: boolean;
+  /** fixed option that can‘t be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+/** Props for the MultipleSelector component. */
+interface MultipleSelectorProps {
+  /** Controlled list of currently selected options. */
+  value?: Option[];
+  /** Initial options pre-loaded into the dropdown (uncontrolled). */
+  defaultOptions?: Option[];
+  /** manually controlled options */
+  options?: Option[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<Option[]>;
+  /**
+   * sync search. This search will not showing loadingIndicator.
+   * The rest props are the same as async search.
+   * i.e.: creatable, groupBy, delay.
+   **/
+  onSearchSync?: (value: string) => Option[];
+  onChange?: (options: Option[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command$1>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<React.ComponentPropsWithoutRef<typeof Command.Input>, 'value' | 'placeholder' | 'disabled'>;
+  /** hide the clear all button. */
+  hideClearAllButton?: boolean;
+  /**  Add new item event for select with search */
+  onAddNewItem?: () => void;
+}
+/** Imperative handle exposed by MultipleSelector via `ref`. */
+interface MultipleSelectorRef {
+  /** The currently selected options. */
+  selectedValue: Option[];
+  /** The underlying `<input>` DOM element. */
+  input: HTMLInputElement;
+  /** Programmatically focus the search input. */
+  focus: () => void;
+  /** Clear all selected options. */
+  reset: () => void;
+}
+/**
+ * Returns a debounced copy of `value` that only updates after `delay` ms of inactivity.
+ *
+ * @param value - The value to debounce.
+ * @param delay - Debounce delay in milliseconds (default 500).
+ */
+declare function useDebounce<T>(value: T, delay?: number): T;
+/**
+ * A combobox-style input that allows selecting multiple options displayed as removable badge chips, with optional async search and creatable mode.
+ *
+ * @example
+ * ```tsx
+ * import { MultipleSelector } from '@customafk/lunas-ui/ui/multi-select';
+ *
+ * const options = [
+ *   { value: 'react', label: 'React' },
+ *   { value: 'vue', label: 'Vue' },
+ * ];
+ *
+ * <MultipleSelector
+ *   options={options}
+ *   placeholder="Select frameworks…"
+ *   onChange={(selected) => console.log(selected)}
+ * />
+ * ```
+ */
+declare const MultipleSelector: import("react").ForwardRefExoticComponent<MultipleSelectorProps & import("react").RefAttributes<MultipleSelectorRef>>;
+//#endregion
+export { useDebounce as i, MultipleSelectorRef as n, Option as r, MultipleSelector as t };
+//# sourceMappingURL=multi-select-BoBHt_Z9.d.mts.map

package/dist/name-7aoM5rAW.d.cts

@@ -0,0 +1,18 @@
+//#region packages/components/data-display/name.d.ts
+type NameDisplayProps = {
+  /** The full name string to display; shown truncated inline and in full via tooltip. */name: string;
+};
+/**
+ * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.
+ *
+ * @example
+ * ```tsx
+ * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';
+ *
+ * <NameDisplay name="Nguyễn Văn An" />
+ * ```
+ */
+declare const NameDisplay: React.FC<NameDisplayProps>;
+//#endregion
+export { NameDisplay as t };
+//# sourceMappingURL=name-7aoM5rAW.d.cts.map

package/dist/name-7aoM5rAW.d.mts

@@ -0,0 +1,18 @@
+//#region packages/components/data-display/name.d.ts
+type NameDisplayProps = {
+  /** The full name string to display; shown truncated inline and in full via tooltip. */name: string;
+};
+/**
+ * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.
+ *
+ * @example
+ * ```tsx
+ * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';
+ *
+ * <NameDisplay name="Nguyễn Văn An" />
+ * ```
+ */
+declare const NameDisplay: React.FC<NameDisplayProps>;
+//#endregion
+export { NameDisplay as t };
+//# sourceMappingURL=name-7aoM5rAW.d.mts.map

package/dist/name-display-B6X52ip_.cjs

@@ -0,0 +1,2 @@
+const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-7aC9WFs9.cjs");let r=require("react/jsx-runtime");const i=({name:i})=>i?(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.length,` chars`]})]})})]}):(0,r.jsx)(n.Y,{});exports.UITableNameDisplay=i;
+//# sourceMappingURL=name-display-B6X52ip_.cjs.map

package/dist/name-display-B6X52ip_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-display-B6X52ip_.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAqBA,MAAa,GAAkD,CAAE,UAC1D,GAEH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,yCACtC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,oDAA4C,CAAQ,CAAA,GACjE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAK,OAAO,QAAS,GAClD,GACS,CAAA,CACT,CAAA,CAAA,GAdO,EAAA,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAe,CAAA"}

package/dist/name-display-DXMZ8Lug.mjs

@@ -0,0 +1,2 @@
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-UikqnT9q.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s})=>s?o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.length,` chars`]})]})})]}):a(i,{});export{s as UITableNameDisplay};
+//# sourceMappingURL=name-display-DXMZ8Lug.mjs.map

package/dist/name-display-DXMZ8Lug.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-display-DXMZ8Lug.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. */\ntype NameDisplayProps = {\n  /** The name string to display; renders an empty placeholder when falsy. */\n  name?: string | null | undefined;\n};\n\n/**\n * Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n *\n * @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  if (!name) return <UITableEmpty />;\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n          <p className=\"w-full text-end\">{name.length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAqBA,MAAa,GAAkD,CAAE,UAC1D,EAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,wCACtC,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,IAAD,CAAG,UAAU,oDAA4C,CAAQ,CAAA,EACjE,EAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAK,OAAO,QAAS,GAClD,GACS,CAAA,CACT,CAAA,CAAA,EAdO,EAAC,EAAD,CAAe,CAAA"}

package/dist/navigation-menu-B1BY9Zll.d.cts

@@ -0,0 +1,73 @@
+import { NavigationMenu } from "radix-ui";
+
+//#region packages/components/ui/navigation-menu.d.ts
+/**
+ * Root provider for the NavigationMenu — a horizontal nav bar with dropdown content panels.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationMenu, NavigationMenuList, NavigationMenuItem,
+ *   NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
+ * } from '@customafk/lunas-ui/ui/navigation-menu';
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/products">All Products</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
+declare function NavigationMenu$1({
+  className,
+  children,
+  viewport,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Root> & {
+  /** When false, the viewport animation panel is omitted (useful for inline menus). */viewport?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal list that holds NavigationMenuItems. */
+declare function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.List>): import("react").JSX.Element;
+/** A single navigation entry that may contain a trigger and a dropdown content panel. */
+declare function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Item>): import("react").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Button that opens the associated NavigationMenuContent panel on focus or hover. */
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Trigger>): import("react").JSX.Element;
+/** Dropdown content panel revealed when a NavigationMenuTrigger is activated. */
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Content>): import("react").JSX.Element;
+/** Animated viewport container that hosts the active NavigationMenuContent. */
+declare function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Viewport>): import("react").JSX.Element;
+/** A styled link used inside NavigationMenuContent that highlights when active. */
+declare function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Link>): import("react").JSX.Element;
+/** Small arrow indicator that points from the active NavigationMenuTrigger to its content panel. */
+declare function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Indicator>): import("react").JSX.Element;
+//#endregion
+export { NavigationMenuLink as a, NavigationMenuViewport as c, NavigationMenuItem as i, navigationMenuTriggerStyle as l, NavigationMenuContent as n, NavigationMenuList as o, NavigationMenuIndicator as r, NavigationMenuTrigger as s, NavigationMenu$1 as t };
+//# sourceMappingURL=navigation-menu-B1BY9Zll.d.cts.map

package/dist/navigation-menu-B1BY9Zll.d.mts

@@ -0,0 +1,73 @@
+import { NavigationMenu } from "radix-ui";
+
+//#region packages/components/ui/navigation-menu.d.ts
+/**
+ * Root provider for the NavigationMenu — a horizontal nav bar with dropdown content panels.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationMenu, NavigationMenuList, NavigationMenuItem,
+ *   NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
+ * } from '@customafk/lunas-ui/ui/navigation-menu';
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/products">All Products</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
+declare function NavigationMenu$1({
+  className,
+  children,
+  viewport,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Root> & {
+  /** When false, the viewport animation panel is omitted (useful for inline menus). */viewport?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal list that holds NavigationMenuItems. */
+declare function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.List>): import("react").JSX.Element;
+/** A single navigation entry that may contain a trigger and a dropdown content panel. */
+declare function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Item>): import("react").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Button that opens the associated NavigationMenuContent panel on focus or hover. */
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Trigger>): import("react").JSX.Element;
+/** Dropdown content panel revealed when a NavigationMenuTrigger is activated. */
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Content>): import("react").JSX.Element;
+/** Animated viewport container that hosts the active NavigationMenuContent. */
+declare function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Viewport>): import("react").JSX.Element;
+/** A styled link used inside NavigationMenuContent that highlights when active. */
+declare function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Link>): import("react").JSX.Element;
+/** Small arrow indicator that points from the active NavigationMenuTrigger to its content panel. */
+declare function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenu.Indicator>): import("react").JSX.Element;
+//#endregion
+export { NavigationMenuLink as a, NavigationMenuViewport as c, NavigationMenuItem as i, navigationMenuTriggerStyle as l, NavigationMenuContent as n, NavigationMenuList as o, NavigationMenuIndicator as r, NavigationMenuTrigger as s, NavigationMenu$1 as t };
+//# sourceMappingURL=navigation-menu-B1BY9Zll.d.mts.map

package/dist/number-field-BjVjf6s4.mjs

@@ -0,0 +1,2 @@
+import{G as e}from"./tanstack-form-PC9YNeeo.mjs";import{Field as t,FieldContent as n,FieldContentMain as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-BKyUqvzh.mjs";import{t as d}from"./number-input-CqkegUWs.mjs";import{BanIcon as f,Loader2Icon as p}from"lucide-react";import{memo as m,useCallback as h,useId as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useStore as b}from"@tanstack/react-form";const x=m(({label:m,description:x,placeholder:S,tooltip:C,helperText:w,orientation:T=`responsive`,showErrorMessage:E=!0,rounding:D,decimalPlaces:O,precision:k,unit:A,required:j=!1,disabled:M=!1,allowNegative:N})=>{let P=g(),F=g(),I=e(),L=b(I.form.store,({isSubmitting:e})=>e),R=M||L,z=I.state.meta.isDirty||I.state.meta.isTouched,B=z&&!I.state.meta.isValid,V=j&&I.state.value===null,H=!!I.state.meta.errors.length,U=h(e=>{R||I.handleChange(e)},[R,I.handleChange]);return y(o,{className:`gap-y-4 px-4`,children:[y(t,{orientation:T,"data-invalid":B,children:[y(n,{children:[y(s,{htmlFor:P,"aria-required":V,children:[m,C&&v(u,{tooltip:C})]}),v(i,{children:x})]}),y(r,{children:[y(`div`,{className:`relative w-full`,children:[v(d,{id:P,value:I.state.value,"aria-invalid":B,"aria-describedby":F,placeholder:S,disabled:R,roundingRule:D,numberAfterDecimalPoint:O,precision:k,unitText:A,allowNegative:N,className:_(R&&`pointer-events-none opacity-60`),onBlur:I.handleBlur,onValueChange:U}),L&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:v(p,{className:`animate-spin text-primary-strong`})}),!L&&z&&E&&H&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:v(f,{})}),v(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:z&&E?v(a,{id:F,className:`flex-1`,errors:I.state.meta.errors}):v(`div`,{})})]}),v(c,{isShow:!!w,children:w})]})]}),v(l,{})]})});x.displayName=`NumberField`;export{x as NumberField};
+//# sourceMappingURL=number-field-BjVjf6s4.mjs.map

package/dist/number-field-BjVjf6s4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-BjVjf6s4.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"wjBA+CA,MAAa,EAAc,GACxB,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,EAAK,EAAM,EACX,EAAU,EAAM,EAEhB,EAAQ,EAAuC,EAE/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,WAA/C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAI,gBAAe,WAAxC,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,2BAAf,CACE,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,UAAW,EAAG,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,GACC,EAAC,MAAD,CAAK,UAAU,qFACb,EAAC,EAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,GAChD,EAAC,MAAD,CAAK,UAAU,yGACb,EAAC,EAAD,CAAU,CAAA,CACP,CAAA,EAEP,EAAC,MAAD,CAAK,UAAU,gEACZ,GAAY,EAAmB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAAI,EAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,IACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/number-field-DmKh7bbY.cjs

@@ -0,0 +1,2 @@
+const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./field-BV5twmKA.cjs"),n=require("./number-input-kTh9zzr7.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,rounding:h,decimalPlaces:g,precision:_,unit:v,required:y=!1,disabled:b=!1,allowNegative:x})=>{let S=(0,i.useId)(),C=(0,i.useId)(),w=e.G(),T=(0,s.useStore)(w.form.store,({isSubmitting:e})=>e),E=b||T,D=w.state.meta.isDirty||w.state.meta.isTouched,O=D&&!w.state.meta.isValid,k=y&&w.state.value===null,A=!!w.state.meta.errors.length,j=(0,i.useCallback)(e=>{E||w.handleChange(e)},[E,w.handleChange]);return(0,o.jsxs)(t.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(t.Field,{orientation:p,"data-invalid":O,children:[(0,o.jsxs)(t.FieldContent,{children:[(0,o.jsxs)(t.FieldLabel,{htmlFor:S,"aria-required":k,children:[c,d&&(0,o.jsx)(t.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(t.FieldDescription,{children:l})]}),(0,o.jsxs)(t.FieldContentMain,{children:[(0,o.jsxs)(`div`,{className:`relative w-full`,children:[(0,o.jsx)(n.t,{id:S,value:w.state.value,"aria-invalid":O,"aria-describedby":C,placeholder:u,disabled:E,roundingRule:h,numberAfterDecimalPoint:g,precision:_,unitText:v,allowNegative:x,className:(0,a.cn)(E&&`pointer-events-none opacity-60`),onBlur:w.handleBlur,onValueChange:j}),T&&(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:(0,o.jsx)(r.Loader2Icon,{className:`animate-spin text-primary-strong`})}),!T&&D&&m&&A&&(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:(0,o.jsx)(r.BanIcon,{})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:D&&m?(0,o.jsx)(t.FieldError,{id:C,className:`flex-1`,errors:w.state.meta.errors}):(0,o.jsx)(`div`,{})})]}),(0,o.jsx)(t.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(t.FieldSeparator,{})]})});c.displayName=`NumberField`,exports.NumberField=c;
+//# sourceMappingURL=number-field-DmKh7bbY.cjs.map

package/dist/number-field-DmKh7bbY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-DmKh7bbY.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTooltip,\n} from '../ui/field';\n\nimport type { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\n\n    const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n    const isDisabled = disabled || isSubmitting;\n\n    const _touched = field.state.meta.isDirty || field.state.meta.isTouched;\n    const _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"yRA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,EAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,eAAc,WAA/C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAI,gBAAe,WAAxC,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2BAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0GACb,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gEACZ,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,KACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/number-input-CqkegUWs.mjs

@@ -0,0 +1,2 @@
+import{Input as e}from"./ui/input.mjs";import{useCallback as t,useEffect as n,useMemo as r,useRef as i,useState as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,u=e=>Number(e).toLocaleString(),d=(e,t,n)=>{if(n===`none`)return e;let r=10**t,i=e*r;switch(n){case`up`:return Math.ceil(i)/r;case`down`:return Math.floor(i)/r;case`nearest`:return i%1<.1?Math.floor(i)/r:i%1>=.59?Math.ceil(i)/r:(Math.floor(i)+.5)/r;default:return e}},f=({disabled:f=!1,readOnly:p=!1,allowNegative:m=!1,numberAfterDecimalPoint:h=2,roundingRule:g=`none`,value:_=null,unitText:v,decimal:y,placeholder:b,precision:x,wrapperClassName:S,className:C,onChange:w,onValueChange:T,onFocus:E,onBlur:D,...O})=>{let k=i(null),A=i(null),[j,M]=a(_?.toString()??null),N=r(()=>y?.[1]??h,[y,h]),P=r(()=>y&&y[0]-y[1],[y]),F=r(()=>l(m),[m]),I=t(e=>{if(!N||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length;return n.length<=N&&r<=(P??1/0)},[N,P]),L=t(e=>{if(e===`0`)return`0`;if(!Number(e))return null;let[t,n=``]=d(parseFloat(e),Math.min(N-1,x||0),g).toString().split(`.`),r=u(t);return n?`${r}.${n}`:r},[N,x,g]),R=t(e=>{let t=e===`0`,n=e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e);if(t){T?.(0),M(e);return}if(n){M(()=>(T?.(0),e));return}},[T]),z=t(e=>{w?.(e);let{value:t}=e.target;if(t===``||t===void 0){T?.(null),M(null);return}R(t),!(!F.test(t)||!I(t))&&(T?.(parseFloat(t)||0),M(t))},[I,w,T,R,F]),B=t(e=>{p||(E?.(e),M(e=>typeof e==`string`?e.replace(/,/g,``):null))},[p,E]),V=t(e=>{p||(D?.(e),M(e=>e===null?null:e===`0`||e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e)?`0`:typeof e==`string`?L(e):null))},[p,L,D]);return n(()=>{let e=document.activeElement===A.current;if(_==null||!F.test(_.toString())||!I(_.toString())){M(null);return}M(t=>e?t:L(_.toString()))},[L,_,I,F]),n(()=>{if(!k.current||!A.current||!v)return;let e=k.current.offsetWidth;A.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[v]),c(`div`,{className:o(`relative`,S),children:[s(e,{...O,ref:A,value:j||(p?`0`:``),placeholder:b,disabled:f,readOnly:p,className:o(`text-end font-number text-sm slashed-zero lining-nums tabular-nums`,p&&`bg-muted text-muted-foreground`,C),onChange:z,onFocus:B,onBlur:V}),v&&s(`span`,{ref:k,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm`,children:v})]})};export{f as t};
+//# sourceMappingURL=number-input-CqkegUWs.mjs.map

package/dist/number-input-CqkegUWs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input-CqkegUWs.mjs","names":[],"sources":["../packages/components/ui/inputs/number-input.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\nconst customRoundedValue = (value: number, precision: number, roundingRule: 'up' | 'down' | 'nearest' | 'none') => {\n  if (roundingRule === 'none') return value;\n\n  const factor = 10 ** precision;\n  const scaledValue = value * factor;\n\n  switch (roundingRule) {\n    case 'up':\n      return Math.ceil(scaledValue) / factor;\n    case 'down':\n      return Math.floor(scaledValue) / factor;\n    case 'nearest': {\n      if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n      if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n      return (Math.floor(scaledValue) + 0.5) / factor;\n    }\n    default: {\n      return value;\n    }\n  }\n};\n\ntype TProps = React.HTMLAttributes<HTMLInputElement> & {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: number | null | undefined;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readOnly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   * - 'up': Round up\n   * - 'down': Round down\n   * - 'nearest': Round to nearest\n   * - 'none': No rounding\n   *\n   * E.g.\n   * - Value: 2.135, precision: 2\n   *   - 'up' => 2.14\n   *   - 'down' => 2.13\n   *   - 'nearest' => 2.13\n   *   - 'none' => 2.135\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  wrapperClassName?: string;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value: number | null) => void;\n  /**\n   * Description: Callback function for the blur event\n   * Usage: Callback function for the blur event\n   */\n  onBlur?: () => void;\n};\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<TProps> = ({\n  disabled = false,\n  readOnly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value = null,\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  wrapperClassName,\n  className,\n  onChange,\n  onValueChange,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [_value, _setValue] = useState<string | null>(value?.toString() ?? null);\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = useMemo(() => decimal?.[1] ?? numberAfterDecimalPoint, [decimal, numberAfterDecimalPoint]);\n  const maxIntegerLength = useMemo(() => decimal && decimal[0] - decimal[1], [decimal]);\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!maxDecimalPlaces || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.') as [string, string];\n      const integerPartLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const decimalPartLength = decimalPart.length;\n\n      return decimalPartLength <= maxDecimalPlaces && integerPartLength <= (maxIntegerLength ?? Infinity);\n    },\n    [maxDecimalPlaces, maxIntegerLength]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return null;\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision, roundingRule).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [maxDecimalPlaces, precision, roundingRule]\n  );\n\n  const handleZeroCase = useCallback(\n    (value: string) => {\n      // Check for zero\n      const isZero = value === '0';\n      // Check for negative zero patterns. E.g., '-0', '-0.0', '-0.000', '-0.'\n      const isNegativeZero = value === '-' || /^-0+(\\.0+)?$/.test(value) || /^-0*\\.$/.test(value);\n      if (isZero) {\n        onValueChange?.(0);\n        _setValue(value);\n        return;\n      }\n      if (isNegativeZero) {\n        _setValue(() => {\n          onValueChange?.(0);\n          return value;\n        });\n        return;\n      }\n    },\n    [onValueChange]\n  );\n  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    e => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (inputValue === '' || inputValue === undefined) {\n        onValueChange?.(null);\n        _setValue(null);\n        return;\n      }\n\n      // Handle zero and negative zero\n      handleZeroCase(inputValue);\n\n      // Validate input format\n      if (!validationRegex.test(inputValue) || !validateDecimalPoint(inputValue)) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      _setValue(inputValue);\n    },\n    [validateDecimalPoint, onChange, onValueChange, handleZeroCase, validationRegex]\n  );\n\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onFocus?.(e);\n      _setValue(prev => (typeof prev === 'string' ? prev.replace(/,/g, '') : null)); // Remove commas for easier editing\n    },\n    [readOnly, onFocus]\n  );\n\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onBlur?.(e);\n      _setValue(prev => {\n        if (prev === null) return null;\n        const isZero = prev === '0' || prev === '-' || /^-0+(\\.0+)?$/.test(prev) || /^-0*\\.$/.test(prev);\n        if (isZero) return '0';\n        return typeof prev === 'string' ? formattedValue(prev) : null;\n      });\n    },\n    [readOnly, formattedValue, onBlur]\n  );\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (value === undefined || value === null || !validationRegex.test(value.toString()) || !validateDecimalPoint(value.toString())) {\n      _setValue(null);\n      return;\n    }\n\n    _setValue(prev => (isFocused ? prev : formattedValue(value.toString())));\n  }, [formattedValue, value, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={_value || (readOnly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cn('text-end font-number text-sm slashed-zero lining-nums tabular-nums', readOnly && 'bg-muted text-muted-foreground', className)}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"uOAOA,MAAM,EAAyB,GACtB,EAAgB,gBAAkB,cAGrC,EAA0B,GACvB,OAAO,CAAG,CAAC,CAAC,eAAe,EAG9B,GAAsB,EAAe,EAAmB,IAAqD,CACjH,GAAI,IAAiB,OAAQ,OAAO,EAEpC,IAAM,EAAS,IAAM,EACf,EAAc,EAAQ,EAE5B,OAAQ,EAAR,CACE,IAAK,KACH,OAAO,KAAK,KAAK,CAAW,EAAI,EAClC,IAAK,OACH,OAAO,KAAK,MAAM,CAAW,EAAI,EACnC,IAAK,UAGH,OAFI,EAAc,EAAI,GAAY,KAAK,MAAM,CAAW,EAAI,EACxD,EAAc,GAAK,IAAa,KAAK,KAAK,CAAW,EAAI,GACrD,KAAK,MAAM,CAAW,EAAI,IAAO,EAE3C,QACE,OAAO,CAEX,CACF,EAkIa,GAAiC,CAC5C,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,0BAA0B,EAC1B,eAAe,OACf,QAAQ,KACR,WACA,UACA,cACA,YACA,mBACA,YACA,WACA,gBACA,UACA,SACA,GAAG,KACC,CACJ,IAAM,EAAW,EAAwB,IAAI,EACvC,EAAY,EAAyB,IAAI,EAEzC,CAAC,EAAQ,GAAa,EAAwB,GAAO,SAAS,GAAK,IAAI,EAGvE,EAAmB,MAAc,IAAU,IAAM,EAAyB,CAAC,EAAS,CAAuB,CAAC,EAC5G,EAAmB,MAAc,GAAW,EAAQ,GAAK,EAAQ,GAAI,CAAC,CAAO,CAAC,EAC9E,EAAkB,MAAc,EAAsB,CAAa,EAAG,CAAC,CAAa,CAAC,EAGrF,EAAuB,EAC1B,GAAkB,CACjB,GAAI,CAAC,GAAoB,IAAU,IAAK,MAAO,GAE/C,GAAM,CAAC,EAAa,EAAc,IAAM,EAAM,MAAM,GAAG,EACjD,EAAoB,EAAY,WAAW,GAAG,EAAI,EAAY,OAAS,EAAI,EAAY,OAG7F,OAF0B,EAAY,QAEV,GAAoB,IAAsB,GAAoB,IAC5F,EACA,CAAC,EAAkB,CAAgB,CACrC,EACM,EAAiB,EACpB,GAAgB,CACf,GAAI,IAAQ,IAAK,MAAO,IACxB,GAAI,CAAC,OAAO,CAAG,EAAG,OAAO,KAKzB,GAAM,CAAC,EAAa,EAAc,IADb,EAFJ,WAAW,CAEmB,EADpB,KAAK,IAAI,EAAmB,EAAG,GAAa,CACJ,EAAG,CAAY,CAAC,CAAC,SACjC,CAAC,CAAC,MAAM,GAAG,EACxD,EAAmB,EAAuB,CAAW,EAC3D,OAAO,EAAc,GAAG,EAAiB,GAAG,IAAgB,CAC9D,EACA,CAAC,EAAkB,EAAW,CAAY,CAC5C,EAEM,EAAiB,EACpB,GAAkB,CAEjB,IAAM,EAAS,IAAU,IAEnB,EAAiB,IAAU,KAAO,eAAe,KAAK,CAAK,GAAK,UAAU,KAAK,CAAK,EAC1F,GAAI,EAAQ,CACV,IAAgB,CAAC,EACjB,EAAU,CAAK,EACf,MACF,CACA,GAAI,EAAgB,CAClB,OACE,IAAgB,CAAC,EACV,EACR,EACD,MACF,CACF,EACA,CAAC,CAAa,CAChB,EACM,EAAe,EACnB,GAAK,CAEH,IAAW,CAAC,EAGZ,GAAM,CAAE,MAAO,GAAe,EAAE,OAGhC,GAAI,IAAe,IAAM,IAAe,IAAA,GAAW,CACjD,IAAgB,IAAI,EACpB,EAAU,IAAI,EACd,MACF,CAGA,EAAe,CAAU,EAGrB,GAAC,EAAgB,KAAK,CAAU,GAAK,CAAC,EAAqB,CAAU,KAGzE,IADqB,WAAW,CAAU,GAAK,CACnB,EAC5B,EAAU,CAAU,EACtB,EACA,CAAC,EAAsB,EAAU,EAAe,EAAgB,CAAe,CACjF,EAEM,EAAc,EAClB,GAAK,CACC,IACJ,IAAU,CAAC,EACX,EAAU,GAAS,OAAO,GAAS,SAAW,EAAK,QAAQ,KAAM,EAAE,EAAI,IAAK,EAC9E,EACA,CAAC,EAAU,CAAO,CACpB,EAEM,EAAa,EACjB,GAAK,CACC,IACJ,IAAS,CAAC,EACV,EAAU,GACJ,IAAS,KAAa,KACX,IAAS,KAAO,IAAS,KAAO,eAAe,KAAK,CAAI,GAAK,UAAU,KAAK,CAAI,EAC5E,IACZ,OAAO,GAAS,SAAW,EAAe,CAAI,EAAI,IAC1D,EACH,EACA,CAAC,EAAU,EAAgB,CAAM,CACnC,EAqBA,OAlBA,MAAgB,CACd,IAAM,EAAY,SAAS,gBAAkB,EAAU,QAEvD,GAAI,GAAiC,MAAQ,CAAC,EAAgB,KAAK,EAAM,SAAS,CAAC,GAAK,CAAC,EAAqB,EAAM,SAAS,CAAC,EAAG,CAC/H,EAAU,IAAI,EACd,MACF,CAEA,EAAU,GAAS,EAAY,EAAO,EAAe,EAAM,SAAS,CAAC,CAAE,CACzE,EAAG,CAAC,EAAgB,EAAO,EAAsB,CAAe,CAAC,EAGjE,MAAgB,CACd,GAAI,CAAC,EAAS,SAAW,CAAC,EAAU,SAAW,CAAC,EAAU,OAC1D,IAAM,EAAY,EAAS,QAAQ,YACnC,EAAU,QAAQ,MAAM,YAAY,gBAAiB,IAAI,EAAY,IAAM,GAAG,IAAI,CACpF,EAAG,CAAC,CAAQ,CAAC,EAGX,EAAC,MAAD,CAAK,UAAW,EAAG,WAAY,CAAgB,WAA/C,CACE,EAAC,EAAD,CACE,GAAI,EACJ,IAAK,EACL,MAAO,IAAW,EAAW,IAAM,IACtB,cACH,WACA,WACV,UAAW,EAAG,qEAAsE,GAAY,iCAAkC,CAAS,EAC3I,SAAU,EACV,QAAS,EACT,OAAQ,CACT,CAAA,EACA,GACC,EAAC,OAAD,CAAM,IAAK,EAAU,UAAU,uGAC5B,CACG,CAAA,CAEL,GAET"}

package/dist/number-input-kTh9zzr7.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,a=e=>Number(e).toLocaleString(),o=(e,t,n)=>{if(n===`none`)return e;let r=10**t,i=e*r;switch(n){case`up`:return Math.ceil(i)/r;case`down`:return Math.floor(i)/r;case`nearest`:return i%1<.1?Math.floor(i)/r:i%1>=.59?Math.ceil(i)/r:(Math.floor(i)+.5)/r;default:return e}},s=({disabled:s=!1,readOnly:c=!1,allowNegative:l=!1,numberAfterDecimalPoint:u=2,roundingRule:d=`none`,value:f=null,unitText:p,decimal:m,placeholder:h,precision:g,wrapperClassName:_,className:v,onChange:y,onValueChange:b,onFocus:x,onBlur:S,...C})=>{let w=(0,t.useRef)(null),T=(0,t.useRef)(null),[E,D]=(0,t.useState)(f?.toString()??null),O=(0,t.useMemo)(()=>m?.[1]??u,[m,u]),k=(0,t.useMemo)(()=>m&&m[0]-m[1],[m]),A=(0,t.useMemo)(()=>i(l),[l]),j=(0,t.useCallback)(e=>{if(!O||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length;return n.length<=O&&r<=(k??1/0)},[O,k]),M=(0,t.useCallback)(e=>{if(e===`0`)return`0`;if(!Number(e))return null;let[t,n=``]=o(parseFloat(e),Math.min(O-1,g||0),d).toString().split(`.`),r=a(t);return n?`${r}.${n}`:r},[O,g,d]),N=(0,t.useCallback)(e=>{let t=e===`0`,n=e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e);if(t){b?.(0),D(e);return}if(n){D(()=>(b?.(0),e));return}},[b]),P=(0,t.useCallback)(e=>{y?.(e);let{value:t}=e.target;if(t===``||t===void 0){b?.(null),D(null);return}N(t),!(!A.test(t)||!j(t))&&(b?.(parseFloat(t)||0),D(t))},[j,y,b,N,A]),F=(0,t.useCallback)(e=>{c||(x?.(e),D(e=>typeof e==`string`?e.replace(/,/g,``):null))},[c,x]),I=(0,t.useCallback)(e=>{c||(S?.(e),D(e=>e===null?null:e===`0`||e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e)?`0`:typeof e==`string`?M(e):null))},[c,M,S]);return(0,t.useEffect)(()=>{let e=document.activeElement===T.current;if(f==null||!A.test(f.toString())||!j(f.toString())){D(null);return}D(t=>e?t:M(f.toString()))},[M,f,j,A]),(0,t.useEffect)(()=>{if(!w.current||!T.current||!p)return;let e=w.current.offsetWidth;T.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[p]),(0,r.jsxs)(`div`,{className:(0,n.cn)(`relative`,_),children:[(0,r.jsx)(e.Input,{...C,ref:T,value:E||(c?`0`:``),placeholder:h,disabled:s,readOnly:c,className:(0,n.cn)(`text-end font-number text-sm slashed-zero lining-nums tabular-nums`,c&&`bg-muted text-muted-foreground`,v),onChange:P,onFocus:F,onBlur:I}),p&&(0,r.jsx)(`span`,{ref:w,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm`,children:p})]})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
+//# sourceMappingURL=number-input-kTh9zzr7.cjs.map

package/dist/number-input-kTh9zzr7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input-kTh9zzr7.cjs","names":["Input"],"sources":["../packages/components/ui/inputs/number-input.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\nconst customRoundedValue = (value: number, precision: number, roundingRule: 'up' | 'down' | 'nearest' | 'none') => {\n  if (roundingRule === 'none') return value;\n\n  const factor = 10 ** precision;\n  const scaledValue = value * factor;\n\n  switch (roundingRule) {\n    case 'up':\n      return Math.ceil(scaledValue) / factor;\n    case 'down':\n      return Math.floor(scaledValue) / factor;\n    case 'nearest': {\n      if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n      if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n      return (Math.floor(scaledValue) + 0.5) / factor;\n    }\n    default: {\n      return value;\n    }\n  }\n};\n\ntype TProps = React.HTMLAttributes<HTMLInputElement> & {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: number | null | undefined;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readOnly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   * - 'up': Round up\n   * - 'down': Round down\n   * - 'nearest': Round to nearest\n   * - 'none': No rounding\n   *\n   * E.g.\n   * - Value: 2.135, precision: 2\n   *   - 'up' => 2.14\n   *   - 'down' => 2.13\n   *   - 'nearest' => 2.13\n   *   - 'none' => 2.135\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  wrapperClassName?: string;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value: number | null) => void;\n  /**\n   * Description: Callback function for the blur event\n   * Usage: Callback function for the blur event\n   */\n  onBlur?: () => void;\n};\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<TProps> = ({\n  disabled = false,\n  readOnly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value = null,\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  wrapperClassName,\n  className,\n  onChange,\n  onValueChange,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [_value, _setValue] = useState<string | null>(value?.toString() ?? null);\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = useMemo(() => decimal?.[1] ?? numberAfterDecimalPoint, [decimal, numberAfterDecimalPoint]);\n  const maxIntegerLength = useMemo(() => decimal && decimal[0] - decimal[1], [decimal]);\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!maxDecimalPlaces || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.') as [string, string];\n      const integerPartLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const decimalPartLength = decimalPart.length;\n\n      return decimalPartLength <= maxDecimalPlaces && integerPartLength <= (maxIntegerLength ?? Infinity);\n    },\n    [maxDecimalPlaces, maxIntegerLength]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return null;\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision, roundingRule).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [maxDecimalPlaces, precision, roundingRule]\n  );\n\n  const handleZeroCase = useCallback(\n    (value: string) => {\n      // Check for zero\n      const isZero = value === '0';\n      // Check for negative zero patterns. E.g., '-0', '-0.0', '-0.000', '-0.'\n      const isNegativeZero = value === '-' || /^-0+(\\.0+)?$/.test(value) || /^-0*\\.$/.test(value);\n      if (isZero) {\n        onValueChange?.(0);\n        _setValue(value);\n        return;\n      }\n      if (isNegativeZero) {\n        _setValue(() => {\n          onValueChange?.(0);\n          return value;\n        });\n        return;\n      }\n    },\n    [onValueChange]\n  );\n  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    e => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (inputValue === '' || inputValue === undefined) {\n        onValueChange?.(null);\n        _setValue(null);\n        return;\n      }\n\n      // Handle zero and negative zero\n      handleZeroCase(inputValue);\n\n      // Validate input format\n      if (!validationRegex.test(inputValue) || !validateDecimalPoint(inputValue)) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      _setValue(inputValue);\n    },\n    [validateDecimalPoint, onChange, onValueChange, handleZeroCase, validationRegex]\n  );\n\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onFocus?.(e);\n      _setValue(prev => (typeof prev === 'string' ? prev.replace(/,/g, '') : null)); // Remove commas for easier editing\n    },\n    [readOnly, onFocus]\n  );\n\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onBlur?.(e);\n      _setValue(prev => {\n        if (prev === null) return null;\n        const isZero = prev === '0' || prev === '-' || /^-0+(\\.0+)?$/.test(prev) || /^-0*\\.$/.test(prev);\n        if (isZero) return '0';\n        return typeof prev === 'string' ? formattedValue(prev) : null;\n      });\n    },\n    [readOnly, formattedValue, onBlur]\n  );\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (value === undefined || value === null || !validationRegex.test(value.toString()) || !validateDecimalPoint(value.toString())) {\n      _setValue(null);\n      return;\n    }\n\n    _setValue(prev => (isFocused ? prev : formattedValue(value.toString())));\n  }, [formattedValue, value, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={_value || (readOnly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cn('text-end font-number text-sm slashed-zero lining-nums tabular-nums', readOnly && 'bg-muted text-muted-foreground', className)}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/orders-bar-chart-9RmtP6In.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,dataKey:s=`orders`,label:c=`Orders`,statuses:l,color:u=`var(--chart-1)`,valueFormatter:d=e=>e.toLocaleString(`en-US`),dateFormatter:f=e.toDateLabel,showLegend:p=!!l,showGrid:m=!0,className:h,animate:g=!0,height:_})=>(0,i.jsx)(t.ChartContainer,{"data-slot":`orders-bar-chart`,config:(0,n.useMemo)(()=>l?Object.fromEntries(l.map((t,n)=>[t.key,{label:t.label,color:t.color||e.getChartColor(n)}])):{[s]:{label:c,color:u}},[l,s,c,u]),className:(0,r.cn)(`w-full`,h),style:_===void 0?void 0:{height:_,aspectRatio:`auto`},children:(0,i.jsxs)(a.BarChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[m&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:f}),(0,i.jsx)(a.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:d}),(0,i.jsx)(t.ChartTooltip,{content:(0,i.jsx)(t.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?f(n):null}})}),l?l.map((t,n)=>(0,i.jsx)(a.Bar,{dataKey:t.key,stackId:`orders`,fill:t.color||e.getChartColor(n),radius:n===l.length-1?[4,4,0,0]:[0,0,0,0],isAnimationActive:g},t.key)):(0,i.jsx)(a.Bar,{dataKey:s,fill:u,radius:[4,4,0,0],isAnimationActive:g}),p&&(0,i.jsx)(t.ChartLegend,{content:(0,i.jsx)(t.ChartLegendContent,{})})]})});exports.OrdersBarChart=o;
+//# sourceMappingURL=orders-bar-chart-9RmtP6In.cjs.map

package/dist/orders-bar-chart-9RmtP6In.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"orders-bar-chart-9RmtP6In.cjs","names":["toDateLabel","ChartContainer","getChartColor","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/orders-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8CA,MAAa,GAAkB,CAC7B,OACA,UAAU,SACV,QAAQ,SACR,WACA,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgBA,EAAAA,YAChB,aAAa,CAAC,CAAC,EACf,WAAW,GACX,YACA,UAAU,GACV,aAQE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,mBACV,QAAA,EAAA,EAAA,QAAA,KAPG,EACE,OAAO,YAAY,EAAS,KAAK,EAAQ,IAAU,CAAC,EAAO,IAAK,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,OAASC,EAAAA,cAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EADvH,EAAG,GAAU,CAAE,QAAO,OAAM,CAAE,EAEnD,CAAC,EAAU,EAAS,EAAO,CAAK,CAKlB,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,GAAO,cAAe,CAAiB,CAAA,GACzH,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,CACD,CAAA,CAEJ,CAAA,EACA,EACC,EAAS,KAAK,EAAQ,KACpB,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAEE,QAAS,EAAO,IAChB,QAAQ,SACR,KAAM,EAAO,OAASP,EAAAA,cAAc,CAAK,EACzC,OAAQ,IAAU,EAAS,OAAS,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAClE,kBAAmB,CACpB,EANM,EAAO,GAMb,CACF,GAED,EAAA,EAAA,IAAA,CAACO,EAAAA,IAAD,CAAc,UAAS,KAAM,EAAO,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAExF,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA"}

package/dist/orders-bar-chart-DQhJGmwY.mjs

@@ -0,0 +1,2 @@
+import{getChartColor as e,toDateLabel as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartLegend as r,ChartLegendContent as i,ChartTooltip as a,ChartTooltipContent as o}from"./ui/chart.mjs";import{useMemo as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{Bar as d,BarChart as f,CartesianGrid as p,XAxis as m,YAxis as h}from"recharts";const g=({data:g,dataKey:_=`orders`,label:v=`Orders`,statuses:y,color:b=`var(--chart-1)`,valueFormatter:x=e=>e.toLocaleString(`en-US`),dateFormatter:S=t,showLegend:C=!!y,showGrid:w=!0,className:T,animate:E=!0,height:D})=>l(n,{"data-slot":`orders-bar-chart`,config:s(()=>y?Object.fromEntries(y.map((t,n)=>[t.key,{label:t.label,color:t.color||e(n)}])):{[_]:{label:v,color:b}},[y,_,v,b]),className:c(`w-full`,T),style:D===void 0?void 0:{height:D,aspectRatio:`auto`},children:u(f,{data:g,margin:{top:8,right:12,bottom:0,left:12},children:[w&&l(p,{vertical:!1}),l(m,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:S}),l(h,{tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:x}),l(a,{content:l(o,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?S(n):null}})}),y?y.map((t,n)=>l(d,{dataKey:t.key,stackId:`orders`,fill:t.color||e(n),radius:n===y.length-1?[4,4,0,0]:[0,0,0,0],isAnimationActive:E},t.key)):l(d,{dataKey:_,fill:b,radius:[4,4,0,0],isAnimationActive:E}),C&&l(r,{content:l(i,{})})]})});export{g as OrdersBarChart};
+//# sourceMappingURL=orders-bar-chart-DQhJGmwY.mjs.map

package/dist/orders-bar-chart-DQhJGmwY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"orders-bar-chart-DQhJGmwY.mjs","names":[],"sources":["../packages/components/features/charts/components/orders-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"6aA8CA,MAAa,GAAkB,CAC7B,OACA,UAAU,SACV,QAAQ,SACR,WACA,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgB,EAChB,aAAa,CAAC,CAAC,EACf,WAAW,GACX,YACA,UAAU,GACV,YAQE,EAAC,EAAD,CACE,YAAU,mBACV,OARW,MACR,EACE,OAAO,YAAY,EAAS,KAAK,EAAQ,IAAU,CAAC,EAAO,IAAK,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,OAAS,EAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EADvH,EAAG,GAAU,CAAE,QAAO,OAAM,CAAE,EAEnD,CAAC,EAAU,EAAS,EAAO,CAAK,CAKlB,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,GAAO,cAAe,CAAiB,CAAA,EACzH,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,CACD,CAAA,CAEJ,CAAA,EACA,EACC,EAAS,KAAK,EAAQ,IACpB,EAAC,EAAD,CAEE,QAAS,EAAO,IAChB,QAAQ,SACR,KAAM,EAAO,OAAS,EAAc,CAAK,EACzC,OAAQ,IAAU,EAAS,OAAS,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAClE,kBAAmB,CACpB,EANM,EAAO,GAMb,CACF,EAED,EAAC,EAAD,CAAc,UAAS,KAAM,EAAO,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAExF,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA"}

package/dist/pages/FeatureDeveloping.d.cts

@@ -1,41 +1,2 @@
-//#region packages/components/pages/FeatureDeveloping.d.ts
-interface FeatureDevelopingProps {
-  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */
-  title?: string;
-  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */
-  subtitle?: string;
-  /** Label for the action button. Defaults to `'Quay lại'`. */
-  buttonText?: string;
-  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */
-  onButtonClick?: () => void;
-  /** Additional class names applied to the root container element. */
-  className?: string;
-  /** Additional class names applied to the `Construction` icon. */
-  iconClassName?: string;
-}
-/**
- * Full-page placeholder displayed when a feature is still under active development.
- *
- * @example
- * ```tsx
- * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';
- *
- * <FeatureDeveloping
- *   title="Coming Soon"
- *   subtitle="This feature is not ready yet."
- *   buttonText="Go Back"
- *   onButtonClick={() => router.back()}
- * />
- * ```
- */
-declare const FeatureDeveloping: ({
-  title,
-  subtitle,
-  buttonText,
-  onButtonClick,
-  className,
-  iconClassName
-}: FeatureDevelopingProps) => import("react").JSX.Element;
-//#endregion
-export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };
-//# sourceMappingURL=FeatureDeveloping.d.cts.map
+import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-zuTTDIh_.cjs";
+export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };

package/dist/pages/FeatureDeveloping.d.mts

@@ -1,41 +1,2 @@
-//#region packages/components/pages/FeatureDeveloping.d.ts
-interface FeatureDevelopingProps {
-  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */
-  title?: string;
-  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */
-  subtitle?: string;
-  /** Label for the action button. Defaults to `'Quay lại'`. */
-  buttonText?: string;
-  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */
-  onButtonClick?: () => void;
-  /** Additional class names applied to the root container element. */
-  className?: string;
-  /** Additional class names applied to the `Construction` icon. */
-  iconClassName?: string;
-}
-/**
- * Full-page placeholder displayed when a feature is still under active development.
- *
- * @example
- * ```tsx
- * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';
- *
- * <FeatureDeveloping
- *   title="Coming Soon"
- *   subtitle="This feature is not ready yet."
- *   buttonText="Go Back"
- *   onButtonClick={() => router.back()}
- * />
- * ```
- */
-declare const FeatureDeveloping: ({
-  title,
-  subtitle,
-  buttonText,
-  onButtonClick,
-  className,
-  iconClassName
-}: FeatureDevelopingProps) => import("react").JSX.Element;
-//#endregion
-export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };
-//# sourceMappingURL=FeatureDeveloping.d.mts.map
+import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-zuTTDIh_.mjs";
+export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };