@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/Command/Command.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { R as s, D as p } from "../../index-amYX3uxF.js";
-import { V as l } from "../../index-sp5ZfG6g.js";
+import { R as s, D as p } from "../../index-9a-FL_6D.js";
+import { V as l } from "../../index-BKjcReYh.js";
 import { cn as m } from "../../utils/index.js";
 import { wrapperVariants as f } from "./Command.variants.js";
 import { DialogContent as c } from "./components/DialogContent.js";

package/dist/components/Command/Command.types.d.ts

@@ -0,0 +1,31 @@
+import { Theme } from '../../domain/theme';
+import { DialogProps } from '@radix-ui/react-dialog';
+import { PropsWithChildren } from 'react';
+/**
+ * Props for the Command component.
+ * A command palette dialog for keyboard-driven navigation and actions.
+ *
+ * @example
+ * ```tsx
+ * <Command open={open} onOpenChange={setOpen} title="Command Palette">
+ *   <CommandGroup heading="Actions">
+ *     <CommandItem onSelect={() => createNew()}>Create new</CommandItem>
+ *     <CommandItem onSelect={() => openSettings()}>Settings</CommandItem>
+ *   </CommandGroup>
+ * </Command>
+ * ```
+ */
+export interface CommandProps extends PropsWithChildren<DialogProps> {
+    /** Text shown when no results match the search */
+    emptyResults?: string;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Accessible title for the dialog (visually hidden) */
+    title?: string;
+    /** Additional CSS classes for the title */
+    titleClassName?: string;
+    /** Additional CSS classes for the command wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

package/dist/components/Command/Command.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const inputVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const searchInconInputVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Command/components/Command.d.ts

@@ -0,0 +1,18 @@
+declare const Command: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Command };

package/dist/components/Command/components/Command.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-0XtjXVpJ.js";
+import { _ as o } from "../../../index-Dfq4O3b4.js";
 const s = p(({ className: r, children: a, ...e }, i) => /* @__PURE__ */ m(o, { ref: i, className: r, ...e, children: /* @__PURE__ */ m("div", { className: "w-[500px]", children: a }) }));
 s.displayName = o.displayName;
 export {

package/dist/components/Command/components/CommandEmpty.d.ts

@@ -0,0 +1,8 @@
+declare const CommandEmpty: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { CommandEmpty };

package/dist/components/Command/components/CommandEmpty.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as m } from "../../../index-0XtjXVpJ.js";
+import { _ as m } from "../../../index-Dfq4O3b4.js";
 const r = p((t, e) => /* @__PURE__ */ o(
   m.Empty,
   {

package/dist/components/Command/components/CommandGroup.d.ts

@@ -0,0 +1,12 @@
+declare const CommandGroup: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { CommandGroup };

package/dist/components/Command/components/CommandGroup.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-0XtjXVpJ.js";
+import { _ as o } from "../../../index-Dfq4O3b4.js";
 import { cn as a } from "../../../utils/index.js";
 const t = p(({ className: r, ...m }, d) => /* @__PURE__ */ e(
   o.Group,

package/dist/components/Command/components/CommandInput.d.ts

@@ -0,0 +1,9 @@
+declare const CommandInput: import('react').ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export { CommandInput };

package/dist/components/Command/components/CommandInput.js

@@ -1,9 +1,9 @@
 import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { _ as m } from "../../../index-0XtjXVpJ.js";
+import { _ as m } from "../../../index-Dfq4O3b4.js";
 import s, { forwardRef as u } from "react";
 import { cn as f } from "../../../utils/index.js";
 import { searchInconInputVariants as v, inputVariants as g } from "../Command.variants.js";
-import { P as a } from "../../../index-N2OStZoU.js";
+import { P as a } from "../../../index-BOE_3f_Z.js";
 function p() {
   return p = Object.assign || function(r) {
     for (var n = 1; n < arguments.length; n++) {

package/dist/components/Command/components/CommandItem.d.ts

@@ -0,0 +1,14 @@
+declare const CommandItem: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { CommandItem };

package/dist/components/Command/components/CommandItem.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as i, useContext as c, useCallback as l } from "react";
-import { _ as o } from "../../../index-0XtjXVpJ.js";
+import { _ as o } from "../../../index-Dfq4O3b4.js";
 import { cn as p } from "../../../utils/index.js";
 import { CommandContext as u } from "../contexts/Command.context.js";
 const f = i(({ className: n, onSelect: e, ...r }, a) => {

package/dist/components/Command/components/CommandList.d.ts

@@ -0,0 +1,10 @@
+declare const CommandList: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { CommandList };

package/dist/components/Command/components/CommandList.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { _ as o } from "../../../index-0XtjXVpJ.js";
+import { _ as o } from "../../../index-Dfq4O3b4.js";
 import { cn as t } from "../../../utils/index.js";
 const e = s(({ className: m, ...r }, a) => /* @__PURE__ */ i(
   o.List,

package/dist/components/Command/components/CommandSeparator.d.ts

@@ -0,0 +1,8 @@
+declare const CommandSeparator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { CommandSeparator };

package/dist/components/Command/components/CommandSeparator.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { _ as r } from "../../../index-0XtjXVpJ.js";
+import { _ as r } from "../../../index-Dfq4O3b4.js";
 import { cn as t } from "../../../utils/index.js";
 const s = p(({ className: o, ...a }, m) => /* @__PURE__ */ e(
   r.Separator,

package/dist/components/Command/components/CommandShortcut.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+declare const CommandShortcut: {
+    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CommandShortcut };

package/dist/components/Command/components/DialogContent.d.ts

@@ -0,0 +1,2 @@
+declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { DialogContent };

package/dist/components/Command/components/DialogContent.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { a as r, C as o, b as l } from "../../../index-amYX3uxF.js";
+import { a as r, C as o, b as l } from "../../../index-9a-FL_6D.js";
 import { cn as m } from "../../../utils/index.js";
 import { DialogOverlay as p } from "./DialogOverlay.js";
-import { X as c } from "../../../x-4F_5p77m.js";
+import { X as c } from "../../../x-Eoa9FJjA.js";
 const f = i(({ className: e, children: s, ...n }, d) => /* @__PURE__ */ t(r, { children: [
   /* @__PURE__ */ a(p, {}),
   /* @__PURE__ */ t(

package/dist/components/Command/components/DialogOverlay.d.ts

@@ -0,0 +1,2 @@
+declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { DialogOverlay };

package/dist/components/Command/components/DialogOverlay.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { O as a } from "../../../index-amYX3uxF.js";
+import { O as a } from "../../../index-9a-FL_6D.js";
 import { cn as i } from "../../../utils/index.js";
 const m = d(({ className: t, ...e }, o) => /* @__PURE__ */ s(
   a,

package/dist/components/Command/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './CommandEmpty';
+export * from './CommandGroup';
+export * from './CommandInput';
+export * from './CommandItem';
+export * from './CommandList';
+export * from './CommandSeparator';
+export * from './CommandShortcut';
+export * from './DialogContent';
+export * from './Command';

package/dist/components/Command/contexts/Command.context.d.ts

@@ -0,0 +1,2 @@
+import { State } from './Command.types';
+export declare const CommandContext: import('react').Context<State>;

package/dist/components/Command/contexts/Command.provider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const CommandProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Command/contexts/Command.types.d.ts

@@ -0,0 +1,5 @@
+export type State = {
+    isOpen: boolean;
+    setOpen: (status?: boolean) => void;
+    toggleOpen: () => void;
+};

package/dist/components/Command/contexts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Command.context';
+export * from './Command.provider';
+export * from './Command.types';

package/dist/components/Counter/Counter.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { CounterProps } from './Counter.types';
+/**
+ * A numeric input component with increment/decrement buttons.
+ * Also exported as `NumberInput` for convenience.
+ *
+ * @example
+ * ```tsx
+ * // Basic counter
+ * <Counter
+ *   label="Quantity"
+ *   value={count}
+ *   onChange={({ target }) => setCount(target.value)}
+ * />
+ *
+ * // With min/max limits
+ * <Counter
+ *   label="Number of nodes"
+ *   value={nodes}
+ *   min={1}
+ *   max={10}
+ *   onChange={({ target }) => setNodes(target.value)}
+ * />
+ *
+ * // Disabled increment/decrement
+ * <Counter
+ *   value={5}
+ *   canIncrement={value < max}
+ *   canDecrement={value > min}
+ *   onChange={handleChange}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-counter--docs Storybook}
+ */
+export declare const Counter: FC<CounterProps>;

package/dist/components/Counter/Counter.js

@@ -0,0 +1,211 @@
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { R as j } from "../../index-BKjcReYh.js";
+import m, { forwardRef as g, useId as T, useCallback as N } from "react";
+import { cn as p } from "../../utils/index.js";
+import { labelVariants as W, buttonVariants as k, counterVariants as V } from "./Counter.variants.js";
+import { Typography as M } from "../Typography/Typography.js";
+import { P as a } from "../../index-BOE_3f_Z.js";
+function v() {
+  return v = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, v.apply(this, arguments);
+}
+function R(e, o) {
+  if (e == null) return {};
+  var r = C(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function C(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var O = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = R(e, ["color", "size"]);
+  return /* @__PURE__ */ m.createElement("svg", v({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ m.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+O.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+O.displayName = "Minus";
+function b() {
+  return b = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, b.apply(this, arguments);
+}
+function B(e, o) {
+  if (e == null) return {};
+  var r = D(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function D(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var w = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = B(e, ["color", "size"]);
+  return /* @__PURE__ */ m.createElement("svg", b({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ m.createElement("line", {
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
+  }), /* @__PURE__ */ m.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+w.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+w.displayName = "Plus";
+const K = g(
+  ({
+    canDecrement: e = !0,
+    canIncrement: o = !0,
+    className: r,
+    decrementButtonClassName: t,
+    incrementButtonClassName: n,
+    isRequired: i,
+    label: l,
+    labelWrapperClassName: P,
+    max: y = -1 / 0,
+    min: h = 1 / 0,
+    name: x,
+    theme: z,
+    value: I,
+    onChange: d
+  }, _) => {
+    const E = T(), s = I ?? 0, L = N(() => {
+      let c = 0;
+      h === 1 / 0 ? c = s - 1 : c = Math.max(h, s - 1), d?.({ target: { value: c } });
+    }, [s, h, d]), $ = N(() => {
+      let c = 0;
+      y === -1 / 0 ? c = s + 1 : c = Math.min(y, s + 1), d?.({ target: { value: c } });
+    }, [s, y, d]);
+    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-2", "data-theme": z, children: [
+      l ? /* @__PURE__ */ u("div", { className: p(P), children: /* @__PURE__ */ f(
+        M,
+        {
+          component: "label",
+          htmlFor: x ?? E,
+          variant: "labelLarge",
+          className: p(W()),
+          children: [
+            "Number of nodes",
+            " ",
+            i && /* @__PURE__ */ u("span", { className: "text-red-600 dark:text-red-500", children: "*" })
+          ]
+        }
+      ) }) : null,
+      /* @__PURE__ */ f("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: L,
+            className: p(
+              k({
+                button: "rigth",
+                className: t
+              })
+            ),
+            disabled: !e,
+            children: [
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Decrement" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref: _,
+            type: "number",
+            value: s,
+            name: x,
+            className: p(V({ className: r })),
+            readOnly: !0,
+            "aria-label": typeof l == "string" ? l : "number input"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: $,
+            className: p(
+              k({
+                button: "left",
+                className: n
+              })
+            ),
+            disabled: !o,
+            children: [
+              /* @__PURE__ */ u(w, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Increment" })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  K as Counter
+};

package/dist/components/Counter/Counter.types.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { counterVariants } from './Counter.variants';
+/**
+ * Props for the Counter (NumberInput) component.
+ *
+ * @example
+ * ```tsx
+ * <Counter
+ *   label="Quantity"
+ *   value={quantity}
+ *   min={1}
+ *   max={10}
+ *   onChange={({ target }) => setQuantity(target.value)}
+ * />
+ * ```
+ */
+export interface CounterProps extends VariantProps<typeof counterVariants> {
+    /** Allow decrement button to be clicked */
+    canDecrement?: boolean;
+    /** Allow increment button to be clicked */
+    canIncrement?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** CSS classes for decrement button */
+    decrementButtonClassName?: string;
+    /** CSS classes for increment button */
+    incrementButtonClassName?: string;
+    /** Initial value (deprecated, use value) */
+    init?: number;
+    /** Show required indicator */
+    isRequired?: boolean;
+    /** Label displayed above the counter */
+    label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Maximum allowed value */
+    max?: number;
+    /** Minimum allowed value */
+    min?: number;
+    /** Form field name */
+    name?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Current numeric value */
+    value?: number;
+    /** Callback when value changes */
+    onChange?: ({ target: { value } }: {
+        target: {
+            value: number;
+        };
+    }) => void;
+}

package/dist/components/Counter/Counter.variants.d.ts

@@ -0,0 +1,7 @@
+export declare const counterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonVariants: (props?: ({
+    button?: "left" | "rigth" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Counter/Counter.variants.js

@@ -0,0 +1,70 @@
+import { c as e } from "../../index-D29mdTf5.js";
+const t = e([
+  "[&::-webkit-inner-spin-button]:appearance-none",
+  "[&::-webkit-outer-spin-button]:appearance-none",
+  "[-moz-appearance:textfield]",
+  "appearance-none",
+  "border",
+  "border-x-0",
+  "focus-visible:outline-none",
+  "focus-visible:ring-transparent",
+  "h-9",
+  "max-w-16",
+  "text-right",
+  "px-3",
+  "border-gray-300",
+  "text-slate-800",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50"
+]), r = e(
+  [
+    "h-9",
+    "w-9",
+    "flex",
+    "items-center",
+    "justify-center",
+    "border",
+    "text-slate-500",
+    "border-gray-300",
+    "bg-white",
+    "cursor-pointer",
+    "hover:bg-aurora-50",
+    "hover:text-slate-600",
+    "disabled:hover:bg-white",
+    "disabled:bg-white",
+    "disabled:text-slate-400",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "dark:text-aurora-500",
+    "dark:hover:bg-aurora-900",
+    "dark:hover:text-aurora-500",
+    "dark:disabled:text-metal-400",
+    "dark:disabled:hover:bg-metal-800",
+    "dark:disabled:bg-metal-800",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      button: {
+        left: ["rounded-e"],
+        rigth: ["rounded-s"]
+      }
+    }
+  }
+), o = e(["cursor-pointer"], {
+  variants: {
+    variant: {
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  r as buttonVariants,
+  t as counterVariants,
+  o as labelVariants
+};