@konstructio/ui 0.1.2-alpha.11 → 0.1.2-alpha.111

package/README.md

@@ -1,68 +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
+### 1. Import the styles
 
-If you don't already have Tailwind CSS installed, follow the official installation guide from the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). Ensure that Tailwind is properly configured in your project.
+In your global CSS file, import Tailwind, the library theme, and the brand theme you need:
 
----
+```css
+@import 'tailwindcss';
 
-### Step 3: Import and Configure the Plugin
+@import '@konstructio/ui/ui/theme.css';
+@import '@konstructio/ui/ui/civo-theme.css'; /* or kubefirst-theme.css */
+@import '@konstructio/ui/ui/utilities.css';
+```
 
-To use the components provided by `@konstructio/ui`, you need to import the plugin and add it to your Tailwind CSS configuration file.
+Component styles are bundled with the components and injected automatically — no extra CSS import is needed.
 
-Modify your Tailwind configuration file (usually `tailwind.config.js` or `tailwind.config.ts`) as follows:
+### 2. Register the package with Tailwind
 
-```ts
-import { konstructPlugin } from '@konstructio/ui';
+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:
 
-const config: Config = {
-  plugins: [konstructPlugin],
-};
+```css
+@source '../node_modules/@konstructio/ui/dist';
 ```
 
----
+### 3. Wrap your app in the theme provider
 
-### Step 4: Include `@konstructio/ui` in Tailwind Content
+```tsx
+import { ThemeProvider } from '@konstructio/ui';
 
-To ensure Tailwind parses the components from `@konstructio/ui`, add its path to the `content` array in your Tailwind configuration file:
+const App = () => {
+  return (
+    <ThemeProvider theme="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+};
+```
 
-```ts
-const config: Config = {
-  content: [
-    // Other content paths
-    './node_modules/@konstructio/ui/dist/**/*.{js,ts,jsx,tsx}',
-  ],
+## 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>
+  );
 };
 ```
 
-## Final Steps
+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-D3SZ2WFJ.js

@@ -0,0 +1,37 @@
+import { t as i } from "./dist-xCbHbMLA.js";
+import { t as p } from "./utils-DnIJruo0.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";
+import { Fragment as c } from "react";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+var N = (r) => "groupLabel" in r, f = (r) => typeof r == "object" && r !== null && "groupLabel" in r && "options" in r, j = ({ additionalOptions: r }) => {
+  const { toggleOpen: e } = s();
+  return r?.length ? f(r[0]) ? r.map((o) => /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ t("li", {
+    role: "presentation",
+    "aria-hidden": "true",
+    "data-action": "true",
+    className: p(m()),
+    children: o.groupLabel
+  }), o.options.map((a, n) => /* @__PURE__ */ t("li", {
+    role: "option",
+    "data-action": "true",
+    onClick: () => e(!1),
+    children: /* @__PURE__ */ t(i, {
+      className: l,
+      children: a
+    })
+  }, n))] }, o.groupLabel)) : r.map((o, a) => /* @__PURE__ */ t("li", {
+    role: "option",
+    "data-action": "true",
+    onClick: () => e(!1),
+    children: /* @__PURE__ */ t(i, {
+      className: l,
+      children: o
+    })
+  }, a)) : null;
+};
+export {
+  N as n,
+  j as t
+};

package/dist/AlertDialogTrigger-Cdw3C2Tv.js

@@ -0,0 +1,109 @@
+import { a as A } from "./dist-xCbHbMLA.js";
+import { t as m } from "./utils-DnIJruo0.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-f8EwfITY.js";
+import { Button as h } from "./components/Button/Button.js";
+import * as n from "react";
+import { forwardRef as x } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var b = Object.defineProperty, c = (l, o) => b(l, "name", {
+  value: o,
+  configurable: !0
+}), [E, Y] = _("AlertDialog", [u]), s = u(), N = /* @__PURE__ */ c((l) => {
+  const { __scopeAlertDialog: o, ...r } = l, e = s(o);
+  return /* @__PURE__ */ i(y, {
+    ...e,
+    ...r,
+    modal: !0
+  });
+}, "AlertDialog"), j = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(R, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogTrigger")), F = /* @__PURE__ */ c((l) => {
+  const { __scopeAlertDialog: o, ...r } = l, e = s(o);
+  return /* @__PURE__ */ i(T, {
+    ...e,
+    ...r
+  });
+}, "AlertDialogPortal"), $ = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(P, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogOverlay")), [k, B] = E("AlertDialogContent"), H = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, children: a, ...t } = o, g = s(e), p = n.useRef(null), d = A(r, p), f = n.useRef(null);
+  return /* @__PURE__ */ i(k, {
+    scope: e,
+    cancelRef: f,
+    children: /* @__PURE__ */ i(O, {
+      role: "alertdialog",
+      ...g,
+      ...t,
+      ref: d,
+      onOpenAutoFocus: C(t.onOpenAutoFocus, (D) => {
+        D.preventDefault(), f.current?.focus({ preventScroll: !0 });
+      }),
+      onPointerDownOutside: (D) => D.preventDefault(),
+      onInteractOutside: (D) => D.preventDefault(),
+      children: a
+    })
+  });
+}, "AlertDialogContent")), I = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(w, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogTitle")), L = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(S, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogDescription")), M = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(v, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogAction")), q = "AlertDialogCancel", z = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, { cancelRef: t } = B(q, e), g = s(e), p = A(r, t);
+  return /* @__PURE__ */ i(v, {
+    ...g,
+    ...a,
+    ref: p
+  });
+}, "AlertDialogCancel")), Z = N, G = j, oo = F, eo = $, ro = H, to = M, ao = z, lo = I, io = L, no = x(({ "data-theme": l, className: o, text: r, variant: e, onOpen: a, onClick: t }, g) => /* @__PURE__ */ i(G, {
+  asChild: !0,
+  children: /* @__PURE__ */ i(h, {
+    ref: g,
+    type: "button",
+    variant: e,
+    "data-theme": l,
+    className: m(o),
+    onClick: () => {
+      a(), t?.();
+    },
+    children: r
+  })
+}));
+export {
+  io as a,
+  Z as c,
+  ro as i,
+  lo as l,
+  to as n,
+  eo as o,
+  ao as r,
+  oo as s,
+  no as t
+};

package/dist/AnimatePresence-BsUYG9bm.js

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

package/dist/Breadcrumb-CHi5-wVa.js

@@ -0,0 +1,81 @@
+import { o as b } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as y } from "./prop-types-BCUW56rg.js";
+import { t as u } from "./utils-DnIJruo0.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";
+import d, { Fragment as x, forwardRef as N, useId as k } from "react";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+var l = /* @__PURE__ */ b(y());
+function m() {
+  return m = Object.assign || function(r) {
+    for (var n = 1; n < arguments.length; n++) {
+      var o = arguments[n];
+      for (var e in o) Object.prototype.hasOwnProperty.call(o, e) && (r[e] = o[e]);
+    }
+    return r;
+  }, m.apply(this, arguments);
+}
+function z(r, n) {
+  if (r == null) return {};
+  var o = P(r, n), e, t;
+  if (Object.getOwnPropertySymbols) {
+    var a = Object.getOwnPropertySymbols(r);
+    for (t = 0; t < a.length; t++)
+      e = a[t], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(r, e) && (o[e] = r[e]);
+  }
+  return o;
+}
+function P(r, n) {
+  if (r == null) return {};
+  for (var o = {}, e = Object.keys(r), t, a = 0; a < e.length; a++)
+    t = e[a], !(n.indexOf(t) >= 0) && (o[t] = r[t]);
+  return o;
+}
+var p = N(function(r, n) {
+  var o = r.color, e = o === void 0 ? "currentColor" : o, t = r.size, a = t === void 0 ? 24 : t, s = z(r, ["color", "size"]);
+  return /* @__PURE__ */ d.createElement("svg", m({
+    ref: n,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: a,
+    height: a,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: e,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, s), /* @__PURE__ */ d.createElement("polyline", { points: "9 18 15 12 9 6" }));
+});
+p.propTypes = {
+  color: l.default.string,
+  size: l.default.oneOfType([l.default.string, l.default.number])
+};
+p.displayName = "ChevronRight";
+var S = ({ "aria-label": r = "breadcrumb", backButton: n, className: o, steps: e, theme: t, wrapperClassName: a, ...s }) => {
+  const g = k();
+  return /* @__PURE__ */ h("nav", {
+    "aria-label": r,
+    "data-theme": t,
+    className: u(j({ className: a })),
+    children: [n && /* @__PURE__ */ i(w, {
+      ...n,
+      theme: t
+    }), /* @__PURE__ */ i("ol", {
+      className: u(O({ className: o })),
+      ...s,
+      children: e.map(({ label: c, ...v }, f) => /* @__PURE__ */ h(x, { children: [/* @__PURE__ */ i(_, {
+        ...v,
+        label: c,
+        isLast: f === e.length - 1
+      }), f !== e.length - 1 && /* @__PURE__ */ i("li", {
+        "aria-hidden": "true",
+        className: "flex items-center",
+        children: /* @__PURE__ */ i(p, { className: "text-gray-400 w-5 h-5" })
+      })] }, `${g}-${c}`))
+    })]
+  });
+};
+export {
+  S as t
+};

package/dist/CalendarPanel.css

@@ -0,0 +1 @@
+@keyframes konstruct-drp-slideInFromRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes konstruct-drp-slideInFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}td[data-outside=true].drp-range-middle:before{content:"";background-color:#eff6ff;position:absolute;inset:4px 0}.dark td[data-outside=true].drp-range-middle:before{background-color:#00ffaa1a}td.drp-range-middle:has(+td[data-outside=true]:not(.drp-range-middle):not(.drp-range-end)):before{border-top-right-radius:9999px!important;border-bottom-right-radius:9999px!important}td[data-outside=true]:not(.drp-range-middle):not(.drp-range-start)+td.drp-range-middle:before{border-top-left-radius:9999px!important;border-bottom-left-radius:9999px!important}td.drp-range-start:has(+td[data-outside=true]:not(.drp-range-middle):not(.drp-range-end)):before{display:none!important}td[data-outside=true]:not(.drp-range-middle):not(.drp-range-start)+td.drp-range-end:before{display:none!important}td.drp-range-middle:has(+td:empty):before{border-top-right-radius:9999px!important;border-bottom-right-radius:9999px!important}td:empty+td.drp-range-middle:before{border-top-left-radius:9999px!important;border-bottom-left-radius:9999px!important}td.drp-range-start:has(+td:empty):before{display:none!important}td:empty+td.drp-range-end:before{display:none!important}.konstruct-drp-carousel-transition{transition:transform var(--konstruct-drp-animation-duration) cubic-bezier(.25, .1, .25, 1)}