@jbpark/ui-kit 10.0.2 → 10.2.0

package/dist/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","names":[],"sources":["../src/components/organisms/table.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\nimport Pagination, {\n  type Props as PaginationProps,\n} from '../molecules/pagination';\nimport Empty from '../templates/empty';\n\nexport type PaginationOptions = Omit<PaginationProps, 'total'> &\n  ({ mode?: 'client'; total?: never } | { mode: 'server'; total: number });\n\nexport interface Column<T> {\n  key: React.Key;\n  title: React.ReactNode;\n  /** Field displayed when render is omitted. */\n  dataIndex?: keyof T;\n  render?: (record: T, index: number) => React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n  width?: string | number;\n  className?: string;\n  headerClassName?: string;\n}\n\nexport interface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'table'>,\n  'children'\n> {\n  columns: Column<T>[];\n  data?: T[];\n  /** Use a stable key when rows may be reordered or paged. */\n  rowKey?: (record: T, index: number) => React.Key;\n  caption?: React.ReactNode;\n  loading?: boolean;\n  empty?: React.ReactNode;\n  size?: 'small' | 'middle' | 'large';\n  bordered?: boolean;\n  striped?: boolean;\n  hoverable?: boolean;\n  /** true paginates data locally; server mode expects current-page data. */\n  pagination?: boolean | PaginationOptions;\n  classNames?: {\n    container?: string;\n    header?: string;\n    body?: string;\n    row?: string;\n    cell?: string;\n    empty?: string;\n    pagination?: string;\n  };\n}\n\nconst clampPage = (page: number, pageCount: number) =>\n  Math.min(\n    Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1),\n    Math.max(1, pageCount),\n  );\n\nconst normalizePageSize = (value: number) =>\n  Number.isFinite(value) && value >= 1 ? Math.floor(value) : 10;\n\nconst Table = <T,>({\n  columns,\n  data = [],\n  rowKey,\n  loading = false,\n  empty,\n  size,\n  bordered = false,\n  striped = false,\n  hoverable = true,\n  pagination = false,\n  caption,\n  className,\n  classNames,\n  ...props\n}: Props<T>) => {\n  const { componentSize } = useConfig();\n  const paginationOptions: PaginationOptions =\n    typeof pagination === 'object' ? pagination : {};\n  const {\n    mode = 'client',\n    total: serverTotal,\n    page: controlledPage,\n    defaultPage = 1,\n    pageSize: controlledPageSize,\n    defaultPageSize = 10,\n    onChange,\n    onPageSizeChange,\n    ...paginationProps\n  } = paginationOptions;\n  const [internal, setInternal] = useState(() => ({\n    page: defaultPage,\n    pageSize: normalizePageSize(defaultPageSize),\n    pageCount: 0,\n  }));\n  const pageSize = normalizePageSize(controlledPageSize ?? internal.pageSize);\n  const total = mode === 'server' ? (serverTotal ?? 0) : data.length;\n  const pageCount = Math.ceil(total / pageSize);\n\n  if (\n    pagination &&\n    controlledPage === undefined &&\n    internal.pageCount !== pageCount\n  ) {\n    setInternal(current => ({\n      ...current,\n      page: clampPage(current.page, pageCount),\n      pageCount,\n    }));\n  }\n\n  const page = clampPage(controlledPage ?? internal.page, pageCount);\n  const visibleData =\n    pagination && mode === 'client'\n      ? data.slice((page - 1) * pageSize, page * pageSize)\n      : data;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const cellPadding = {\n    small: 'px-3 py-2',\n    middle: 'px-4 py-3',\n    large: 'px-5 py-4',\n  }[resolvedSize];\n\n  const handlePageChange = (next: number) => {\n    if (controlledPage === undefined) {\n      setInternal(current => ({ ...current, page: next }));\n    }\n\n    onChange?.(next);\n  };\n\n  const handlePageSizeChange = (next: number) => {\n    if (controlledPageSize === undefined || controlledPage === undefined) {\n      setInternal(current => ({\n        ...current,\n        page: controlledPage === undefined ? 1 : current.page,\n        pageSize: controlledPageSize === undefined ? next : current.pageSize,\n        pageCount: Math.ceil(total / next),\n      }));\n    }\n\n    onPageSizeChange?.(next);\n  };\n\n  return (\n    <>\n      <div\n        data-slot=\"table-container\"\n        className={cn(\n          'w-full overflow-x-auto',\n          bordered && 'rounded-md border',\n          classNames?.container,\n          //\n        )}\n      >\n        <table\n          {...props}\n          data-slot=\"table\"\n          aria-busy={loading || undefined}\n          className={cn(\n            'w-full min-w-max border-collapse text-sm',\n            className,\n            //\n          )}\n        >\n          {caption && <caption className=\"mb-2 text-start\">{caption}</caption>}\n          <thead\n            data-slot=\"table-header\"\n            className={cn(\n              'bg-muted/50 border-b',\n              classNames?.header,\n              //\n            )}\n          >\n            <tr>\n              {columns.map(column => (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  style={{ width: column.width }}\n                  className={cn(\n                    'text-foreground font-medium',\n                    cellPadding,\n                    column.align === 'center' && 'text-center',\n                    column.align === 'right' && 'text-right',\n                    column.align === undefined && 'text-start',\n                    bordered && 'border-e last:border-e-0',\n                    classNames?.cell,\n                    column.headerClassName,\n                    //\n                  )}\n                >\n                  {column.title}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody data-slot=\"table-body\" className={classNames?.body}>\n            {loading ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cellPadding}\n                >\n                  <Skeleton count={3} className=\"py-2\" />\n                </td>\n              </tr>\n            ) : visibleData.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cn(cellPadding, classNames?.empty)}\n                >\n                  {empty ?? <Empty />}\n                </td>\n              </tr>\n            ) : (\n              visibleData.map((record, index) => (\n                <tr\n                  key={rowKey?.(record, index) ?? index}\n                  data-slot=\"table-row\"\n                  className={cn(\n                    'border-b last:border-b-0',\n                    striped && 'even:bg-muted/30',\n                    hoverable && 'hover:bg-muted/50',\n                    classNames?.row,\n                    //\n                  )}\n                >\n                  {columns.map(column => {\n                    const value =\n                      column.dataIndex === undefined\n                        ? undefined\n                        : record[column.dataIndex];\n\n                    return (\n                      <td\n                        key={column.key}\n                        data-slot=\"table-cell\"\n                        className={cn(\n                          cellPadding,\n                          column.align === 'center' && 'text-center',\n                          column.align === 'right' && 'text-right',\n                          bordered && 'border-e last:border-e-0',\n                          classNames?.cell,\n                          column.className,\n                          //\n                        )}\n                      >\n                        {column.render\n                          ? column.render(record, index)\n                          : value == null\n                            ? null\n                            : String(value)}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n      {pagination && (\n        <div\n          data-slot=\"table-pagination\"\n          className={cn(\n            'mt-4 flex justify-end',\n            classNames?.pagination,\n            //\n          )}\n        >\n          <Pagination\n            {...paginationProps}\n            total={total}\n            page={page}\n            pageSize={pageSize}\n            onChange={handlePageChange}\n            onPageSizeChange={handlePageSizeChange}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;AAwDA,MAAM,aAAa,MAAc,cAC/B,KAAK,IACH,KAAK,IAAI,GAAG,OAAO,SAAS,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,GACxD,KAAK,IAAI,GAAG,SAAS,CACvB;AAEF,MAAM,qBAAqB,UACzB,OAAO,SAAS,KAAK,KAAK,SAAS,IAAI,KAAK,MAAM,KAAK,IAAI;AAE7D,MAAM,SAAa,EACjB,SACA,OAAO,CAAC,GACR,QACA,UAAU,OACV,OACA,MACA,WAAW,OACX,UAAU,OACV,YAAY,MACZ,aAAa,OACb,SACA,WACA,YACA,GAAG,YACW;CACd,MAAM,EAAE,kBAAkB,UAAU;CAGpC,MAAM,EACJ,OAAO,UACP,OAAO,aACP,MAAM,gBACN,cAAc,GACd,UAAU,oBACV,kBAAkB,IAClB,UACA,kBACA,GAAG,oBAVH,OAAO,eAAe,WAAW,aAAa,CAAC;CAYjD,MAAM,CAAC,UAAU,eAAe,gBAAgB;EAC9C,MAAM;EACN,UAAU,kBAAkB,eAAe;EAC3C,WAAW;CACb,EAAE;CACF,MAAM,WAAW,kBAAkB,sBAAsB,SAAS,QAAQ;CAC1E,MAAM,QAAQ,SAAS,WAAY,eAAe,IAAK,KAAK;CAC5D,MAAM,YAAY,KAAK,KAAK,QAAQ,QAAQ;CAE5C,IACE,cACA,mBAAmB,KAAA,KACnB,SAAS,cAAc,WAEvB,aAAY,aAAY;EACtB,GAAG;EACH,MAAM,UAAU,QAAQ,MAAM,SAAS;EACvC;CACF,EAAE;CAGJ,MAAM,OAAO,UAAU,kBAAkB,SAAS,MAAM,SAAS;CACjE,MAAM,cACJ,cAAc,SAAS,WACnB,KAAK,OAAO,OAAO,KAAK,UAAU,OAAO,QAAQ,IACjD;CAEN,MAAM,cAAc;EAClB,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EALqB,QAAQ,iBAAiB;CAO9C,MAAM,oBAAoB,SAAiB;EACzC,IAAI,mBAAmB,KAAA,GACrB,aAAY,aAAY;GAAE,GAAG;GAAS,MAAM;EAAK,EAAE;EAGrD,WAAW,IAAI;CACjB;CAEA,MAAM,wBAAwB,SAAiB;EAC7C,IAAI,uBAAuB,KAAA,KAAa,mBAAmB,KAAA,GACzD,aAAY,aAAY;GACtB,GAAG;GACH,MAAM,mBAAmB,KAAA,IAAY,IAAI,QAAQ;GACjD,UAAU,uBAAuB,KAAA,IAAY,OAAO,QAAQ;GAC5D,WAAW,KAAK,KAAK,QAAQ,IAAI;EACnC,EAAE;EAGJ,mBAAmB,IAAI;CACzB;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0BACA,YAAY,qBACZ,YAAY,SAEd;EAEA,UAAA,qBAAC,SAAD;GACE,GAAI;GACJ,aAAU;GACV,aAAW,WAAW,KAAA;GACtB,WAAW,GACT,4CACA,SAEF;GARF,UAAA;IAUG,WAAW,oBAAC,WAAD;KAAS,WAAU;KAAmB,UAAA;IAAiB,CAAA;IACnE,oBAAC,SAAD;KACE,aAAU;KACV,WAAW,GACT,wBACA,YAAY,MAEd;KAEA,UAAA,oBAAC,MAAD,EAAA,UACG,QAAQ,KAAI,WACX,oBAAC,MAAD;MAEE,OAAM;MACN,OAAO,EAAE,OAAO,OAAO,MAAM;MAC7B,WAAW,GACT,+BACA,aACA,OAAO,UAAU,YAAY,eAC7B,OAAO,UAAU,WAAW,cAC5B,OAAO,UAAU,KAAA,KAAa,cAC9B,YAAY,4BACZ,YAAY,MACZ,OAAO,eAET;MAEC,UAAA,OAAO;KACN,GAhBG,OAAO,GAgBV,CACL,EACC,CAAA;IACC,CAAA;IACP,oBAAC,SAAD;KAAO,aAAU;KAAa,WAAW,YAAY;KAClD,UAAA,UACC,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;MACE,SAAS,KAAK,IAAI,QAAQ,QAAQ,CAAC;MACnC,WAAW;MAEX,UAAA,oBAAC,UAAD;OAAU,OAAO;OAAG,WAAU;MAAQ,CAAA;KACpC,CAAA,EACF,CAAA,IACF,YAAY,WAAW,IACzB,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;MACE,SAAS,KAAK,IAAI,QAAQ,QAAQ,CAAC;MACnC,WAAW,GAAG,aAAa,YAAY,KAAK;MAE3C,UAAA,SAAS,oBAAC,OAAD,CAAQ,CAAA;KAChB,CAAA,EACF,CAAA,IAEJ,YAAY,KAAK,QAAQ,UACvB,oBAAC,MAAD;MAEE,aAAU;MACV,WAAW,GACT,4BACA,WAAW,oBACX,aAAa,qBACb,YAAY,GAEd;MAEC,UAAA,QAAQ,KAAI,WAAU;OACrB,MAAM,QACJ,OAAO,cAAc,KAAA,IACjB,KAAA,IACA,OAAO,OAAO;OAEpB,OACE,oBAAC,MAAD;QAEE,aAAU;QACV,WAAW,GACT,aACA,OAAO,UAAU,YAAY,eAC7B,OAAO,UAAU,WAAW,cAC5B,YAAY,4BACZ,YAAY,MACZ,OAAO,SAET;QAEC,UAAA,OAAO,SACJ,OAAO,OAAO,QAAQ,KAAK,IAC3B,SAAS,OACP,OACA,OAAO,KAAK;OAChB,GAjBG,OAAO,GAiBV;MAER,CAAC;KACC,GAtCG,SAAS,QAAQ,KAAK,KAAK,KAsC9B,CACL;IAEE,CAAA;GACF;;CACJ,CAAA,GACJ,cACC,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yBACA,YAAY,UAEd;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACG;GACD;GACI;GACV,UAAU;GACV,kBAAkB;EACnB,CAAA;CACE,CAAA,CAEP,EAAA,CAAA;AAEN"}

package/dist/components/atoms/checkbox/checkbox.mjs

@@ -2,10 +2,10 @@
 import { cn } from "../../../utils.mjs";
 import { checkbox_exports } from "../../../core/checkbox.mjs";
 import { label_exports } from "../../../core/label.mjs";
-import { useId, useRef } from "react";
 import { Square, SquareCheck } from "lucide-react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/checkbox/checkbox.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
 const { Label: CoreLabel } = label_exports;
@@ -74,6 +74,7 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 		children
 	})] });
 	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "checkbox-field",
 		className: cn("flex items-center gap-x-2", placement === "right" && "flex-row-reverse", cursorClassName, className),
 		...props,
 		children: renderContent

package/dist/components/atoms/checkbox/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { checkbox, label } from '../../../core';\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        // Keep the atom's established 4px radius after the Base UI migration;\n        // tailwind-merge lets this override the core primitive's radius (#361).\n        className={cn('rounded-sm', cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,OAAO,MAAM;CAE/B,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,CAAC,OAAO;CACnB,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAEA,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,CAAC,OAAO;GACnB;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACM;EACE;EACN,OAAO;EACE;EACC;EAGV,WAAW,GAAG,cAAc,eAAe;EAC3C,iBAAiB;CAClB,CAAA,GACA,YACC,oBAAC,WAAD;EAAW,SAAS;EAAI,WAAW,GAAG,iBAAiB,WAAW;EAC/D;CACQ,CAAA,CAEb,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { checkbox, label } from '../../../core';\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        // Keep the atom's established 4px radius after the Base UI migration;\n        // tailwind-merge lets this override the core primitive's radius (#361).\n        className={cn('rounded-sm', cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      data-slot=\"checkbox-field\"\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,OAAO,MAAM;CAE/B,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,CAAC,OAAO;CACnB,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAEA,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,CAAC,OAAO;GACnB;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACM;EACE;EACN,OAAO;EACE;EACC;EAGV,WAAW,GAAG,cAAc,eAAe;EAC3C,iBAAiB;CAClB,CAAA,GACA,YACC,oBAAC,WAAD;EAAW,SAAS;EAAI,WAAW,GAAG,iBAAiB,WAAW;EAC/D;CACQ,CAAA,CAEb,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}

package/dist/components/atoms/checkbox/group.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import Checkbox from "./checkbox.mjs";
 import { normalizeOptions, warnOnDuplicateOptionValues } from "../option-group.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/checkbox/group.tsx
 const Group = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], name, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
 	const [value, setValue] = useControllableState({
@@ -18,6 +18,7 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 		setValue(nextValue);
 	};
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "checkbox-group",
 		...props,
 		className: cn("m-0 flex list-none gap-2 p-0", orientation === "vertical" && "flex-col", className),
 		children: options.map((item, index) => {

package/dist/components/atoms/checkbox/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n  warnOnDuplicateOptionValues,\n} from '../option-group';\nimport Checkbox from './checkbox';\n\nexport type { OptionValue };\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: OptionGroupClassNames;\n  defaultValue?: OptionValue[];\n  value?: OptionValue[];\n  /** Native form field name, shared across every option's checkbox. */\n  name?: string;\n  disabled?: boolean;\n  onChange?: (values: OptionValue[]) => void;\n}\n\nconst Group = ({\n  orientation = 'vertical',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<OptionValue[]>({\n    value: _value,\n    defaultValue: defaultValue ?? [],\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n  warnOnDuplicateOptionValues(options, 'Checkbox.Group');\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    const nextValue = checked\n      ? [...value, optionValue]\n      : value.filter(v => v !== optionValue);\n\n    setValue(nextValue);\n  };\n\n  return (\n    <ul\n      {...props}\n      className={cn(\n        // Spacing comes from `gap`, not `space-y`'s child margins, so the\n        // per-item `m-0` reset below can neutralise host list styles without\n        // also wiping out the group's own spacing.\n        'm-0 flex list-none gap-2 p-0',\n        orientation === 'vertical' && 'flex-col',\n        className,\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={`${index}-${String(item.value)}`}\n            // `m-0` completes the list reset the `ul` above starts (#253) —\n            // see Radio.Group for the host rule this guards against.\n            className={cn('m-0 flex', classNames?.wrapper)}\n          >\n            <Checkbox\n              placement={placement}\n              className={cn(classNames?.item)}\n              name={name}\n              value={item.value}\n              checked={checked}\n              disabled={disabled || item.disabled}\n              onChange={checked => onChange(checked, item.value)}\n            >\n              {item.label}\n            </Checkbox>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default Group;\n"],"mappings":";;;;;;;AAkCA,MAAM,SAAS,EACb,cAAc,YACd,YAAY,QACZ,WACA,aAAa,CAAC,GACd,SAAS,WAAW,CAAC,GACrB,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,OAAO;EACP,cAAc,gBAAgB,CAAC;EAC/B,UAAU;CACZ,CAAC;CAED,MAAM,UAAoB,iBAAiB,QAAQ;CACnD,4BAA4B,SAAS,gBAAgB;CAErD,MAAM,YAAY,SAAkB,gBAA6B;EAC/D,MAAM,YAAY,UACd,CAAC,GAAG,OAAO,WAAW,IACtB,MAAM,QAAO,MAAK,MAAM,WAAW;EAEvC,SAAS,SAAS;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,GAIT,gCACA,gBAAgB,cAAc,YAC9B,SACF;EAEC,UAAA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,MAAM,SAAS,KAAK,KAAK;GAEzC,OACE,oBAAC,MAAD;IAIE,WAAW,GAAG,YAAY,YAAY,OAAO;IAE7C,UAAA,oBAAC,UAAD;KACa;KACX,WAAW,GAAG,YAAY,IAAI;KACxB;KACN,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,KAAK;KAEhD,UAAA,KAAK;IACE,CAAA;GACR,GAhBG,GAAG,MAAM,GAAG,OAAO,KAAK,KAAK,GAgBhC;EAER,CAAC;CACC,CAAA;AAER"}
+{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n  warnOnDuplicateOptionValues,\n} from '../option-group';\nimport Checkbox from './checkbox';\n\nexport type { OptionValue };\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: OptionGroupClassNames;\n  defaultValue?: OptionValue[];\n  value?: OptionValue[];\n  /** Native form field name, shared across every option's checkbox. */\n  name?: string;\n  disabled?: boolean;\n  onChange?: (values: OptionValue[]) => void;\n}\n\nconst Group = ({\n  orientation = 'vertical',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<OptionValue[]>({\n    value: _value,\n    defaultValue: defaultValue ?? [],\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n  warnOnDuplicateOptionValues(options, 'Checkbox.Group');\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    const nextValue = checked\n      ? [...value, optionValue]\n      : value.filter(v => v !== optionValue);\n\n    setValue(nextValue);\n  };\n\n  return (\n    <ul\n      data-slot=\"checkbox-group\"\n      {...props}\n      className={cn(\n        // Spacing comes from `gap`, not `space-y`'s child margins, so the\n        // per-item `m-0` reset below can neutralise host list styles without\n        // also wiping out the group's own spacing.\n        'm-0 flex list-none gap-2 p-0',\n        orientation === 'vertical' && 'flex-col',\n        className,\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={`${index}-${String(item.value)}`}\n            // `m-0` completes the list reset the `ul` above starts (#253) —\n            // see Radio.Group for the host rule this guards against.\n            className={cn('m-0 flex', classNames?.wrapper)}\n          >\n            <Checkbox\n              placement={placement}\n              className={cn(classNames?.item)}\n              name={name}\n              value={item.value}\n              checked={checked}\n              disabled={disabled || item.disabled}\n              onChange={checked => onChange(checked, item.value)}\n            >\n              {item.label}\n            </Checkbox>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default Group;\n"],"mappings":";;;;;;;AAkCA,MAAM,SAAS,EACb,cAAc,YACd,YAAY,QACZ,WACA,aAAa,CAAC,GACd,SAAS,WAAW,CAAC,GACrB,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,OAAO;EACP,cAAc,gBAAgB,CAAC;EAC/B,UAAU;CACZ,CAAC;CAED,MAAM,UAAoB,iBAAiB,QAAQ;CACnD,4BAA4B,SAAS,gBAAgB;CAErD,MAAM,YAAY,SAAkB,gBAA6B;EAC/D,MAAM,YAAY,UACd,CAAC,GAAG,OAAO,WAAW,IACtB,MAAM,QAAO,MAAK,MAAM,WAAW;EAEvC,SAAS,SAAS;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,GAIT,gCACA,gBAAgB,cAAc,YAC9B,SACF;EAEC,UAAA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,MAAM,SAAS,KAAK,KAAK;GAEzC,OACE,oBAAC,MAAD;IAIE,WAAW,GAAG,YAAY,YAAY,OAAO;IAE7C,UAAA,oBAAC,UAAD;KACa;KACX,WAAW,GAAG,YAAY,IAAI;KACxB;KACN,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,KAAK;KAEhD,UAAA,KAAK;IACE,CAAA;GACR,GAhBG,GAAG,MAAM,GAAG,OAAO,KAAK,KAAK,GAgBhC;EAER,CAAC;CACC,CAAA;AAER"}

package/dist/components/atoms/color-picker.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import Popover from "./popover.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { HexColorPicker } from "react-colorful";
 //#region src/components/atoms/color-picker.tsx
 const ColorPicker = ({ defaultValue, value: _value, showText, disabled, className, onChange: _onChange = () => {}, open: _open, defaultOpen, onOpenChange, ...props }) => {

package/dist/components/atoms/date-picker.mjs

@@ -3,10 +3,10 @@ import { cn } from "../../utils.mjs";
 import { calendar_exports } from "../../core/calendar.mjs";
 import Button from "../../Button.mjs";
 import Popover from "./popover.mjs";
-import { useState } from "react";
 import { CalendarIcon } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 import { format } from "date-fns";
 //#region src/components/atoms/date-picker.tsx
 const { Calendar } = calendar_exports;

package/dist/components/atoms/float-button/back-top.mjs

@@ -2,10 +2,10 @@
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import FloatButton from "./float-button.mjs";
-import { useRef } from "react";
 import { ArrowUp } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useMergedRef, useWindowScroll } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/float-button/back-top.tsx
 const BackTop = ({ ref, visibilityHeight = 450, className, onClick, ...props }) => {
 	const { locale } = useConfig();

package/dist/components/atoms/index.d.mts

@@ -1,10 +1,14 @@
+import Avatar, { Props } from "../../Avatar.mjs";
+import Badge, { Props as Props$1 } from "../../Badge.mjs";
 import Button from "../../Button.mjs";
+import Segmented, { Props as Props$2 } from "../../Segmented.mjs";
 import Tag from "../../Tag.mjs";
 import Typography from "../../Typography.mjs";
 import Checkbox from "./checkbox/index.mjs";
 import ColorPicker from "./color-picker.mjs";
 import DatePicker from "./date-picker.mjs";
 import FloatButton from "./float-button/index.mjs";
+import { Props as Props$3 } from "./input/number.mjs";
 import Input from "./input/index.mjs";
 import Popover from "./popover.mjs";
 import Progress from "./progress.mjs";
@@ -16,4 +20,5 @@ import Skeleton from "./skeleton/index.mjs";
 import Slider from "./slider/slider.mjs";
 import Spin from "./spin.mjs";
 import Switch from "./switch.mjs";
-export { Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, Popover, Progress, Radio, RichTextEditor, Select, Skeleton, Slider, Spin, Switch, Tag, Typography };
+import Tooltip from "./tooltip.mjs";
+export { Avatar, type Props as AvatarProps, Badge, type Props$1 as BadgeProps, Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, type Props$3 as InputNumberProps, Popover, Progress, Radio, RichTextEditor, Segmented, type Props$2 as SegmentedProps, Select, Skeleton, Slider, Spin, Switch, Tag, Tooltip, Typography };

package/dist/components/atoms/input/index.d.mts

@@ -1,12 +1,14 @@
 import Input$1 from "./input.mjs";
+import Number, { Props } from "./number.mjs";
 import Search from "./search.mjs";
 import TextArea from "./text-area.mjs";
 //#region src/components/atoms/input/index.d.ts
 type InputComponent = typeof Input$1 & {
   Search: typeof Search;
+  Number: typeof Number;
   TextArea: typeof TextArea;
 };
 declare const Input: InputComponent;
 //#endregion
-export { Search, TextArea, Input as default };
+export { Number, type Props as NumberProps, Search, TextArea, Input as default };
 //# sourceMappingURL=index.d.mts.map

package/dist/components/atoms/input/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/input/index.ts"],"mappings":";;;;KAIK,wBAAwB;EAC3B,eAAe;EACf,iBAAiB;;cAGb,OAAqB"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/input/index.ts"],"mappings":";;;;;KAKK,wBAAwB;EAC3B,eAAe;EACf,eAAe;EACf,iBAAiB;;cAGb,OAAqB"}

package/dist/components/atoms/input/index.mjs

@@ -1,11 +1,13 @@
 import Input$1 from "./input.mjs";
+import Number from "./number.mjs";
 import Search from "./search.mjs";
 import TextArea from "./text-area.mjs";
 //#region src/components/atoms/input/index.ts
 const Input = Input$1;
 Input.Search = Search;
+Input.Number = Number;
 Input.TextArea = TextArea;
 //#endregion
-export { Search, TextArea, Input as default };
+export { Number, Search, TextArea, Input as default };
 
 //# sourceMappingURL=index.mjs.map

package/dist/components/atoms/input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["InputImpl"],"sources":["../../../../src/components/atoms/input/index.ts"],"sourcesContent":["import InputImpl from './input';\nimport Search from './search';\nimport TextArea from './text-area';\n\ntype InputComponent = typeof InputImpl & {\n  Search: typeof Search;\n  TextArea: typeof TextArea;\n};\n\nconst Input = InputImpl as InputComponent;\n\nInput.Search = Search;\nInput.TextArea = TextArea;\n\nexport { Search, TextArea };\nexport default Input;\n"],"mappings":";;;;AASA,MAAM,QAAQA;AAEd,MAAM,SAAS;AACf,MAAM,WAAW"}
+{"version":3,"file":"index.mjs","names":["InputImpl"],"sources":["../../../../src/components/atoms/input/index.ts"],"sourcesContent":["import InputImpl from './input';\nimport Number from './number';\nimport Search from './search';\nimport TextArea from './text-area';\n\ntype InputComponent = typeof InputImpl & {\n  Search: typeof Search;\n  Number: typeof Number;\n  TextArea: typeof TextArea;\n};\n\nconst Input = InputImpl as InputComponent;\n\nInput.Search = Search;\nInput.Number = Number;\nInput.TextArea = TextArea;\n\nexport { Number, Search, TextArea };\nexport type { Props as NumberProps } from './number';\nexport default Input;\n"],"mappings":";;;;;AAWA,MAAM,QAAQA;AAEd,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,WAAW"}

package/dist/components/atoms/input/number.d.mts

@@ -0,0 +1,23 @@
+import { ComponentSize } from "../../../providers/config/types.mjs";
+import * as React$1 from "react";
+import { NumberField, NumberFieldRoot } from "@base-ui/react/number-field";
+//#region src/components/atoms/input/number.d.ts
+interface Props extends Omit<React$1.ComponentProps<typeof NumberField.Root>, 'children' | 'onValueChange'> {
+  /** Visible input label. Alternatively, pair `id` with an external label. */
+  label?: string;
+  /** Called with the numeric value (or null when cleared). */
+  onChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
+  placeholder?: string;
+  size?: ComponentSize;
+  classNames?: {
+    label?: string;
+    group?: string;
+    input?: string;
+    decrement?: string;
+    increment?: string;
+  };
+}
+declare const Number: ({ ref, id, label, onChange, placeholder, size, className, classNames, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { Props, Number as default };
+//# sourceMappingURL=number.d.mts.map

package/dist/components/atoms/input/number.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.d.mts","names":[],"sources":["../../../../src/components/atoms/input/number.tsx"],"mappings":";;;;UAmBiB,cAAc,KAC7B,QAAM,sBAAsB,YAAY;;EAIxC;;EAEA,YACE,sBACA,cAAc,gBAAgB;EAEhC;EACA,OAAO;EACP;IACE;IACA;IACA;IACA;IACA;;;cAIE,WAAU,KAAA,IAAA,OAAA,UAAA,aAAA,MAAA,WAAA,0BAAA,8BAAA,oCAAA,oBAAA,SAab,UAAK,QAAA,IAAA"}

package/dist/components/atoms/input/number.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../../../utils.mjs";
+import { useConfig } from "../../../providers/config/context.mjs";
+import Button from "../../../Button.mjs";
+import Input from "./input.mjs";
+import { Minus, Plus } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/atoms/input/number.tsx
+const sizes = {
+	small: "h-8",
+	middle: "h-9",
+	large: "h-10"
+};
+const Number = ({ ref, id, label, onChange, placeholder, size, className, classNames, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) => {
+	const generatedId = React$1.useId();
+	const inputId = id ?? generatedId;
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		...props,
+		ref,
+		id: inputId,
+		onValueChange: onChange,
+		"data-slot": "input-number",
+		className: cn("w-full", className),
+		children: [label && /* @__PURE__ */ jsx("label", {
+			htmlFor: inputId,
+			className: cn("mb-1.5 block text-sm font-medium", classNames?.label),
+			children: label
+		}), /* @__PURE__ */ jsxs(NumberField.Group, {
+			className: cn(`border-input focus-within:border-ring focus-within:ring-ring/50 flex
+          w-full items-stretch overflow-hidden rounded-md border shadow-xs
+          focus-within:ring-[3px]`, sizes[resolvedSize], classNames?.group),
+			children: [
+				/* @__PURE__ */ jsx(NumberField.Decrement, {
+					"aria-label": "Decrease value",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small",
+						icon: /* @__PURE__ */ jsx(Minus, {}),
+						className: cn("h-full! rounded-none px-2!", classNames?.decrement)
+					})
+				}),
+				/* @__PURE__ */ jsx(NumberField.Input, {
+					render: /* @__PURE__ */ jsx(Input, {}),
+					placeholder,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					className: cn(`h-full min-w-0 flex-1 rounded-none border-0 text-center shadow-none
+            focus-visible:ring-0`, classNames?.input)
+				}),
+				/* @__PURE__ */ jsx(NumberField.Increment, {
+					"aria-label": "Increase value",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small",
+						icon: /* @__PURE__ */ jsx(Plus, {}),
+						className: cn("h-full! rounded-none px-2!", classNames?.increment)
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { Number as default };
+
+//# sourceMappingURL=number.mjs.map

package/dist/components/atoms/input/number.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.mjs","names":["React"],"sources":["../../../../src/components/atoms/input/number.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { NumberField, type NumberFieldRoot } from '@base-ui/react/number-field';\nimport { Minus, Plus } from 'lucide-react';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport Input from './input';\n\nconst sizes: Record<ComponentSize, string> = {\n  small: 'h-8',\n  middle: 'h-9',\n  large: 'h-10',\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof NumberField.Root>,\n  'children' | 'onValueChange'\n> {\n  /** Visible input label. Alternatively, pair `id` with an external label. */\n  label?: string;\n  /** Called with the numeric value (or null when cleared). */\n  onChange?: (\n    value: number | null,\n    eventDetails: NumberFieldRoot.ChangeEventDetails,\n  ) => void;\n  placeholder?: string;\n  size?: ComponentSize;\n  classNames?: {\n    label?: string;\n    group?: string;\n    input?: string;\n    decrement?: string;\n    increment?: string;\n  };\n}\n\nconst Number = ({\n  ref,\n  id,\n  label,\n  onChange,\n  placeholder,\n  size,\n  className,\n  classNames,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: Props) => {\n  const generatedId = React.useId();\n  const inputId = id ?? generatedId;\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n\n  return (\n    <NumberField.Root\n      {...props}\n      ref={ref}\n      id={inputId}\n      onValueChange={onChange}\n      data-slot=\"input-number\"\n      className={cn('w-full', className)}\n    >\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={cn('mb-1.5 block text-sm font-medium', classNames?.label)}\n        >\n          {label}\n        </label>\n      )}\n      <NumberField.Group\n        className={cn(\n          `border-input focus-within:border-ring focus-within:ring-ring/50 flex\n          w-full items-stretch overflow-hidden rounded-md border shadow-xs\n          focus-within:ring-[3px]`,\n          sizes[resolvedSize],\n          classNames?.group,\n          //\n        )}\n      >\n        <NumberField.Decrement\n          aria-label=\"Decrease value\"\n          render={\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              icon={<Minus />}\n              className={cn(\n                'h-full! rounded-none px-2!',\n                classNames?.decrement,\n              )}\n            />\n          }\n        />\n        <NumberField.Input\n          render={<Input />}\n          placeholder={placeholder}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={cn(\n            `h-full min-w-0 flex-1 rounded-none border-0 text-center shadow-none\n            focus-visible:ring-0`,\n            classNames?.input,\n            //\n          )}\n        />\n        <NumberField.Increment\n          aria-label=\"Increase value\"\n          render={\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              icon={<Plus />}\n              className={cn(\n                'h-full! rounded-none px-2!',\n                classNames?.increment,\n              )}\n            />\n          }\n        />\n      </NumberField.Group>\n    </NumberField.Root>\n  );\n};\n\nexport default Number;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,QAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAwBA,MAAM,UAAU,EACd,KACA,IACA,OACA,UACA,aACA,MACA,WACA,YACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,YACQ;CACX,MAAM,cAAcA,QAAM,MAAM;CAChC,MAAM,UAAU,MAAM;CACtB,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,OACE,qBAAC,YAAY,MAAb;EACE,GAAI;EACC;EACL,IAAI;EACJ,eAAe;EACf,aAAU;EACV,WAAW,GAAG,UAAU,SAAS;EANnC,UAAA,CAQG,SACC,oBAAC,SAAD;GACE,SAAS;GACT,WAAW,GAAG,oCAAoC,YAAY,KAAK;GAElE,UAAA;EACI,CAAA,GAET,qBAAC,YAAY,OAAb;GACE,WAAW,GACT;;oCAGA,MAAM,eACN,YAAY,KAEd;GARF,UAAA;IAUE,oBAAC,YAAY,WAAb;KACE,cAAW;KACX,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAM,oBAAC,OAAD,CAAQ,CAAA;MACd,WAAW,GACT,8BACA,YAAY,SACd;KACD,CAAA;IAEJ,CAAA;IACD,oBAAC,YAAY,OAAb;KACE,QAAQ,oBAAC,OAAD,CAAQ,CAAA;KACH;KACb,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,WAAW,GACT;mCAEA,YAAY,KAEd;IACD,CAAA;IACD,oBAAC,YAAY,WAAb;KACE,cAAW;KACX,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAM,oBAAC,MAAD,CAAO,CAAA;MACb,WAAW,GACT,8BACA,YAAY,SACd;KACD,CAAA;IAEJ,CAAA;GACgB;EACH,CAAA,CAAA;;AAEtB"}

package/dist/components/atoms/input/search.d.mts

@@ -1,11 +1,6 @@
 //#region src/components/atoms/input/search.d.ts
 interface Props extends React.ComponentPropsWithRef<'input'> {
   allowClear?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement> | {
-    target: {
-      value: string;
-    };
-  }) => void;
   onSearch?: (value: string) => void;
 }
 declare const Search: {

package/dist/components/atoms/input/search.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";UAeiB,cAAc,MAAM;EACnC;EACA,YACE,GAAG,MAAM,YAAY;IAAsB;MAAU;;;EAEvD,YAAY;;cAGR;KAWH,KAAA,WAAA,cAAA,OAAA,UAAA,YAAA,UAAA,WAAA,YAAA,UAAA,cAAA,SAAA,wBAAK,IAAA"}
+{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";UAeiB,cAAc,MAAM;EACnC;EACA,YAAY;;cAGR;KAWH,KAAA,WAAA,cAAA,OAAA,UAAA,YAAA,UAAA,WAAA,YAAA,UAAA,cAAA,SAAA,wBAAK,IAAA"}

package/dist/components/atoms/input/search.mjs

@@ -3,10 +3,10 @@ import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { input_exports } from "../../../core/input.mjs";
 import Button from "../../../Button.mjs";
-import { useRef, useState } from "react";
 import { CircleX, Search } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import { useMergedRef } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/input/search.tsx
 const { Input: Core } = input_exports;
 const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear = true, onChange, onKeyDown: _onKeyDown, onSearch: _onSearch, ...props }) => {
@@ -16,18 +16,17 @@ const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear =
 	const [uncontrolledHasValue, setUncontrolledHasValue] = useState(!!defaultValue);
 	const hasValue = value !== void 0 ? !!value : uncontrolledHasValue;
 	const onClear = () => {
-		if (!inputRef.current) return;
-		if (value === void 0) {
-			inputRef.current.value = "";
-			setUncontrolledHasValue(false);
-		}
-		onChange?.({ target: { value: "" } });
+		const input = inputRef.current;
+		if (!input) return;
+		(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value")?.set)?.call(input, "");
+		input.dispatchEvent(new Event("input", { bubbles: true }));
 	};
 	const onSearch = () => {
 		if (disabled) return;
 		if (inputRef.current) _onSearch?.(inputRef.current.value);
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-search",
 		className: cn("flex items-center", "rounded-md", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("relative grow", "inline-flex items-center"),
@@ -51,6 +50,7 @@ const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear =
 				}
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-slot": "input-search-clear",
 				"aria-label": locale.clear ?? DEFAULT_LOCALE.clear,
 				disabled,
 				className: cn("absolute right-2", "shrink-0 cursor-pointer", "disabled:cursor-not-allowed disabled:opacity-50", (!allowClear || !hasValue) && "hidden"),

package/dist/components/atoms/input/search.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { input } from '../../../core';\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onChange?: (\n    e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n  ) => void;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (!inputRef.current) {\n      return;\n    }\n\n    if (value === undefined) {\n      inputRef.current.value = '';\n      setUncontrolledHasValue(false);\n    }\n\n    onChange?.({ target: { value: '' } });\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,YAAY,aAAa,UAAU,GAAG;CAE5C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,YAAY;CACzB,MAAM,WAAW,UAAU,KAAA,IAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;EACpB,IAAI,CAAC,SAAS,SACZ;EAGF,IAAI,UAAU,KAAA,GAAW;GACvB,SAAS,QAAQ,QAAQ;GACzB,wBAAwB,KAAK;EAC/B;EAEA,WAAW,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,CAAC;CACtC;CAEA,MAAM,iBAAiB;EACrB,IAAI,UACF;EAEF,IAAI,SAAS,SACX,YAAY,SAAS,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GACT,qBACA,cACA,SAEF;EANF,UAAA,CAQE,qBAAC,OAAD;GACE,WAAW,GACT,iBACA,0BAEF;GALF,UAAA,CAOE,oBAAC,MAAD;IACE,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,uCAEF;IACO;IACO;IACd,WAAU,MAAK;KACb,IAAI,UAAU,KAAA,GACZ,wBAAwB,CAAC,CAAC,EAAE,OAAO,KAAK;KAE1C,WAAW,CAAC;IACd;IACA,YAAW,MAAK;KACd,aAAa,CAAC;KACd,IAAI,EAAE,QAAQ,SACZ,SAAS;IAEb;GACD,CAAA,GACD,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IACjC;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,QAChC;IACA,SAAS;IAET,UAAA,oBAAC,SAAD,EAAS,WAAU,SAAU,CAAA;GACvB,CAAA,CACL;EACL,CAAA,GAAA,oBAAC,QAAD;GACE,MAAM,oBAACC,QAAD,CAAiB,CAAA;GACb;GACV,WAAW,GACT,kBACA,QAEF;GACA,SAAS;EACV,CAAA,CACE;;AAET;AAEA,SAAO,cAAc"}
+{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { input } from '../../../core';\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    const input = inputRef.current;\n\n    if (!input) {\n      return;\n    }\n\n    // Use the native setter so React detects the value change and emits the\n    // same ChangeEvent as typing, including for controlled inputs.\n    const setter = Object.getOwnPropertyDescriptor(\n      Object.getPrototypeOf(input),\n      'value',\n    )?.set;\n\n    setter?.call(input, '');\n    input.dispatchEvent(new Event('input', { bubbles: true }));\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      data-slot=\"input-search\"\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          data-slot=\"input-search-clear\"\n          aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,EAAE,OAAO,SAASA;AAOxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,YAAY,aAAa,UAAU,GAAG;CAE5C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,YAAY;CACzB,MAAM,WAAW,UAAU,KAAA,IAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;EACpB,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,OACH;EAUF,CALe,OAAO,yBACpB,OAAO,eAAe,KAAK,GAC3B,OACF,CAAC,EAAE,IAAA,EAEK,KAAK,OAAO,EAAE;EACtB,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CAC3D;CAEA,MAAM,iBAAiB;EACrB,IAAI,UACF;EAEF,IAAI,SAAS,SACX,YAAY,SAAS,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qBACA,cACA,SAEF;EAPF,UAAA,CASE,qBAAC,OAAD;GACE,WAAW,GACT,iBACA,0BAEF;GALF,UAAA,CAOE,oBAAC,MAAD;IACE,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,uCAEF;IACO;IACO;IACd,WAAU,MAAK;KACb,IAAI,UAAU,KAAA,GACZ,wBAAwB,CAAC,CAAC,EAAE,OAAO,KAAK;KAE1C,WAAW,CAAC;IACd;IACA,YAAW,MAAK;KACd,aAAa,CAAC;KACd,IAAI,EAAE,QAAQ,SACZ,SAAS;IAEb;GACD,CAAA,GACD,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,cAAY,OAAO,SAAS,eAAe;IACjC;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,QAChC;IACA,SAAS;IAET,UAAA,oBAAC,SAAD,EAAS,WAAU,SAAU,CAAA;GACvB,CAAA,CACL;EACL,CAAA,GAAA,oBAAC,QAAD;GACE,MAAM,oBAACC,QAAD,CAAiB,CAAA;GACb;GACV,WAAW,GACT,kBACA,QAEF;GACA,SAAS;EACV,CAAA,CACE;;AAET;AAEA,SAAO,cAAc"}

package/dist/components/atoms/popover.mjs

@@ -3,8 +3,8 @@ import { cn, renderConditional } from "../../utils.mjs";
 import { popover_exports } from "../../core/popover.mjs";
 import Typography from "../../Typography.mjs";
 import { Children } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/popover.tsx
 const { Popover: CorePopover, PopoverContent, PopoverTrigger, PopoverArrow, PopoverTitle } = popover_exports;
 const placementMap = {

package/dist/components/atoms/progress.d.mts

@@ -1,13 +1,15 @@
 //#region src/components/atoms/progress.d.ts
 interface Props extends React.ComponentPropsWithoutRef<'div'> {
   value: number;
+  orientation?: 'horizontal' | 'vertical';
+  /** @deprecated Use `orientation`. */
   direction?: 'horizontal' | 'vertical';
   classNames?: {
     background?: string;
     bar?: string;
   };
 }
-declare const Progress: ({ value, className, direction, classNames, ...props }: Props) => import("react").JSX.Element;
+declare const Progress: ({ value, className, orientation, direction, classNames, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 export { Props, Progress as default };
 //# sourceMappingURL=progress.d.mts.map

package/dist/components/atoms/progress.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.mts","names":[],"sources":["../../../src/components/atoms/progress.tsx"],"mappings":";UAMiB,cAAc,MAAM;EACnC;EACA;EACA;IACE;IACA;;;cAIE,aAAY,OAAA,WAAA,WAAA,eAAA,SAMf,0BAAK,IAAA"}
+{"version":3,"file":"progress.d.mts","names":[],"sources":["../../../src/components/atoms/progress.tsx"],"mappings":";UAMiB,cAAc,MAAM;EACnC;EACA;;EAEA;EACA;IACE;IACA;;;cAIE,aAAY,OAAA,WAAA,aAAA,WAAA,eAAA,SAOf,0BAAK,IAAA"}

package/dist/components/atoms/progress.mjs

@@ -3,8 +3,8 @@ import { progress_exports } from "../../core/progress.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/progress.tsx
 const { Progress: Core } = progress_exports;
-const Progress = ({ value, className, direction = "horizontal", classNames, ...props }) => {
-	const isHorizontal = direction === "horizontal";
+const Progress = ({ value, className, orientation, direction = "horizontal", classNames, ...props }) => {
+	const isHorizontal = (orientation ?? direction) === "horizontal";
 	const normalizedValue = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
 	return /* @__PURE__ */ jsx(Core, {
 		...props,

package/dist/components/atoms/progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport { progress } from '../../core';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  value: number;\n  direction?: 'horizontal' | 'vertical';\n  classNames?: {\n    background?: string;\n    bar?: string;\n  };\n}\n\nconst Progress = ({\n  value,\n  className,\n  direction = 'horizontal',\n  classNames,\n  ...props\n}: Props) => {\n  const isHorizontal = direction === 'horizontal';\n  const normalizedValue = Number.isFinite(value)\n    ? Math.min(100, Math.max(0, value))\n    : 0;\n\n  return (\n    <Core\n      {...props}\n      value={normalizedValue}\n      className={cn(\n        isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n        className,\n        classNames?.background,\n        //\n      )}\n      barClassName={cn('flex-none', classNames?.bar)}\n      barStyle={\n        isHorizontal\n          ? { width: `${normalizedValue}%` }\n          : { width: '100%', height: `${normalizedValue}%` }\n      }\n    />\n  );\n};\n\nexport default Progress;\n"],"mappings":";;;;AAIA,MAAM,EAAE,UAAU,SAASA;AAW3B,MAAM,YAAY,EAChB,OACA,WACA,YAAY,cACZ,YACA,GAAG,YACQ;CACX,MAAM,eAAe,cAAc;CACnC,MAAM,kBAAkB,OAAO,SAAS,KAAK,IACzC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAChC;CAEJ,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,UAEd;EACA,cAAc,GAAG,aAAa,YAAY,GAAG;EAC7C,UACE,eACI,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAC/B;GAAE,OAAO;GAAQ,QAAQ,GAAG,gBAAgB;EAAG;CAEtD,CAAA;AAEL"}
+{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport { progress } from '../../core';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  value: number;\n  orientation?: 'horizontal' | 'vertical';\n  /** @deprecated Use `orientation`. */\n  direction?: 'horizontal' | 'vertical';\n  classNames?: {\n    background?: string;\n    bar?: string;\n  };\n}\n\nconst Progress = ({\n  value,\n  className,\n  orientation,\n  direction = 'horizontal',\n  classNames,\n  ...props\n}: Props) => {\n  const isHorizontal = (orientation ?? direction) === 'horizontal';\n  const normalizedValue = Number.isFinite(value)\n    ? Math.min(100, Math.max(0, value))\n    : 0;\n\n  return (\n    <Core\n      {...props}\n      value={normalizedValue}\n      className={cn(\n        isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n        className,\n        classNames?.background,\n        //\n      )}\n      barClassName={cn('flex-none', classNames?.bar)}\n      barStyle={\n        isHorizontal\n          ? { width: `${normalizedValue}%` }\n          : { width: '100%', height: `${normalizedValue}%` }\n      }\n    />\n  );\n};\n\nexport default Progress;\n"],"mappings":";;;;AAIA,MAAM,EAAE,UAAU,SAASA;AAa3B,MAAM,YAAY,EAChB,OACA,WACA,aACA,YAAY,cACZ,YACA,GAAG,YACQ;CACX,MAAM,gBAAgB,eAAe,eAAe;CACpD,MAAM,kBAAkB,OAAO,SAAS,KAAK,IACzC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAChC;CAEJ,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,UAEd;EACA,cAAc,GAAG,aAAa,YAAY,GAAG;EAC7C,UACE,eACI,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAC/B;GAAE,OAAO;GAAQ,QAAQ,GAAG,gBAAgB;EAAG;CAEtD,CAAA;AAEL"}

package/dist/components/atoms/radio/group.mjs

@@ -6,9 +6,9 @@ import { normalizeOptions, warnOnDuplicateOptionValues } from "../option-group.m
 import { RadioGroupContext } from "./context.mjs";
 import Radio$1 from "./radio.mjs";
 import { useId } from "react";
+import { useControllableState } from "@jbpark/use-hooks";
 import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
-import { useControllableState } from "@jbpark/use-hooks";
 //#region src/components/atoms/radio/group.tsx
 const { RadioGroup: Core } = radio_group_exports;
 const RadioGroup = ({ orientation = "horizontal", placement = "left", className, classNames = {}, options: _options = [], name, optionType = "default", buttonStyle = "solid", size, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {

package/dist/components/atoms/radio/radio.mjs

@@ -3,10 +3,10 @@ import { cn } from "../../../utils.mjs";
 import { field_exports } from "../../../core/field.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
-import { useContext, useId, useRef } from "react";
 import { Circle, CircleCheck } from "lucide-react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useId, useRef } from "react";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/radio/radio.tsx
 const { RadioGroup: Core, RadioGroupItem: Item } = radio_group_exports;
 const { Field, FieldLabel } = field_exports;
@@ -84,6 +84,7 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 		children: renderField
 	});
 	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "radio-field",
 		className: cn("flex items-center", icons && placement === "right" && "flex-row-reverse", cursorClassName, className),
 		...props,
 		children: renderContent

package/dist/components/atoms/radio/radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { field, radio } from '../../../core';\nimport { RadioGroupContext } from './context';\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\n// Spreads onto the wrapper `<div>`, so the host props are div-based. (Base UI's\n// `RadioGroup` — `Core` here — types `style`/`className` as state callbacks,\n// which a native `<div>` can't take; the meaningful control props below are\n// re-declared explicitly anyway.)\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  /**\n   * Id shared by the underlying control and its label. Generated internally\n   * when omitted. `RadioGroup` passes a deterministic id so that the group's\n   * single Base UI root can address each option.\n   */\n  id?: string;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  id: _id,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const generatedId = useId();\n  const id = _id ?? generatedId;\n  // Base UI identifies/submits an item by its `value`, which is separate\n  // from `id` (used only for the DOM id/label pairing) — stringified since\n  // the group value is a string, while `OptionValue` also allows\n  // number/boolean.\n  const itemValue = String(_value);\n  const grouped = useContext(RadioGroupContext);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(true);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  // When rendered inside a `RadioGroup`, the group owns the single shared\n  // `Core` (Base UI RadioGroup root) so that arrow keys move focus across\n  // every option. A standalone `Radio` still has to provide its own root.\n  const renderField = (\n    <Field\n      orientation=\"horizontal\"\n      className={cn('flex gap-2', placement === 'right' && 'flex-row-reverse')}\n      data-disabled={disabled}\n    >\n      <Item value={itemValue} id={id} disabled={disabled} />\n      <FieldLabel htmlFor={id} className={cursorClassName}>\n        {children}\n      </FieldLabel>\n    </Field>\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"radio\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(true);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <CircleCheck />)\n          : (icons.unchecked ?? <Circle />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : grouped ? (\n    renderField\n  ) : (\n    <Core\n      name={name}\n      value={checked ? itemValue : ''}\n      onValueChange={() => onChange(true)}\n    >\n      {renderField}\n    </Core>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AA2B9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,IAAI,KACJ,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,OAAO;CAKlB,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,UAAU,WAAW,iBAAiB;CAE5C,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,IAAI;CACf,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAKA,MAAM,cACJ,qBAAC,OAAD;EACE,aAAY;EACZ,WAAW,GAAG,cAAc,cAAc,WAAW,kBAAkB;EACvE,iBAAe;EAHjB,UAAA,CAKE,oBAAC,MAAD;GAAM,OAAO;GAAe;GAAc;EAAW,CAAA,GACrD,oBAAC,YAAD;GAAY,SAAS;GAAI,WAAW;GACjC;EACS,CAAA,CACP;;CAGT,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,IAAI;GACf;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IACA,UACF,cAEA,oBAAC,MAAD;EACQ;EACN,OAAO,UAAU,YAAY;EAC7B,qBAAqB,SAAS,IAAI;EAEjC,UAAA;CACG,CAAA;CAGR,OACE,oBAAC,OAAD;EACE,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { field, radio } from '../../../core';\nimport { RadioGroupContext } from './context';\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\n// Spreads onto the wrapper `<div>`, so the host props are div-based. (Base UI's\n// `RadioGroup` — `Core` here — types `style`/`className` as state callbacks,\n// which a native `<div>` can't take; the meaningful control props below are\n// re-declared explicitly anyway.)\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  /**\n   * Id shared by the underlying control and its label. Generated internally\n   * when omitted. `RadioGroup` passes a deterministic id so that the group's\n   * single Base UI root can address each option.\n   */\n  id?: string;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  id: _id,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const generatedId = useId();\n  const id = _id ?? generatedId;\n  // Base UI identifies/submits an item by its `value`, which is separate\n  // from `id` (used only for the DOM id/label pairing) — stringified since\n  // the group value is a string, while `OptionValue` also allows\n  // number/boolean.\n  const itemValue = String(_value);\n  const grouped = useContext(RadioGroupContext);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(true);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  // When rendered inside a `RadioGroup`, the group owns the single shared\n  // `Core` (Base UI RadioGroup root) so that arrow keys move focus across\n  // every option. A standalone `Radio` still has to provide its own root.\n  const renderField = (\n    <Field\n      orientation=\"horizontal\"\n      className={cn('flex gap-2', placement === 'right' && 'flex-row-reverse')}\n      data-disabled={disabled}\n    >\n      <Item value={itemValue} id={id} disabled={disabled} />\n      <FieldLabel htmlFor={id} className={cursorClassName}>\n        {children}\n      </FieldLabel>\n    </Field>\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"radio\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(true);\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <CircleCheck />)\n          : (icons.unchecked ?? <Circle />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : grouped ? (\n    renderField\n  ) : (\n    <Core\n      name={name}\n      value={checked ? itemValue : ''}\n      onValueChange={() => onChange(true)}\n    >\n      {renderField}\n    </Core>\n  );\n\n  return (\n    <div\n      data-slot=\"radio-field\"\n      className={cn(\n        'flex items-center',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AA2B9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,IAAI,KACJ,MACA,UAAU,kBAAkB,CAAC,GAC7B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,OAAO;CAKlB,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,UAAU,WAAW,iBAAiB;CAE5C,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;EAClC,IAAI,UACF;EAGF,WAAW,IAAI;CACjB;CAEA,MAAM,iBAAiB,OAAwB,IAAI;CAEnD,YACE,CAAC,SAAS,OAAO,IACjB,UAAS;EACP,MAAM,eAAe;EACrB,SAAS,IAAI;CACf,GACA;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;CAAS,CAC1D;CAKA,MAAM,cACJ,qBAAC,OAAD;EACE,aAAY;EACZ,WAAW,GAAG,cAAc,cAAc,WAAW,kBAAkB;EACvE,iBAAe;EAHjB,UAAA,CAKE,oBAAC,MAAD;GAAM,OAAO;GAAe;GAAc;EAAW,CAAA,GACrD,oBAAC,YAAD;GAAY,SAAS;GAAI,WAAW;GACjC;EACS,CAAA,CACP;;CAGT,MAAM,gBAAgB,QACpB,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACM;GACJ,QAAA;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;IACb,SAAS,EAAE,OAAO,OAAO;GAC3B;EACD,CAAA;EACD,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,eAAe;IACb,SAAS,IAAI;GACf;GAEC,UAAA,UACI,MAAM,WAAW,oBAAC,aAAD,CAAc,CAAA,IAC/B,MAAM,aAAa,oBAAC,QAAD,CAAS,CAAA;EAC7B,CAAA;EACL,YACC,oBAAC,SAAD;GACE,WAAW,GAAG,iBAAiB,YAAY,YAAY;GACvD,SAAS;GAER;EACI,CAAA;CAET,EAAA,CAAA,IACA,UACF,cAEA,oBAAC,MAAD;EACQ;EACN,OAAO,UAAU,YAAY;EAC7B,qBAAqB,SAAS,IAAI;EAEjC,UAAA;CACG,CAAA;CAGR,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,SAEF;EACA,GAAI;EAEH,UAAA;CACE,CAAA;AAET"}

package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts

@@ -16,9 +16,14 @@ interface Props {
   toolbar?: boolean | ToolbarPreset[];
   /** Extra buttons appended after the built-in presets. */
   toolbarItems?: ToolbarItem[];
+  /** Called after each document edit with the current HTML. */
+  onUpdate?: (value: string) => void;
+  /** Called when the editor loses focus with the current HTML. */
+  onCommit?: (value: string) => void;
+  /** @deprecated Use `onCommit` for the existing blur-only behavior. */
   onChange?: (value: string) => void;
 }
-declare const RichTextEditor: ({ value, placeholder, className, classNames, toolbar, toolbarItems, onChange }: Props) => import("react").JSX.Element;
+declare const RichTextEditor: ({ value, placeholder, className, classNames, toolbar, toolbarItems, onUpdate, onCommit, onChange }: Props) => import("react").JSX.Element;
 //#endregion
 export { Props, RichTextEditor as default };
 //# sourceMappingURL=rich-text-editor.d.mts.map

package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.d.mts","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"mappings":";;UAgBiB;EACf;EACA;EACA;EACA;IACE;IACA;;;;;;;EAOF,oBAAoB;;EAEpB,eAAe;EACf,YAAY;;cAGR,mBAAkB,OAAA,aAAA,WAAA,YAAA,SAAA,cAAA,YAQrB,0BAAK,IAAA"}
+{"version":3,"file":"rich-text-editor.d.mts","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"mappings":";;UAgBiB;EACf;EACA;EACA;EACA;IACE;IACA;;;;;;;EAOF,oBAAoB;;EAEpB,eAAe;;EAEf,YAAY;;EAEZ,YAAY;;EAEZ,YAAY;;cAGR,mBAAkB,OAAA,aAAA,WAAA,YAAA,SAAA,cAAA,UAAA,UAAA,YAUrB,0BAAK,IAAA"}