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

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

@@ -0,0 +1,46 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { toastVariants } from './Toast.variants';
+/**
+ * Props for the Toast component.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Toast
+ *   open={open}
+ *   setOpen={setOpen}
+ *   title="Success"
+ *   description="Your changes have been saved"
+ *   variant="success"
+ * >
+ *   <Button onClick={() => setOpen(true)}>Show Toast</Button>
+ * </Toast>
+ * ```
+ */
+export interface ToastProps extends PropsWithChildren, VariantProps<typeof toastVariants> {
+    /** Additional CSS classes for the toast */
+    className?: string;
+    /** CSS classes for the close button */
+    closeButtonClassName?: string;
+    /** Description text or element */
+    description: string | ReactNode;
+    /** CSS classes for the description */
+    descriptionClassName?: string;
+    /** Auto-dismiss duration in ms (default: 5000) */
+    duration?: number;
+    /** Controlled open state */
+    open: boolean;
+    /** Show close button (default: true) */
+    showCloseButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Title text or element */
+    title: string | ReactNode;
+    /** CSS classes for the title */
+    titleClassName?: string;
+    /** Callback to update open state */
+    setOpen: (open: boolean) => void;
+}

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

@@ -0,0 +1,5 @@
+export declare const toastVariants: (props?: ({
+    variant?: "warning" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const viewportToastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const closeToastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Toast/Toast.variants.js

@@ -1,23 +1,36 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const t = a([
-  "rounded-md",
-  "shadow-md",
-  "p-4",
-  "flex",
-  "flex-col",
-  "relative",
-  "border",
-  "overflow-hidden",
-  "data-[state=open]:animate-slide-in",
-  "data-[state=closed]:animate-hide",
-  "data-[swipe=move]:translate-x-4",
-  "data-[swipe=cancel]:translate-x-0",
-  "data-[swipe=end]:animate-swipe-out",
-  "shadow-purple-200",
-  "border-purple-100",
-  "dark:border-none",
-  "dark:shadow-none"
-]), o = a([
+const e = a(
+  [
+    "rounded-md",
+    "p-4",
+    "flex",
+    "flex-row",
+    "relative",
+    "overflow-hidden",
+    "h-14",
+    "items-center",
+    "gap-8",
+    "data-[state=open]:animate-slide-in",
+    "data-[state=closed]:animate-hide",
+    "data-[swipe=move]:translate-x-4",
+    "data-[swipe=cancel]:translate-x-0",
+    "data-[swipe=end]:animate-swipe-out",
+    "text-white",
+    "shadow-[0px_2px_4px_0px_rgba(100,116,139,0.25)]"
+  ],
+  {
+    variants: {
+      variant: {
+        success: ["bg-green-800"],
+        error: ["bg-red-800"],
+        warning: ["bg-amber-800"]
+      }
+    },
+    defaultVariants: {
+      variant: "success"
+    }
+  }
+), i = a([
   "fixed",
   "bottom-0",
   "right-0",
@@ -30,15 +43,15 @@ const t = a([
   "m-0",
   "z-50",
   "outline-none"
-]), r = a([
+]), s = a([
   "top-2",
   "right-2",
   "w-4",
   "h-4",
-  "text-kubefirst-primary"
+  "text-white"
 ]);
 export {
-  r as closeToastVariants,
-  t as toastVariants,
-  o as viewportToastVariants
+  s as closeToastVariants,
+  e as toastVariants,
+  i as viewportToastVariants
 };

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

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { TooltipProps } from './Tooltip.types';
+/**
+ * A tooltip component that shows on hover.
+ * Wraps any element and displays content on mouse enter.
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip content="Click to save">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ *
+ * // Tooltip with position
+ * <Tooltip content="More information" position="bottom">
+ *   <InfoIcon />
+ * </Tooltip>
+ *
+ * // Tooltip on text
+ * <Tooltip content="This is a helpful tip">
+ *   <span>Hover me</span>
+ * </Tooltip>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tooltip--docs Storybook}
+ */
+export declare const Tooltip: FC<TooltipProps>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,28 +1,29 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { S as i } from "../../index-DQH6odE9.js";
-import { forwardRef as v, useRef as N, useImperativeHandle as w, useMemo as h, isValidElement as x } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { S as u } from "../../index-BvoZGpli.js";
+import { forwardRef as v, useRef as N, useImperativeHandle as h, useMemo as w, isValidElement as x } from "react";
 import { cn as o } from "../../utils/index.js";
 import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";
-import { useTooltip as b } from "./hooks/useTooltip.js";
+import { useTooltip as T } from "./hooks/useTooltip.js";
+import { Typography as b } from "../Typography/Typography.js";
 const I = v(
-  ({ children: r, content: l, className: m, theme: n, position: a, wrapperClassName: c }, p) => {
-    const f = N(null), { isVisible: d, componentRef: s } = b();
-    w(p, () => s.current, [s]);
-    const u = h(
+  ({ children: r, content: i, className: m, theme: l, position: a, wrapperClassName: n }, p) => {
+    const c = N(null), { isVisible: f, componentRef: t } = T();
+    h(p, () => t.current, [t]);
+    const d = w(
       () => x(r) ? r : /* @__PURE__ */ e("p", { className: "p-2", children: r }),
       [r]
     );
-    return /* @__PURE__ */ e("div", { className: o("w-full", c), "data-theme": n, children: /* @__PURE__ */ t("div", { className: "relative w-max", children: [
-      /* @__PURE__ */ e(i, { ref: s, className: o("cursor-pointer ", m), children: u }),
-      /* @__PURE__ */ t(
+    return /* @__PURE__ */ e("div", { className: o("w-full", n), "data-theme": l, children: /* @__PURE__ */ s("div", { className: "relative w-max", children: [
+      /* @__PURE__ */ e(u, { ref: t, className: o("cursor-pointer ", m), children: d }),
+      /* @__PURE__ */ s(
         "div",
         {
-          ref: f,
+          ref: c,
           className: o(V({ position: a })),
-          "data-visible": d,
+          "data-visible": f,
           children: [
             /* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
-            /* @__PURE__ */ e(i, { children: l })
+            /* @__PURE__ */ e(b, { variant: "tooltip", className: "text-white", children: i })
           ]
         }
       )

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

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { tooltipVariants } from './Tooltip.variants';
+/**
+ * Props for the Tooltip component.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Click to edit">
+ *   <Button>Edit</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="More info here" position="bottom">
+ *   <InfoIcon />
+ * </Tooltip>
+ * ```
+ */
+export interface TooltipProps extends PropsWithChildren, VariantProps<typeof tooltipVariants> {
+    /** Tooltip text or content */
+    content: ReactNode | string;
+    /** CSS classes for the trigger element */
+    className?: string;
+    /** CSS classes for the tooltip wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

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

@@ -0,0 +1,6 @@
+export declare const tooltipVariants: (props?: ({
+    position?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const arrowVariants: (props?: ({
+    position?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tooltip/Tooltip.variants.js

@@ -3,8 +3,9 @@ const a = r(
   [
     "absolute",
     "w-max",
-    "p-2.5",
-    "rounded-lg",
+    "py-2",
+    "px-[6px]",
+    "rounded-xs",
     "shadow-md",
     "transition-all",
     "ease-linear",
@@ -12,7 +13,7 @@ const a = r(
     "duration-250",
     "[&[data-visible='true']]:opacity-100",
     "delay-100",
-    "bg-kubefirst-primary"
+    "bg-slate-700"
   ],
   {
     variants: {
@@ -28,7 +29,7 @@ const a = r(
     }
   }
 ), o = r(
-  ["absolute", "w-0", "h-0", "border-kubefirst-primary"],
+  ["absolute", "w-0", "h-0", "border-slate-700"],
   {
     variants: {
       position: {

package/dist/components/Tooltip/hooks/useTooltip.d.ts

@@ -0,0 +1,4 @@
+export declare const useTooltip: () => {
+    isVisible: boolean;
+    componentRef: import('react').RefObject<HTMLElement | null>;
+};

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

@@ -0,0 +1,18 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TypographyProps } 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<TypographyProps, 'ref'> & RefAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLLabelElement>>;
+export { Typography };

package/dist/components/Typography/Typography.js

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

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

@@ -0,0 +1,29 @@
+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 TypographyProps 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;
+}

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

@@ -0,0 +1,3 @@
+export declare const typographyVariants: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "tooltip" | "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,65 @@
 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]"]
+const 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"
     }
-  },
-  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 };