@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Radio/Radio.variants.js

@@ -1,92 +1,90 @@
-import { c as e } from "../../index-D29mdTf5.js";
-const a = e(
-  ["inline-flex", "items-center", "cursor-pointer", "gap-2", "w-max"],
-  {
-    variants: {
-      disabled: {
-        true: ["cursor-not-allowed"],
-        false: ["cursor-pointer"]
-      }
+import { t as e } from "../../dist-DtEbXv47.js";
+var a = e([
+  "inline-flex",
+  "items-center",
+  "cursor-pointer",
+  "gap-2",
+  "w-max"
+], {
+  variants: { disabled: {
+    true: ["cursor-not-allowed"],
+    false: ["cursor-pointer"]
+  } },
+  defaultVariants: { disabled: !1 }
+}), o = e([
+  "border",
+  "border-zinc-400",
+  "dark:border-metal-600",
+  "duration-300",
+  "inline-block",
+  "rounded-full",
+  "transition-all",
+  "flex",
+  "flex-col",
+  "items-center",
+  "justify-center",
+  "before:content-['']",
+  "before:rounded-full",
+  "before:w-0",
+  "before:h-0",
+  "before:duration-100",
+  "before:transition-all",
+  "h-4",
+  "w-4",
+  "peer-checked:before:h-[70%]",
+  "peer-checked:before:w-[70%]"
+], {
+  variants: {
+    disabled: {
+      true: "",
+      false: ""
     },
-    defaultVariants: {
-      disabled: !1
+    checked: {
+      true: "",
+      false: ""
     }
-  }
-), o = e(
-  [
-    "border",
-    "border-gray-300",
-    "duration-300",
-    "inline-block",
-    "rounded-full",
-    "transition-all",
-    "flex",
-    "flex-col",
-    "items-center",
-    "justify-center",
-    "before:content-['']",
-    "before:rounded-full",
-    "before:w-0",
-    "before:h-0",
-    "before:duration-100",
-    "before:transition-all",
-    "h-4",
-    "w-4",
-    "peer-checked:before:h-[70%]",
-    "peer-checked:before:w-[70%]"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      },
-      checked: {
-        true: "",
-        false: ""
-      }
+  },
+  compoundVariants: [
+    {
+      disabled: !1,
+      checked: [!0, !1],
+      class: [
+        "kubefirst:peer-checked:border-kubefirst-primary",
+        "kubefirst:peer-checked:before:bg-kubefirst-primary",
+        "peer-checked:border-aurora-500",
+        "peer-checked:before:bg-aurora-500"
+      ]
+    },
+    {
+      disabled: !0,
+      checked: !0,
+      class: [
+        "peer-checked:border-zinc-300",
+        "peer-checked:before:bg-zinc-300",
+        "cursor-not-allowed",
+        "[&+span]:cursor-not-allowed",
+        "dark:peer-checked:before:bg-aurora-500/50",
+        "dark:peer-checked:border-aurora-500/50"
+      ]
     },
-    compoundVariants: [
-      {
-        disabled: !1,
-        checked: [!0, !1],
-        class: [
-          "kubefirst:peer-checked:border-kubefirst-primary",
-          "kubefirst:peer-checked:before:bg-kubefirst-primary",
-          "peer-checked:border-aurora-500",
-          "peer-checked:before:bg-aurora-500"
-        ]
-      },
-      {
-        disabled: !0,
-        checked: !0,
-        class: [
-          "peer-checked:border-gray-300",
-          "peer-checked:before:bg-gray-300",
-          "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed"
-        ]
-      },
-      {
-        disabled: !0,
-        checked: !1,
-        class: [
-          "peer-checked:border-gray-200",
-          "peer-checked:border-gray-200",
-          "peer-checked:before:bg-gray-200",
-          "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed",
-          "bg-gray-50"
-        ]
-      }
-    ],
-    defaultVariants: {
-      disabled: !1
+    {
+      disabled: !0,
+      checked: !1,
+      class: [
+        "peer-checked:border-zinc-300",
+        "peer-checked:before:bg-zinc-50",
+        "cursor-not-allowed",
+        "[&+span]:cursor-not-allowed",
+        "bg-gray-50",
+        "dark:bg-metal-800",
+        "dark:bg-metal-800"
+      ]
     }
-  }
-), c = e(["text-sm", "text-zinc-700"]);
+  ],
+  defaultVariants: { disabled: !1 }
+}), d = e(["text-sm", "text-zinc-700"]);
 export {
-  c as labelRadioVariants,
+  d as labelRadioVariants,
   o as radioVariants,
   a as wrapperRadioVariants
 };

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Props } from './RadioCard.types';
+/**
+ * A card-style radio button for visually prominent selection options.
+ * Use RadioCardGroup to manage a group of radio cards.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="tier"
+ *   value="enterprise"
+ *   label="Enterprise"
+ *   description="Custom pricing"
+ *   checked={tier === 'enterprise'}
+ *   onChange={(value) => setTier(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocard--docs Storybook}
+ */
+declare const RadioCard: FC<Props>;
+export { RadioCard };

package/dist/components/RadioCard/RadioCard.js

@@ -1,37 +1,20 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as a } from "../../utils/index.js";
+import { t as a } from "../../utils-DHuiYnx1.js";
 import { Card as d } from "../Card/Card.js";
 import { Radio as l } from "../Radio/Radio.js";
 import { radioCardVariants as e } from "./RadioCard.variants.js";
-const f = ({
-  wrapperClassName: r,
-  theme: i,
-  labelWrapperClassName: t,
-  checked: o,
-  description: s,
-  ...p
-}) => /* @__PURE__ */ m(
-  d,
-  {
-    "data-theme": i,
-    className: a(
-      e({
-        className: r
-      })
-    ),
-    wrapperClassName: a("w-max", r),
-    isActive: o,
-    children: /* @__PURE__ */ m(
-      l,
-      {
-        wrapperClassName: a("w-full h-full p-3 gap-3", t),
-        checked: o,
-        description: s,
-        ...p
-      }
-    )
-  }
-);
+import { jsx as o } from "react/jsx-runtime";
+var f = ({ wrapperClassName: r, theme: i, labelWrapperClassName: t, checked: m, description: s, ...p }) => /* @__PURE__ */ o(d, {
+  "data-theme": i,
+  className: a(e({ className: r })),
+  wrapperClassName: a("w-max", r),
+  isActive: m,
+  children: /* @__PURE__ */ o(l, {
+    wrapperClassName: a("w-full h-full p-3 gap-3", t),
+    checked: m,
+    description: s,
+    ...p
+  })
+});
 f.displayName = "KonstructRadioCard";
 export {
   f as RadioCard

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

@@ -0,0 +1,25 @@
+import { Theme } from '../../domain/theme';
+import { Props as CardProps } from '../Card/Card.types';
+import { Props as RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioCard component.
+ * Combines Card styling with Radio functionality.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="plan"
+ *   value="pro"
+ *   label="Pro Plan"
+ *   description="$29/month"
+ *   checked={selected === 'pro'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export type Props = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+    labelWrapperClassName?: string;
+    theme?: Theme;
+};
+/** @deprecated Use Props instead */
+export type RadioCardProps = Props;

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

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

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,9 +1,9 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
+import { t as r } from "../../dist-DtEbXv47.js";
+var e = r([
   "flex",
   "items-center",
   "p-0",
-  "border-2"
+  "border"
 ]);
 export {
   e as radioCardVariants

package/dist/components/RadioCardGroup/RadioCardGroup.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Props } from './RadioCardGroup.types';
+/**
+ * A group of card-style radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="plan"
+ *   direction="row"
+ *   options={[
+ *     { value: 'starter', label: 'Starter', description: 'For individuals' },
+ *     { value: 'team', label: 'Team', description: 'For small teams' },
+ *     { value: 'business', label: 'Business', description: 'For organizations' },
+ *   ]}
+ *   defaultChecked="team"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocardgroup--docs Storybook}
+ */
+export declare const RadioCardGroup: FC<Props>;

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -1,45 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as C, useCallback as N } from "react";
-import { cn as t } from "../../utils/index.js";
-import { RadioCard as S } from "../RadioCard/RadioCard.js";
-import { radioCardGroupVariants as k } from "./RadioCardGroup.variants.js";
-const g = ({
-  className: a,
-  defaultChecked: m,
-  direction: s,
-  name: c,
-  options: d,
-  theme: i,
-  wrapperClassName: p,
-  onValueChange: e
-}) => {
-  const [n, f] = C(m), l = N(
-    (r) => {
-      f(r), e?.(r);
-    },
-    [e]
-  );
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: t(
-        k({ className: p, direction: s })
-      ),
-      "data-theme": i,
-      children: d.map(({ value: r, ...h }) => /* @__PURE__ */ o(
-        S,
-        {
-          value: r,
-          name: c,
-          className: t(a),
-          checked: n === r,
-          onChange: () => l(r),
-          ...h
-        },
-        r
-      ))
-    }
-  );
+import { t } from "../../utils-DHuiYnx1.js";
+import { RadioCard as C } from "../RadioCard/RadioCard.js";
+import { radioCardGroupVariants as N } from "./RadioCardGroup.variants.js";
+import { useCallback as S, useState as k } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var g = ({ className: o, defaultChecked: m, direction: s, name: d, options: c, theme: i, wrapperClassName: p, onValueChange: e }) => {
+  const [n, f] = k(m), l = S((r) => {
+    f(r), e?.(r);
+  }, [e]);
+  return /* @__PURE__ */ a("div", {
+    className: t(N({
+      className: p,
+      direction: s
+    })),
+    "data-theme": i,
+    children: c.map(({ value: r, ...h }) => /* @__PURE__ */ a(C, {
+      value: r,
+      name: d,
+      className: t(o),
+      checked: n === r,
+      onChange: () => l(r),
+      ...h
+    }, r))
+  });
 };
 export {
   g as RadioCardGroup

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

@@ -0,0 +1,32 @@
+import { Theme } from '../../domain/theme';
+import { Props as RadioCardProps } from '../RadioCard/RadioCard.types';
+/**
+ * Props for the RadioCardGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="pricing"
+ *   options={[
+ *     { value: 'basic', label: 'Basic', description: '$9/mo' },
+ *     { value: 'pro', label: 'Pro', description: '$29/mo' },
+ *     { value: 'enterprise', label: 'Enterprise', description: 'Custom' },
+ *   ]}
+ *   defaultChecked="pro"
+ *   onValueChange={(value) => setTier(value)}
+ * />
+ * ```
+ */
+export type Props = {
+    asChild?: boolean;
+    className?: string;
+    defaultChecked?: string;
+    direction?: 'row' | 'col';
+    name: string;
+    options: Omit<RadioCardProps, 'name' | 'checked' | 'defaultChecked'>[];
+    theme?: Theme;
+    wrapperClassName?: string;
+    onValueChange?: (value: string) => void;
+};
+/** @deprecated Use Props instead */
+export type RadioCardGroupProps = Props;

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

@@ -0,0 +1,3 @@
+export declare const radioCardGroupVariants: (props?: ({
+    direction?: "row" | "col" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/RadioCardGroup/RadioCardGroup.variants.js

@@ -1,15 +1,11 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const r = a(["flex"], {
-  variants: {
-    direction: {
-      row: ["flex-row", "gap-8"],
-      col: ["flex-col", "gap-4"]
-    }
-  },
-  defaultVariants: {
-    direction: "col"
-  }
+import { t as a } from "../../dist-DtEbXv47.js";
+var o = a(["flex"], {
+  variants: { direction: {
+    row: ["flex-row", "gap-8"],
+    col: ["flex-col", "gap-4"]
+  } },
+  defaultVariants: { direction: "col" }
 });
 export {
-  r as radioCardGroupVariants
+  o as radioCardGroupVariants
 };

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { Props } from './RadioGroup.types';
+/**
+ * A group of radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * // Vertical layout (default)
+ * <RadioGroup
+ *   name="subscription"
+ *   options={[
+ *     { value: 'monthly', label: 'Monthly', description: '$10/mo' },
+ *     { value: 'yearly', label: 'Yearly', description: '$100/yr' },
+ *   ]}
+ *   defaultChecked="monthly"
+ *   onValueChange={(value) => setSubscription(value)}
+ * />
+ *
+ * // Horizontal layout
+ * <RadioGroup
+ *   name="size"
+ *   direction="row"
+ *   options={[
+ *     { value: 'sm', label: 'Small' },
+ *     { value: 'md', label: 'Medium' },
+ *     { value: 'lg', label: 'Large' },
+ *   ]}
+ *   onValueChange={setSize}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiogroup--docs Storybook}
+ */
+export declare const RadioGroup: FC<Props>;

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,50 +1,29 @@
-import { jsx as e } from "react/jsx-runtime";
-import { S as k } from "../../index-DQH6odE9.js";
-import { useState as x, useCallback as C } from "react";
-import { cn as r } from "../../utils/index.js";
-import { Radio as G } from "../Radio/Radio.js";
-import { radioGroupVariants as R } from "./RadioGroup.variants.js";
-const y = ({
-  asChild: m,
-  className: s,
-  defaultChecked: c,
-  name: a,
-  options: i,
-  theme: d,
-  wrapperClassName: n,
-  direction: p,
-  onValueChange: t
-}) => {
-  const f = m ? k : "div", [l, S] = x(
-    () => c
-  ), h = C(
-    (o) => {
-      S(o), t?.(o);
-    },
-    [t]
-  );
-  return /* @__PURE__ */ e(
-    f,
-    {
-      className: r(
-        R({ className: n, direction: p })
-      ),
-      "data-theme": d,
-      children: i.map(({ value: o, ...N }) => /* @__PURE__ */ e(
-        G,
-        {
-          value: o,
-          name: a,
-          className: r(s),
-          checked: l === o,
-          onChange: () => h(o),
-          ...N
-        },
-        o
-      ))
-    }
-  );
+import { t as G } from "../../dist-DXJSck4j.js";
+import { t as s } from "../../utils-DHuiYnx1.js";
+import { Radio as R } from "../Radio/Radio.js";
+import { radioGroupVariants as b } from "./RadioGroup.variants.js";
+import { useCallback as j, useState as I } from "react";
+import { jsx as m } from "react/jsx-runtime";
+var D = ({ asChild: a, className: c, defaultChecked: i, direction: n, name: d, options: p, theme: l, value: e, wrapperClassName: f, onValueChange: r }) => {
+  const S = a ? G : "div", o = e !== void 0, [h, C] = I(() => i), N = o ? e : h, k = j((t) => {
+    o || C(t), r?.(t);
+  }, [o, r]);
+  return /* @__PURE__ */ m(S, {
+    className: s(b({
+      className: f,
+      direction: n
+    })),
+    "data-theme": l,
+    children: p.map(({ value: t, ...x }) => /* @__PURE__ */ m(R, {
+      value: t,
+      name: d,
+      className: s(c),
+      checked: N === t,
+      onChange: () => k(t),
+      ...x
+    }, t))
+  });
 };
 export {
-  y as RadioGroup
+  D as RadioGroup
 };

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { Props as RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise' },
+ *   ]}
+ *   defaultChecked="basic"
+ *   onValueChange={(value) => setPlan(value)}
+ * />
+ * ```
+ */
+export interface Props {
+    /** Merge props onto child element */
+    asChild?: boolean;
+    /** CSS classes for each radio option */
+    className?: RadioProps['className'];
+    /** Initially selected value (uncontrolled mode) */
+    defaultChecked?: string;
+    /** Layout direction (row or col) */
+    direction?: 'row' | 'col';
+    /** Label for the group */
+    label?: string | ReactNode;
+    /** Form field name (shared by all radios) */
+    name: string;
+    /** Array of radio options */
+    options: Omit<RadioProps, 'name' | 'checked' | 'defaultChecked'>[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+}
+/** @deprecated Use Props instead */
+export type RadioGroupProps = Props;

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

@@ -0,0 +1,3 @@
+export declare const radioGroupVariants: (props?: ({
+    direction?: "row" | "col" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/RadioGroup/RadioGroup.variants.js

@@ -1,15 +1,11 @@
-import { c as o } from "../../index-D29mdTf5.js";
-const r = o(["flex"], {
-  variants: {
-    direction: {
-      row: ["flex-row", "gap-8"],
-      col: ["flex-col", "gap-4"]
-    }
-  },
-  defaultVariants: {
-    direction: "col"
-  }
+import { t as a } from "../../dist-DtEbXv47.js";
+var o = a(["flex"], {
+  variants: { direction: {
+    row: ["flex-row", "gap-8"],
+    col: ["flex-col", "gap-4"]
+  } },
+  defaultVariants: { direction: "col" }
 });
 export {
-  r as radioGroupVariants
+  o as radioGroupVariants
 };

package/dist/components/Range/Range.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } from './Range.types';
+/**
+ * A dual-thumb slider component for selecting a value range.
+ * Built on Radix UI Slider for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Budget"
+ *   min={0}
+ *   max={10000}
+ *   defaultValue={[2000, 8000]}
+ *   showValue
+ *   name="budget"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-range--docs Storybook}
+ */
+export declare const Range: FC<Props>;