@cocso-ui/react 0.2.21 → 1.0.0

package/dist/cjs/components/checkbox/checkbox.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+type CheckboxSize = "large" | "medium" | "small";
+type CheckboxStatus = "on" | "off" | "intermediate";
+interface CheckboxProps extends Omit<ComponentProps<typeof Checkbox$1.Root>, "checked" | "onCheckedChange" | "onChange" | "indeterminate" | "defaultChecked"> {
+    defaultStatus?: CheckboxStatus;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    onChange?: (status: "on" | "off") => void;
+    size?: CheckboxSize;
+    status?: CheckboxStatus;
+}
+/** Check/uncheck toggle with support for an indeterminate state. */
+declare function Checkbox({ ref, id: _id, className, style: _style, size, status: statusProp, defaultStatus, onChange, label, disabled, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize, CheckboxStatus };

package/dist/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,116 @@
+"use client";
+'use strict';
+
+var checkbox$1 = require('../../ecosystem/codegen/generated/checkbox.js');
+require('../../ecosystem/codegen/generated/checkbox.css.js');
+var reactIcons = require('@cocso-ui/react-icons');
+var react = require('react');
+var tsPattern = require('ts-pattern');
+var cn = require('../../cn.js');
+var checkbox_module = require('./checkbox.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var color = require('../../token/color.js');
+var typography = require('../typography/typography.js');
+var checkbox = require('@base-ui/react/checkbox');
+
+/** Check/uncheck toggle with support for an indeterminate state. */
+function Checkbox({
+  ref,
+  id: _id,
+  className,
+  style: _style,
+  size = "medium",
+  status: statusProp,
+  defaultStatus,
+  onChange,
+  label,
+  disabled,
+  ...props
+}) {
+  const generatedId = react.useId();
+  const id = _id ?? generatedId;
+  const isControlledRef = react.useRef(statusProp !== undefined);
+  const isControlled = isControlledRef.current;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (statusProp !== undefined)) {
+      console.error("Checkbox: switching between controlled and uncontrolled mode is not supported. " + "Use `status` (controlled) or `defaultStatus` (uncontrolled) for the component lifetime.");
+    }
+    if (statusProp !== undefined && defaultStatus !== undefined) {
+      console.error("Checkbox: `status` and `defaultStatus` are mutually exclusive. " + "Use `status` for controlled mode or `defaultStatus` for uncontrolled mode.");
+    }
+  }
+  const [internalStatus, setInternalStatus] = react.useState(defaultStatus ?? "off");
+  const status = isControlled ? statusProp : internalStatus;
+  const handleCheckedChange = checked => {
+    if (!disabled) {
+      const nextStatus = checked ? "on" : "off";
+      if (!isControlled) {
+        setInternalStatus(nextStatus);
+      }
+      onChange?.(nextStatus);
+    }
+  };
+  const style = {
+    ..._style,
+    "--cocso-checkbox-color": color.colors.white
+  };
+  const checkedState = getCheckedState(status);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: cn.cn(checkbox$1.checkbox({
+      size,
+      status
+    }), checkbox_module.wrapper, className),
+    style: style,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(checkbox.Checkbox.Root, {
+      checked: checkedState.checked,
+      className: checkbox_module.checkbox,
+      disabled: disabled,
+      id: id,
+      indeterminate: checkedState.indeterminate,
+      onCheckedChange: handleCheckedChange,
+      ref: ref,
+      ...props,
+      children: [/*#__PURE__*/jsxRuntime.jsx(checkbox.Checkbox.Indicator, {
+        className: checkbox_module.indicator,
+        style: {
+          opacity: status === "on" ? 1 : 0
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.CheckIcon, {
+          className: checkbox_module.icon,
+          size: 24
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-hidden": "true",
+        className: checkbox_module.indicator,
+        style: {
+          opacity: status === "intermediate" ? 1 : 0
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.CheckIndeterminateSmallIcon, {
+          className: checkbox_module.icon,
+          size: 24
+        })
+      })]
+    }), label && /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      "aria-disabled": disabled,
+      className: checkbox_module.label,
+      render: /*#__PURE__*/jsxRuntime.jsx("label", {
+        htmlFor: id,
+        children: label
+      }),
+      size: size,
+      type: "body"
+    })]
+  });
+}
+const getCheckedState = status => tsPattern.match(status).with("on", () => ({
+  checked: true,
+  indeterminate: false
+})).with("intermediate", () => ({
+  checked: false,
+  indeterminate: true
+})).with("off", () => ({
+  checked: false,
+  indeterminate: false
+})).exhaustive();
+
+exports.Checkbox = Checkbox;

package/dist/cjs/components/checkbox/checkbox.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{.checkbox-module_wrapper__vP2bp{align-items:center;display:flex;gap:var(--cocso-spacing-5)}.checkbox-module_checkbox__zAB1y{--cocso-checkbox-size:inherit;--cocso-checkbox-color:inherit;--cocso-checkbox-border-color:inherit;--cocso-checkbox-bg-color:inherit;align-items:center;background-color:var(--cocso-checkbox-bg-color);border:1px solid var(--cocso-checkbox-border-color);border-radius:var(--cocso-checkbox-radius);color:var(--cocso-checkbox-color);cursor:pointer;display:inline-flex;height:var(--cocso-checkbox-size);justify-content:center;opacity:1;position:relative;transition:color var(--cocso-duration-fast) var(--cocso-easing-default),border-color var(--cocso-duration-fast) var(--cocso-easing-default),background-color var(--cocso-duration-fast) var(--cocso-easing-default);width:var(--cocso-checkbox-size)}.checkbox-module_icon__Taf0X{stroke:var(--cocso-checkbox-color);display:block;height:auto;max-width:100%;transition:stroke var(--cocso-duration-fast) var(--cocso-easing-default)}.checkbox-module_checkbox__zAB1y:focus-within{outline:2px solid var(--cocso-color-primary-950);outline-offset:2px}.checkbox-module_checkbox__zAB1y input[type=checkbox]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.checkbox-module_indicator__Cs9Yi{bottom:var(--cocso-spacing-1);left:var(--cocso-spacing-1);position:absolute;right:var(--cocso-spacing-1);top:var(--cocso-spacing-1);transition:opacity var(--cocso-duration-fast) var(--cocso-easing-default)}.checkbox-module_label__EvRQ7{cursor:pointer;opacity:1}.checkbox-module_checkbox__zAB1y[data-disabled],.checkbox-module_label__EvRQ7[aria-disabled=true]{cursor:not-allowed;opacity:.4}}";
+var styles = {"wrapper":"checkbox-module_wrapper__vP2bp","checkbox":"checkbox-module_checkbox__zAB1y","icon":"checkbox-module_icon__Taf0X","indicator":"checkbox-module_indicator__Cs9Yi","label":"checkbox-module_label__EvRQ7"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/day-picker/day-picker.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Locale } from 'date-fns';
+import { ComponentProps, ReactElement } from 'react';
+
+interface DayPickerProps extends Omit<ComponentProps<"div">, "children"> {
+    dateFormat?: string;
+    disabled?: boolean;
+    locale?: Locale;
+    maxDate?: Date;
+    minDate?: Date;
+    onValueChange?: (value: Date | null) => void;
+    trigger?: ReactElement;
+    value?: Date;
+}
+declare function DayPicker({ ref, className, value, onValueChange, disabled, trigger, locale, dateFormat, minDate, maxDate, ...props }: DayPickerProps): react_jsx_runtime.JSX.Element;
+
+export { DayPicker };
+export type { DayPickerProps };

package/dist/cjs/components/day-picker/day-picker.js

@@ -0,0 +1,117 @@
+"use client";
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var dateFns = require('date-fns');
+var locale = require('date-fns/locale');
+var react = require('react');
+var DatePicker = require('react-datepicker');
+var cn = require('../../cn.js');
+var dayPicker_module = require('./day-picker.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var dropdown = require('../dropdown/dropdown.js');
+var button = require('../button/button.js');
+var typography = require('../typography/typography.js');
+
+function DayPicker({
+  ref,
+  className,
+  value,
+  onValueChange,
+  disabled,
+  trigger,
+  locale: locale$1 = locale.ko,
+  dateFormat = "yyyy년 MM월 dd일",
+  minDate,
+  maxDate,
+  ...props
+}) {
+  const [open, setOpen] = react.useState(false);
+  const handleChange = date => {
+    onValueChange?.(date);
+    setOpen(false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: cn.cn(dayPicker_module.root, className),
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsxs(dropdown.Dropdown, {
+      onOpenChange: setOpen,
+      open: open,
+      children: [/*#__PURE__*/jsxRuntime.jsx(dropdown.Dropdown.Trigger, {
+        render: trigger ?? /*#__PURE__*/jsxRuntime.jsx(button.Button, {
+          disabled: disabled,
+          size: "small",
+          variant: "outline",
+          children: value ? dateFns.format(value, dateFormat, {
+            locale: locale$1
+          }) : "Select date"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(dropdown.Dropdown.Content, {
+        "aria-label": "Select date",
+        className: dayPicker_module.content,
+        children: /*#__PURE__*/jsxRuntime.jsx(DatePicker, {
+          dateFormat: dateFormat,
+          dayClassName: date => {
+            const day = date.getDay();
+            if (day === 0) {
+              return dayPicker_module.sunday;
+            }
+            if (day === 6) {
+              return dayPicker_module.saturday;
+            }
+            return "";
+          },
+          disabled: disabled,
+          inline: true,
+          locale: locale$1,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: handleChange,
+          renderCustomHeader: ({
+            date,
+            decreaseMonth,
+            increaseMonth,
+            prevMonthButtonDisabled,
+            nextMonthButtonDisabled
+          }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+              size: "small",
+              type: "body",
+              weight: "semibold",
+              children: date.toLocaleDateString(locale$1.code ?? "ko-KR", {
+                year: "numeric",
+                month: "long"
+              })
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: dayPicker_module.menu,
+              children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
+                className: dayPicker_module.arrow,
+                disabled: prevMonthButtonDisabled,
+                onClick: decreaseMonth,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSBackwardIcon, {})
+              }), /*#__PURE__*/jsxRuntime.jsx(button.Button, {
+                className: dayPicker_module.arrow,
+                disabled: nextMonthButtonDisabled,
+                onClick: increaseMonth,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+              })]
+            })]
+          }),
+          selected: value,
+          showPopperArrow: false
+        })
+      })]
+    })
+  });
+}
+
+exports.DayPicker = DayPicker;

package/dist/cjs/components/day-picker/day-picker.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{.day-picker-module_root__QVrbb{display:inline-block;transform:translateZ(0)}.day-picker-module_content__34qUu{border-radius:var(--cocso-radius-4);min-width:260px;overflow:hidden;padding:var(--cocso-spacing-7)}.day-picker-module_menu__2eMt0{align-items:center;display:flex;gap:var(--cocso-spacing-3);justify-content:center}.day-picker-module_arrow__p9QLq{height:24px;width:24px}.react-datepicker__day.day-picker-module_sunday__nVavs{color:var(--cocso-color-danger-600)}.react-datepicker__day.day-picker-module_saturday__ZYoB9{color:var(--cocso-color-info-600)}.react-datepicker{background-color:var(--cocso-color-surface-primary);color:var(--cocso-color-text-primary);display:inline-block;font-size:.8rem;padding-inline:0;position:relative}.react-datepicker__aria-live{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.react-datepicker__sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__month-container{padding-block:0;width:100%}.react-datepicker__header--custom{padding-bottom:var(--cocso-spacing-5)}.react-datepicker__day-names,.react-datepicker__header--custom{align-items:center;display:flex;justify-content:space-between;width:100%}.react-datepicker__day-names{padding-bottom:var(--cocso-spacing-2);text-align:center;white-space:nowrap}.react-datepicker__month{gap:var(--cocso-spacing-2)}.react-datepicker__week{align-items:center;display:flex;justify-content:space-between;text-align:center;white-space:nowrap;width:100%}.react-datepicker__day-name{font-weight:500;padding-inline:var(--cocso-spacing-3)}.react-datepicker__day,.react-datepicker__day-name{align-items:center;aspect-ratio:1/1;color:var(--cocso-color-text-primary);display:inline-flex;justify-content:center;margin:0;min-width:1.7rem;text-align:center;width:auto}.react-datepicker__day{border-radius:var(--cocso-radius-4);cursor:pointer;font-family:var(--font-mono,\"monospace\"),monospace}.react-datepicker__day.react-datepicker__day--selected{background-color:var(--cocso-color-interactive-primary);color:var(--cocso-color-surface-primary)}@media (hover:hover) and (pointer:fine){.react-datepicker__day:hover{background-color:var(--cocso-color-interactive-secondary)}.react-datepicker__day.react-datepicker__day--selected:hover{background-color:var(--cocso-color-interactive-primary-hover)}}.react-datepicker__day-name:first-child{color:var(--cocso-color-danger-600)}.react-datepicker__day-name:nth-child(7){color:var(--cocso-color-info-600)}.react-datepicker__day--outside-month{opacity:.4}.react-datepicker__day--disabled{cursor:not-allowed;opacity:.4}}";
+var styles = {"root":"day-picker-module_root__QVrbb","content":"day-picker-module_content__34qUu","menu":"day-picker-module_menu__2eMt0","arrow":"day-picker-module_arrow__p9QLq","sunday":"day-picker-module_sunday__nVavs","saturday":"day-picker-module_saturday__ZYoB9"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/dialog/dialog.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactElement } from 'react';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+
+type DialogSize = "small" | "medium" | "large";
+declare function DialogContent({ className, size, children, ...props }: ComponentProps<typeof Dialog$1.Popup> & {
+    size?: DialogSize;
+}): react_jsx_runtime.JSX.Element;
+interface DialogCloseProps extends ComponentProps<typeof Dialog$1.Close> {
+    render?: ReactElement;
+}
+declare function DialogClose({ className, render: renderProp, children, ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, children, ...props }: ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, children, ...props }: ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;
+/**
+ * Modal dialog. Compose with `Dialog.Trigger`, `Dialog.Content`, `Dialog.Title`,
+ * `Dialog.Description`, and `Dialog.Close`.
+ */
+declare const Dialog: typeof Dialog$1.Root & {
+    displayName: "Dialog";
+    Trigger: Dialog$1.Trigger;
+    Content: typeof DialogContent;
+    Close: typeof DialogClose;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+};
+
+export { Dialog };
+export type { DialogCloseProps, DialogSize };

package/dist/cjs/components/dialog/dialog.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var cn = require('../../cn.js');
+var dialog_module = require('./dialog.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../typography/typography.js');
+var color = require('../../token/color.js');
+var button = require('../button/button.js');
+var dialog = require('@base-ui/react/dialog');
+
+function DialogContent({
+  className,
+  size = "medium",
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(dialog.Dialog.Portal, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(dialog.Dialog.Backdrop, {
+      className: dialog_module.overlay
+    }), /*#__PURE__*/jsxRuntime.jsx(dialog.Dialog.Popup, {
+      className: cn.cn(dialog_module.panel, dialog_module[size], className),
+      ...props,
+      children: children
+    })]
+  });
+}
+function DialogClose({
+  className,
+  render: renderProp,
+  children,
+  ...props
+}) {
+  if (renderProp) {
+    return /*#__PURE__*/jsxRuntime.jsx(dialog.Dialog.Close, {
+      className: className,
+      render: renderProp,
+      ...props
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(dialog.Dialog.Close, {
+    "aria-label": "Close",
+    className: cn.cn(dialog_module.close, className),
+    render: /*#__PURE__*/jsxRuntime.jsx(button.Button, {
+      size: "x-small",
+      svgOnly: true,
+      variant: "outline",
+      children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.CloseIcon, {
+        size: 14
+      })
+    }),
+    ...props,
+    children: children
+  });
+}
+function DialogTitle({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(dialog.Dialog.Title, {
+    className: cn.cn(dialog_module.title, className),
+    render: /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      size: 20,
+      type: "custom",
+      weight: "bold"
+    }),
+    ...props,
+    children: children
+  });
+}
+function DialogDescription({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(dialog.Dialog.Description, {
+    className: cn.cn(dialog_module.description, className),
+    render: /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      color: color.colors.textSecondary,
+      size: 14,
+      type: "custom",
+      weight: "medium"
+    }),
+    ...props,
+    children: children
+  });
+}
+
+/**
+ * Modal dialog. Compose with `Dialog.Trigger`, `Dialog.Content`, `Dialog.Title`,
+ * `Dialog.Description`, and `Dialog.Close`.
+ */
+const Dialog = Object.assign(dialog.Dialog.Root, {
+  displayName: "Dialog",
+  Trigger: dialog.Dialog.Trigger,
+  Content: DialogContent,
+  Close: DialogClose,
+  Title: DialogTitle,
+  Description: DialogDescription
+});
+
+exports.Dialog = Dialog;

package/dist/cjs/components/dialog/dialog.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{@keyframes dialog-module_overlay-show__gzSZE{0%{opacity:0}to{opacity:1}}.dialog-module_overlay__aJLpW{animation:dialog-module_overlay-show__gzSZE var(--cocso-duration-slow) var(--cocso-easing-entrance);background-color:var(--cocso-color-black-alpha-30);inset:0;position:fixed;z-index:var(--cocso-z-index-overlay)}@keyframes dialog-module_content-show__rVhLI{0%{opacity:0;transform:translate(-50%,-48%) perspective(1200px) rotateX(-2deg) scale(.995)}to{opacity:1;transform:translate(-50%,-50%) perspective(1200px) rotateX(0deg) scale(1)}}.dialog-module_panel__5XCTU{animation:dialog-module_content-show__rVhLI var(--cocso-duration-slow) var(--cocso-easing-entrance);background-color:var(--cocso-color-white);border:1px solid var(--cocso-color-neutral-100);border-radius:var(--cocso-radius-5);box-shadow:var(--cocso-shadow-dialog);display:flex;flex-direction:column;left:50%;max-height:85vh;padding:var(--cocso-spacing-9);position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:var(--cocso-z-index-dialog)}.dialog-module_small__JObfk{max-width:380px}.dialog-module_medium__Xxtor{max-width:520px}.dialog-module_large__O71LV{max-width:680px}@media (prefers-reduced-motion:reduce){.dialog-module_overlay__aJLpW,.dialog-module_panel__5XCTU{animation:none}}.dialog-module_close__cuRe9{align-items:center;align-self:flex-end;cursor:pointer;display:flex;height:var(--cocso-spacing-10);justify-content:center;position:absolute;right:var(--cocso-spacing-9);top:var(--cocso-spacing-9);width:var(--cocso-spacing-10)}.dialog-module_title__E36pq{word-break:keep-all}.dialog-module_description__DNssa{margin-top:var(--cocso-spacing-3)}}";
+var styles = {"overlay":"dialog-module_overlay__aJLpW","overlay-show":"dialog-module_overlay-show__gzSZE","panel":"dialog-module_panel__5XCTU","content-show":"dialog-module_content-show__rVhLI","small":"dialog-module_small__JObfk","medium":"dialog-module_medium__Xxtor","large":"dialog-module_large__O71LV","close":"dialog-module_close__cuRe9","title":"dialog-module_title__E36pq","description":"dialog-module_description__DNssa"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/dropdown/dropdown.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { Menu } from '@base-ui/react/menu';
+
+declare function DropdownContent({ className, ...props }: ComponentProps<typeof Menu.Popup>): react_jsx_runtime.JSX.Element;
+declare function DropdownItem({ className, prefix, children, ...props }: Omit<ComponentProps<typeof Menu.Item>, "prefix"> & {
+    prefix?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare const Dropdown: (<Payload>(props: Menu.Root.Props<Payload>) => react_jsx_runtime.JSX.Element) & {
+    displayName: "Dropdown";
+    Trigger: Menu.Trigger;
+    Content: typeof DropdownContent;
+    Item: typeof DropdownItem;
+};
+
+export { Dropdown };

package/dist/cjs/components/dropdown/dropdown.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var cn = require('../../cn.js');
+var dropdown_module = require('./dropdown.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var menu = require('@base-ui/react/menu');
+
+function DropdownContent({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(menu.Menu.Portal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(menu.Menu.Positioner, {
+      children: /*#__PURE__*/jsxRuntime.jsx(menu.Menu.Popup, {
+        className: cn.cn(dropdown_module.content, className),
+        ...props
+      })
+    })
+  });
+}
+function DropdownItem({
+  className,
+  prefix,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(menu.Menu.Item, {
+    className: cn.cn(dropdown_module.item, className),
+    ...props,
+    children: [prefix && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: dropdown_module.prefix,
+      children: prefix
+    }), children]
+  });
+}
+const Dropdown = Object.assign(menu.Menu.Root, {
+  displayName: "Dropdown",
+  Trigger: menu.Menu.Trigger,
+  Content: DropdownContent,
+  Item: DropdownItem
+});
+
+exports.Dropdown = Dropdown;

package/dist/cjs/components/dropdown/dropdown.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{@keyframes dropdown-module_dropdown-slide-up__OrP7L{0%{opacity:.9;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdown-module_dropdown-slide-down__3NX30{0%{opacity:.9;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.dropdown-module_content__nf11j{animation:none}.dropdown-module_item__BvWCj{transition:none}}.dropdown-module_content__nf11j{animation-duration:var(--cocso-duration-normal);animation-timing-function:var(--cocso-easing-entrance);background-color:var(--cocso-color-surface-primary);border:1px solid var(--cocso-color-border-secondary);border-radius:var(--cocso-radius-3);box-shadow:var(--cocso-shadow-dropdown);display:flex;flex-direction:column;min-width:128px;padding:var(--cocso-spacing-4);will-change:transform,opacity;z-index:var(--cocso-z-index-overlay)}.dropdown-module_content__nf11j[data-side=top]{animation-name:dropdown-module_dropdown-slide-up__OrP7L;margin-bottom:var(--cocso-spacing-3)}.dropdown-module_content__nf11j[data-side=bottom]{animation-name:dropdown-module_dropdown-slide-down__3NX30;margin-top:var(--cocso-spacing-3)}.dropdown-module_item__BvWCj{align-items:center;border-radius:var(--cocso-radius-3);cursor:pointer;display:flex;font-size:var(--cocso-text-sm);gap:var(--cocso-spacing-4);height:fit-content;line-height:1.5;padding-block:var(--cocso-spacing-4);padding-inline:var(--cocso-spacing-5);transition:background-color var(--cocso-duration-fast) var(--cocso-easing-soft),scale var(--cocso-duration-fast) var(--cocso-easing-soft)}.dropdown-module_prefix__oBteB{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}@media (hover:hover) and (pointer:fine){.dropdown-module_item__BvWCj:hover{background-color:var(--cocso-color-surface-secondary)}.dropdown-module_item__BvWCj[data-disabled]:hover{background-color:transparent}}.dropdown-module_item__BvWCj:active{scale:.98}.dropdown-module_item__BvWCj[data-disabled]{cursor:not-allowed;opacity:.4}.dropdown-module_item__BvWCj[data-disabled]:active{scale:1}}";
+var styles = {"content":"dropdown-module_content__nf11j","item":"dropdown-module_item__BvWCj","prefix":"dropdown-module_prefix__oBteB"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/field/field.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FieldContextValue {
+    descriptionId?: string;
+    errorId?: string;
+}
+declare const useField: () => FieldContextValue;
+interface FieldProps {
+    children: ReactNode;
+    description?: string;
+    error?: string;
+    htmlFor?: string;
+    label: string;
+    optionalLabel?: string;
+    /**
+     * `true` = required field (no indicator shown).
+     * `false` = explicitly optional — shows "(Optional)" indicator.
+     * `undefined` = no indicator shown.
+     */
+    required?: boolean;
+}
+declare function Field({ children, label, htmlFor, required, optionalLabel, error, description, }: FieldProps): react_jsx_runtime.JSX.Element;
+
+export { Field, useField };
+export type { FieldProps };

package/dist/cjs/components/field/field.js

@@ -0,0 +1,49 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var field_module = require('./field.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const FieldContext = /*#__PURE__*/react.createContext({});
+const useField = () => react.useContext(FieldContext);
+function Field({
+  children,
+  label,
+  htmlFor,
+  required,
+  optionalLabel,
+  error,
+  description
+}) {
+  const descriptionId = react.useId();
+  const errorId = react.useId();
+  return /*#__PURE__*/jsxRuntime.jsx(FieldContext.Provider, {
+    value: {
+      descriptionId: !error && description ? descriptionId : undefined,
+      errorId: error ? errorId : undefined
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: field_module.root,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
+        className: field_module.label,
+        htmlFor: htmlFor,
+        children: [label, required === false && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: field_module.optional,
+          children: optionalLabel ?? "(Optional)"
+        })]
+      }), children, error && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: field_module.errorMessage,
+        id: errorId,
+        children: error
+      }), !error && description && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: field_module.description,
+        id: descriptionId,
+        children: description
+      })]
+    })
+  });
+}
+
+exports.Field = Field;
+exports.useField = useField;

package/dist/cjs/components/field/field.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{.field-module_root__m2CZV{--cocso-field-label-font-size:var(--cocso-text-sm);--cocso-field-description-font-size:var(--cocso-text-xs);display:flex;flex-direction:column;gap:var(--cocso-spacing-5)}.field-module_label__LbITU{color:var(--cocso-color-text-primary);cursor:pointer;font-size:var(--cocso-field-label-font-size);font-weight:var(--cocso-font-weight-medium);user-select:none}.field-module_optional__NE5TC{color:var(--cocso-color-text-tertiary);font-size:var(--cocso-field-description-font-size);font-weight:var(--cocso-font-weight-regular);margin-left:var(--cocso-spacing-4)}.field-module_description__qiTfj{color:var(--cocso-color-text-secondary);font-size:var(--cocso-field-description-font-size);margin:0}.field-module_errorMessage__HWoWa{color:var(--cocso-color-feedback-danger);font-size:var(--cocso-field-description-font-size);margin:0}}";
+var styles = {"root":"field-module_root__m2CZV","label":"field-module_label__LbITU","optional":"field-module_optional__NE5TC","description":"field-module_description__qiTfj","errorMessage":"field-module_errorMessage__HWoWa"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type InputSize = "large" | "medium" | "small" | "x-small";
+interface InputProps extends Omit<ComponentProps<"input">, "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: boolean | string;
+    label?: string;
+    size?: InputSize;
+    stretch?: boolean;
+}
+/** Text input component with size and variant options. */
+declare function Input({ ref, className, style: _style, size, disabled, error, stretch, label, description, id: _id, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+export { Input };
+export type { InputProps, InputSize };