@cocso-ui/react 0.2.21 → 1.0.0

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

@@ -0,0 +1,69 @@
+"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),
+    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/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 { useRender } from '@base-ui/react/use-render';
+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?: useRender.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,21 @@
+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;
+}
+interface PaginationProps extends Omit<ComponentProps<"nav">, "onChange"> {
+    labels?: PaginationLabels;
+    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, ...props }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+export { Pagination };
+export type { PaginationLabels, PaginationProps };

package/dist/cjs/{pagination/Pagination.js → components/pagination/pagination.js}

@@ -1,56 +1,71 @@
 'use strict';
 
 var reactIcons = require('@cocso-ui/react-icons');
-var clsx = require('clsx');
-var react = require('react');
-var Pagination_module = require('./Pagination.module.css.js');
+var cn = require('../../cn.js');
+var pagination_module = require('./pagination.module.css.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-const Pagination = /*#__PURE__*/react.forwardRef(({
+/** Page navigation component with previous/next controls and truncated page range. */
+function Pagination({
+  ref,
   className,
   page,
   totalPages,
   maxVisible = 5,
   onChange,
+  labels,
   ...props
-}, ref) => {
+}) {
   const halfVisible = Math.ceil(maxVisible / 2);
+  const navigationLabel = labels?.navigation ?? "Page navigation";
+  const previousLabel = labels?.previous ?? "Previous page";
+  const nextLabel = labels?.next ?? "Next page";
+  const pageLabel = labels?.page ?? (n => `Page ${n}`);
   const renderPageButton = pageNumber => /*#__PURE__*/jsxRuntime.jsx("button", {
-    type: "button",
-    className: Pagination_module.item,
-    onClick: () => onChange(pageNumber),
+    "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("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("nav", {
+    "aria-label": navigationLabel,
+    className: cn.cn(pagination_module.pagination, className),
     ref: ref,
-    className: clsx.clsx(Pagination_module.pagination, className),
     ...props,
     children: [totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
-      className: Pagination_module.arrow,
-      type: "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(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), 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,
+        className: pagination_module.trunc,
         children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.MoreHorizIcon, {})
-      }), Array(maxVisible).fill(0).map((_, index) => {
+      }), Array.from({
+        length: maxVisible
+      }, (_, index) => {
         const pageNumber = page - halfVisible + index + 1;
-        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : '';
+        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : null;
       }), page < totalPages - halfVisible && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: Pagination_module.trunc,
+        className: pagination_module.trunc,
         children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.MoreHorizIcon, {})
       }), renderPageButton(totalPages)]
     }), totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
-      className: Pagination_module.arrow,
-      type: "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 };

package/dist/cjs/components/popover/popover.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var cn = require('../../cn.js');
+var popover_module = require('./popover.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var popover = require('@base-ui/react/popover');
+
+function PopoverArrow({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(popover.Popover.Arrow, {
+    className: cn.cn(popover_module.arrow, className),
+    ...props
+  });
+}
+function PopoverContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(popover.Popover.Portal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(popover.Popover.Positioner, {
+      align: align,
+      alignOffset: alignOffset,
+      arrowPadding: arrowPadding,
+      side: side,
+      sideOffset: sideOffset,
+      children: /*#__PURE__*/jsxRuntime.jsx(popover.Popover.Popup, {
+        className: cn.cn(popover_module.content, className),
+        ...props
+      })
+    })
+  });
+}
+const Popover = Object.assign(popover.Popover.Root, {
+  displayName: "Popover",
+  Trigger: popover.Popover.Trigger,
+  Content: PopoverContent,
+  Arrow: PopoverArrow
+});
+
+exports.Popover = Popover;

package/dist/cjs/components/popover/popover.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 popover-module_slide-up-and-fade__Xlvb6{0%{opacity:.9;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-module_slide-right-and-fade__R8x1-{0%{opacity:.9;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-module_slide-down-and-fade__hwk68{0%{opacity:.9;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-module_slide-left-and-fade__dQXyx{0%{opacity:.9;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.popover-module_content__TwOg0{animation:none}}.popover-module_content__TwOg0{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-popover);font-size:var(--cocso-text-sm);line-height:1.5;overflow:visible;padding-block:var(--cocso-spacing-4);padding-inline:var(--cocso-spacing-5);position:relative;will-change:transform,opacity}.popover-module_content__TwOg0[data-open][data-side=top]{animation-name:popover-module_slide-up-and-fade__Xlvb6;margin-bottom:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=right]{animation-name:popover-module_slide-right-and-fade__R8x1-;margin-left:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=bottom]{animation-name:popover-module_slide-down-and-fade__hwk68;margin-top:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=left]{animation-name:popover-module_slide-left-and-fade__dQXyx;margin-right:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=top]:has(.popover-module_arrow__zZuHF){margin-bottom:var(--cocso-spacing-6)}.popover-module_content__TwOg0[data-open][data-side=right]:has(.popover-module_arrow__zZuHF){margin-left:var(--cocso-spacing-6)}.popover-module_content__TwOg0[data-open][data-side=bottom]:has(.popover-module_arrow__zZuHF){margin-top:var(--cocso-spacing-6)}.popover-module_content__TwOg0[data-open][data-side=left]:has(.popover-module_arrow__zZuHF){margin-right:var(--cocso-spacing-6)}.popover-module_arrow__zZuHF{background-color:var(--cocso-color-surface-primary);border:1px solid var(--cocso-color-border-secondary);height:10px;width:10px}.popover-module_arrow__zZuHF[data-side=bottom]{border-bottom:none;border-right:none;top:0;transform:translateY(-50%) rotate(45deg)}.popover-module_arrow__zZuHF[data-side=top]{border-left:none;border-top:none;bottom:0;transform:translateY(50%) rotate(45deg)}.popover-module_arrow__zZuHF[data-side=right]{border-right:none;border-top:none;left:0;transform:translateX(-50%) rotate(45deg)}.popover-module_arrow__zZuHF[data-side=left]{border-bottom:none;border-left:none;right:0;transform:translateX(50%) rotate(45deg)}}";
+var styles = {"content":"popover-module_content__TwOg0","arrow":"popover-module_arrow__zZuHF"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type ProgressVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends ComponentProps<"div"> {
+    max?: number;
+    size?: ProgressSize;
+    value: number;
+    variant?: ProgressVariant;
+}
+/** Determinate progress indicator showing completion percentage. */
+declare function Progress({ ref, className, style, variant, size, value, max, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Progress };
+export type { ProgressProps, ProgressSize, ProgressVariant };