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

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

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { triggerVariants } from './Tabs.variants';
+import { Theme } from '../../domain/theme';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * Props for the Tabs component.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="tab1" label="Tab 1" isActive />
+ *     <Tabs.Trigger tab="tab2" label="Tab 2" isActive={false} />
+ *   </Tabs.List>
+ *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ * </Tabs>
+ * ```
+ */
+export interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/**
+ * Props for Tabs.Trigger component.
+ */
+export interface TriggerProps extends VariantProps<typeof triggerVariants>, React.HTMLAttributes<HTMLDivElement> {
+    /** Tab value identifier */
+    tab: string;
+    /** Display label for the tab */
+    label: string;
+    /** Whether this tab is active */
+    isActive: boolean;
+}
+/**
+ * Props for Tabs.List component.
+ */
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    /** Tab list orientation */
+    orientation: 'horizontal' | 'vertical';
+}

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

@@ -0,0 +1,12 @@
+export declare const rootVariants: (props?: ({
+    variant?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const contentVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const listVariants: (props?: ({
+    variant?: "default" | "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const triggerVariants: (props?: ({
+    variant?: "default" | "active" | "inactive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tabs/Tabs.variants.js

@@ -40,7 +40,7 @@ const r = t([""], {
     "after:bottom-0",
     "after:left-0",
     "after:right-0",
-    "after:h-[2px]",
+    "after:h-0.5",
     "after:bg-aurora-500",
     "after:origin-bottom",
     'after:content-[""]',
@@ -59,9 +59,10 @@ const r = t([""], {
           "text-zinc-700",
           "font-semibold",
           "after:scale-y-100",
-          "hover:after:scale-y-140"
+          "hover:after:scale-y-140",
+          "dark:text-metal-100"
         ],
-        inactive: "text-slate-500 font-[600]"
+        inactive: ["text-slate-500", "font-semibold", "dark:text-metal-400"]
       }
     },
     defaultVariants: {

package/dist/components/Tabs/components/Content.d.ts

@@ -0,0 +1,4 @@
+import { TabsContentProps } from '@radix-ui/react-tabs';
+import { FC } from 'react';
+declare const Content: FC<TabsContentProps>;
+export { Content };

package/dist/components/Tabs/components/Content.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { C as a } from "../../../index-DQJhMz8c.js";
+import { C as a } from "../../../index-Cmf-IG4l.js";
 import { cn as m } from "../../../utils/index.js";
 import { contentVariants as s } from "../Tabs.variants.js";
 const e = ({ children: t, className: o, ...n }) => /* @__PURE__ */ r(

package/dist/components/Tabs/components/List.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ListProps } from '../Tabs.types';
+declare const List: FC<ListProps>;
+export { List };

package/dist/components/Tabs/components/List.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { L as n } from "../../../index-DQJhMz8c.js";
+import { L as n } from "../../../index-Cmf-IG4l.js";
 import { cn as a } from "../../../utils/index.js";
 import { listVariants as s } from "../Tabs.variants.js";
 const c = ({

package/dist/components/Tabs/components/Trigger.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TriggerProps } from '../Tabs.types';
+declare const Trigger: FC<TriggerProps>;
+export { Trigger };

package/dist/components/Tabs/components/Trigger.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { T as e } from "../../../index-DQJhMz8c.js";
+import { T as e } from "../../../index-Cmf-IG4l.js";
 import { Typography as m } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
 import { triggerVariants as p } from "../Tabs.variants.js";

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

@@ -0,0 +1,3 @@
+export * from './Content';
+export * from './List';
+export * from './Trigger';

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TagProps } from './Tag.types';
+/**
+ * A small label component for categorization, status display, or filtering.
+ * Supports multiple color variants and optional icons.
+ *
+ * @example
+ * ```tsx
+ * <Tag id="1" label="New" color="green" />
+ * <Tag id="2" label="Pending" color="gold" leftIcon={<Clock />} />
+ * <Tag id="3" label="Error" color="pink" rightIcon={<X />} />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tag--docs Storybook}
+ */
+export declare const Tag: FC<TagProps>;

package/dist/components/Tag/Tag.js

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { S as r } from "../../index-DQH6odE9.js";
+import { S as r } from "../../index-BvoZGpli.js";
 import { cn as o } from "../../utils/index.js";
 import { tagVariants as c } from "./Tag.variants.js";
 const u = ({

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Tag component.
+ * A small label component for categorization or status display.
+ *
+ * @example
+ * ```tsx
+ * <Tag
+ *   id="status-active"
+ *   label="Active"
+ *   color="green"
+ *   leftIcon={<CheckIcon />}
+ * />
+ * ```
+ */
+export type TagProps = {
+    /** Color variant for the tag */
+    color?: 'gray' | 'gray-800' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    /** Unique identifier for the tag */
+    id: string | number;
+    /** Text displayed in the tag */
+    label: string;
+    /** Icon displayed after the label */
+    rightIcon?: ReactNode;
+    /** Icon displayed before the label */
+    leftIcon?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Data attribute for the tag value */
+    'data-value'?: string;
+    /** Whether the tag is in a selected state */
+    isSelected?: boolean;
+};

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

@@ -0,0 +1,3 @@
+export declare const tagVariants: (props?: ({
+    color?: "default" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "pink" | "purple" | "gray-800" | "light blue" | "emerald" | "fuscia" | "light-orange" | "dark-sky-blue" | "mistery" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tag/Tag.variants.js

@@ -15,6 +15,7 @@ const f = e(
     variants: {
       color: {
         gray: ["bg-[#f4f4f5]", "text-[#71717a]"],
+        "gray-800": ["bg-gray-100", "text-gray-800"],
         cyan: ["bg-[#ecfeff]", "text-[#0e7490]"],
         gold: ["bg-[#fef9c3]", "text-[#a16207]"],
         green: ["bg-[#dcfce7]", "text-[#15803d]"],

package/dist/components/TagSelect/TagSelect.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { TagSelectProps } from './TagSelect.types';
+/**
+ * An input component for selecting from a list of tag options.
+ * Supports single and multi-selection modes.
+ *
+ * @example
+ * ```tsx
+ * <TagSelect
+ *   label="Skills"
+ *   placeholder="Select skills..."
+ *   options={[
+ *     { label: 'React', color: 'blue' },
+ *     { label: 'TypeScript', color: 'purple' },
+ *     { label: 'Node.js', color: 'green' },
+ *   ]}
+ *   multiselect
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tagselect--docs Storybook}
+ */
+export declare const TagSelect: FC<TagSelectProps>;

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

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+import { TagProps } from '../Tag/Tag.types';
+import { tagSelectVariants } from './TagSelect.variants';
+/**
+ * Props for the TagSelect component.
+ * An input that allows selecting from a list of tags.
+ *
+ * @example
+ * ```tsx
+ * <TagSelect
+ *   label="Categories"
+ *   placeholder="Select categories..."
+ *   options={[
+ *     { label: 'Frontend', color: 'blue' },
+ *     { label: 'Backend', color: 'green' },
+ *     { label: 'DevOps', color: 'purple' },
+ *   ]}
+ *   multiselect
+ * />
+ * ```
+ */
+export interface TagSelectProps extends VariantProps<typeof tagSelectVariants> {
+    /** Label displayed above the input */
+    label?: string;
+    /** Available tag options to select from */
+    options: TagProps[];
+    /** Form field name for the input */
+    name?: string;
+    /** Placeholder text when no selection */
+    placeholder?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Whether multiple tags can be selected */
+    multiselect?: boolean;
+}

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

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

package/dist/components/TagSelect/TagSelect.variants.js

@@ -2,10 +2,11 @@ import { c as e } from "../../index-D29mdTf5.js";
 const t = e([
   "flex",
   "flex-col",
+  "gap-2",
   "w-full",
   "relative",
   "text-zinc-500"
-]), a = e(["my-2", "cursor-pointer"]), o = e([
+]), a = e(["cursor-pointer"]), o = e([
   "border",
   "cursor-pointer",
   "duration-250",

package/dist/components/TagSelect/components/Item/Item.d.ts

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

package/dist/components/TagSelect/components/Item/Item.types.d.ts

@@ -0,0 +1,6 @@
+import { TagProps } from '../../../Tag/Tag.types';
+import { Theme } from '../../../../domain/theme';
+export type ItemProps = {
+    option: TagProps;
+    theme?: Theme;
+};

package/dist/components/TagSelect/components/Item/Item.variants.d.ts

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

package/dist/components/TagSelect/components/List/List.d.ts

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

package/dist/components/TagSelect/components/List/List.types.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../../../../domain/theme';
+export type ListProps = {
+    theme?: Theme;
+};

package/dist/components/TagSelect/components/List/List.variants.d.ts

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

package/dist/components/TagSelect/components/Wrapper/Wrapper.d.ts

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

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,135 +1,87 @@
 import "../Item/Item.js";
-import { List as j } from "../List/List.js";
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import b, { forwardRef as w, useId as k, useImperativeHandle as T } from "react";
-import { Tag as P } from "../../../Tag/Tag.js";
-import { cn as l } from "../../../../utils/index.js";
-import { useTagSelect as C } from "../../hooks/useTagSelect.js";
-import { labelVariants as S, tagSelectVariants as z, wrapperVariants as R } from "../../TagSelect.variants.js";
-import { X as _ } from "../../../../x-4F_5p77m.js";
-import { P as p } from "../../../../index-N2OStZoU.js";
-import { useTagSelect as I } from "../../contexts/TagSelect.hook.js";
-function u() {
-  return u = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var r in t)
-        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
-    }
-    return e;
-  }, u.apply(this, arguments);
-}
-function L(e, o) {
-  if (e == null) return {};
-  var t = W(e, o), r, n;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < a.length; n++)
-      r = a[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
-  }
-  return t;
-}
-function W(e, o) {
-  if (e == null) return {};
-  var t = {}, r = Object.keys(e), n, a;
-  for (a = 0; a < r.length; a++)
-    n = r[a], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
-  return t;
-}
-var d = w(function(e, o) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, a = n === void 0 ? 24 : n, c = L(e, ["color", "size"]);
-  return /* @__PURE__ */ b.createElement("svg", u({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: r,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ b.createElement("polyline", {
-    points: "18 15 12 9 6 15"
-  }));
-});
-d.propTypes = {
-  color: p.string,
-  size: p.oneOfType([p.string, p.number])
-};
-d.displayName = "ChevronUp";
-const G = w(
+import { List as w } from "../List/List.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as T, useId as b, useImperativeHandle as C } from "react";
+import { Tag as S } from "../../../Tag/Tag.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useTagSelect as k } from "../../hooks/useTagSelect.js";
+import { labelVariants as R, tagSelectVariants as I, wrapperVariants as O } from "../../TagSelect.variants.js";
+import { X as V } from "../../../../x-Eoa9FJjA.js";
+import { C as j } from "../../../../chevron-up-DEfvgPCw.js";
+import { useTagSelect as y } from "../../contexts/TagSelect.hook.js";
+const D = T(
   ({
-    label: e,
-    labelClassName: o,
+    label: i,
+    labelClassName: m,
+    labelWrapperClassName: p,
     name: t,
-    placeholder: r = "Select a value...",
-    theme: n,
-    wrapperClassName: a
-  }, c) => {
-    const h = k(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: y, inputRef: f } = I(), { wrapperRef: O, handleOpen: N } = C();
-    return T(c, () => f.current, [f]), /* @__PURE__ */ g(
+    placeholder: d = "Select a value...",
+    theme: f,
+    wrapperClassName: h
+  }, u) => {
+    const o = b(), { selectedTags: n, isOpen: s, onOpen: N, onRemoveTag: x, inputRef: l } = y(), { wrapperRef: v, handleOpen: g } = k();
+    return C(u, () => l.current, [l]), /* @__PURE__ */ c(
       "div",
       {
-        ref: O,
-        className: l(
-          R({
-            className: a
+        ref: v,
+        className: a(
+          O({
+            className: h
           })
         ),
-        "data-theme": n,
+        "data-theme": f,
         children: [
-          e ? /* @__PURE__ */ i(
+          i ? /* @__PURE__ */ e("div", { className: a(p), children: /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: t ?? h,
-              className: l(
-                S({
-                  className: o
+              htmlFor: t ?? o,
+              className: a(
+                R({
+                  className: m
                 })
               ),
-              onClick: () => x(!0),
-              children: e
+              onClick: () => N(!0),
+              children: i
             }
-          ) : null,
-          /* @__PURE__ */ g(
+          ) }) : null,
+          /* @__PURE__ */ c(
             "div",
             {
-              id: t ?? h,
-              className: l(z()),
+              id: t ?? o,
+              className: a(I()),
               role: "combobox",
-              onClick: N,
-              "aria-expanded": m,
+              onClick: g,
+              "aria-expanded": s,
               children: [
-                v.length === 0 ? /* @__PURE__ */ i("span", { className: "text-base text-inherit select-none", children: r }) : /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5", children: v.map((s) => /* @__PURE__ */ i(
-                  P,
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: d }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: n.map((r) => /* @__PURE__ */ e(
+                  S,
                   {
-                    ...s,
+                    ...r,
                     className: "select-none",
-                    rightIcon: /* @__PURE__ */ i(_, { className: "w-3 h-3", onClick: () => y(s) }),
-                    "data-value": s.label
+                    rightIcon: /* @__PURE__ */ e(V, { className: "w-3 h-3", onClick: () => x(r) }),
+                    "data-value": r.label
                   },
-                  s.id
+                  r.id
                 )) }),
-                /* @__PURE__ */ i(
-                  d,
+                /* @__PURE__ */ e(
+                  j,
                   {
-                    className: l(
+                    className: a(
                       "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      m ? "rotate-0" : "rotate-180"
+                      s ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ i("input", { ref: f, type: "text", name: t, className: "hidden" }),
-          m ? /* @__PURE__ */ i(j, {}) : null
+          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
+          s ? /* @__PURE__ */ e(w, {}) : null
         ]
       }
     );
   }
 );
 export {
-  G as Wrapper
+  D as Wrapper
 };

package/dist/components/TagSelect/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,7 @@
+import { ForwardedRef } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { TagSelectProps } from '../../TagSelect.types';
+export type WrapperProps = Omit<TagSelectProps, 'options' | 'multiselect'> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+    theme?: Theme;
+};

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

@@ -0,0 +1,3 @@
+export * from './Item/Item';
+export * from './List/List';
+export * from './Wrapper/Wrapper';

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

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

package/dist/components/TagSelect/contexts/TagSelect.hook.d.ts

@@ -0,0 +1 @@
+export declare const useTagSelect: () => import('./TagSelect.types').State;

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

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

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

@@ -0,0 +1,15 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { TagProps } from '../../Tag/Tag.types';
+export type State = {
+    tags: TagProps[];
+    selectedTags: TagProps[];
+    isOpen: boolean;
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    onSelectTag: (tag: TagProps) => void;
+    onRemoveTag: (tag: TagProps) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type TagSelectProviderProps = PropsWithChildren & {
+    defaultOptions?: TagProps[];
+    multiselect?: boolean;
+};

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

@@ -0,0 +1,2 @@
+export * from './TagSelect.hook';
+export * from './TagSelect.provider';

package/dist/components/TagSelect/hooks/useTagSelect.d.ts

@@ -0,0 +1,4 @@
+export declare const useTagSelect: () => {
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleOpen: (event: React.MouseEvent<HTMLElement>) => void;
+};

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { TextAreaProps } from './TextArea.types';
+/**
+ * A multiline text input component with optional label.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Textarea with more rows
+ * <TextArea label="Notes" rows={5} />
+ *
+ * // Controlled textarea
+ * <TextArea
+ *   label="Comments"
+ *   value={comments}
+ *   onChange={(e) => setComments(e.target.value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-textarea--docs Storybook}
+ */
+export declare const TextArea: FC<TextAreaProps>;