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

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Tooltip component.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Click to edit">
+ *   <Button>Edit</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="More info here" side="bottom">
+ *   <InfoIcon />
+ * </Tooltip>
+ *
+ * <Tooltip content="Danger!" bgClassName="bg-red-500">
+ *   <Button variant="danger">Delete</Button>
+ * </Tooltip>
+ * ```
+ */
+export interface Props {
+    /** Tooltip text or content */
+    content: ReactNode | string;
+    /** The trigger element */
+    children: ReactNode;
+    /** Tooltip position relative to trigger */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Distance from trigger in px */
+    sideOffset?: number;
+    /** Background color class for tooltip (e.g. 'bg-slate-700', 'bg-red-500') */
+    bgClassName?: string;
+    /** Arrow fill color class (e.g. 'fill-slate-700', 'fill-red-500'). Should match bgClassName */
+    arrowClassName?: string;
+    /** Text color class (e.g. 'text-white') */
+    textClassName?: string;
+    /** Additional className for tooltip content */
+    className?: string;
+    /** Delay before showing tooltip in ms */
+    delayDuration?: number;
+}
+/** @deprecated Use Props instead */
+export type TooltipProps = Props;

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,18 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { Props } from './Typography.types';
+/**
+ * A flexible typography component for consistent text styling.
+ * Automatically selects semantic HTML elements based on variant.
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body1">Paragraph text</Typography>
+ * <Typography variant="subtitle1" component="span">Inline text</Typography>
+ * <Typography variant="h3" component="label" htmlFor="input">Label</Typography>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-typography--docs Storybook}
+ */
+declare const Typography: ForwardRefExoticComponent<Omit<Props, 'ref'> & RefAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLLabelElement>>;
+export { Typography };

package/dist/components/Typography/Typography.js

@@ -1,28 +1,18 @@
-import { jsx as y } from "react/jsx-runtime";
+import { t as s } from "../../utils-DHuiYnx1.js";
+import { typographyVariants as y } from "./Typography.variants.js";
 import { forwardRef as f } from "react";
-import { cn as n } from "../../utils/index.js";
-import { typographyVariants as c } from "./Typography.variants.js";
-const h = f(
-  ({ className: r, theme: p, children: m, variant: o, component: t, ...e }, a) => {
-    const s = t ?? (o?.includes("h") ? o : "p");
-    return /* @__PURE__ */ y(
-      s,
-      {
-        ref: a,
-        "data-theme": p,
-        className: n(
-          c({
-            className: r,
-            variant: o
-          })
-        ),
-        ...e,
-        children: m
-      }
-    );
-  }
-);
-h.displayName = "Typography";
+import { jsx as h } from "react/jsx-runtime";
+var i = f(({ className: o, theme: p, children: m, variant: r, component: t, ...a }, e) => /* @__PURE__ */ h(t ?? (r?.includes("h") ? r : "p"), {
+  ref: e,
+  "data-theme": p,
+  className: s(y({
+    className: o,
+    variant: r
+  })),
+  ...a,
+  children: m
+}));
+i.displayName = "KonstructTypography";
 export {
-  h as Typography
+  i as Typography
 };

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

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentRef, HTMLAttributes, ReactNode, Ref } from 'react';
+import { Theme } from '../../domain/theme';
+import { typographyVariants } from './Typography.variants';
+/** Valid HTML heading tags */
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * Props for the Typography component.
+ * A flexible text component with semantic variants and theming.
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Page Title</Typography>
+ * <Typography variant="body1">Body text content</Typography>
+ * <Typography variant="h2" component="p">Styled as h2 but renders as p</Typography>
+ * ```
+ */
+export interface Props extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
+    /** Ref to the underlying DOM element */
+    ref?: Ref<HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement>;
+    /** Text content to display */
+    children: ReactNode;
+    /** Override the rendered HTML element */
+    component?: HeadingTag | 'p' | 'span' | 'label';
+    /** Theme override for this component */
+    theme?: Theme;
+    /** For use with label component to associate with form input */
+    htmlFor?: string;
+}
+/** @deprecated Use Props instead */
+export type TypographyProps = Props;

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

@@ -0,0 +1,3 @@
+export declare const typographyVariants: (props?: ({
+    variant?: "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Typography/Typography.variants.js

@@ -1,57 +1,75 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const e = t([], {
-  variants: {
-    variant: {
-      h1: ["text-[57px]", "leading-[64px]"],
-      h2: ["text-[45px]", "leading-[52px]"],
-      h3: ["text-[36px]", "leading-[44px]"],
-      h4: ["text-[32px]", "leading-[40px]"],
-      h5: ["text-[28px]", "leading-[36px]"],
-      h6: ["text-[24px]", "font-medium", "leading-[32px]", "tracking-[0.15px]"],
-      subtitle1: ["text-[22px]", "leading-[28px]"],
-      subtitle2: [
-        "text-[16px]",
-        "font-medium",
-        "leading-[24px]",
-        "tracking-[0.15px]"
-      ],
-      subtitle3: [
-        "text-[14px]",
-        "font-medium",
-        "leading-[20px]",
-        "tracking-[0.1px]"
-      ],
-      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
-      labelMedium: [
-        "text-[12px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      labelSmall: [
-        "text-[11px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      buttonSmall: [
-        "text-[14px]",
-        "font-semibold",
-        "leading-[20px]",
-        "tracking-[0.25px]"
-      ],
-      body1: ["text-[16px]", "leading-[24px]", "tracking-[0.5px]"],
-      body2: ["text-[14px]", "leading-[20px]", "tracking-[0.25px]"],
-      body3: ["text-[12px]", "leading-[16px]", "tracking-[0.4px]"],
-      tooltip: ["text-[14px]", "leading-[22px]"]
-    }
-  },
-  defaultVariants: {
-    variant: "body1"
-  }
+import { t } from "../../dist-DtEbXv47.js";
+var a = t(["text-slate-800", "dark:text-metal-50"], {
+  variants: { variant: {
+    h1: ["text-[57px]", "leading-16"],
+    h2: ["text-[45px]", "leading-13"],
+    h3: ["text-4xl", "leading-11"],
+    h4: ["text-[32px]", "leading-10"],
+    h5: ["text-[28px]", "leading-9"],
+    h6: [
+      "text-2xl",
+      "font-medium",
+      "leading-8",
+      "tracking-[0.15px]"
+    ],
+    subtitle1: ["text-[22px]", "leading-7"],
+    subtitle2: [
+      "text-[16px]",
+      "font-medium",
+      "leading-6",
+      "tracking-[0.15px]"
+    ],
+    subtitle3: [
+      "text-[14px]",
+      "font-medium",
+      "leading-5",
+      "tracking-[0.1px]"
+    ],
+    labelLarge: [
+      "text-sm",
+      "font-medium",
+      "text-slate-500",
+      "dark:text-metal-50"
+    ],
+    labelMedium: [
+      "text-[12px]",
+      "font-medium",
+      "leading-4",
+      "tracking-[0.5px]",
+      "uppercase"
+    ],
+    labelSmall: [
+      "text-[11px]",
+      "font-medium",
+      "leading-4",
+      "tracking-[0.5px]",
+      "uppercase"
+    ],
+    buttonSmall: [
+      "text-[14px]",
+      "font-semibold",
+      "leading-5",
+      "tracking-[0.25px]"
+    ],
+    body1: [
+      "text-base",
+      "leading-6",
+      "tracking-[0.5px]"
+    ],
+    body2: [
+      "text-sm",
+      "leading-5",
+      "tracking-[0.25px]"
+    ],
+    body3: [
+      "text-xs",
+      "leading-4",
+      "tracking-[0.4px]"
+    ],
+    tooltip: ["text-sm", "leading-5.5"]
+  } },
+  defaultVariants: { variant: "body1" }
 });
 export {
-  e as typographyVariants
+  a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { Props, RowData } from './VirtualizedTable.types';
+import { TruncateText } from './components';
+import { Props as ActionProps } from './components/Actions/Actions.types';
+type VirtualizedTableCompound = (<TData extends RowData>(props: Props<TData>) => JSX.Element) & {
+    TruncateText: typeof TruncateText;
+    Actions: <TData extends RowData>(props: ActionProps<TData>) => JSX.Element | null;
+    Events: {
+        sendExpandRowEvent: (tableId: string, rowId: string) => void;
+        sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+        sendToggleRowEvent: (tableId: string, rowId: string) => void;
+    };
+    displayName?: string;
+};
+declare const VirtualizedTable: VirtualizedTableCompound;
+export { TruncateText, VirtualizedTable };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,113 +1,95 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useMemo as y } from "react";
-import { cn as s } from "../../utils/index.js";
-import { TableProvider as B } from "./contexts/table.provider.js";
-import { Filter as H } from "./components/Filter/Filter.js";
-import { Header as K } from "./components/Header/Header.js";
-import { Body as M } from "./components/Body/Body.js";
-import { Pagination as P } from "./components/Pagination/Pagination.js";
-import { TruncateText as k } from "./components/TruncateText/TruncateText.js";
-import { Actions as q } from "./components/Actions/Actions.js";
-const C = ({
-  id: c,
-  ariaLabel: d,
-  columns: n,
-  data: f,
-  totalItems: p,
-  className: u,
-  classNameHeaderActiveArrows: b,
-  classNameHeaderArrows: T,
-  classNameHeaderTable: N,
-  classNameTable: h,
-  classNameWrapperTable: x,
-  fetchData: A,
-  // Pagination
-  showPagination: v,
-  showTotalItems: o,
-  showDropdownPagination: l,
-  showDotPagination: a,
-  showFormPagination: i,
-  pageSizes: z,
-  // Filter
-  showFilter: V = !1,
-  showFilterInput: g,
-  filterSearchPlaceholder: j = "",
-  multiSelectFilter: w
-}) => {
-  const t = y(
-    () => v || [
-      o,
-      l,
-      a,
-      i
-    ].some(Boolean),
-    []
-  );
-  return /* @__PURE__ */ r(
-    B,
-    {
-      id: c,
-      columns: n,
-      data: f,
-      fetchData: A,
-      totalItems: p,
-      children: /* @__PURE__ */ m("section", { className: u, children: [
-        V && /* @__PURE__ */ r(
-          H,
-          {
-            placeholder: j,
-            multiSelectFilter: w,
-            showFilterInput: g
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: s(
-              "shadow rounded-t-lg",
-              {
-                "overflow-hidden rounded-lg": !t
-              },
-              x
-            ),
-            children: /* @__PURE__ */ m(
-              "table",
-              {
-                className: s("w-full border-collapse", h),
-                "aria-label": d,
-                children: [
-                  /* @__PURE__ */ r(
-                    K,
-                    {
-                      className: N,
-                      classNameArrows: T,
-                      classNameActiveArrows: b
-                    }
-                  ),
-                  /* @__PURE__ */ r(M, {})
-                ]
-              }
-            )
-          }
-        ),
-        t && /* @__PURE__ */ r(
-          P,
-          {
-            showTotalItems: o,
-            showDropdownPagination: l,
-            showDotPagination: a,
-            showFormPagination: i,
-            pageSizes: z
-          }
-        )
-      ] })
-    }
-  );
-}, e = C;
-e.displayName = "KonstructVirtualizedTable";
-e.TruncateText = k;
-e.Actions = q;
+import { t as s } from "../../utils-DHuiYnx1.js";
+import { Actions as Y } from "./components/Actions/Actions.js";
+import { t as Z } from "../../table.provider-4OQNqxH3.js";
+import { sendCollapseRowEvent as _, sendExpandRowEvent as $, sendToggleRowEvent as D } from "./events/index.js";
+import { Body as L } from "./components/Body/Body.js";
+import { Filter as rr } from "./components/Filter/Filter.js";
+import { Header as er } from "./components/Header/Header.js";
+import { Pagination as ar } from "./components/Pagination/Pagination.js";
+import { TruncateText as or } from "./components/TruncateText/TruncateText.js";
+import { WrapperBody as tr } from "./components/WrapperBody/WrapperBody.js";
+import { useMemo as ir } from "react";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+var lr = ({ id: c, ariaLabel: p, columns: d, data: f, totalItems: u = -1 / 0, className: b, classNameHeaderActiveArrows: v, classNameHeaderArrows: T, classNameHeaderTable: x, classNameTable: E, classNameWrapperTable: N, isLoading: o, getRowId: w, fetchData: A, queryOptions: y, showPagination: h, showTotalItems: t, showDropdownPagination: i, showDotPagination: l, showFormPagination: m, pageSizes: z, showFilter: B = !1, showFilterInput: R, filterSearchPlaceholder: V = "", filters: g, multiSelectFilter: j, filterActions: k, showResetButton: P = !0, resetButtonClassName: C, closeOnApply: H = !0, enableHoverRow: I, classNameHoverRow: K, enableExpandedRow: M, expandedState: W, defaultExpanded: q, classNameExpandedRow: F, classNameExpandedCell: G, classNameExpandedContent: J, classNameExpandedHeader: O, classNameActiveExpandedRow: Q, onExpandedChange: S, renderExpandedRow: U, keepExpandColumnVisible: X }) => {
+  const e = ir(() => h || [
+    t,
+    i,
+    l,
+    m
+  ].some(Boolean), []);
+  return /* @__PURE__ */ r(Z, {
+    id: c,
+    columns: d,
+    data: f,
+    getRowId: w,
+    fetchData: A,
+    totalItems: u,
+    queryOptions: y,
+    isPaginationEnabled: e,
+    enableExpandedRow: M,
+    expandedState: W,
+    onExpandedChange: S,
+    defaultExpanded: q,
+    classNameExpandedRow: F,
+    classNameExpandedCell: G,
+    classNameExpandedContent: J,
+    classNameExpandedHeader: O,
+    classNameActiveExpandedRow: Q,
+    enableHoverRow: I,
+    classNameHoverRow: K,
+    renderExpandedRow: U,
+    keepExpandColumnVisible: X,
+    children: /* @__PURE__ */ n("section", {
+      className: s("w-full min-w-fit", b),
+      children: [
+        B && /* @__PURE__ */ r(rr, {
+          actions: k,
+          filters: g,
+          multiSelectFilter: j,
+          placeholder: V,
+          showFilterInput: R,
+          showResetButton: P,
+          resetButtonClassName: C,
+          closeOnApply: H
+        }),
+        /* @__PURE__ */ r(tr, {
+          showPagination: e,
+          classNameWrapperTable: N,
+          isLoading: o,
+          children: /* @__PURE__ */ n("table", {
+            className: s("w-full border-collapse table-auto", "dark:border-separate dark:border-spacing-0", E),
+            "aria-label": p,
+            children: [/* @__PURE__ */ r(er, {
+              className: x,
+              classNameArrows: T,
+              classNameActiveArrows: v
+            }), /* @__PURE__ */ r(L, {
+              isLoading: o,
+              showPagination: e
+            })]
+          })
+        }),
+        e && /* @__PURE__ */ r(ar, {
+          showTotalItems: t,
+          showDropdownPagination: i,
+          showDotPagination: l,
+          showFormPagination: m,
+          pageSizes: z,
+          isLoading: o
+        })
+      ]
+    })
+  });
+}, a = lr;
+a.displayName = "KonstructVirtualizedTable";
+a.TruncateText = or;
+a.Actions = Y;
+a.Events = {
+  sendExpandRowEvent: $,
+  sendCollapseRowEvent: _,
+  sendToggleRowEvent: D
+};
 export {
-  k as TruncateText,
-  e as VirtualizedTable
+  or as TruncateText,
+  a as VirtualizedTable
 };