@cocso-ui/react 0.2.21 → 1.0.1

package/dist/cjs/components/input/input.js

@@ -0,0 +1,70 @@
+"use client";
+'use strict';
+
+var input = require('../../ecosystem/codegen/generated/input.js');
+require('../../ecosystem/codegen/generated/input.css.js');
+var react = require('react');
+var cn = require('../../cn.js');
+var input_module = require('./input.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var field = require('../field/field.js');
+
+/** Text input component with size and variant options. */
+function Input({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  disabled = false,
+  error = false,
+  stretch = false,
+  label,
+  description,
+  id: _id,
+  ...props
+}) {
+  const generatedId = react.useId();
+  const id = _id ?? generatedId;
+  const hasError = !!error;
+  const errorMessage = typeof error === "string" ? error : undefined;
+  const style = {
+    ..._style
+  };
+  const inputEl = /*#__PURE__*/jsxRuntime.jsx(FieldAwareInput, {
+    "aria-invalid": hasError || undefined,
+    className: cn.cn(input.input({
+      size
+    }), input_module.input, stretch && input_module.stretch, hasError && input_module.error, className),
+    "data-cocso-component": "input",
+    disabled: disabled,
+    id: id,
+    ref: ref,
+    style: style,
+    ...props
+  });
+  if (label) {
+    return /*#__PURE__*/jsxRuntime.jsx(field.Field, {
+      description: description,
+      error: errorMessage,
+      htmlFor: id,
+      label: label,
+      required: props.required,
+      children: inputEl
+    });
+  }
+  return inputEl;
+}
+function FieldAwareInput({
+  "aria-describedby": callerDescribedBy,
+  ...props
+}) {
+  const field$1 = field.useField();
+  const fieldDescribedBy = field$1.errorId ?? field$1.descriptionId;
+  const describedBy = [fieldDescribedBy, callerDescribedBy].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/jsxRuntime.jsx("input", {
+    "aria-describedby": describedBy,
+    ...props
+  });
+}
+
+exports.Input = Input;

package/dist/cjs/components/input/input.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{.input-module_input__-ipHD{--cocso-input-height:inherit;--cocso-input-padding-x:inherit;--cocso-input-font-size:inherit;--cocso-input-border-radius:inherit;--cocso-input-bg-color:var(--cocso-color-white);background-color:var(--cocso-input-bg-color);border:none;border-radius:var(--cocso-input-border-radius);box-shadow:0 0 0 1px var(--cocso-color-neutral-100),var(--cocso-shadow-xs);color:var(--cocso-color-neutral-950);display:block;font-size:var(--cocso-input-font-size);height:var(--cocso-input-height);outline:none;padding-inline:var(--cocso-input-padding-x);transition:box-shadow var(--cocso-duration-fast) var(--cocso-easing-soft);width:fit-content}.input-module_input__-ipHD::placeholder{color:var(--cocso-color-neutral-400)}.input-module_input__-ipHD:focus-visible{box-shadow:0 0 0 1px var(--cocso-color-neutral-400),var(--cocso-shadow-xs);outline:2px solid transparent}.input-module_input__-ipHD.input-module_stretch__1zxJA{width:100%}.input-module_input__-ipHD:disabled{cursor:not-allowed;opacity:.4}.input-module_input__-ipHD:read-only{background-color:var(--cocso-color-neutral-50);cursor:default}.input-module_input__-ipHD.input-module_error__8P-i-{box-shadow:0 0 0 1px var(--cocso-color-danger-500),var(--cocso-shadow-xs)}.input-module_input__-ipHD.input-module_error__8P-i-:focus-visible{box-shadow:0 0 0 1px var(--cocso-color-danger-500),var(--cocso-shadow-xs);outline:2px solid transparent}}";
+var styles = {"input":"input-module_input__-ipHD","stretch":"input-module_stretch__1zxJA","error":"input-module_error__8P-i-"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { InputSize } from '../input/input.js';
+
+interface InputTriggerProps extends Omit<ComponentProps<"button">, "prefix"> {
+    error?: boolean | string;
+    /** Shown in a muted style when no `children` value is present. */
+    placeholder?: string;
+    /** Leading content (e.g. an icon) rendered before the value. */
+    prefix?: ReactNode;
+    size?: InputSize;
+    stretch?: boolean;
+    /** Trailing content (e.g. a calendar or chevron icon). */
+    suffix?: ReactNode;
+}
+/**
+ * A native `<button>` styled to look like an `Input`. Use it as the trigger for
+ * `Dropdown`, `DayPicker`, `MonthPicker`, etc. — being a real button, it never
+ * triggers Base UI's `nativeButton` warning, while still presenting an
+ * input-like surface (value/placeholder + optional affix icons).
+ */
+declare function InputTrigger({ ref, className, size, error, stretch, disabled, prefix, suffix, placeholder, children, ...props }: InputTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { InputTrigger };
+export type { InputTriggerProps };

package/dist/cjs/components/input-trigger/input-trigger.js

@@ -0,0 +1,54 @@
+"use client";
+'use strict';
+
+var input = require('../../ecosystem/codegen/generated/input.js');
+require('../../ecosystem/codegen/generated/input.css.js');
+var cn = require('../../cn.js');
+var inputTrigger_module = require('./input-trigger.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * A native `<button>` styled to look like an `Input`. Use it as the trigger for
+ * `Dropdown`, `DayPicker`, `MonthPicker`, etc. — being a real button, it never
+ * triggers Base UI's `nativeButton` warning, while still presenting an
+ * input-like surface (value/placeholder + optional affix icons).
+ */
+function InputTrigger({
+  ref,
+  className,
+  size = "medium",
+  error = false,
+  stretch = false,
+  disabled = false,
+  prefix,
+  suffix,
+  placeholder,
+  children,
+  ...props
+}) {
+  const hasError = !!error;
+  const hasValue = children != null && children !== "";
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    "aria-invalid": hasError || undefined,
+    className: cn.cn(input.input({
+      size
+    }), inputTrigger_module.trigger, stretch && inputTrigger_module.stretch, hasError && inputTrigger_module.error, className),
+    "data-cocso-component": "input-trigger",
+    disabled: disabled,
+    ref: ref,
+    type: "button",
+    ...props,
+    children: [prefix && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: inputTrigger_module.affix,
+      children: prefix
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: cn.cn(inputTrigger_module.value, !hasValue && inputTrigger_module.placeholder),
+      children: hasValue ? children : placeholder
+    }), suffix && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: inputTrigger_module.affix,
+      children: suffix
+    })]
+  });
+}
+
+exports.InputTrigger = InputTrigger;

package/dist/cjs/components/input-trigger/input-trigger.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{.input-trigger-module_trigger__FepZ1{--cocso-input-height:inherit;--cocso-input-padding-x:inherit;--cocso-input-font-size:inherit;--cocso-input-border-radius:inherit;--cocso-input-bg-color:var(--cocso-color-white);align-items:center;background-color:var(--cocso-input-bg-color);border:none;border-radius:var(--cocso-input-border-radius);box-shadow:0 0 0 1px var(--cocso-color-neutral-100),var(--cocso-shadow-xs);color:var(--cocso-color-neutral-950);cursor:pointer;display:inline-flex;font-size:var(--cocso-input-font-size);gap:var(--cocso-spacing-4);height:var(--cocso-input-height);padding-inline:var(--cocso-input-padding-x);text-align:left;transition:box-shadow var(--cocso-duration-fast) var(--cocso-easing-soft);width:fit-content}.input-trigger-module_trigger__FepZ1:focus-visible{box-shadow:0 0 0 1px var(--cocso-color-neutral-400),var(--cocso-shadow-xs);outline:2px solid transparent}.input-trigger-module_trigger__FepZ1.input-trigger-module_stretch__iRyO-{width:100%}.input-trigger-module_trigger__FepZ1:disabled{cursor:not-allowed;opacity:.4}.input-trigger-module_trigger__FepZ1.input-trigger-module_error__qttrx,.input-trigger-module_trigger__FepZ1.input-trigger-module_error__qttrx:focus-visible{box-shadow:0 0 0 1px var(--cocso-color-danger-500),var(--cocso-shadow-xs)}.input-trigger-module_value__3RNV4{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-trigger-module_placeholder__-9y7a{color:var(--cocso-color-neutral-400)}.input-trigger-module_affix__IJsDY{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}}";
+var styles = {"trigger":"input-trigger-module_trigger__FepZ1","stretch":"input-trigger-module_stretch__iRyO-","error":"input-trigger-module_error__qttrx","value":"input-trigger-module_value__3RNV4","placeholder":"input-trigger-module_placeholder__-9y7a","affix":"input-trigger-module_affix__IJsDY"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ExternalLinkIcon } from '@cocso-ui/react-icons';
+import { ComponentProps } from 'react';
+import { RenderProp } from '../../primitives/use-render.js';
+import { LineHeight, FontWeight } from '../../token/typography.js';
+import { TypographyProps } from '../typography/typography.js';
+
+type LinkSize = "large" | "medium" | "small" | "x-small";
+type LinkVariant = "inline" | "current" | "plain";
+interface LinkProps extends ComponentProps<"a"> {
+    indicator?: boolean;
+    lineHeight?: LineHeight;
+    render?: RenderProp;
+    size?: TypographyProps["size"];
+    type?: TypographyProps["type"];
+    variant?: LinkVariant;
+    weight?: FontWeight;
+}
+declare function LinkComponent({ ref, render: renderProp, className, style: _style, size, type, weight, lineHeight, variant, indicator, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+declare function ExternalIcon({ className, ...props }: ComponentProps<typeof ExternalLinkIcon>): react_jsx_runtime.JSX.Element;
+/** Styled anchor/link component with inline, current, and plain variants. */
+declare const Link: typeof LinkComponent & {
+    displayName: "Link";
+    ExternalIcon: typeof ExternalIcon;
+};
+
+export { Link };
+export type { LinkProps, LinkSize, LinkVariant };

package/dist/cjs/components/link/link.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var link = require('../../ecosystem/codegen/generated/link.js');
+var reactIcons = require('@cocso-ui/react-icons');
+require('../../ecosystem/codegen/generated/link.css.js');
+var cn = require('../../cn.js');
+var link_module = require('./link.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../typography/typography.js');
+
+function LinkComponent({
+  ref,
+  render: renderProp,
+  className,
+  style: _style,
+  size,
+  type = "body",
+  weight,
+  lineHeight,
+  variant = "inline",
+  indicator,
+  ...props
+}) {
+  const showIndicator = indicator ?? variant !== "plain";
+  const style = {
+    ..._style
+  };
+  const mergedClassName = cn.cn(link.link({
+    variant
+  }), link_module.link, variant === "current" && link_module.current, showIndicator && link_module.indicator, className);
+  const typographyProps = {
+    className: mergedClassName,
+    lineHeight,
+    ref,
+    render: renderProp ?? (renderProps => /*#__PURE__*/jsxRuntime.jsx("a", {
+      ...renderProps
+    })),
+    size,
+    style,
+    type,
+    weight,
+    ...props
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+    ...typographyProps
+  });
+}
+function ExternalIcon({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(reactIcons.ExternalLinkIcon, {
+    className: cn.cn(link_module.externalIcon, className),
+    ...props
+  });
+}
+
+/** Styled anchor/link component with inline, current, and plain variants. */
+const Link = Object.assign(LinkComponent, {
+  displayName: "Link",
+  ExternalIcon
+});
+
+exports.Link = Link;

package/dist/cjs/components/link/link.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{.link-module_link__RLpbr{align-items:center;color:var(--cocso-link-color);cursor:pointer;display:inline-flex;gap:var(--cocso-spacing-2);justify-content:center;text-decoration:none;transition:color var(--cocso-duration-fast) var(--cocso-easing-default);width:fit-content}@media (hover:hover) and (pointer:fine){.link-module_link__RLpbr:hover{color:var(--cocso-link-color-hover)}.link-module_current__RgEV9:hover{opacity:.7}}.link-module_link__RLpbr:focus-visible{border-radius:var(--cocso-radius-1);outline:2px solid var(--cocso-color-primary-950);outline-offset:2px}.link-module_indicator__73GYU{text-decoration:underline;text-decoration-thickness:.0625em;text-underline-offset:.15em}.link-module_externalIcon__3okjy{flex-shrink:0;height:1em;width:1em}}";
+var styles = {"link":"link-module_link__RLpbr","current":"link-module_current__RgEV9","indicator":"link-module_indicator__73GYU","externalIcon":"link-module_externalIcon__3okjy"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/month-picker/month-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 MonthPickerProps 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 MonthPicker({ ref, className, value, onValueChange, trigger, locale, dateFormat, minDate, maxDate, disabled, ...props }: MonthPickerProps): react_jsx_runtime.JSX.Element;
+
+export { MonthPicker };
+export type { MonthPickerProps };

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

@@ -0,0 +1,108 @@
+"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 monthPicker_module = require('./month-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 MonthPicker({
+  ref,
+  className,
+  value,
+  onValueChange,
+  trigger,
+  locale: locale$1 = locale.ko,
+  dateFormat = "yyyy년 MM월",
+  minDate,
+  maxDate,
+  disabled,
+  ...props
+}) {
+  const [open, setOpen] = react.useState(false);
+  const handleChange = date => {
+    onValueChange?.(date);
+    setOpen(false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: cn.cn(monthPicker_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 month"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(dropdown.Dropdown.Content, {
+        "aria-label": "Select month",
+        className: monthPicker_module.content,
+        children: /*#__PURE__*/jsxRuntime.jsx(DatePicker, {
+          dateFormat: dateFormat,
+          disabled: disabled,
+          inline: true,
+          locale: locale$1,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: handleChange,
+          renderCustomHeader: ({
+            date,
+            decreaseYear,
+            increaseYear,
+            prevYearButtonDisabled,
+            nextYearButtonDisabled
+          }) => /*#__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"
+              })
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: monthPicker_module.menu,
+              children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
+                className: monthPicker_module.arrow,
+                disabled: prevYearButtonDisabled,
+                onClick: decreaseYear,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSBackwardIcon, {})
+              }), /*#__PURE__*/jsxRuntime.jsx(button.Button, {
+                className: monthPicker_module.arrow,
+                disabled: nextYearButtonDisabled,
+                onClick: increaseYear,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+              })]
+            })]
+          }),
+          selected: value,
+          showFourColumnMonthYearPicker: true,
+          showMonthYearPicker: true,
+          showPopperArrow: false
+        })
+      })]
+    })
+  });
+}
+
+exports.MonthPicker = MonthPicker;

package/dist/cjs/components/month-picker/month-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{.month-picker-module_root__iHMl-{--cocso-month-picker-font-size:var(--cocso-text-sm);display:inline-block;transform:translateZ(0)}.month-picker-module_content__vb64G{--cocso-month-picker-min-width:260px;border-radius:var(--cocso-radius-4);min-width:var(--cocso-month-picker-min-width);overflow:hidden;padding:var(--cocso-spacing-7)}.month-picker-module_menu__V8bwo{align-items:center;display:flex;gap:var(--cocso-spacing-3);justify-content:center}.month-picker-module_arrow__eD5-G{height:24px;width:24px}.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__header--custom{align-items:center;display:flex;justify-content:space-between;padding-bottom:var(--cocso-spacing-5);width:100%}.react-datepicker__week{text-align:center;white-space:nowrap}.react-datepicker__month{display:flex;flex-direction:column;gap:var(--cocso-spacing-5)}.react-datepicker__month-wrapper{align-items:center;display:flex;gap:var(--cocso-spacing-3);justify-content:space-between}.react-datepicker__month-text{align-items:center;border-radius:var(--cocso-radius-4);color:var(--cocso-color-text-primary);cursor:pointer;display:flex;flex:1;font-size:var(--cocso-month-picker-font-size);font-weight:var(--cocso-font-weight-medium);height:var(--cocso-spacing-14);justify-content:center}.react-datepicker__month-text--selected{background-color:var(--cocso-color-interactive-primary);color:var(--cocso-color-surface-primary);font-weight:var(--cocso-font-weight-semibold)}@media (hover:hover) and (pointer:fine){.react-datepicker__month-text:hover{background-color:var(--cocso-color-interactive-secondary)}.react-datepicker__month-text--selected:hover{background-color:var(--cocso-color-interactive-primary-hover)}}}";
+var styles = {"root":"month-picker-module_root__iHMl-","content":"month-picker-module_content__vb64G","menu":"month-picker-module_menu__V8bwo","arrow":"month-picker-module_arrow__eD5-G"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/one-time-password-field/one-time-password-field.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OTPInput } from 'input-otp';
+import { ComponentProps } from 'react';
+
+interface OneTimePasswordFieldProps extends Omit<ComponentProps<typeof OTPInput>, "onChange" | "render" | "children"> {
+    className?: string;
+    onValueChange?: (value: string) => void;
+    slotClassName?: string;
+}
+declare function OneTimePasswordField({ className, slotClassName, onValueChange, ref, ...props }: OneTimePasswordFieldProps): react_jsx_runtime.JSX.Element;
+
+export { OneTimePasswordField };
+export type { OneTimePasswordFieldProps };

package/dist/cjs/components/one-time-password-field/one-time-password-field.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var inputOtp = require('input-otp');
+var cn = require('../../cn.js');
+var oneTimePasswordField_module = require('./one-time-password-field.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Slot = ({
+  char,
+  className,
+  hasFakeCaret,
+  isActive,
+  placeholderChar
+}) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+  className: cn.cn(oneTimePasswordField_module.slot, isActive && oneTimePasswordField_module.slotActive, className),
+  "data-active": isActive || undefined,
+  children: [char ?? placeholderChar, hasFakeCaret && /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: oneTimePasswordField_module.caret
+  })]
+});
+function OneTimePasswordField({
+  className,
+  slotClassName,
+  onValueChange,
+  ref,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(inputOtp.OTPInput, {
+    containerClassName: cn.cn(oneTimePasswordField_module.otp, className),
+    onChange: onValueChange,
+    ref: ref,
+    render: ({
+      slots
+    }) => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: [...slots.entries()].map(([i, slot]) => /*#__PURE__*/jsxRuntime.jsx(Slot, {
+        ...slot,
+        className: slotClassName
+      }, `otp-slot-${i}`))
+    }),
+    ...props
+  });
+}
+
+exports.OneTimePasswordField = OneTimePasswordField;

package/dist/cjs/components/one-time-password-field/one-time-password-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{.one-time-password-field-module_otp__6eiAN{align-items:center;display:flex;gap:var(--cocso-spacing-5)}.one-time-password-field-module_slot__tFGbq{align-items:center;background-color:var(--cocso-color-surface-secondary);border-radius:var(--cocso-radius-1);box-shadow:0 0 0 var(--cocso-spacing-1,1px) var(--cocso-color-border-secondary);color:var(--cocso-color-text-primary);display:inline-flex;font-size:var(--cocso-text-base);font-weight:var(--cocso-font-weight-medium);height:3rem;justify-content:center;line-height:1;position:relative;text-align:center;text-transform:uppercase;transition:background-color var(--cocso-duration-fast) var(--cocso-easing-default),box-shadow var(--cocso-duration-fast) var(--cocso-easing-default);user-select:none;width:2.5rem}@media (hover:hover) and (pointer:fine){.one-time-password-field-module_slot__tFGbq:hover{box-shadow:0 0 0 var(--cocso-spacing-1,1px) var(--cocso-color-border-primary)}}.one-time-password-field-module_slotActive__iT0ud{box-shadow:0 0 0 var(--cocso-spacing-1,1px) var(--cocso-color-border-primary)}.one-time-password-field-module_caret__X9T-B{animation:one-time-password-field-module_caret-blink__dcoHY 1s step-end infinite;background-color:var(--cocso-color-text-primary);height:1em;position:absolute;width:1px}@keyframes one-time-password-field-module_caret-blink__dcoHY{0%,to{opacity:1}50%{opacity:0}}@media (prefers-reduced-motion:reduce){.one-time-password-field-module_caret__X9T-B{animation:none}}}";
+var styles = {"otp":"one-time-password-field-module_otp__6eiAN","slot":"one-time-password-field-module_slot__tFGbq","slotActive":"one-time-password-field-module_slotActive__iT0ud","caret":"one-time-password-field-module_caret__X9T-B"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+interface PaginationLabels {
+    navigation?: string;
+    next?: string;
+    page?: (n: number) => string;
+    previous?: string;
+}
+type PaginationLocale = "en" | "ko";
+interface PaginationProps extends Omit<ComponentProps<"nav">, "onChange"> {
+    labels?: PaginationLabels;
+    locale?: PaginationLocale;
+    maxVisible?: number;
+    onChange: (pageNumber: number) => void;
+    page: number;
+    totalPages: number;
+}
+/** Page navigation component with previous/next controls and truncated page range. */
+declare function Pagination({ ref, className, page, totalPages, maxVisible, onChange, labels, locale, ...props }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+export { Pagination };
+export type { PaginationLabels, PaginationLocale, PaginationProps };

package/dist/cjs/components/pagination/pagination.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var cn = require('../../cn.js');
+var pagination_module = require('./pagination.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const LOCALE_LABELS = {
+  en: {
+    navigation: "Page navigation",
+    previous: "Previous page",
+    next: "Next page",
+    page: n => `Page ${n}`
+  },
+  ko: {
+    navigation: "페이지 탐색",
+    previous: "이전 페이지",
+    next: "다음 페이지",
+    page: n => `${n} 페이지`
+  }
+};
+/** Page navigation component with previous/next controls and truncated page range. */
+function Pagination({
+  ref,
+  className,
+  page,
+  totalPages,
+  maxVisible = 5,
+  onChange,
+  labels,
+  locale = "en",
+  ...props
+}) {
+  const halfVisible = Math.ceil(maxVisible / 2);
+  const defaults = LOCALE_LABELS[locale];
+  const navigationLabel = labels?.navigation ?? defaults.navigation;
+  const previousLabel = labels?.previous ?? defaults.previous;
+  const nextLabel = labels?.next ?? defaults.next;
+  const pageLabel = labels?.page ?? defaults.page;
+  const renderPageButton = pageNumber => /*#__PURE__*/jsxRuntime.jsx("button", {
+    "aria-current": page === pageNumber ? "page" : undefined,
+    "aria-label": pageLabel(pageNumber),
+    className: pagination_module.item,
+    "data-active": page === pageNumber,
+    onClick: () => onChange(pageNumber),
+    type: "button",
+    children: pageNumber
+  }, pageNumber);
+  return /*#__PURE__*/jsxRuntime.jsxs("nav", {
+    "aria-label": navigationLabel,
+    className: cn.cn(pagination_module.pagination, className),
+    ref: ref,
+    ...props,
+    children: [totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
+      "aria-label": previousLabel,
+      className: pagination_module.arrow,
+      disabled: page === 1,
+      onClick: () => page > 1 && onChange(page - 1),
+      type: "button",
+      children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSBackwardIcon, {})
+    }), totalPages <= maxVisible + 2 ? Array.from({
+      length: totalPages
+    }, (_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: pagination_module.trunc,
+        children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.MoreHorizIcon, {})
+      }), Array.from({
+        length: maxVisible
+      }, (_, index) => {
+        const pageNumber = page - halfVisible + index + 1;
+        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : null;
+      }), page < totalPages - halfVisible && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: pagination_module.trunc,
+        children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.MoreHorizIcon, {})
+      }), renderPageButton(totalPages)]
+    }), totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
+      "aria-label": nextLabel,
+      className: pagination_module.arrow,
+      disabled: page === totalPages,
+      onClick: () => page < totalPages && onChange(page + 1),
+      type: "button",
+      children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+    })]
+  });
+}
+
+exports.Pagination = Pagination;

package/dist/cjs/components/pagination/pagination.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{.pagination-module_pagination__XjBXK{align-items:center;display:flex;gap:var(--cocso-spacing-2);justify-content:center;margin-inline:auto}.pagination-module_arrow__q388S,.pagination-module_item__9Vttf{--cocso-pagination-font-size:var(--cocso-text-sm);--cocso-pagination-font-color:var(--cocso-color-text-primary);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--cocso-radius-4);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-pagination-font-size);font-weight:var(--cocso-pagination-font-weight);height:var(--cocso-spacing-12);justify-content:center;transition:transform var(--cocso-duration-fast) var(--cocso-easing-default);width:var(--cocso-spacing-12);will-change:transform}.pagination-module_arrow__q388S:focus-visible,.pagination-module_item__9Vttf:focus-visible{outline:2px solid var(--cocso-color-primary-950);outline-offset:2px}.pagination-module_arrow__q388S:disabled{cursor:not-allowed;opacity:.4}@media (hover:hover) and (pointer:fine){.pagination-module_arrow__q388S:not(:disabled):hover,.pagination-module_item__9Vttf[data-active=false]:hover{--cocso-pagination-bg-color:var(--cocso-color-neutral-50)}}.pagination-module_arrow__q388S:not(:disabled):active{--cocso-pagination-bg-color:var(--cocso-color-neutral-100)}.pagination-module_arrow__q388S>svg{flex-shrink:0;height:var(--cocso-spacing-8);width:var(--cocso-spacing-8)}.pagination-module_arrow__q388S:active,.pagination-module_item__9Vttf:active{transform:scale(.98)}.pagination-module_item__9Vttf[data-active=true]{--cocso-pagination-font-color:var(--cocso-color-white);--cocso-pagination-bg-color:var(--cocso-color-primary-950);--cocso-pagination-font-weight:var(--cocso-font-weight-semibold)}.pagination-module_item__9Vttf[data-active=false]:active{--cocso-pagination-bg-color:var(--cocso-color-neutral-100)}.pagination-module_trunc__neqoN{align-items:center;color:var(--cocso-color-text-primary);display:inline-flex;font-size:var(--cocso-text-base);height:var(--cocso-spacing-13);justify-content:center;width:var(--cocso-spacing-13)}}";
+var styles = {"pagination":"pagination-module_pagination__XjBXK","arrow":"pagination-module_arrow__q388S","item":"pagination-module_item__9Vttf","trunc":"pagination-module_trunc__neqoN"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+
+declare function PopoverArrow({ className, ...props }: ComponentProps<typeof Popover$1.Arrow>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, side, sideOffset, align, alignOffset, arrowPadding, ...props }: ComponentProps<typeof Popover$1.Popup> & Pick<ComponentProps<typeof Popover$1.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding">): react_jsx_runtime.JSX.Element;
+declare const Popover: typeof Popover$1.Root & {
+    displayName: "Popover";
+    Trigger: Popover$1.Trigger;
+    Content: typeof PopoverContent;
+    Arrow: typeof PopoverArrow;
+};
+
+export { Popover };