@konstructio/ui 0.0.2

package/dist/components/NumberInput/NumberInput.variants.js

@@ -0,0 +1,78 @@
+import { c as e } from "../../index-BwYCDOHZ.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",
+    "p-1",
+    "text-center"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: ["border-red-700", "text-red-700"],
+        kubefirst: [
+          "border-kubefirst-purple-light",
+          "text-kubefirst-purple-light"
+        ],
+        konstruct: ["border-orange-500", "text-orange-500"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), n = e(
+  ["p-2", "items-center", "justify-center", "border"],
+  {
+    variants: {
+      theme: {
+        colony: ["border-red-700", "text-red-700", "hover:bg-red-50"],
+        kubefirst: [
+          "border-kubefirst-purple-light",
+          "text-kubefirst-purple-light",
+          "hover:text-kubefirst-purple-dark",
+          "hover:border-kubefirst-purple-dark",
+          "hover:bg-purple-100"
+        ],
+        konstruct: [
+          "border-orange-500",
+          "text-orange-500",
+          "hover:bg-orange-50"
+        ]
+      },
+      button: {
+        left: ["rounded-e-sm"],
+        rigth: ["rounded-s-sm"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), a = e(["pl-1", "text-base", "cursor-pointer"], {
+  variants: {
+    variant: {
+      default: ""
+    },
+    theme: {
+      kubefirst: "",
+      konstruct: "",
+      colony: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    theme: "kubefirst"
+  }
+});
+export {
+  n as buttonVariants,
+  a as labelVariants,
+  t as numberInputVariants
+};

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ProgressBarProps } from './ProgressBar.types';
+export declare const ProgressBar: FC<ProgressBarProps>;

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,37 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import "../../contexts/theme.context.js";
+import { useTheme as l } from "../../contexts/theme.hook.js";
+import "react";
+import "../../js.cookie-OLEfuq_g.js";
+import { cn as t } from "../../utils/index.js";
+import { progressBarVariants as d, progressBarProgress as c } from "./ProgressBar.variants.js";
+const j = ({
+  label: r,
+  theme: m,
+  percent: s,
+  status: n
+}) => {
+  const { theme: a } = l(), o = m ?? a;
+  return /* @__PURE__ */ e("div", { className: "w-full", children: [
+    /* @__PURE__ */ e("div", { className: t("flex", r ? "justify-between" : "justify-end"), children: [
+      r ? /* @__PURE__ */ i("label", { className: "font-semibold", children: r }) : null,
+      /* @__PURE__ */ e("span", { className: "font-semibold", children: [
+        s,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { className: d({ theme: o }), children: /* @__PURE__ */ i(
+      "div",
+      {
+        className: t(
+          c({ theme: o, status: n }),
+          s > 0 && s < 99 ? "transition-width duration-500" : "transition-colors duration-0"
+        ),
+        style: { width: `${s}%` }
+      }
+    ) })
+  ] });
+};
+export {
+  j as ProgressBar
+};

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

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { progressBarVariants } from './ProgressBar.variants';
+export interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
+    className?: string;
+    label?: string;
+    percent: number;
+    status?: 'success' | 'progress';
+}

package/dist/components/ProgressBar/ProgressBar.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,7 @@
+export declare const progressBarVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const progressBarProgress: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    status?: "progress" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ProgressBar/ProgressBar.variants.js

@@ -0,0 +1,62 @@
+import { c as s } from "../../index-BwYCDOHZ.js";
+const e = s(
+  ["h-2", "rounded-full", "overflow-hidden", "mt-4", "bg-zinc-200"],
+  {
+    variants: {
+      theme: {
+        konstruct: "",
+        kubefirst: "",
+        colony: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), r = s(
+  ["h-full", "bg-[length:100%_100%]", "animate-gradient-move"],
+  {
+    variants: {
+      theme: {
+        konstruct: "",
+        kubefirst: "",
+        colony: ""
+      },
+      status: {
+        success: "",
+        progress: "",
+        error: ""
+      }
+    },
+    compoundVariants: [
+      {
+        status: "progress",
+        theme: "kubefirst",
+        class: ["bg-kubefirst-gradient"]
+      },
+      {
+        status: "success",
+        theme: "kubefirst",
+        class: ["bg-[#81E2B4]"]
+      },
+      {
+        status: "progress",
+        theme: "konstruct",
+        class: ["bg-kubefirst-gradient"]
+      },
+      {
+        status: "progress",
+        theme: "colony",
+        class: ["bg-kubefirst-gradient"]
+      }
+    ],
+    defaultVariants: {
+      theme: "kubefirst",
+      status: "success"
+    }
+  }
+);
+export {
+  r as progressBarProgress,
+  e as progressBarVariants
+};

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RadioProps } from './Radio.types';
+export declare const Radio: FC<RadioProps>;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,58 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { forwardRef as x, useId as N, useCallback as b } from "react";
+import "../../contexts/theme.context.js";
+import { useTheme as j } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { radioVariants as F } from "./Radio.variants.js";
+const I = x(
+  ({
+    checked: i = !1,
+    className: m,
+    defaultChecked: a,
+    label: l,
+    name: s,
+    theme: c,
+    value: t,
+    onChange: e
+  }, d) => {
+    const p = N(), { theme: n } = j(), o = `${p}-${s}`, f = b(
+      (h) => {
+        e == null || e(h);
+      },
+      [e]
+    );
+    return /* @__PURE__ */ u(
+      "label",
+      {
+        htmlFor: o,
+        className: "inline-flex items-center cursor-pointer",
+        children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: d,
+              id: o,
+              type: "radio",
+              name: s,
+              value: t,
+              checked: i,
+              defaultChecked: a,
+              className: "hidden peer",
+              onChange: () => f(t)
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: F({ className: m, theme: c ?? n })
+            }
+          ),
+          /* @__PURE__ */ r("span", { className: "ml-2", children: l })
+        ]
+      }
+    );
+  }
+);
+export {
+  I as Radio
+};

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

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes } from 'react';
+import { radioVariants } from './Radio.variants';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, VariantProps<typeof radioVariants> {
+    checked?: boolean;
+    color?: string;
+    defaultChecked?: boolean;
+    label?: string;
+    name: string;
+    value: string;
+    onChange?: (value: string) => void;
+}

package/dist/components/Radio/Radio.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+export declare const radioVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,49 @@
+import { c as e } from "../../index-BwYCDOHZ.js";
+const o = e(
+  [
+    "border-2",
+    "border-gray-400",
+    "duration-300",
+    "h-4",
+    "inline-block",
+    "rounded-full",
+    "transition-all",
+    "w-4",
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "before:content-['']",
+    "before:rounded-full",
+    "before:w-0",
+    "before:h-0",
+    "before:duration-100",
+    "before:transition-all",
+    "peer-checked:before:h-[70%]",
+    "peer-checked:before:w-[70%]"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: [
+          "peer-checked:border-red-700",
+          "peer-checked:before:bg-red-700"
+        ],
+        kubefirst: [
+          "peer-checked:border-kubefirst-purple-light",
+          "peer-checked:before:bg-kubefirst-purple-light"
+        ],
+        konstruct: [
+          "peer-checked:border-orange-600",
+          "peer-checked:before:bg-orange-600"
+        ]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  o as radioVariants
+};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RadioGroupProps } from './RadioGroup.types';
+export declare const RadioGroup: FC<RadioGroupProps>;

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,37 @@
+import { jsx as m, Fragment as n } from "react/jsx-runtime";
+import { useState as k, useCallback as l } from "react";
+import { S as R } from "../../index-CCavb-1K.js";
+import "../../contexts/theme.context.js";
+import { useTheme as T } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { Radio as b } from "../Radio/Radio.js";
+const z = ({
+  options: o,
+  theme: r,
+  name: c,
+  asChild: s,
+  defaultValue: i,
+  onValueChange: e
+}) => {
+  const p = s ? R : "div", { theme: d } = T(), [f, S] = k(i), h = l(
+    (t) => {
+      S(t), e == null || e(t);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ m(p, { className: "flex gap-2", children: /* @__PURE__ */ m(n, { children: o.map(({ value: t, ...x }) => /* @__PURE__ */ m(
+    b,
+    {
+      value: t,
+      theme: r ?? d,
+      name: c,
+      checked: f === t,
+      onChange: () => h(t),
+      ...x
+    },
+    t
+  )) }) });
+};
+export {
+  z as RadioGroup
+};

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

@@ -0,0 +1,11 @@
+import { RadioProps } from '../Radio/Radio.types';
+export interface RadioGroupProps {
+    label?: string;
+    name: string;
+    options: Omit<RadioProps, 'name'>[];
+    asChild?: boolean;
+    theme?: RadioProps['theme'];
+    className?: RadioProps['className'];
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}

package/dist/components/RadioGroup/RadioGroup.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RangeProps } from './Range.types';
+export declare const Range: FC<RangeProps>;

package/dist/components/Range/Range.js

@@ -0,0 +1,70 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as R, useRef as V, useState as v, useImperativeHandle as T, useEffect as b, useCallback as j } from "react";
+import { R as k, T as w, a as y, b as l } from "../../index-DFbnnPzA.js";
+import { cn as C } from "../../utils/index.js";
+import "../../contexts/theme.context.js";
+import { useTheme as S } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { rangeVariants as $, trackVariants as E, rangeOutsideVariants as H, thumbVariants as c } from "./Range.variants.js";
+const J = R(
+  ({
+    label: n,
+    defaultValue: i = [0, 100],
+    name: o,
+    theme: u,
+    size: m,
+    showValue: h,
+    ...f
+  }, d) => {
+    const t = V(null), [a, p] = v(i), { theme: x } = S(), s = u ?? x;
+    T(d, () => t.current, [t]), b(() => {
+      t.current && (t.current.value = `[${a.toString()}]`);
+    }, [a]);
+    const N = j(
+      (g) => p(g),
+      []
+    );
+    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: C(
+            "flex items-center",
+            n ? "justify-between" : "justify-end"
+          ),
+          children: [
+            n ? /* @__PURE__ */ e("label", { children: n }) : null,
+            h ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
+              a[0],
+              " - ",
+              a[1]
+            ] }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("input", { ref: t, name: o, className: "hidden", type: "text" }),
+      /* @__PURE__ */ r(
+        k,
+        {
+          value: a,
+          className: $({ theme: s }),
+          onValueChange: N,
+          ...f,
+          children: [
+            /* @__PURE__ */ e(w, { className: E({ theme: s, size: m }), children: /* @__PURE__ */ e(
+              y,
+              {
+                className: H({ theme: s })
+              }
+            ) }),
+            /* @__PURE__ */ e(l, { className: c({ theme: s, size: m }) }),
+            /* @__PURE__ */ e(l, { className: c({ theme: s, size: m }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+export {
+  J as Range
+};

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { SliderProps as SliderPropsBase } from '@radix-ui/react-slider';
+import { rangeVariants } from './Range.variants';
+export interface RangeProps extends VariantProps<typeof rangeVariants> {
+    className?: string;
+    defaultValue?: SliderPropsBase['defaultValue'];
+    label?: string;
+    max?: SliderPropsBase['max'];
+    min?: SliderPropsBase['min'];
+    name?: string;
+    showValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}

package/dist/components/Range/Range.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,14 @@
+export declare const rangeVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const rangeOutsideVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const trackVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Range/Range.variants.js

@@ -0,0 +1,93 @@
+import { c as e } from "../../index-BwYCDOHZ.js";
+const r = e(
+  [
+    "relative",
+    "flex",
+    "items-center",
+    "w-full",
+    "border",
+    "border-gray-200",
+    "rounded-full",
+    "shadow-sm"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        konstruct: "",
+        colony: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), s = e(["absolute", "h-full"], {
+  variants: {
+    theme: {
+      kubefirst: ["bg-kubefirst-purple-dark"],
+      konstruct: ["bg-orange-500"],
+      colony: ["bg-red-500"]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst"
+  }
+}), a = e(
+  ["relative", "flex-grow", "bg-gray-100", "rounded-full"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        konstruct: "",
+        colony: ""
+      },
+      size: {
+        sm: ["h-1"],
+        md: ["h-2"],
+        lg: ["h-3"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst",
+      size: "md"
+    }
+  }
+), o = e(
+  [
+    "block",
+    "w-5",
+    "h-5",
+    "rounded-full",
+    "cursor-pointer",
+    "focus-visible:outline-none",
+    "shadow-md",
+    "bg-white",
+    "border",
+    "border-gray-300"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        konstruct: "",
+        colony: ""
+      },
+      size: {
+        sm: ["w-5", "h-5"],
+        md: ["w-6", "h-6"],
+        lg: ["w-7", "h-7"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst",
+      size: "md"
+    }
+  }
+);
+export {
+  s as rangeOutsideVariants,
+  r as rangeVariants,
+  o as thumbVariants,
+  a as trackVariants
+};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SliderProps } from './Slider.types';
+export declare const Slider: FC<SliderProps>;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,52 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as N, useRef as v, useState as T, useImperativeHandle as V, useEffect as b, useCallback as R } from "react";
+import { R as g, T as j, b as k } from "../../index-DFbnnPzA.js";
+import "../../contexts/theme.context.js";
+import { useTheme as w } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { cn as y } from "../../utils/index.js";
+import { sliderVariants as C, trackVariants as S, thumbVariants as E } from "./Slider.variants.js";
+const J = N(
+  ({ label: a, defaultValue: m = [0], name: i, theme: c, size: l, showValue: o, ...u }, f) => {
+    const e = v(null), [r, h] = T(m), { theme: d } = w(), s = c ?? d;
+    V(f, () => e.current, [e]), b(() => {
+      e.current && (e.current.value = r.toString());
+    }, [r]);
+    const p = R(
+      (x) => h(x),
+      []
+    );
+    return /* @__PURE__ */ n("div", { className: "w-full relative flex flex-col gap-3", children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: y(
+            "flex items-center",
+            a ? "justify-between" : "justify-end"
+          ),
+          children: [
+            a ? /* @__PURE__ */ t("label", { children: a }) : null,
+            o ? /* @__PURE__ */ t("span", { className: "text-xs", children: r }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("input", { ref: e, name: i, className: "hidden", type: "number" }),
+      /* @__PURE__ */ n(
+        g,
+        {
+          value: r,
+          className: C({ theme: s }),
+          onValueChange: p,
+          ...u,
+          children: [
+            /* @__PURE__ */ t(j, { className: S({ theme: s, size: l }) }),
+            /* @__PURE__ */ t(k, { className: E({ theme: s, size: l }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+export {
+  J as Slider
+};

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { SliderProps as SliderPropsBase } from '@radix-ui/react-slider';
+import { sliderVariants } from './Slider.variants';
+export interface SliderProps extends VariantProps<typeof sliderVariants> {
+    className?: string;
+    defaultValue?: SliderPropsBase['defaultValue'];
+    label?: string;
+    max?: SliderPropsBase['max'];
+    min?: SliderPropsBase['min'];
+    name?: string;
+    showValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}

package/dist/components/Slider/Slider.types.js

@@ -0,0 +1 @@
+