@konstructio/ui 0.1.2-alpha.106 → 0.1.2-alpha.108

package/README.md

@@ -1,62 +1,149 @@
-> 🚧🚨 **Work in Progress** 🚨🚧
->
-> ⚠️ This library is currently under construction. Features may change and documentation is incomplete. ⚠️
+# @konstructio/ui
 
-# Konstruct React Component Library
+[![npm version](https://img.shields.io/npm/v/@konstructio/ui.svg)](https://www.npmjs.com/package/@konstructio/ui)
+[![license](https://img.shields.io/npm/l/@konstructio/ui.svg)](./LICENSE.md)
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff4785.svg)](https://konstructio.github.io/konstruct-ui)
 
-This repository contains a set of reusable and customizable React components built for **Konstruct**'s infrastructure and Kubernetes products. These components aim to streamline the development process, ensuring consistency and high-quality UI for **Kubefirst**, **Colony**, and other future projects.
+A React component library for [Konstruct](https://konstruct.io) infrastructure products (Kubefirst, Colony) and the Civo dashboard. Built with React, TypeScript, Tailwind CSS v4, and Radix UI primitives.
 
-## Features:
+> **Note**: This library is in active development (alpha). APIs may change between releases.
 
-- **Reusable**: Designed to be used across different projects, reducing development time and effort.
-- **Customizable**: Easily adjustable to fit specific needs or branding requirements.
-- **Responsive**: Optimized for all screen sizes, ensuring a seamless experience on both desktop and mobile.
-- **Accessible**: Built with accessibility in mind, following best practices to ensure compatibility with all users.
-- **Tailwind CSS Integration**: Seamlessly integrated with Tailwind CSS for rapid UI development and easy theming.
+## Features
 
-## **Installation Guide**
+- **40+ components** — forms, tables, modals, charts, navigation, and more
+- **Accessible** — built on Radix UI primitives, tested with jest-axe
+- **Themeable** — light, dark, and brand themes switchable at runtime
+- **Tree-shakeable** — ESM build with component-level code splitting
+- **Broad React support** — compatible with React 16.8+, 17, 18, and 19
 
-Follow these steps to integrate `@konstructio/ui` into your project:
+## Requirements
 
-### Step 1: Install the Library
+| Peer dependency         | Version                    |
+| ----------------------- | -------------------------- |
+| `react` / `react-dom`   | `^16.8 \|\| ^17 \|\| ^18 \|\| ^19` |
+| `tailwindcss`           | `^4`                       |
+| `@tanstack/react-query` | `^5.90`                    |
+| `react-router-dom`      | `^7`                       |
 
-Run the following command to install the package:
+## Installation
 
 ```bash
 npm install @konstructio/ui
 ```
 
----
+## Setup
 
-### Step 2: Install Tailwind CSS v4
+### 1. Import the styles
 
-Tailwind CSS v4 is a peer dependency. If you don't already have it installed, follow the official [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
-
----
-
-### Step 3: Import the theme styles
-
-In your global CSS file, import Tailwind and the library theme, plus the brand theme you need:
+In your global CSS file, import Tailwind, the library theme, and the brand theme you need:
 
 ```css
 @import 'tailwindcss';
+
 @import '@konstructio/ui/ui/theme.css';
-@import '@konstructio/ui/ui/utilities.css';
 @import '@konstructio/ui/ui/civo-theme.css'; /* or kubefirst-theme.css */
+@import '@konstructio/ui/ui/utilities.css';
 ```
 
 Component styles are bundled with the components and injected automatically — no extra CSS import is needed.
 
----
-
-### Step 4: Include `@konstructio/ui` in Tailwind's source detection
+### 2. Register the package with Tailwind
 
-So Tailwind generates the utility classes used by the components, add the package to your global CSS with `@source` (the path is relative to your CSS file):
+Add the package to Tailwind's source detection so it generates the utility classes used by the components. The path is relative to your CSS file:
 
 ```css
 @source '../node_modules/@konstructio/ui/dist';
 ```
 
-## Final Steps
+### 3. Wrap your app in the theme provider
+
+```tsx
+import { ThemeProvider } from '@konstructio/ui';
+
+const App = () => {
+  return (
+    <ThemeProvider theme="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+};
+```
+
+## Usage
+
+```tsx
+import { Alert, Button, Input, Modal, Typography } from '@konstructio/ui';
+
+const Example = () => {
+  return (
+    <form>
+      <Typography variant="h3">Create instance</Typography>
+      <Input label="Hostname" isRequired helperText="Must be unique" />
+      <Button variant="primary" type="submit">
+        Create
+      </Button>
+    </form>
+  );
+};
+```
+
+Icons ship as a separate entry point:
+
+```tsx
+import { AlertOutlineIcon, InfoCircleIcon } from '@konstructio/ui/icons';
+```
+
+Utilities such as the `cn` class-merging helper are exported from the root:
+
+```tsx
+import { cn } from '@konstructio/ui';
+
+<div className={cn('flex items-center', isActive && 'bg-primary')} />;
+```
+
+## Theming
+
+Four themes are available: `light` (default styling), `dark`, `kubefirst`, and `kubefirst-dark`. The active theme is applied through the `data-theme` attribute on `<body>` and persisted in a cookie.
+
+Switch themes at runtime with the `useTheme` hook:
+
+```tsx
+import { useTheme } from '@konstructio/ui';
+
+const { theme, setTheme } = useTheme();
+setTheme('dark');
+```
+
+Alternatively, set `data-theme` directly on the document root — useful when the theme is controlled by a host application, such as a micro-frontend shell:
+
+```html
+<html data-theme="dark"></html>
+```
+
+## Components
+
+| Category     | Components                                                                                                                                                                                                   |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Forms        | Input, TextArea, Select, Checkbox, Switch, Radio, RadioGroup, RadioCard, Counter, Datepicker, TimePicker, PhoneNumberInput, Range, Slider, Autocomplete, Filter, TagSelect, MultiSelectDropdown, ImageUpload |
+| UI           | Button, Badge, Card, CopyButton, Alert, AlertDialog, Modal, Breadcrumb, Divider, Tag, Tooltip, Toast, Tabs, Typography                                                                                       |
+| Data display | Table, VirtualizedTable, PieChart, ProgressBar, Loading, Spinner                                                                                                                                             |
+| Layout       | Sidebar                                                                                                                                                                                                      |
+| Other        | DropdownButton, Command                                                                                                                                                                                      |
+
+Full documentation with live examples is available in the [Storybook](https://konstructio.github.io/konstruct-ui).
+
+## Development
+
+```bash
+npm install && npm run setup   # install dependencies and rebuild trusted packages
+npm run storybook              # dev server on http://localhost:6006
+npm run test                   # run tests with coverage
+npm run lint                   # lint
+npm run check:types            # type check
+npm run build                  # production build
+npm run ci                     # full CI pipeline
+```
+
+## License
 
-After completing the above steps, you can now use `@konstructio/ui` components in your project. Restart your development server to apply the changes.
+[MIT](./LICENSE.md)

package/dist/{AdditionalOptions-D0BAS2HG.js → AdditionalOptions-Crcnz0_g.js}

@@ -1,5 +1,5 @@
 import { t as i } from "./dist-xCbHbMLA.js";
-import { t as p } from "./utils-Cx-WzRZF.js";
+import { t as p } from "./utils-B-6R7kNE.js";
 import { useSelectContext as s } from "./components/Select/contexts/select.hook.js";
 import { listGroupLabelVariants as m } from "./components/Select/components/List/List.variants.js";
 import { additionalOptionSlotClassName as l } from "./components/Select/components/AdditionalOptions/AdditionalOptions.variants.js";

package/dist/{AlertDialogTrigger-BOrb536P.js → AlertDialogTrigger-ouMGAlJW.js}

@@ -1,5 +1,5 @@
 import { a as A } from "./dist-xCbHbMLA.js";
-import { t as m } from "./utils-Cx-WzRZF.js";
+import { t as m } from "./utils-B-6R7kNE.js";
 import { i as _, r as C } from "./dist-D-yS0HN8.js";
 import { a as P, c as R, i as S, l as u, n as v, o as T, r as O, s as w, t as y } from "./dist-DO3apbIh.js";
 import { Button as h } from "./components/Button/Button.js";

package/dist/AnimatePresence-C5PSMIZj.js

@@ -0,0 +1,186 @@
+import { a as V, c as W, i as T, n as _, o as k, r as B, s as K } from "./react-DRLuFcbk.js";
+import * as L from "react";
+import { Children as G, isValidElement as Y, useContext as N, useId as O, useInsertionEffect as q, useMemo as F, useRef as y, useState as D } from "react";
+import { Fragment as J, jsx as b } from "react/jsx-runtime";
+function H(e, o) {
+  if (typeof e == "function") return e(o);
+  e != null && (e.current = o);
+}
+function Q(...e) {
+  return (o) => {
+    let t = !1;
+    const s = e.map((u) => {
+      const r = H(u, o);
+      return !t && typeof r == "function" && (t = !0), r;
+    });
+    if (t) return () => {
+      for (let u = 0; u < s.length; u++) {
+        const r = s[u];
+        typeof r == "function" ? r() : H(e[u], null);
+      }
+    };
+  };
+}
+function X(...e) {
+  return L.useCallback(Q(...e), e);
+}
+var Z = class extends L.Component {
+  getSnapshotBeforeUpdate(e) {
+    const o = this.props.childRef.current;
+    if (T(o) && e.isPresent && !this.props.isPresent && this.props.pop !== !1) {
+      const t = o.offsetParent, s = T(t) && t.offsetWidth || 0, u = T(t) && t.offsetHeight || 0, r = getComputedStyle(o), n = this.props.sizeRef.current;
+      n.height = parseFloat(r.height), n.width = parseFloat(r.width), n.top = o.offsetTop, n.left = o.offsetLeft, n.right = s - n.width - n.left, n.bottom = u - n.height - n.top, n.direction = r.direction;
+    }
+    return null;
+  }
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+};
+function ee({ children: e, isPresent: o, anchorX: t, anchorY: s, root: u, pop: r }) {
+  const n = O(), m = y(null), v = y({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    direction: "ltr"
+  }), { nonce: w } = N(B), i = r !== !1 ? e.props?.ref ?? e?.ref : void 0, R = X(m, i);
+  return q(() => {
+    const { width: c, height: a, top: x, left: C, right: l, bottom: g, direction: S } = v.current;
+    if (o || r === !1 || !m.current || !c || !a) return;
+    const P = S === "rtl", d = t === "left" ? P ? `right: ${l}` : `left: ${C}` : P ? `left: ${C}` : `right: ${l}`, M = s === "bottom" ? `bottom: ${g}` : `top: ${x}`;
+    m.current.dataset.motionPopId = n;
+    const p = document.createElement("style");
+    w && (p.nonce = w);
+    const E = u ?? document.head;
+    return E.appendChild(p), p.sheet && p.sheet.insertRule(`
+          [data-motion-pop-id="${n}"] {
+            position: absolute !important;
+            width: ${c}px !important;
+            height: ${a}px !important;
+            ${d}px !important;
+            ${M}px !important;
+          }
+        `), () => {
+      m.current?.removeAttribute("data-motion-pop-id"), E.contains(p) && E.removeChild(p);
+    };
+  }, [o]), b(Z, {
+    isPresent: o,
+    childRef: m,
+    sizeRef: v,
+    pop: r,
+    children: r === !1 ? e : L.cloneElement(e, { ref: R })
+  });
+}
+var te = ({ children: e, initial: o, isPresent: t, onExitComplete: s, custom: u, presenceAffectsLayout: r, mode: n, anchorX: m, anchorY: v, root: w }) => {
+  const i = K(ne), R = O(), c = y(t), a = y(s);
+  k(() => {
+    c.current = t, a.current = s;
+  });
+  let x = !0, C = F(() => (x = !1, {
+    id: R,
+    initial: o,
+    isPresent: t,
+    custom: u,
+    onExitComplete: (l) => {
+      i.set(l, !0);
+      for (const g of i.values()) if (!g) return;
+      s && s();
+    },
+    register: (l) => (i.set(l, !1), () => {
+      i.delete(l), !c.current && !i.size && a.current?.();
+    })
+  }), [
+    t,
+    i,
+    s
+  ]);
+  return r && x && (C = { ...C }), F(() => {
+    i.forEach((l, g) => i.set(g, !1));
+  }, [t]), L.useEffect(() => {
+    !t && !i.size && s && s();
+  }, [t]), e = b(ee, {
+    pop: n === "popLayout",
+    isPresent: t,
+    anchorX: m,
+    anchorY: v,
+    root: w,
+    children: e
+  }), b(V.Provider, {
+    value: C,
+    children: e
+  });
+};
+function ne() {
+  return /* @__PURE__ */ new Map();
+}
+var I = (e) => e.key || "";
+function j(e) {
+  const o = [];
+  return G.forEach(e, (t) => {
+    Y(t) && o.push(t);
+  }), o;
+}
+var ie = ({ children: e, custom: o, initial: t = !0, onExitComplete: s, presenceAffectsLayout: u = !0, mode: r = "sync", propagate: n = !1, anchorX: m = "left", anchorY: v = "top", root: w }) => {
+  const [i, R] = _(n), c = F(() => j(e), [e]), a = n && !i ? [] : c.map(I), x = y(!0), C = y(c), l = K(() => /* @__PURE__ */ new Map()), g = y(/* @__PURE__ */ new Set()), [S, P] = D(c), [d, M] = D(c);
+  k(() => {
+    n && !i && !d.length && R?.();
+  }, [
+    i,
+    n,
+    d.length,
+    R
+  ]), k(() => {
+    x.current = !1, C.current = c;
+    for (let h = 0; h < d.length; h++) {
+      const f = I(d[h]);
+      a.includes(f) ? (l.delete(f), g.current.delete(f)) : l.get(f) !== !0 && l.set(f, !1);
+    }
+  }, [
+    d,
+    a.length,
+    a.join("-")
+  ]);
+  const p = [];
+  if (c !== S) {
+    let h = [...c], f = 0;
+    for (const $ of d) {
+      const z = a.indexOf(I($));
+      z === -1 ? (h.splice(f++, 0, $), p.push($)) : f = z + p.length + 1;
+    }
+    return r === "wait" && p.length && (h = p), M(j(h)), P(c), null;
+  }
+  process.env.NODE_ENV !== "production" && r === "wait" && d.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: E } = N(W);
+  return b(J, { children: d.map((h) => {
+    const f = I(h), $ = n && !i ? !1 : c === d || a.includes(f), z = () => {
+      if (g.current.has(f)) return;
+      if (l.has(f))
+        g.current.add(f), l.set(f, !0);
+      else return;
+      let A = !0;
+      l.forEach((U) => {
+        U || (A = !1);
+      }), A && (E?.(), M(C.current), n && R?.(), s && s());
+    };
+    return b(te, {
+      isPresent: $,
+      initial: !x.current || t ? void 0 : !1,
+      custom: o,
+      presenceAffectsLayout: u,
+      mode: r,
+      root: w,
+      onExitComplete: $ ? void 0 : z,
+      anchorX: m,
+      anchorY: v,
+      children: h
+    }, f);
+  }) });
+};
+export {
+  ie as t
+};

package/dist/{Breadcrumb-DVBxqgW_.js → Breadcrumb-MrF1Z6w2.js}

@@ -1,6 +1,6 @@
 import { o as b } from "./rolldown-runtime-Dw9YIBcH.js";
 import { t as y } from "./prop-types-BCUW56rg.js";
-import { t as u } from "./utils-Cx-WzRZF.js";
+import { t as u } from "./utils-B-6R7kNE.js";
 import { breadcrumbVariants as O, breadcrumbWrapperVariants as j } from "./components/Breadcrumb/Breadcrumb.variants.js";
 import { BackButton as w } from "./components/Breadcrumb/components/BackButton/BackButton.js";
 import { Item as _ } from "./components/Breadcrumb/components/Item/Item.js";