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

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

@@ -0,0 +1,59 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { bodyVariants, headVariants, rowVariants, tableVariants } from './Table.variants';
+/**
+ * Props for the Table component.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+export interface Props extends React.HTMLAttributes<HTMLTableElement>, PropsWithChildren, VariantProps<typeof tableVariants> {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type TableProps = Props;
+/**
+ * Props for Table.Row component.
+ */
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
+    /** Width of the row */
+    width?: string;
+    /** Whether the row is selected */
+    isSelected?: boolean;
+    /** Callback when row is selected */
+    onSelect?: () => void;
+}
+/**
+ * Props for Table.Head component.
+ */
+export interface HeadProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof headVariants> {
+}
+/**
+ * Props for Table.Body component.
+ */
+export interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof bodyVariants> {
+}
+/**
+ * Props for Table.Filter component.
+ */
+export interface FilterProps extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
+    /** Placeholder text for the filter input */
+    placeholder?: string;
+}

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

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

package/dist/components/Table/Table.variants.js

@@ -1,39 +1,32 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t([
+import { t } from "../../dist-DtEbXv47.js";
+var a = t([
   "table-auto",
   "w-full",
   "border-collapse",
   "border-spacing-0",
   "rounded"
-]), a = t(
-  [
-    "h-8",
-    "text-inherit",
-    "[&>td]:py-3",
-    "[&>td]:px-4",
-    "text-slate-700",
-    "hover:bg-zinc-100",
-    "hover:cursor-pointer"
-  ],
-  {
-    variants: {
-      isSelected: {
-        true: "bg-purple-50",
-        false: ""
-      }
-    }
-  }
-), o = t([
+]), e = t([
+  "h-8",
+  "text-inherit",
+  "[&>td]:py-3",
+  "[&>td]:px-4",
+  "text-slate-700",
+  "hover:bg-zinc-100",
+  "hover:cursor-pointer"
+], { variants: { isSelected: {
+  true: "bg-purple-50",
+  false: ""
+} } }), o = t([
   "h-[18px]",
   "bg-slate-100",
   "[&>tr>th]:py-3",
   "[&>tr>th]:px-4",
   "[&>tr>th]:uppercase",
   "text-left"
-]), s = t([]);
+]), p = t([]);
 export {
-  s as bodyVariants,
+  p as bodyVariants,
   o as headVariants,
-  a as rowVariants,
-  r as tableVariants
+  e as rowVariants,
+  a as tableVariants
 };

package/dist/components/Table/components/Body.d.ts

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

package/dist/components/Table/components/Body.js

@@ -1,18 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as s } from "../../../utils/index.js";
+import { t } from "../../../utils-DHuiYnx1.js";
 import { bodyVariants as a } from "../Table.variants.js";
-const d = ({ children: o, className: r, ...m }) => /* @__PURE__ */ t(
-  "tbody",
-  {
-    className: s(
-      a({
-        className: r
-      })
-    ),
-    ...m,
-    children: o
-  }
-);
+import { jsx as s } from "react/jsx-runtime";
+var f = ({ children: o, className: r, ...m }) => /* @__PURE__ */ s("tbody", {
+  className: t(a({ className: r })),
+  ...m,
+  children: o
+});
 export {
-  d as Body
+  f as Body
 };

package/dist/components/Table/components/Filter.d.ts

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

package/dist/components/Table/components/Filter.js

@@ -1,9 +1,15 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { Input as i } from "../../Input/Input.js";
-const o = ({ children: e, ...r }) => /* @__PURE__ */ t("div", { className: "flex px-4 py-6 rounded-t", children: [
-  /* @__PURE__ */ s(i, { className: "!w-1/3", ...r }),
-  /* @__PURE__ */ s("div", { className: "w-1/4 flex justify-end", children: e })
-] });
+import { t as a } from "../../../Input-GBMxM3Z7.js";
+import { jsx as s, jsxs as t } from "react/jsx-runtime";
+var m = ({ children: e, ...r }) => /* @__PURE__ */ t("div", {
+  className: "flex px-4 py-6 rounded-t",
+  children: [/* @__PURE__ */ s(a, {
+    className: "!w-1/3",
+    ...r
+  }), /* @__PURE__ */ s("div", {
+    className: "w-1/4 flex justify-end",
+    children: e
+  })]
+});
 export {
-  o as Filter
+  m as Filter
 };

package/dist/components/Table/components/Head.d.ts

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

package/dist/components/Table/components/Head.js

@@ -1,18 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as t } from "../../../utils/index.js";
-import { headVariants as e } from "../Table.variants.js";
-const c = ({ children: o, className: r, ...a }) => /* @__PURE__ */ m(
-  "thead",
-  {
-    className: t(
-      e({
-        className: r
-      })
-    ),
-    ...a,
-    children: o
-  }
-);
+import { t as o } from "../../../utils-DHuiYnx1.js";
+import { headVariants as t } from "../Table.variants.js";
+import { jsx as e } from "react/jsx-runtime";
+var d = ({ children: a, className: r, ...m }) => /* @__PURE__ */ e("thead", {
+  className: o(t({ className: r })),
+  ...m,
+  children: a
+});
 export {
-  c as Head
+  d as Head
 };

package/dist/components/Table/components/Row.d.ts

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

package/dist/components/Table/components/Row.js

@@ -1,28 +1,16 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as c } from "../../../utils/index.js";
-import { rowVariants as n } from "../Table.variants.js";
-const l = ({
-  children: o,
-  className: r,
-  width: t,
-  isSelected: m,
-  onSelect: s,
-  ...i
-}) => /* @__PURE__ */ a(
-  "tr",
-  {
-    style: { width: t },
-    onClick: s,
-    className: c(
-      n({
-        className: r,
-        isSelected: m
-      })
-    ),
-    ...i,
-    children: o
-  }
-);
+import { t as i } from "../../../utils-DHuiYnx1.js";
+import { rowVariants as p } from "../Table.variants.js";
+import { jsx as c } from "react/jsx-runtime";
+var n = ({ children: r, className: o, width: t, isSelected: m, onSelect: a, ...s }) => /* @__PURE__ */ c("tr", {
+  style: { width: t },
+  onClick: a,
+  className: i(p({
+    className: o,
+    isSelected: m
+  })),
+  ...s,
+  children: r
+});
 export {
-  l as Row
+  n as Row
 };

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

@@ -0,0 +1,4 @@
+export * from './Body';
+export * from './Filter';
+export * from './Head';
+export * from './Row';

package/dist/components/Table/components/index.js

@@ -1,10 +1,10 @@
-import { Body as e } from "./Body.js";
-import { Filter as f } from "./Filter.js";
+import { Body as r } from "./Body.js";
+import { Filter as t } from "./Filter.js";
 import { Head as p } from "./Head.js";
-import { Row as d } from "./Row.js";
+import { Row as e } from "./Row.js";
 export {
-  e as Body,
-  f as Filter,
+  r as Body,
+  t as Filter,
   p as Head,
-  d as Row
+  e as Row
 };

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

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { ListProps, Props as TabsProps, TriggerProps } from './Tabs.types';
+import { Content, List, Trigger } from './components';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * A tabs component built on Radix UI primitives.
+ * Supports horizontal and vertical orientations with List, Trigger, and Content sub-components.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="overview" label="Overview" isActive />
+ *     <Tabs.Trigger tab="settings" label="Settings" isActive={false} />
+ *     <Tabs.Trigger tab="billing" label="Billing" isActive={false} />
+ *   </Tabs.List>
+ *
+ *   <Tabs.Content value="overview">
+ *     Overview content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="settings">
+ *     Settings content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="billing">
+ *     Billing content here
+ *   </Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tabs--docs Storybook}
+ */
+declare const Tabs: FC<TabsProps> & {
+    List: FC<ListProps>;
+    Trigger: FC<TriggerProps>;
+    Content: FC<ReactTabs.TabsContentProps>;
+};
+export { Content, List, Tabs, Trigger };

package/dist/components/Tabs/Tabs.js

@@ -1,28 +1,28 @@
-import { jsx as s } from "react/jsx-runtime";
-import { R as e } from "../../index-DQJhMz8c.js";
-import { cn as n } from "../../utils/index.js";
+import { t as s } from "../../utils-DHuiYnx1.js";
+import { r as e } from "../../dist-B5SlrgYz.js";
 import { rootVariants as p } from "./Tabs.variants.js";
-import { Content as f } from "./components/Content.js";
-import { List as c } from "./components/List.js";
+import { Content as n } from "./components/Content.js";
+import { List as f } from "./components/List.js";
 import { Trigger as g } from "./components/Trigger.js";
-const r = ({ children: o, theme: a, className: m, orientation: t, ...i }) => /* @__PURE__ */ s(
-  e,
-  {
-    ...i,
-    "data-theme": a,
-    "data-orientation": t,
-    "aria-orientation": t,
-    className: n(p({ variant: t, className: m })),
-    children: o
-  }
-);
+import { jsx as T } from "react/jsx-runtime";
+var r = ({ children: o, theme: a, className: m, orientation: t, ...i }) => /* @__PURE__ */ T(e, {
+  ...i,
+  "data-theme": a,
+  "data-orientation": t,
+  "aria-orientation": t,
+  className: s(p({
+    variant: t,
+    className: m
+  })),
+  children: o
+});
 r.displayName = "KonstructTabs";
-r.Content = f;
-r.List = c;
+r.Content = n;
+r.List = f;
 r.Trigger = g;
 export {
-  f as Content,
-  c as List,
+  n as Content,
+  f as List,
   r as Tabs,
   g as Trigger
 };

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

@@ -0,0 +1,44 @@
+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 Props extends ReactTabs.TabsProps, PropsWithChildren {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type TabsProps = Props;
+/**
+ * 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?: "horizontal" | "vertical" | "default" | 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

@@ -1,74 +1,58 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t([""], {
-  variants: {
-    variant: {
-      horizontal: "",
-      vertical: "flex gap-6"
-    }
-  },
-  defaultVariants: {
-    variant: "horizontal"
-  }
-}), e = t([""], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), i = t(["flex"], {
-  variants: {
-    variant: {
-      default: "flex gap-6",
-      horizontal: "",
-      vertical: "flex-col min-w-[132px] h-full items-center"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), n = t(
-  [
-    "cursor-pointer",
-    "h-[27px]",
-    "w-fit",
-    "block",
-    "relative",
-    "after:absolute",
-    "after:bottom-0",
-    "after:left-0",
-    "after:right-0",
-    "after:h-[2px]",
-    "after:bg-aurora-500",
-    "after:origin-bottom",
-    'after:content-[""]',
-    "after:scale-y-0",
-    "after:transition-transform",
-    "after:duration-500",
-    "after:transform-gpu",
-    "after:will-change-transform",
-    "kubefirst:after:bg-kubefirst-primary"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "",
-        active: [
-          "text-zinc-700",
-          "font-semibold",
-          "after:scale-y-100",
-          "hover:after:scale-y-140"
-        ],
-        inactive: "text-slate-500 font-[600]"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
+import { t as a } from "../../dist-DtEbXv47.js";
+var r = a([""], {
+  variants: { variant: {
+    horizontal: "",
+    vertical: "flex gap-6"
+  } },
+  defaultVariants: { variant: "horizontal" }
+}), e = a([""], {
+  variants: { variant: { default: "" } },
+  defaultVariants: { variant: "default" }
+}), i = a(["flex"], {
+  variants: { variant: {
+    default: "flex gap-6",
+    horizontal: "",
+    vertical: "flex-col min-w-[132px] h-full items-center"
+  } },
+  defaultVariants: { variant: "default" }
+}), n = a([
+  "cursor-pointer",
+  "h-[27px]",
+  "w-fit",
+  "block",
+  "relative",
+  "after:absolute",
+  "after:bottom-0",
+  "after:left-0",
+  "after:right-0",
+  "after:h-0.5",
+  "after:bg-aurora-500",
+  "after:origin-bottom",
+  'after:content-[""]',
+  "after:scale-y-0",
+  "after:transition-transform",
+  "after:duration-500",
+  "after:transform-gpu",
+  "after:will-change-transform",
+  "kubefirst:after:bg-kubefirst-primary"
+], {
+  variants: { variant: {
+    default: "",
+    active: [
+      "text-zinc-700",
+      "font-semibold",
+      "after:scale-y-100",
+      "hover:after:scale-y-140",
+      "dark:text-metal-100"
+    ],
+    inactive: [
+      "text-slate-500",
+      "font-semibold",
+      "dark:text-metal-400"
+    ]
+  } },
+  defaultVariants: { variant: "default" }
+});
 export {
   e as contentVariants,
   i as listVariants,

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,15 +1,15 @@
-import { jsx as r } from "react/jsx-runtime";
-import { C as a } from "../../../index-DQJhMz8c.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(
-  a,
-  {
-    ...n,
-    className: m(s({ variant: "default", className: o })),
-    children: t
-  }
-);
+import { t as r } from "../../../utils-DHuiYnx1.js";
+import { t as n } from "../../../dist-B5SlrgYz.js";
+import { contentVariants as m } from "../Tabs.variants.js";
+import { jsx as s } from "react/jsx-runtime";
+var e = ({ children: t, className: o, ...a }) => /* @__PURE__ */ s(n, {
+  ...a,
+  className: r(m({
+    variant: "default",
+    className: o
+  })),
+  children: t
+});
 e.displayName = "KonstructTabsContent";
 export {
   e as Content

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,21 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
-import { L as n } from "../../../index-DQJhMz8c.js";
-import { cn as a } from "../../../utils/index.js";
-import { listVariants as s } from "../Tabs.variants.js";
-const c = ({
-  children: i,
-  className: r,
-  orientation: m,
-  ...o
-}) => /* @__PURE__ */ t("div", { className: a(s({ variant: "default" })), children: /* @__PURE__ */ t(
-  n,
-  {
-    className: a(s({ variant: m, className: r })),
+import { t as a } from "../../../utils-DHuiYnx1.js";
+import { n } from "../../../dist-B5SlrgYz.js";
+import { listVariants as t } from "../Tabs.variants.js";
+import { jsx as r } from "react/jsx-runtime";
+var e = ({ children: s, className: i, orientation: m, ...o }) => /* @__PURE__ */ r("div", {
+  className: a(t({ variant: "default" })),
+  children: /* @__PURE__ */ r(n, {
+    className: a(t({
+      variant: m,
+      className: i
+    })),
     ...o,
-    children: i
-  }
-) });
-c.displayName = "KonstructTabsList";
+    children: s
+  })
+});
+e.displayName = "KonstructTabsList";
 export {
-  c as List
+  e as List
 };