@dimasbaguspm/versaur 0.0.16 → 0.0.18

package/dist/js/forms/index.js

@@ -1,18 +1,18 @@
-import { C as e, a as n, b as p, D as s, R as u, c as i, S as I, d as c, g as S, j as h, i as l, h as r, e as T, T as g, f as m } from "../switch-input-Bx6_2zG9.js";
+import { C as a, b as n, a as p, D as u, E as s, P as I, R as i, d as l, c as S, S as c, e as r, h as g, f as h, T as m, g as o } from "../email-input-BIbrfs5q.js";
 export {
-  e as CalculatorInput,
-  n as CheckboxInput,
-  p as ChipInput,
-  s as DateSinglePickerInput,
-  u as RadioInput,
-  i as SegmentMultipleInput,
-  I as SegmentSingleInput,
-  c as SelectInput,
-  S as SwitchInput,
-  h as SwitchLabel,
-  l as SwitchThumb,
-  r as SwitchTrack,
-  T as TextAreaInput,
-  g as TextInput,
-  m as TimePickerInput
+  a as CheckboxInput,
+  n as ChipMultipleInput,
+  p as ChipSingleInput,
+  u as DateSinglePickerInput,
+  s as EmailInput,
+  I as PriceInput,
+  i as RadioInput,
+  l as SearchInput,
+  S as SegmentMultipleInput,
+  c as SegmentSingleInput,
+  r as SelectInput,
+  g as SwitchInput,
+  h as TextAreaInput,
+  m as TextInput,
+  o as TimePickerInput
 };

package/dist/js/index.js

@@ -1,54 +1,57 @@
-import { L as s, P as e, S as o } from "./skeleton-BNZyaRjo.js";
-import { A as n, B as p, F as u, P as c, T as i } from "./form-layout-4ASWdXn8.js";
-import { C as I, a as m, b as B, D as S, R as T, c as x, S as d, d as b, g as h, j as f, i as g, h as A, e as C, T as k, f as P } from "./switch-input-Bx6_2zG9.js";
-import { B as L, D } from "./bottom-sheet-Difan0U1.js";
-import { M as F, a as y } from "./menu-Bm-yPIMN.js";
-import { A as j, a as v, b as q, B as z, c as E, d as G, S as H, T as J, e as K } from "./tile-BjhJ5Mvl.js";
-import { B as O, a as Q, C as U, b as V, I as W, T as X } from "./calendar-CUjVZ7Ap.js";
+import { L as t, P as e, S as r } from "./skeleton-BNZyaRjo.js";
+import { A as n, B as p, F as u, P as i, T as c } from "./form-layout-4ASWdXn8.js";
+import { C as l, b as S, a as m, D as B, E as d, P as x, R as T, d as g, c as f, S as b, e as h, h as P, f as k, T as A, g as C } from "./email-input-BIbrfs5q.js";
+import { B as L, D as M, M as F, a as v } from "./bottom-sheet-BRv-oJL-.js";
+import { A as y, a as E, b as R, B as j, c as q, d as z, e as G, f as H, C as J, g as K, D as N, I as O, T as Q, h as U, i as V } from "./description-list-DZQF212Z.js";
+import { S as X } from "./snackbar-DH8jCh2V.js";
 import { B as Z, T as _ } from "./tabs-BbOkYchB.js";
+import { S as aa, u as sa } from "./use-snackbars-oPoF7J5t.js";
 export {
-  j as Alert,
-  v as Anchor,
+  y as Alert,
+  E as Anchor,
   n as AppBar,
-  q as Avatar,
-  z as Badge,
+  R as Avatar,
+  j as Badge,
   p as BottomBar,
   L as BottomSheet,
-  E as Brand,
+  q as Brand,
   Z as Breadcrumbs,
-  O as Button,
+  z as Button,
   G as ButtonFloat,
-  Q as ButtonIcon,
-  U as Calculator,
-  I as CalculatorInput,
-  V as Calendar,
-  m as CheckboxInput,
-  B as ChipInput,
-  S as DateSinglePickerInput,
-  D as Drawer,
+  H as ButtonIcon,
+  J as Calculator,
+  K as Calendar,
+  l as CheckboxInput,
+  S as ChipMultipleInput,
+  m as ChipSingleInput,
+  B as DateSinglePickerInput,
+  N as DescriptionList,
+  M as Drawer,
+  d as EmailInput,
   u as FormLayout,
-  W as Icon,
-  s as LoadingIndicator,
+  O as Icon,
+  t as LoadingIndicator,
   F as Menu,
-  y as Modal,
-  c as PageLayout,
+  v as Modal,
+  i as PageLayout,
+  x as PriceInput,
   e as ProgressIndicator,
   T as RadioInput,
-  x as SegmentMultipleInput,
-  d as SegmentSingleInput,
-  b as SelectInput,
-  o as Skeleton,
-  H as Snackbar,
-  h as SwitchInput,
-  f as SwitchLabel,
-  g as SwitchThumb,
-  A as SwitchTrack,
-  J as Table,
+  g as SearchInput,
+  f as SegmentMultipleInput,
+  b as SegmentSingleInput,
+  h as SelectInput,
+  r as Skeleton,
+  X as Snackbar,
+  aa as SnackbarsProvider,
+  P as SwitchInput,
+  Q as Table,
   _ as Tabs,
-  X as Text,
-  C as TextAreaInput,
-  k as TextInput,
-  K as Tile,
-  P as TimePickerInput,
-  i as TopBar
+  U as Text,
+  k as TextAreaInput,
+  A as TextInput,
+  V as Tile,
+  C as TimePickerInput,
+  c as TopBar,
+  sa as useSnackbars
 };

package/dist/js/overlays/index.js

@@ -1,8 +1,7 @@
-import { B as e, D as r } from "../bottom-sheet-Difan0U1.js";
-import { M as s, a as m } from "../menu-Bm-yPIMN.js";
+import { B as o, D as r, M as s, a as t } from "../bottom-sheet-BRv-oJL-.js";
 export {
-  e as BottomSheet,
+  o as BottomSheet,
   r as Drawer,
   s as Menu,
-  m as Modal
+  t as Modal
 };

package/dist/js/primitive/index.js

@@ -1,19 +1,20 @@
-import { A as t, a as o, b as r, B as e, c as n, d as l, S as B, T as c, e as T } from "../tile-BjhJ5Mvl.js";
-import { B as d, a as u, C as A, b as x, I as C, T as I } from "../calendar-CUjVZ7Ap.js";
+import { A as t, a as o, b as r, B as e, c as n, d as c, e as l, f as B, C as i, g as d, D as u, I as A, T, h as b, i as f } from "../description-list-DZQF212Z.js";
+import { S as x } from "../snackbar-DH8jCh2V.js";
 export {
   t as Alert,
   o as Anchor,
   r as Avatar,
   e as Badge,
   n as Brand,
-  d as Button,
+  c as Button,
   l as ButtonFloat,
-  u as ButtonIcon,
-  A as Calculator,
-  x as Calendar,
-  C as Icon,
-  B as Snackbar,
-  c as Table,
-  I as Text,
-  T as Tile
+  B as ButtonIcon,
+  i as Calculator,
+  d as Calendar,
+  u as DescriptionList,
+  A as Icon,
+  x as Snackbar,
+  T as Table,
+  b as Text,
+  f as Tile
 };

package/dist/js/providers/index.js

@@ -0,0 +1,5 @@
+import { S as s, u as e } from "../use-snackbars-oPoF7J5t.js";
+export {
+  s as SnackbarsProvider,
+  e as useSnackbars
+};

package/dist/js/snackbar-DH8jCh2V.js

@@ -0,0 +1,50 @@
+import { c, j as r, a as d } from "./index-DOdDlCoL.js";
+import { forwardRef as i } from "react";
+const l = c(
+  "flex items-center gap-2 px-4 py-2 rounded-sm w-auto mx-4 sm:mx-0 sm:w-fit relative shadow-sm",
+  {
+    variants: {
+      color: {
+        success: "text-success-bold bg-success-soft border-l-4 border-success",
+        info: "text-info-bold bg-info-soft border-l-4 border-info",
+        warning: "text-warning-bold bg-warning-soft border-l-4 border-warning",
+        danger: "text-danger-bold bg-danger-soft border-l-4 border-danger"
+      }
+    },
+    defaultVariants: {
+      color: "success"
+    }
+  }
+), b = ({
+  children: a,
+  ...s
+}) => /* @__PURE__ */ r.jsx(
+  "span",
+  {
+    className: "flex-1 truncate text-sm",
+    "data-testid": "snackbar-text",
+    ...s,
+    children: a
+  }
+), x = ({
+  children: a,
+  ...s
+}) => /* @__PURE__ */ r.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...s, children: a }), g = i(
+  ({ children: a, action: s, color: e, className: t, ...o }, n) => /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      ref: n,
+      role: "status",
+      "aria-live": "polite",
+      className: d(l({ color: e }), t),
+      ...o,
+      children: [
+        /* @__PURE__ */ r.jsx(b, { children: a }),
+        s && /* @__PURE__ */ r.jsx(x, { children: s })
+      ]
+    }
+  )
+);
+export {
+  g as S
+};

package/dist/js/use-snackbars-oPoF7J5t.js

@@ -0,0 +1,94 @@
+import { c as d, j as c } from "./index-DOdDlCoL.js";
+import { createContext as x, useState as k, useRef as p, useCallback as m, useEffect as S, useMemo as v, useContext as h } from "react";
+import { S as w } from "./snackbar-DH8jCh2V.js";
+const f = x(
+  null
+), j = d(
+  [
+    "fixed z-50 flex flex-col gap-2 px-0 pb-2",
+    "w-screen left-0 bottom-0",
+    // mobile: full width
+    "sm:w-auto sm:left-4 sm:bottom-4 sm:max-w-sm"
+    // desktop/tablet
+  ].join(" ")
+), T = d("", {
+  variants: {
+    placement: {
+      mobile: "snackbar-animate-fade-in-out",
+      desktop: "snackbar-animate-slide-in-left"
+    }
+  },
+  defaultVariants: {
+    placement: "mobile"
+  }
+}), C = 4e3;
+function E() {
+  const [a, s] = k([]), t = p({}), n = m((e) => {
+    s((r) => r.filter((o) => o.id !== e)), t.current[e] && (clearTimeout(t.current[e]), delete t.current[e]);
+  }, []), i = m(
+    (e, r, o) => {
+      const u = `${Date.now()}-${Math.random()}`, l = o?.duration ?? C;
+      s((b) => [
+        ...b,
+        {
+          id: u,
+          color: e,
+          message: r,
+          ...o,
+          duration: l
+        }
+      ]), t.current[u] = setTimeout(() => {
+        n(u);
+      }, l);
+    },
+    [n]
+  );
+  return S(() => () => {
+    Object.values(t.current).forEach(clearTimeout), t.current = {};
+  }, []), { queue: a, showSnack: i, removeSnack: n };
+}
+const V = ({ children: a }) => {
+  const { queue: s, showSnack: t, removeSnack: n } = E(), i = v(() => ({ showSnack: t }), [t]);
+  return /* @__PURE__ */ c.jsxs(f.Provider, { value: i, children: [
+    a,
+    /* @__PURE__ */ c.jsx(
+      "div",
+      {
+        className: j(),
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: s.map((e, r) => /* @__PURE__ */ c.jsx(
+          "div",
+          {
+            className: T({
+              placement: window.innerWidth >= 640 ? "desktop" : "mobile"
+            }),
+            style: { transitionDelay: `${r * 60}ms` },
+            children: /* @__PURE__ */ c.jsx(
+              w,
+              {
+                color: e.color,
+                action: e.action,
+                onClose: () => {
+                  n(e.id);
+                },
+                children: e.message
+              }
+            )
+          },
+          e.id
+        ))
+      }
+    )
+  ] });
+};
+function N() {
+  const a = h(f);
+  if (!a)
+    throw new Error("useSnackbars must be used within a SnackbarsProvider");
+  return a;
+}
+export {
+  V as S,
+  N as u
+};

package/dist/types/feedbacks/loading-indicator/index.d.ts

@@ -1 +1,2 @@
-export * from './loading-indicator';
+export { LoadingIndicator } from './loading-indicator';
+export type * from './types';

package/dist/types/forms/chip-multiple-input/chip-multiple-input.atoms.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ChipMultipleInputOptionProps } from './types';
+/**
+ * ChipMultipleInput.Option atom component
+ *
+ * Individual chip option for ChipMultipleInput
+ * Uses checkbox input pattern for multiple selection
+ * Supports leading icon and animated tick/check
+ */
+export declare const ChipMultipleOption: React.ForwardRefExoticComponent<ChipMultipleInputOptionProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/forms/chip-multiple-input/chip-multiple-input.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ChipMultipleInputProps } from './types';
+export declare const ChipMultipleInput: React.ForwardRefExoticComponent<ChipMultipleInputProps & React.RefAttributes<HTMLDivElement>> & {
+    Option: React.ForwardRefExoticComponent<import('./types').ChipMultipleInputOptionProps & React.RefAttributes<HTMLInputElement>>;
+};

package/dist/types/forms/chip-multiple-input/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipMultipleInput } from './chip-multiple-input';
+export type { ChipMultipleInputProps, ChipMultipleInputOptionProps, } from './types';

package/dist/types/forms/{chip-input → chip-multiple-input}/types.d.ts

@@ -1,8 +1,8 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 /**
- * Props for the ChipInput component
+ * Props for the ChipMultipleInput component
  */
-export interface ChipInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> {
+export interface ChipMultipleInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> {
     /**
      * The shape of the chip: 'circle' (default) or 'rounded'
      */
@@ -45,9 +45,9 @@ export interface ChipInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     onChange?: (value: string[]) => void;
 }
 /**
- * Props for the ChipInput.Option component
+ * Props for the ChipMultipleInput.Option component
  */
-export interface ChipInputOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name'> {
+export interface ChipMultipleInputOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name'> {
     /**
      * The option label content
      */
@@ -64,4 +64,16 @@ export interface ChipInputOptionProps extends Omit<InputHTMLAttributes<HTMLInput
      * Show the default check icon if true (default: false). If both check and defaultCheck are provided, check takes precedence
      */
     defaultCheck?: boolean;
+    /**
+     * Disabled state for this option
+     */
+    disabled?: boolean;
+    /**
+     * Optional id for the input
+     */
+    id?: string;
+    /**
+     * Additional className for styling
+     */
+    className?: string;
 }

package/dist/types/forms/chip-single-input/chip-single-input.atoms.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ChipSingleInputOptionProps } from './types';
+/**
+ * ChipSingleInput.Option atom component
+ *
+ * Individual chip option for ChipSingleInput
+ * Uses radio input pattern for single selection
+ * Supports leading icon and animated tick/check
+ */
+export declare const ChipSingleInputOption: React.ForwardRefExoticComponent<ChipSingleInputOptionProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/forms/chip-single-input/chip-single-input.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ChipSingleInputProps } from './types';
+export declare const ChipSingleInput: React.ForwardRefExoticComponent<ChipSingleInputProps & React.RefAttributes<HTMLDivElement>> & {
+    Option: React.ForwardRefExoticComponent<import('./types').ChipSingleInputOptionProps & React.RefAttributes<HTMLInputElement>>;
+};

package/dist/types/forms/chip-single-input/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipSingleInput } from './chip-single-input';
+export type * from './types';

package/dist/types/forms/chip-single-input/types.d.ts

@@ -0,0 +1,67 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the ChipSingleInput component
+ */
+export interface ChipSingleInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> {
+    /**
+     * The shape of the chip: 'circle' (default) or 'rounded'
+     */
+    shape?: 'circle' | 'rounded';
+    /**
+     * The size of the chip: 'sm' (default), 'md', or 'lg'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Visual style variant supporting Versaur color system
+     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
+     * Semantic variants: success, info, warning, danger
+     * Each variant supports outline form for flexible design expression
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    /**
+     * Label text to display above the chip group
+     */
+    label?: ReactNode;
+    /**
+     * Helper text to display below the chip group
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: ReactNode;
+    /**
+     * The name attribute for the radio group - required for radio functionality
+     */
+    name: string;
+    /**
+     * Current selected value (controlled component)
+     * String representing selected option value
+     */
+    value?: string;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (value: string) => void;
+}
+/**
+ * Props for the ChipSingleInput.Option component
+ */
+export interface ChipSingleInputOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name'> {
+    /**
+     * The option label content
+     */
+    children: ReactNode;
+    /**
+     * The value for this chip option
+     */
+    value: string;
+    /**
+     * Custom check icon or element. If not provided, no check is rendered unless defaultCheck is true
+     */
+    check?: React.ReactNode;
+    /**
+     * Show the default check icon if true (default: false). If both check and defaultCheck are provided, check takes precedence
+     */
+    defaultCheck?: boolean;
+}

package/dist/types/forms/date-single-picker-input/date-single-picker-input.d.ts

@@ -1,10 +1,3 @@
 import { default as React } from 'react';
 import { DateSinglePickerInputProps } from './types';
-/**
- * DateSinglePickerInput component for Versaur UI
- *
- * Styled like TextInput, but acts as a button to pick a single date
- * Clicking opens a docked Calendar below the input
- * Strictly typed, accessible, and visually consistent with TextInput
- */
-export declare const DateSinglePickerInput: React.ForwardRefExoticComponent<DateSinglePickerInputProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DateSinglePickerInput: React.ForwardRefExoticComponent<DateSinglePickerInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/forms/date-single-picker-input/index.d.ts

@@ -1,2 +1,2 @@
 export { DateSinglePickerInput } from './date-single-picker-input';
-export type * from './types';
+export * from './types';

package/dist/types/forms/date-single-picker-input/types.d.ts

@@ -1,75 +1,21 @@
-import { ReactNode } from 'react';
+import { TextInputProps } from '../text-input/types';
 /**
- * Props for the DateSinglePickerInput component
+ * Props for DateSinglePickerInput
+ * Extends TextInputProps, but restricts type to 'date' and value to string
  */
-/**
- * Props for the DateSinglePickerInput component
- */
-export interface DateSinglePickerInputProps {
-    /**
-     * Picker display type: 'docked' (default) or 'modal'.
-     * 'docked' shows calendar below input, 'modal' opens a modal at top.
-     */
-    type?: 'docked' | 'modal';
-    /**
-     * The selected date value
-     */
-    value?: Date;
-    /**
-     * Callback when a date is selected
-     */
-    onChange?: (date: Date) => void;
-    /**
-     * Label text to display above the input
-     */
-    label?: ReactNode;
-    /**
-     * Optional content to display inside the input (left)
-     */
-    leftContent?: ReactNode;
-    /**
-     * Optional content to display inside the input (right)
-     */
-    rightContent?: ReactNode;
-    /**
-     * Helper text to display below the input
-     */
-    helperText?: ReactNode;
-    /**
-     * Error message for invalid state
-     */
-    error?: ReactNode;
-    /**
-     * Visual style variant supporting Versaur color system
-     */
-    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+export interface DateSinglePickerInputProps extends Omit<TextInputProps, 'type' | 'value' | 'onChange'> {
     /**
-     * Disabled state
+     * The value of the input (ISO date string: YYYY-MM-DD)
      */
-    disabled?: boolean;
+    value: string;
     /**
-     * Placeholder text when no date is selected
+     * Called when the value changes
      */
-    placeholder?: ReactNode;
+    onChange: (value: string) => void;
     /**
-     * Optional id for the input element
+     * Optional custom formatter for displaying the date value
+     * @param value ISO date string
+     * @returns formatted string for display
      */
-    id?: string;
-    /**
-     * Optional custom date formatter. If not provided, uses default format.
-     * @param date Date to format
-     * @returns Formatted date string
-     */
-    formatDate?: (date?: Date) => string;
-}
-/**
- * Atoms for DateSinglePickerInput modal type
- */
-export interface DateSinglePickerModalContentProps {
-    children: ReactNode;
-}
-export interface DateSinglePickerModalFooterProps {
-    onCancel: () => void;
-    onConfirm: () => void;
-    confirmDisabled?: boolean;
+    formatter?: (value: string) => string;
 }

package/dist/types/forms/email-input/email-input.d.ts

@@ -0,0 +1,8 @@
+import { EmailInputProps } from './types';
+/**
+ * EmailInput component for Versaur UI
+ *
+ * A wrapper around TextInput that enforces type="email" and follows HTML input standards
+ * Supports all TextInput props except type, which is always "email"
+ */
+export declare const EmailInput: import('react').ForwardRefExoticComponent<EmailInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/forms/email-input/index.d.ts

@@ -0,0 +1,2 @@
+export { EmailInput } from './email-input';
+export type { EmailInputProps } from './types';

package/dist/types/forms/email-input/types.d.ts

@@ -0,0 +1,6 @@
+import { TextInputProps } from '../text-input/types';
+/**
+ * Props for the EmailInput component
+ * Extends TextInputProps and enforces type="email" for HTML input standards
+ */
+export type EmailInputProps = Omit<TextInputProps, 'type'>;

package/dist/types/forms/index.d.ts

@@ -1,12 +1,15 @@
-export * from './calculator-input';
 export * from './checkbox-input';
-export * from './chip-input';
+export * from './chip-single-input';
+export * from './chip-multiple-input';
 export * from './date-single-picker-input';
 export * from './radio-input';
 export * from './segment-single-input';
 export * from './segment-multiple-input';
+export * from './search-input';
 export * from './select-input';
 export * from './text-input';
 export * from './textarea-input';
 export * from './time-picker-input';
 export * from './switch-input';
+export * from './price-input';
+export * from './email-input';

package/dist/types/forms/price-input/index.d.ts

@@ -0,0 +1,2 @@
+export { PriceInput } from './price-input';
+export type { PriceInputProps } from './types';

package/dist/types/forms/price-input/price-input.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { PriceInputProps } from './types';
+/**
+ * PriceInput is a styled input for IDR currency, handling comma formatting and standard input attributes
+ */
+export declare const PriceInput: FC<PriceInputProps>;