@omnifyjp/ui 1.0.2 → 2.0.1

package/dist/components/inputs/combobox.js

@@ -0,0 +1,8 @@
+export { Combobox, MultiCombobox } from '../../chunk-3V6NS4EQ.js';
+import '../../chunk-MVYSUWSD.js';
+import '../../chunk-YVCLIOMM.js';
+import '../../chunk-7NMNLY7F.js';
+import '../../chunk-BOV3Q2JH.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=combobox.js.map
+//# sourceMappingURL=combobox.js.map

package/dist/components/{date-picker.d.ts → inputs/date-picker.d.ts}

@@ -30,7 +30,7 @@ interface DatePickerProps {
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, placeholder, className, disabled, locale, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, className, disabled, locale: localeProp, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 interface DateRangePickerProps {
     /** Currently selected date range with `from` and optional `to`. */
     value?: {
@@ -66,6 +66,6 @@ interface DateRangePickerProps {
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, placeholder, className, disabled, locale, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, placeholder, className, disabled, locale: localeProp, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 export { DatePicker, DateRangePicker };

package/dist/components/{date-picker.js → inputs/date-picker.js}

@@ -1,7 +1,8 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-C34KSTWA.js';
-import { Calendar as Calendar$1 } from '../chunk-QB3UWRZH.js';
-import { Button } from '../chunk-55E7D2HR.js';
-import { cn } from '../chunk-DGPY4WP3.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-7NMNLY7F.js';
+import { useDateFnsLocale } from '../../chunk-VPTIRPZW.js';
+import { Calendar as Calendar$1 } from '../../chunk-KJAXKHJ2.js';
+import { Button } from '../../chunk-BOV3Q2JH.js';
+import { cn } from '../../chunk-DGPY4WP3.js';
 import { format } from 'date-fns';
 import { Calendar } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -12,8 +13,10 @@ function DatePicker({
   placeholder = "Select date",
   className,
   disabled,
-  locale
+  locale: localeProp
 }) {
+  const contextLocale = useDateFnsLocale();
+  const locale = localeProp ?? contextLocale;
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -37,7 +40,8 @@ function DatePicker({
         mode: "single",
         selected: value,
         onSelect: onChange,
-        autoFocus: true
+        autoFocus: true,
+        locale
       }
     ) })
   ] });
@@ -48,8 +52,10 @@ function DateRangePicker({
   placeholder = "Select date range",
   className,
   disabled,
-  locale
+  locale: localeProp
 }) {
+  const contextLocale = useDateFnsLocale();
+  const locale = localeProp ?? contextLocale;
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -79,7 +85,8 @@ function DateRangePicker({
         selected: value,
         onSelect: onChange,
         numberOfMonths: 2,
-        autoFocus: true
+        autoFocus: true,
+        locale
       }
     ) })
   ] });

package/dist/components/inputs/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/date-picker.tsx"],"names":["CalendarIcon","Calendar"],"mappings":"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","file":"date-picker.js","sourcesContent":["import { format } from \"date-fns\";\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport type { Locale } from \"date-fns\";\n\nimport { cn } from \"../../lib/utils\";\nimport { useDateFnsLocale } from \"../../providers/ui-provider\";\nimport { Button } from \"./button\";\nimport { Calendar } from \"../domain/calendar/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlay/popover\";\n\ninterface DatePickerProps {\n  /** Currently selected date. */\n  value?: Date;\n  /** Callback fired when a date is selected or cleared. */\n  onChange?: (date: Date | undefined) => void;\n  /** Placeholder text shown when no date is selected. */\n  placeholder?: string;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the date picker is disabled. */\n  disabled?: boolean;\n  /** date-fns Locale object for date formatting (e.g., `ja` for Japanese). */\n  locale?: Locale;\n}\n\n/**\n * Single date picker with a calendar popover.\n * Displays the selected date formatted with date-fns and opens a calendar on click.\n *\n * @example\n * ```tsx\n * const [date, setDate] = useState<Date>();\n *\n * <DatePicker\n *   value={date}\n *   onChange={setDate}\n *   placeholder=\"Pick a date\"\n * />\n * ```\n */\nexport function DatePicker({\n  value,\n  onChange,\n  placeholder = \"Select date\",\n  className,\n  disabled,\n  locale: localeProp,\n}: DatePickerProps) {\n  const contextLocale = useDateFnsLocale() as Locale | undefined;\n  const locale = localeProp ?? contextLocale;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {value ? format(value, \"PPP\", locale ? { locale } : undefined) : <span>{placeholder}</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={value}\n          onSelect={onChange}\n          autoFocus\n          locale={locale}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\ninterface DateRangePickerProps {\n  /** Currently selected date range with `from` and optional `to`. */\n  value?: { from: Date | undefined; to?: Date | undefined };\n  /** Callback fired when the date range changes. */\n  onChange?: (range: { from: Date | undefined; to?: Date | undefined } | undefined) => void;\n  /** Placeholder text shown when no range is selected. */\n  placeholder?: string;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the date range picker is disabled. */\n  disabled?: boolean;\n  /** date-fns Locale object for date formatting (e.g., `ja` for Japanese). */\n  locale?: Locale;\n}\n\n/**\n * Date range picker with a two-month calendar popover.\n * Allows selecting a start and end date displayed as a range string.\n *\n * @example\n * ```tsx\n * const [range, setRange] = useState<{ from: Date | undefined; to?: Date }>();\n *\n * <DateRangePicker\n *   value={range}\n *   onChange={setRange}\n *   placeholder=\"Select date range\"\n * />\n * ```\n */\nexport function DateRangePicker({\n  value,\n  onChange,\n  placeholder = \"Select date range\",\n  className,\n  disabled,\n  locale: localeProp,\n}: DateRangePickerProps) {\n  const contextLocale = useDateFnsLocale() as Locale | undefined;\n  const locale = localeProp ?? contextLocale;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !value && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {value?.from ? (\n            value.to ? (\n              <>\n                {format(value.from, \"PPP\", locale ? { locale } : undefined)} -{\" \"}\n                {format(value.to, \"PPP\", locale ? { locale } : undefined)}\n              </>\n            ) : (\n              format(value.from, \"PPP\", locale ? { locale } : undefined)\n            )\n          ) : (\n            <span>{placeholder}</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"range\"\n          selected={value}\n          onSelect={onChange}\n          numberOfMonths={2}\n          autoFocus\n          locale={locale}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

package/dist/components/inputs/file-upload.js

@@ -0,0 +1,5 @@
+export { FileUpload } from '../../chunk-47TUWE63.js';
+import '../../chunk-BOV3Q2JH.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=file-upload.js.map
+//# sourceMappingURL=file-upload.js.map

package/dist/components/{form.js → inputs/form.js}

@@ -1,5 +1,5 @@
-import { Label } from '../chunk-P3M5TZD2.js';
-import { cn } from '../chunk-DGPY4WP3.js';
+import { Label } from '../../chunk-EYJ7TJIX.js';
+import { cn } from '../../chunk-DGPY4WP3.js';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';

package/dist/components/inputs/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/form.tsx"],"names":[],"mappings":"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","file":"form.js","sourcesContent":["import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Label } from \"./label\";\n\n/**\n * Form provider component built on react-hook-form's FormProvider.\n * Wraps form fields and provides form context for validation, error display, and accessibility.\n *\n * @example\n * ```tsx\n * const form = useForm({ defaultValues: { email: \"\" } });\n *\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"email\"\n *       render={({ field }) => (\n *         <FormItem>\n *           <FormLabel>Email</FormLabel>\n *           <FormControl>\n *             <Input placeholder=\"you@example.com\" {...field} />\n *           </FormControl>\n *           <FormDescription>Your work email address.</FormDescription>\n *           <FormMessage />\n *         </FormItem>\n *       )}\n *     />\n *     <Button type=\"submit\">Submit</Button>\n *   </form>\n * </Form>\n * ```\n */\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue,\n);\n\n/** Connects a form field to react-hook-form's Controller and provides field context. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/**\n * Hook that returns field state, IDs, and error information for the current form field.\n * Must be used within a `FormField` component.\n */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue,\n);\n\n/** Container for a single form field, grouping label, control, description, and message. */\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Label for a form field that turns red on validation error. */\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slot wrapper that wires up aria attributes for the form control. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text displayed below the form control. */\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Displays the validation error message for the form field. */\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};"]}

package/dist/components/inputs/input-otp.js

@@ -0,0 +1,4 @@
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../chunk-33QLY6GI.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=input-otp.js.map
+//# sourceMappingURL=input-otp.js.map

package/dist/components/inputs/input.d.ts

@@ -0,0 +1,75 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { TranslatableConfig, TranslatableValue } from '../../providers/ui-provider.js';
+import 'react/jsx-runtime';
+
+declare const inputVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputSize = VariantProps<typeof inputVariants>['size'];
+type NativeInputProps = Omit<React.ComponentProps<'input'>, 'value' | 'onChange' | 'size'>;
+interface StandardInputProps extends NativeInputProps {
+    size?: InputSize;
+    /** Translatable mode disabled (default). */
+    translatable?: never;
+    value?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+interface TranslatableInputProps extends NativeInputProps {
+    size?: InputSize;
+    /**
+     * Enable locale-switching tabs on this input.
+     * - `true` — inherit UIProvider's locale config
+     * - `object` — override locales/defaultLocale/fallbackLocale per field
+     *
+     * @example
+     * ```tsx
+     * // Uses UIProvider config
+     * <Input translatable value={val} onChange={setVal} />
+     *
+     * // Custom per-field config
+     * <Input
+     *   translatable={{ locales: { en: 'English', vi: 'Tiếng Việt' }, fallbackLocale: 'en' }}
+     *   value={val}
+     *   onChange={setVal}
+     * />
+     * ```
+     */
+    translatable: TranslatableConfig;
+    value?: TranslatableValue;
+    onChange?: (value: TranslatableValue) => void;
+    /**
+     * Per-locale validation errors. Truthy string = that locale is invalid.
+     * The active locale's error is forwarded as `aria-invalid` on the input;
+     * all locale tabs with errors show a red dot indicator.
+     *
+     * @example `{ en: 'Required', vi: 'Too long (120/100)' }`
+     */
+    errors?: Partial<Record<string, string>>;
+}
+type InputProps = StandardInputProps | TranslatableInputProps;
+/**
+ * Text input component with multiple size variants.
+ * Supports translatable mode via the `translatable` prop.
+ *
+ * @example
+ * ```tsx
+ * // Standard
+ * <Input placeholder="Enter text..." />
+ * <Input size="sm" value={val} onChange={(e) => setVal(e.target.value)} />
+ *
+ * // Translatable — uses UIProvider's locale config
+ * <Input translatable value={val} onChange={setVal} />
+ *
+ * // Translatable — custom config
+ * <Input
+ *   translatable={{ locales: { en: 'English', vi: 'Tiếng Việt' }, fallbackLocale: 'en' }}
+ *   value={val}
+ *   onChange={setVal}
+ * />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<(Omit<StandardInputProps, "ref"> | Omit<TranslatableInputProps, "ref">) & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, inputVariants };

package/dist/components/inputs/input.js

@@ -0,0 +1,6 @@
+export { Input, inputVariants } from '../../chunk-4NBDYSSQ.js';
+import '../../chunk-YU55YBID.js';
+import '../../chunk-VPTIRPZW.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/components/inputs/label.js

@@ -0,0 +1,4 @@
+export { Label } from '../../chunk-EYJ7TJIX.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=label.js.map
+//# sourceMappingURL=label.js.map

package/dist/components/{password-input.d.ts → inputs/password-input.d.ts}

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { inputVariants } from './input.js';
 import 'class-variance-authority/types';
+import '../../providers/ui-provider.js';
+import 'react/jsx-runtime';
 
 interface PasswordInputProps extends Omit<React.ComponentProps<"input">, "type" | "size">, VariantProps<typeof inputVariants> {
 }

package/dist/components/inputs/password-input.js

@@ -0,0 +1,7 @@
+export { PasswordInput } from '../../chunk-HDTHGIQR.js';
+import '../../chunk-4NBDYSSQ.js';
+import '../../chunk-YU55YBID.js';
+import '../../chunk-VPTIRPZW.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=password-input.js.map
+//# sourceMappingURL=password-input.js.map

package/dist/components/inputs/radio-group.js

@@ -0,0 +1,4 @@
+export { RadioGroup, RadioGroupItem } from '../../chunk-QGU4BRMO.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=radio-group.js.map
+//# sourceMappingURL=radio-group.js.map

package/dist/components/inputs/rating.js

@@ -0,0 +1,4 @@
+export { Rating } from '../../chunk-N6OUJIQD.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=rating.js.map
+//# sourceMappingURL=rating.js.map

package/dist/components/{select.js → inputs/select.js}

@@ -1,4 +1,4 @@
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '../chunk-NNJTKHCE.js';
-import '../chunk-DGPY4WP3.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '../../chunk-LTGCKJX7.js';
+import '../../chunk-DGPY4WP3.js';
 //# sourceMappingURL=select.js.map
 //# sourceMappingURL=select.js.map

package/dist/components/inputs/slider.js

@@ -0,0 +1,4 @@
+export { Slider } from '../../chunk-S73PGQD5.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=slider.js.map
+//# sourceMappingURL=slider.js.map

package/dist/components/inputs/slug-input.js

@@ -0,0 +1,8 @@
+export { SlugInput, generateSlug } from '../../chunk-4AGNE75K.js';
+import '../../chunk-4NBDYSSQ.js';
+import '../../chunk-YU55YBID.js';
+import '../../chunk-EYJ7TJIX.js';
+import '../../chunk-VPTIRPZW.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=slug-input.js.map
+//# sourceMappingURL=slug-input.js.map

package/dist/components/inputs/switch.js

@@ -0,0 +1,4 @@
+export { Switch } from '../../chunk-EAY3QSID.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/components/inputs/tag-input.js

@@ -0,0 +1,5 @@
+export { TagInput } from '../../chunk-I6PJSYBI.js';
+import '../../chunk-5SAUUOCN.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=tag-input.js.map
+//# sourceMappingURL=tag-input.js.map

package/dist/components/inputs/textarea.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { TranslatableConfig, TranslatableValue } from '../../providers/ui-provider.js';
+import 'react/jsx-runtime';
+
+type NativeTextareaProps = Omit<React.ComponentProps<'textarea'>, 'value' | 'onChange'>;
+interface StandardTextareaProps extends NativeTextareaProps {
+    /** Translatable mode disabled (default). */
+    translatable?: never;
+    value?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+}
+interface TranslatableTextareaProps extends NativeTextareaProps {
+    /**
+     * Enable locale-switching tabs on this textarea.
+     * - `true` — inherit UIProvider's locale config
+     * - `object` — override locales/defaultLocale/fallbackLocale per field
+     *
+     * @example
+     * ```tsx
+     * // Uses UIProvider config
+     * <Textarea translatable value={val} onChange={setVal} />
+     *
+     * // Custom per-field config
+     * <Textarea
+     *   translatable={{ locales: { en: 'English', vi: 'Tiếng Việt' }, fallbackLocale: 'en' }}
+     *   value={val}
+     *   onChange={setVal}
+     * />
+     * ```
+     */
+    translatable: TranslatableConfig;
+    value?: TranslatableValue;
+    onChange?: (value: TranslatableValue) => void;
+    /**
+     * Per-locale validation errors. Truthy string = that locale is invalid.
+     * The active locale's error is forwarded as `aria-invalid` on the textarea;
+     * all locale tabs with errors show a red dot indicator.
+     *
+     * @example `{ en: 'Required', vi: 'Too long (120/100)' }`
+     */
+    errors?: Partial<Record<string, string>>;
+}
+type TextareaProps = StandardTextareaProps | TranslatableTextareaProps;
+/**
+ * Multi-line text input with auto-sizing via `field-sizing-content`.
+ * Supports translatable mode via the `translatable` prop.
+ *
+ * @example
+ * ```tsx
+ * // Standard
+ * <Textarea placeholder="Enter a description..." />
+ * <Textarea value={content} onChange={(e) => setContent(e.target.value)} />
+ *
+ * // Translatable — uses UIProvider's locale config
+ * <Textarea translatable value={val} onChange={setVal} />
+ *
+ * // Translatable — custom config
+ * <Textarea
+ *   translatable={{ locales: { en: 'English', vi: 'Tiếng Việt' }, fallbackLocale: 'en' }}
+ *   value={val}
+ *   onChange={setVal}
+ * />
+ * ```
+ */
+declare const Textarea: React.ForwardRefExoticComponent<(Omit<StandardTextareaProps, "ref"> | Omit<TranslatableTextareaProps, "ref">) & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/components/inputs/textarea.js

@@ -0,0 +1,6 @@
+export { Textarea } from '../../chunk-ZUBW2ERW.js';
+import '../../chunk-YU55YBID.js';
+import '../../chunk-VPTIRPZW.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=textarea.js.map
+//# sourceMappingURL=textarea.js.map

package/dist/{chunk-6DIDQ4TB.js → components/inputs/time-picker.js}

@@ -1,8 +1,10 @@
-import { ScrollArea } from './chunk-JJSVA3TH.js';
-import { Input } from './chunk-3VU56V66.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-C34KSTWA.js';
-import { Button } from './chunk-55E7D2HR.js';
-import { cn } from './chunk-DGPY4WP3.js';
+import { Input } from '../../chunk-4NBDYSSQ.js';
+import '../../chunk-YU55YBID.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-7NMNLY7F.js';
+import '../../chunk-VPTIRPZW.js';
+import { ScrollArea } from '../../chunk-LUYTKHGS.js';
+import { Button } from '../../chunk-BOV3Q2JH.js';
+import { cn } from '../../chunk-DGPY4WP3.js';
 import * as React from 'react';
 import { Clock } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -127,5 +129,5 @@ function TimeInput({
 }
 
 export { TimeInput, TimePicker };
-//# sourceMappingURL=chunk-6DIDQ4TB.js.map
-//# sourceMappingURL=chunk-6DIDQ4TB.js.map
+//# sourceMappingURL=time-picker.js.map
+//# sourceMappingURL=time-picker.js.map

package/dist/components/inputs/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/time-picker.tsx"],"names":[],"mappings":"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","file":"time-picker.js","sourcesContent":["import * as React from \"react\";\nimport { Clock } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlay/popover\";\nimport { ScrollArea } from \"../display/scroll-area\";\n\ninterface TimePickerProps {\n  /** Currently selected time in `\"HH:mm\"` format (e.g., `\"14:30\"`). */\n  value?: string;\n  /** Callback fired when a time is selected. Receives a `\"HH:mm\"` string. */\n  onChange?: (time: string) => void;\n  /** Placeholder text shown when no time is selected. */\n  placeholder?: string;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the time picker is disabled. */\n  disabled?: boolean;\n  /** Use 24-hour format (0-23). When false, shows 12-hour (1-12). Defaults to `true`. */\n  format24h?: boolean;\n}\n\n/**\n * Time picker with a scrollable hour/minute popover.\n * Opens a two-column dropdown for selecting hours and minutes.\n *\n * @example\n * ```tsx\n * const [time, setTime] = useState<string>();\n *\n * <TimePicker\n *   value={time}\n *   onChange={setTime}\n *   placeholder=\"Select time\"\n *   format24h\n * />\n * ```\n */\nexport function TimePicker({\n  value,\n  onChange,\n  placeholder = \"Chọn giờ\",\n  className,\n  disabled,\n  format24h = true,\n}: TimePickerProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const hours = format24h\n    ? Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, \"0\"))\n    : Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, \"0\"));\n\n  const minutes = Array.from({ length: 60 }, (_, i) =>\n    i.toString().padStart(2, \"0\")\n  );\n\n  const [selectedHour, selectedMinute] = value?.split(\":\") || [\"\", \"\"];\n\n  const handleHourSelect = (hour: string) => {\n    const newTime = `${hour}:${selectedMinute || \"00\"}`;\n    onChange?.(newTime);\n  };\n\n  const handleMinuteSelect = (minute: string) => {\n    const newTime = `${selectedHour || \"00\"}:${minute}`;\n    onChange?.(newTime);\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-start\",\n            !value && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <Clock className=\"mr-2 h-4 w-4\" />\n          {value || placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <div className=\"flex\">\n          {/* Hours */}\n          <ScrollArea className=\"h-60 w-20 border-r\">\n            <div className=\"p-1\">\n              {hours.map((hour) => (\n                <button\n                  key={hour}\n                  type=\"button\"\n                  onClick={() => handleHourSelect(hour)}\n                  className={cn(\n                    \"w-full px-3 py-2 text-sm rounded hover:bg-accent transition-colors text-center\",\n                    selectedHour === hour && \"bg-primary/10 text-primary font-semibold\"\n                  )}\n                >\n                  {hour}\n                </button>\n              ))}\n            </div>\n          </ScrollArea>\n\n          {/* Minutes */}\n          <ScrollArea className=\"h-60 w-20\">\n            <div className=\"p-1\">\n              {minutes.map((minute) => (\n                <button\n                  key={minute}\n                  type=\"button\"\n                  onClick={() => handleMinuteSelect(minute)}\n                  className={cn(\n                    \"w-full px-3 py-2 text-sm rounded hover:bg-accent transition-colors text-center\",\n                    selectedMinute === minute && \"bg-primary/10 text-primary font-semibold\"\n                  )}\n                >\n                  {minute}\n                </button>\n              ))}\n            </div>\n          </ScrollArea>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\ninterface TimeInputProps {\n  /** Current time value in `\"HH:mm\"` format. */\n  value?: string;\n  /** Callback fired on blur with a valid `\"HH:mm\"` string. */\n  onChange?: (time: string) => void;\n  /** Additional CSS class for the input wrapper. */\n  className?: string;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * Inline text input for typing a time value directly.\n * Automatically formats input as `HH:mm` and validates on blur.\n *\n * @example\n * ```tsx\n * const [time, setTime] = useState(\"09:00\");\n *\n * <TimeInput value={time} onChange={setTime} />\n * ```\n */\nexport function TimeInput({\n  value = \"\",\n  onChange,\n  className,\n  disabled,\n}: TimeInputProps) {\n  const [localValue, setLocalValue] = React.useState(value);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let input = e.target.value.replace(/\\D/g, \"\"); // Remove non-digits\n\n    if (input.length >= 2) {\n      const hours = parseInt(input.substring(0, 2));\n      if (hours > 23) input = \"23\" + input.substring(2);\n    }\n\n    if (input.length >= 4) {\n      const minutes = parseInt(input.substring(2, 4));\n      if (minutes > 59) input = input.substring(0, 2) + \"59\";\n    }\n\n    // Format as HH:mm\n    if (input.length >= 2) {\n      input = input.substring(0, 2) + \":\" + input.substring(2, 4);\n    }\n\n    setLocalValue(input);\n  };\n\n  const handleBlur = () => {\n    // Validate and format\n    const parts = localValue.split(\":\");\n    if (parts.length === 2 && parts[0].length === 2 && parts[1].length === 2) {\n      onChange?.(localValue);\n    } else {\n      setLocalValue(value);\n    }\n  };\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type=\"text\"\n        value={localValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        placeholder=\"00:00\"\n        maxLength={5}\n        disabled={disabled}\n        className={cn(\"pr-10\", className)}\n      />\n      <Clock className=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n    </div>\n  );\n}\n"]}

package/dist/components/inputs/translatable-field.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { UILocaleConfig, TranslatableValue, LocaleCode } from '../../providers/ui-provider.js';
+
+interface TranslatableRenderProps {
+    /** Active locale code, e.g. `'en'` */
+    locale: LocaleCode;
+    /** String value for the active locale */
+    value: string;
+    /** Call with the new string to update the active locale's value */
+    onChange: (value: string) => void;
+    /** Fallback value shown as placeholder when the active locale is empty */
+    fallbackPlaceholder: string | undefined;
+    /** True when the active locale has a truthy entry in `errors` */
+    hasError: boolean;
+}
+interface TranslatableFieldProps {
+    config: UILocaleConfig;
+    value: TranslatableValue;
+    onChange: (value: TranslatableValue) => void;
+    /** Render the actual input. Receives locale-scoped value/onChange. */
+    children: (props: TranslatableRenderProps) => ReactNode;
+    className?: string;
+    /**
+     * Per-locale validation errors. A truthy string for a locale code marks that
+     * locale as invalid: its tab dot turns red and `hasError` is `true` in the
+     * render props when that locale is active.
+     *
+     * @example `{ en: '', vi: 'Too long' }` — only VI has an error
+     */
+    errors?: Partial<Record<string, string>>;
+}
+/**
+ * Wraps any text input with a locale switcher tab bar.
+ * Used internally by `Input` and `Textarea` when `translatable` prop is set.
+ *
+ * When more than 3 locales are configured, overflow locales are collapsed into
+ * a dropdown button to prevent the tab bar from overflowing.
+ *
+ * @example
+ * ```tsx
+ * <TranslatableField config={localeConfig} value={val} onChange={setVal} errors={{ vi: 'Too long' }}>
+ *   {({ value, onChange, fallbackPlaceholder, hasError }) => (
+ *     <input aria-invalid={hasError || undefined} value={value} onChange={(e) => onChange(e.target.value)} />
+ *   )}
+ * </TranslatableField>
+ * ```
+ */
+declare function TranslatableField({ config, value, onChange, children, className, errors, }: TranslatableFieldProps): react_jsx_runtime.JSX.Element;
+
+export { TranslatableField, type TranslatableRenderProps, TranslatableValue };

package/dist/components/inputs/translatable-field.js

@@ -0,0 +1,4 @@
+export { TranslatableField } from '../../chunk-YU55YBID.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=translatable-field.js.map
+//# sourceMappingURL=translatable-field.js.map

package/dist/components/inputs/translatable-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"translatable-field.js"}

package/dist/components/layout/page-container.d.ts

@@ -0,0 +1,96 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PageContainerProps {
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * Subtitle or description below title
+     */
+    subtitle?: string;
+    /**
+     * Extra content (buttons, actions) displayed on the right side of header
+     */
+    extra?: ReactNode;
+    /**
+     * Main page content
+     */
+    children: ReactNode;
+    /**
+     * Footer content displayed at the bottom
+     */
+    footer?: ReactNode;
+    /**
+     * Sidebar content displayed on left or right
+     */
+    sidebar?: ReactNode;
+    /**
+     * Sidebar position
+     * @default 'right'
+     */
+    sidebarPosition?: 'left' | 'right';
+    /**
+     * Sidebar width
+     * @default 'w-80'
+     */
+    sidebarWidth?: string;
+    /**
+     * Layout variant
+     * - 'standard': Default padded layout with header
+     * - 'full': Full width, no padding (for boards, gantt)
+     * - 'split': Layout with sidebar inside page
+     * @default 'standard'
+     */
+    variant?: 'standard' | 'full' | 'split';
+    /**
+     * Custom container className
+     */
+    className?: string;
+    /**
+     * Custom content className
+     */
+    contentClassName?: string;
+    /**
+     * Show separator below header
+     * @default true for standard variant
+     */
+    showHeaderSeparator?: boolean;
+}
+/**
+ * PageContainer - Flexible page layout component
+ *
+ * @example
+ * // Standard layout with title and actions
+ * <PageContainer
+ *   title="Dashboard"
+ *   subtitle="Overview of all projects"
+ *   extra={<Button>Create</Button>}
+ * >
+ *   <div>Content here</div>
+ * </PageContainer>
+ *
+ * @example
+ * // Split layout with right sidebar
+ * <PageContainer
+ *   title="Task Detail"
+ *   variant="split"
+ *   sidebar={<CommentSection />}
+ *   sidebarPosition="right"
+ * >
+ *   <div>Main content</div>
+ * </PageContainer>
+ *
+ * @example
+ * // Full width layout (no padding)
+ * <PageContainer variant="full">
+ *   <KanbanBoard />
+ * </PageContainer>
+ */
+declare function PageContainer({ title, subtitle, extra, children, footer, sidebar, sidebarPosition, sidebarWidth, variant, className, contentClassName, showHeaderSeparator, }: PageContainerProps): react_jsx_runtime.JSX.Element;
+declare function StandardPageContainer(props: Omit<PageContainerProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function SplitPageContainer(props: Omit<PageContainerProps, 'variant'>): react_jsx_runtime.JSX.Element;
+declare function FullWidthPageContainer(props: Omit<PageContainerProps, 'variant' | 'title' | 'subtitle' | 'extra'>): react_jsx_runtime.JSX.Element;
+
+export { FullWidthPageContainer, PageContainer, type PageContainerProps, SplitPageContainer, StandardPageContainer };

package/dist/components/layout/page-container.js

@@ -0,0 +1,5 @@
+export { FullWidthPageContainer, PageContainer, SplitPageContainer, StandardPageContainer } from '../../chunk-YN26HHZ4.js';
+import '../../chunk-KCUSO3CK.js';
+import '../../chunk-DGPY4WP3.js';
+//# sourceMappingURL=page-container.js.map
+//# sourceMappingURL=page-container.js.map

package/dist/components/layout/page-container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"page-container.js"}

package/dist/components/{breadcrumb.js → navigation/breadcrumb.js}

@@ -1,4 +1,4 @@
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../chunk-7RMTPT6O.js';
-import '../chunk-DGPY4WP3.js';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../../chunk-YYJVVYFS.js';
+import '../../chunk-DGPY4WP3.js';
 //# sourceMappingURL=breadcrumb.js.map
 //# sourceMappingURL=breadcrumb.js.map

package/dist/components/{command.d.ts → navigation/command.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Command as Command$1 } from 'cmdk';
-import { Dialog } from './dialog.js';
+import { Dialog } from '../overlay/dialog.js';
 import '@radix-ui/react-dialog';
 
 /**

package/dist/components/{command.js → navigation/command.js}

@@ -1,5 +1,5 @@
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../chunk-6GWVQB3Q.js';
-import '../chunk-F2ZJLKDP.js';
-import '../chunk-DGPY4WP3.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../../chunk-MVYSUWSD.js';
+import '../../chunk-YVCLIOMM.js';
+import '../../chunk-DGPY4WP3.js';
 //# sourceMappingURL=command.js.map
 //# sourceMappingURL=command.js.map