react-component-kit-ui 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-11-05
+
+First public release of **React Components Kit**: the complete Astro Components Kit catalogue for React 18 & 19, with the docs site at [reactcomponents.dev](https://reactcomponents.dev).
+
+### Added
+- **290 components** in 13 entry points: `buttons`, `forms`, `cards`, `feedback`, `navigation`, `layout`, `overlays`, `data`, `typography`, `charts` (44 pure-SVG charts), `ecommerce`, `app` and `sections` (51 full-page sections).
+- **3 multi-page templates**: `templates/ecommerce` (Nova Store), `templates/ecommerce-editorial` (Forma) and `templates/saas-hotel` (Lobby), themed with the corporate sky-blue palette.
+- Optional-peer entry points: `apexcharts` (AreaChart, BarChart, DonutChart) and `three` (Galaxy3D) — never resolved unless you import them.
+- Design tokens (`global.css`) with dark (default) and light (`data-theme="light"`) themes; every component reads them, including translucent accents (`color-mix`).
+- Scoped component CSS (`data-rk-*` + `:where()`), so styles never leak or collide; one `styles.css` bundle.
+- ESM build, `.d.ts` types (also for `moduleResolution: "node"` via `typesVersions`), `'use client'` on every module, SSR-safe ids (`useId`).
+- Docs site (EN/ES/RU): live preview, usage and full source for every component, section and template.
+
+### Fixed (also present in the Astro kit)
+- `AreaChart`, `BarChart` and `DonutChart` never rendered (CSS variables passed to ApexCharts, wrong donut total field).
+- `GlassModal` centring; `StickySidebarWrapper` `class:list` typo.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 konstantinwdk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,226 @@
-# Temporary Holding Version
+# ⚛ React Component Kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> A free, open-source, accessible UI component library for **React 18 & 19**.
+> Dark-first glassmorphism design, zero runtime dependencies, fully typed.
+>
+> **🌐 Browse components** at [reactcomponents.dev](https://reactcomponents.dev)
+> **📦 Install** with `npm install react-component-kit-ui`, or **copy-paste** a single component.
+>
+> Sister project of [Astro Component Kit](https://astrocomponents.dev): same design system, same class names, same look. Built for React.
+
+![License: MIT](https://img.shields.io/badge/License-MIT-6366f1.svg)
+![React](https://img.shields.io/badge/React-18%20%7C%2019-61dafb.svg)
+![npm](https://img.shields.io/npm/v/react-component-kit-ui.svg)
+![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg)
+![PRs Welcome](https://img.shields.io/badge/PRs-welcome-34d399.svg)
+
+---
+
+## ✨ Features
+
+- 🎨 **Dark & light theme**: dark first, with opt-in `data-theme="light"` and shared CSS design tokens
+- ♿ **Accessible**: WCAG 2.1 AA targets, ARIA roles, keyboard support, native `<dialog>` for modals
+- 🧩 **Self-contained components**: each one is a `.tsx` + `.css` pair with no internal imports, so you can copy a single file into your project
+- ⚡ **Zero runtime dependencies**: only `react` as a peer dependency, plain CSS (no Tailwind, no CSS-in-JS)
+- 🔷 **Fully typed**: every component exports its `Props` interface and forwards native HTML attributes (`onClick`, `aria-*`, `className`, `style`…)
+- ▲ **Next.js ready**: every module ships with `'use client'`; SSR-safe (no `Math.random()` ids, uses `useId()`)
+- 🌳 **Tree-shakeable**: import per category (`react-component-kit-ui/buttons`)
+
+---
+
+## 🚀 Quick Start
+
+### 1. Install
+
+```bash
+npm install react-component-kit-ui
+```
+
+### 2. Import the styles once (e.g. in `main.tsx` or `app/layout.tsx`)
+
+```tsx
+import 'react-component-kit-ui/global.css'; // design tokens, reset, fonts (required)
+import 'react-component-kit-ui/styles.css'; // component styles
+```
+
+> Already have your own reset? `global.css` is optional as long as you define the `--c-*`, `--r-*` and `--sp-*` tokens (see [Design tokens](#-design-tokens)).
+
+### 3. Use components
+
+```tsx
+import { GlassButton, LoadingButton } from 'react-component-kit-ui/buttons';
+import { GlassAlert, GlassModal, Badge } from 'react-component-kit-ui/feedback';
+
+export function Example() {
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  return (
+    <>
+      <GlassAlert type="success" title="Saved">Your changes were stored.</GlassAlert>
+
+      <GlassButton onClick={() => setOpen(true)}>Delete project</GlassButton>
+      <LoadingButton isLoading={saving} onClick={save}>Save</LoadingButton>
+      <Badge variant="success" dot pulse>Live</Badge>
+
+      <GlassModal open={open} onClose={() => setOpen(false)} onConfirm={remove} title="Delete project?">
+        This action cannot be undone.
+      </GlassModal>
+    </>
+  );
+}
+```
+
+Or import everything from the root: `import { GlassButton, Badge } from 'react-component-kit-ui'`.
+
+### Option B: copy & paste
+
+Every component is self-contained. Copy `GlassButton.tsx` + `GlassButton.css` from
+[`src/components/lib/buttons/`](./src/components/lib/buttons) into your project, and include the tokens from
+[`src/styles/global.css`](./src/styles/global.css).
+
+---
+
+## 📚 Components
+
+**290 components, 51 full-page sections and 3 multi-page templates**, the complete Astro Components Kit catalogue ported to React.
+
+| Category | Import | Items |
+|----------|--------|:-----:|
+| Buttons | `react-component-kit-ui/buttons` | 22 |
+| Forms | `react-component-kit-ui/forms` | 24 |
+| Cards | `react-component-kit-ui/cards` | 22 |
+| Feedback | `react-component-kit-ui/feedback` | 22 |
+| Navigation | `react-component-kit-ui/navigation` | 23 |
+| Layout | `react-component-kit-ui/layout` | 22 |
+| Overlays | `react-component-kit-ui/overlays` | 23 |
+| Data display | `react-component-kit-ui/data` | 23 |
+| Typography | `react-component-kit-ui/typography` | 24 |
+| Charts (pure SVG) | `react-component-kit-ui/charts` | 44 |
+| Charts (ApexCharts) | `react-component-kit-ui/apexcharts` | 3 |
+| E-commerce | `react-component-kit-ui/ecommerce` | 25 |
+| App & dashboard | `react-component-kit-ui/app` | 13 |
+| Sections | `react-component-kit-ui/sections` | 51 |
+| Templates | `react-component-kit-ui/templates/ecommerce` · `/templates/ecommerce-editorial` · `/templates/saas-hotel` | 3 |
+
+Browse every component with a live preview, usage and full source at [reactcomponents.dev](https://reactcomponents.dev).
+
+```tsx
+import { StoreHomePage, demoStore } from 'react-component-kit-ui/templates/ecommerce';
+
+// app/page.tsx (Next.js)
+export default function Page() {
+  return <StoreHomePage store={{ ...demoStore, name: 'My Shop' }} />;
+}
+```
+
+Everything has zero runtime dependencies except two optional peers, which live in their own entry points so your bundler never looks for a package you did not install:
+
+| Entry point | Components | Install |
+|-------------|------------|---------|
+| `react-component-kit-ui/apexcharts` | `AreaChart`, `BarChart`, `DonutChart` | `npm install apexcharts` |
+| `react-component-kit-ui/three` | `Galaxy3D` | `npm install three` |
+
+The other 44 charts in `react-component-kit-ui/charts` are pure SVG.
+
+### How styles stay isolated
+
+Like Astro's scoped styles, every component's CSS is scoped to its own markup with a `data-rk-<hash>` attribute and `:where()` selectors, so it never leaks into your app (and keeps the original specificity). Global design tokens live in `global.css`.
+
+---
+
+## 🎨 Design tokens
+
+All components read CSS custom properties defined in `global.css`. Override them to brand the kit:
+
+```css
+:root {
+  --c-primary: #6366f1;        /* brand color */
+  --c-primary-light: #818cf8;
+  --c-bg: #050505;             /* page background */
+  --c-text-1: #ffffff;         /* headings */
+  --c-text-2: #a3a3a3;         /* body */
+  --r-md: 12px;                /* radius scale: --r-sm/md/lg/xl/full */
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+```
+
+Light theme: add `data-theme="light"` to `<html>`.
+
+---
+
+## 🛠 Development
+
+```bash
+git clone https://github.com/konstantinWDK/react-components.git
+cd react-components
+npm install
+npm run dev          # website (Next.js) → http://localhost:3000
+```
+
+| Script | What it does |
+|--------|--------------|
+| `npm run dev` | Website (Next.js) with hot reload |
+| `npm run build` | Library build → `dist/` (ESM, `.d.ts`, `styles.css`, `global.css`) |
+| `npm run build:site` | Static website → `out/` (what reactcomponents.dev serves) |
+| `npm run typecheck` | TypeScript strict check |
+| `npm run check-css` | Fails if two components define the same class / `@keyframes` |
+| `npm run pack:check` | Build + list the files that would be published to npm |
+
+### Project structure
+
+```
+src/
+├── components/
+│   ├── index.ts                 # root barrel
+│   └── lib/
+│       ├── buttons/
+│       │   ├── GlassButton.tsx  # component + exported Props
+│       │   ├── GlassButton.css  # its styles (same BEM classes as the Astro kit)
+│       │   └── index.ts         # category barrel → react-component-kit-ui/buttons
+│       └── feedback/ …
+└── styles/global.css            # design tokens + reset (shared with the Astro kit)
+app/                             # Next.js routes: (en)/… at the root, [lang]/… for /es and /ru
+site/                            # reactcomponents.dev (same structure as astrocomponents.dev)
+├── config/site.ts               # site name, URL, SEO copy per locale
+├── i18n/                        # translations (copied from the Astro kit, adapted to React)
+├── data/registry.json           # component/section/template metadata exported from the Astro kit
+├── demos/
+│   ├── meta.ts                  # ported slugs → source file + usage snippet
+│   └── <category>.tsx           # live previews (one lazy chunk per category)
+├── layout/ docs/ home/ pages/   # header, sidebar, docs page, home, catalogs
+└── styles/                      # site CSS ported from the Astro pages
+scripts/
+├── extract-css.mjs              # port <style> blocks from the Astro kit
+└── check-css.mjs                # class / keyframe collision guard
+```
+
+### Porting from the Astro kit
+
+The library is generated from [astro-component-kit](https://github.com/konstantinWDK/astro-components) by a source-to-source converter, then type-checked and visually audited:
+
+```bash
+node scripts/astro2react.mjs forms                       # .astro → .tsx + scoped .css
+python3 scripts/port-fixes.py                            # hand fixes re-applied after a --force regeneration
+node scripts/gen-site-meta.mjs                           # website metadata, usage snippets, previews
+node scripts/gen-hardcoded-previews.mjs                  # hand-written demos from PreviewRenderer.astro
+npx tsx --tsconfig scripts/smoke/tsconfig.json --import ./scripts/smoke/register.mjs scripts/smoke/ssr-smoke.tsx  # SSR smoke test
+node scripts/smoke/audit-pages.mjs http://localhost:5200  # browser audit of every docs page (needs a served build)
+```
+
+What the converter does: frontmatter → typed props with defaults, `class:list` → `className`, SVG/HTML attribute names, `style` strings → objects, `set:html`, `<slot>` → `children` / named props, keys for `.map()`, Astro-style scoped CSS, and client `<script>` blocks → a mount effect. `buttons/` and `feedback/` are hand-written ports.
+
+## 🚢 Deployment & releases
+
+- **Website** (reactcomponents.dev): Docker + Coolify, see [COOLIFY.md](./COOLIFY.md).
+- **npm package**: see [PUBLISHING.md](./PUBLISHING.md) and [CHANGELOG.md](./CHANGELOG.md).
+
+---
+
+## 🤝 Contributing
+
+PRs are welcome. Please run `npm run typecheck && npm run build` before opening one, and keep components self-contained and accessible.
+
+## 📄 License
+
+[MIT](./LICENSE) © konstantinwdk

package/dist/apexcharts.js

@@ -0,0 +1,327 @@
+"use client";
+import { jsx as o, Fragment as N, jsxs as u } from "react/jsx-runtime";
+import { useRef as v, useEffect as _ } from "react";
+function q({
+  title: l,
+  subtitle: d,
+  categories: g = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  series: y = [{ name: "Data", data: [31, 40, 28, 51, 42, 109, 100] }],
+  height: k = 350,
+  colors: x = ["var(--c-accent, #b8860b)", "var(--c-primary, #1e40af)", "#3b82f6"],
+  showGrid: S = !0,
+  className: C = ""
+}) {
+  const A = {
+    categories: g,
+    series: y,
+    height: k,
+    colors: x,
+    showGrid: S
+  }, f = v(!1);
+  return _(() => {
+    if (f.current) return;
+    f.current = !0;
+    async function b() {
+      const m = document.querySelectorAll('.premium-chart-card[data-chart-type="area"]');
+      if (m.length === 0) return;
+      let n;
+      try {
+        n = await import("apexcharts");
+      } catch (a) {
+        console.error("ApexCharts failed to load:", a);
+        return;
+      }
+      const p = n.default || n;
+      m.forEach((a) => {
+        if (a.getAttribute("data-initialized")) return;
+        const s = a.getAttribute("data-config");
+        if (!s) return;
+        const t = JSON.parse(s);
+        t.colors = (t.colors || []).map((r) => {
+          const e = /^var\((--[\w-]+)\s*(?:,\s*([^)]+))?\)$/.exec(String(r).trim());
+          return e ? getComputedStyle(a).getPropertyValue(e[1]).trim() || (e[2] || "").trim() : r;
+        });
+        const c = a.querySelector(".chart-container"), i = a.querySelector(".chart-fallback");
+        if (!c) return;
+        const h = {
+          series: t.series,
+          chart: {
+            type: "area",
+            height: t.height,
+            toolbar: { show: !1 },
+            zoom: { enabled: !1 },
+            background: "transparent",
+            fontFamily: "Inter, sans-serif",
+            animations: {
+              enabled: !0,
+              easing: "easeinout",
+              speed: 800
+            }
+          },
+          colors: t.colors,
+          dataLabels: { enabled: !1 },
+          stroke: { curve: "smooth", width: 3 },
+          fill: {
+            type: "gradient",
+            gradient: {
+              shadeIntensity: 1,
+              opacityFrom: 0.45,
+              opacityTo: 0.05,
+              stops: [20, 100]
+            }
+          },
+          xaxis: {
+            categories: t.categories,
+            axisBorder: { show: !1 },
+            axisTicks: { show: !1 },
+            labels: { style: { colors: "#64748b", fontSize: "12px" } }
+          },
+          yaxis: {
+            labels: { style: { colors: "#64748b", fontSize: "12px" } }
+          },
+          grid: {
+            show: t.showGrid,
+            borderColor: "rgba(148, 163, 184, 0.12)",
+            strokeDashArray: 4
+          },
+          legend: {
+            show: !0,
+            position: "top",
+            horizontalAlign: "right",
+            labels: { colors: "#94a3b8" }
+          },
+          tooltip: { theme: "dark" },
+          theme: { mode: "dark" }
+        };
+        try {
+          new p(c, h).render().then(() => {
+            i && (i.style.display = "none");
+          }), a.setAttribute("data-initialized", "true");
+        } catch (r) {
+          console.error("Failed to render chart:", r), i && (i.textContent = "Failed to load chart");
+        }
+      });
+    }
+    b();
+  }, []), /* @__PURE__ */ o(N, { children: /* @__PURE__ */ u("div", { className: `premium-chart-card ${C}`, "data-chart-type": "area", "data-config": JSON.stringify(A), "data-rk-163adb": "", children: [
+    (l || d) && /* @__PURE__ */ u("div", { className: "premium-chart-card__header", "data-rk-163adb": "", children: [
+      l && /* @__PURE__ */ o("h3", { className: "premium-chart-card__title", "data-rk-163adb": "", children: l }),
+      d && /* @__PURE__ */ o("p", { className: "premium-chart-card__subtitle", "data-rk-163adb": "", children: d })
+    ] }),
+    /* @__PURE__ */ u("div", { className: "premium-chart-card__body", "data-rk-163adb": "", children: [
+      /* @__PURE__ */ o("div", { className: "chart-container", "data-rk-163adb": "" }),
+      /* @__PURE__ */ o("div", { className: "chart-fallback", "data-rk-163adb": "", children: "Loading Chart..." })
+    ] })
+  ] }) });
+}
+function O({
+  title: l,
+  subtitle: d,
+  categories: g = ["Jan", "Feb", "Mar", "Apr", "May"],
+  series: y = [{ name: "Sessions", data: [44, 55, 41, 67, 22] }],
+  height: k = 350,
+  colors: x = ["var(--c-accent, #b8860b)", "#3b82f6", "#10b981"],
+  horizontal: S = !1,
+  stacked: C = !1,
+  className: A = ""
+}) {
+  const f = {
+    categories: g,
+    series: y,
+    height: k,
+    colors: x,
+    horizontal: S,
+    stacked: C
+  }, b = v(!1);
+  return _(() => {
+    if (b.current) return;
+    b.current = !0;
+    async function m() {
+      const n = document.querySelectorAll('.premium-chart-card[data-chart-type="bar"]');
+      if (n.length === 0) return;
+      let p;
+      try {
+        p = await import("apexcharts");
+      } catch (s) {
+        console.error("ApexCharts failed to load:", s);
+        return;
+      }
+      const a = p.default || p;
+      n.forEach((s) => {
+        if (s.getAttribute("data-initialized")) return;
+        const t = s.getAttribute("data-config");
+        if (!t) return;
+        const c = JSON.parse(t);
+        c.colors = (c.colors || []).map((e) => {
+          const w = /^var\((--[\w-]+)\s*(?:,\s*([^)]+))?\)$/.exec(String(e).trim());
+          return w ? getComputedStyle(s).getPropertyValue(w[1]).trim() || (w[2] || "").trim() : e;
+        });
+        const i = s.querySelector(".chart-container"), h = s.querySelector(".chart-fallback");
+        if (!i) return;
+        const r = {
+          series: c.series,
+          chart: {
+            type: "bar",
+            height: c.height,
+            stacked: c.stacked,
+            toolbar: { show: !1 },
+            background: "transparent",
+            fontFamily: "Inter, sans-serif"
+          },
+          plotOptions: {
+            bar: {
+              horizontal: c.horizontal,
+              columnWidth: "55%",
+              borderRadius: 8,
+              borderRadiusApplication: "end"
+            }
+          },
+          colors: c.colors,
+          dataLabels: { enabled: !1 },
+          xaxis: {
+            categories: c.categories,
+            axisBorder: { show: !1 },
+            axisTicks: { show: !1 },
+            labels: { style: { colors: "#64748b", fontSize: "12px" } }
+          },
+          yaxis: {
+            labels: { style: { colors: "#64748b", fontSize: "12px" } }
+          },
+          grid: {
+            borderColor: "rgba(148, 163, 184, 0.12)",
+            strokeDashArray: 4
+          },
+          legend: {
+            show: !0,
+            position: "top",
+            horizontalAlign: "right",
+            labels: { colors: "#94a3b8" }
+          },
+          tooltip: { theme: "dark" },
+          theme: { mode: "dark" }
+        };
+        try {
+          new a(i, r).render().then(() => {
+            h && (h.style.display = "none");
+          }), s.setAttribute("data-initialized", "true");
+        } catch (e) {
+          console.error("Failed to render chart:", e), h && (h.textContent = "Failed to load chart");
+        }
+      });
+    }
+    m();
+  }, []), /* @__PURE__ */ o(N, { children: /* @__PURE__ */ u("div", { className: `premium-chart-card ${A}`, "data-chart-type": "bar", "data-config": JSON.stringify(f), "data-rk-006992": "", children: [
+    (l || d) && /* @__PURE__ */ u("div", { className: "premium-chart-card__header", "data-rk-006992": "", children: [
+      l && /* @__PURE__ */ o("h3", { className: "premium-chart-card__title", "data-rk-006992": "", children: l }),
+      d && /* @__PURE__ */ o("p", { className: "premium-chart-card__subtitle", "data-rk-006992": "", children: d })
+    ] }),
+    /* @__PURE__ */ u("div", { className: "premium-chart-card__body", "data-rk-006992": "", children: [
+      /* @__PURE__ */ o("div", { className: "chart-container", "data-rk-006992": "" }),
+      /* @__PURE__ */ o("div", { className: "chart-fallback", "data-rk-006992": "", children: "Loading Chart..." })
+    ] })
+  ] }) });
+}
+function J({
+  title: l,
+  labels: d = ["Direct", "Social", "Referral"],
+  series: g = [44, 33, 23],
+  height: y = 350,
+  colors: k = ["var(--c-accent, #b8860b)", "#3b82f6", "#10b981", "#f59e0b", "#ef4444"],
+  centerLabel: x = "Total",
+  pie: S = !1,
+  className: C = ""
+}) {
+  const A = {
+    labels: d,
+    series: g,
+    height: y,
+    colors: k,
+    centerLabel: x,
+    pie: S
+  }, f = v(!1);
+  return _(() => {
+    if (f.current) return;
+    f.current = !0;
+    async function b() {
+      const m = document.querySelectorAll('.premium-chart-card[data-chart-type="donut"]');
+      if (m.length === 0) return;
+      let n;
+      try {
+        n = await import("apexcharts");
+      } catch (a) {
+        console.error("ApexCharts failed to load:", a);
+        return;
+      }
+      const p = n.default || n;
+      m.forEach((a) => {
+        if (a.getAttribute("data-initialized")) return;
+        const s = a.getAttribute("data-config");
+        if (!s) return;
+        const t = JSON.parse(s);
+        t.colors = (t.colors || []).map((r) => {
+          const e = /^var\((--[\w-]+)\s*(?:,\s*([^)]+))?\)$/.exec(String(r).trim());
+          return e ? getComputedStyle(a).getPropertyValue(e[1]).trim() || (e[2] || "").trim() : r;
+        });
+        const c = a.querySelector(".chart-container"), i = a.querySelector(".chart-fallback");
+        if (!c) return;
+        const h = {
+          series: t.series,
+          labels: t.labels,
+          chart: {
+            type: t.pie ? "pie" : "donut",
+            height: t.height,
+            background: "transparent",
+            fontFamily: "Inter, sans-serif"
+          },
+          colors: t.colors,
+          stroke: { show: !1 },
+          dataLabels: { enabled: !1 },
+          plotOptions: {
+            pie: {
+              donut: {
+                size: "75%",
+                labels: {
+                  show: !t.pie,
+                  name: { show: !0, color: "#94a3b8", fontSize: "14px" },
+                  value: { show: !0, color: "#ffffff", fontSize: "24px", fontWeight: 800 },
+                  total: {
+                    show: !0,
+                    label: t.centerLabel,
+                    color: "#94a3b8",
+                    formatter: (r) => r.globals.seriesTotals.reduce((e, w) => e + w, 0)
+                  }
+                }
+              }
+            }
+          },
+          legend: {
+            show: !0,
+            position: "bottom",
+            labels: { colors: "#94a3b8" }
+          },
+          tooltip: { theme: "dark" },
+          theme: { mode: "dark" }
+        };
+        try {
+          new p(c, h).render().then(() => {
+            i && (i.style.display = "none");
+          }), a.setAttribute("data-initialized", "true");
+        } catch (r) {
+          console.error("Failed to render chart:", r), i && (i.textContent = "Failed to load chart");
+        }
+      });
+    }
+    b();
+  }, []), /* @__PURE__ */ o(N, { children: /* @__PURE__ */ u("div", { className: `premium-chart-card ${C}`, "data-chart-type": "donut", "data-config": JSON.stringify(A), "data-rk-ab60a1": "", children: [
+    l && /* @__PURE__ */ o("div", { className: "premium-chart-card__header", "data-rk-ab60a1": "", children: /* @__PURE__ */ o("h3", { className: "premium-chart-card__title", "data-rk-ab60a1": "", children: l }) }),
+    /* @__PURE__ */ u("div", { className: "premium-chart-card__body", "data-rk-ab60a1": "", children: [
+      /* @__PURE__ */ o("div", { className: "chart-container", "data-rk-ab60a1": "" }),
+      /* @__PURE__ */ o("div", { className: "chart-fallback", "data-rk-ab60a1": "", children: "Loading Chart..." })
+    ] })
+  ] }) });
+}
+export {
+  q as AreaChart,
+  O as BarChart,
+  J as DonutChart
+};

package/dist/app.js

@@ -0,0 +1,21 @@
+"use client";
+import { A as e, a as r, b as o, c as i, D as p, G as t, H as d, P as n, d as c, R as l, S as b, e as g, T as m, f as u, g as A, h as S, i as h } from "./chunks/AuthCard-BkWHMFho.js";
+export {
+  e as AppSidebar,
+  r as AppTopbar,
+  o as ArrivalsBoard,
+  i as AuthCard,
+  p as DataTable,
+  t as GuestProfileCard,
+  d as HousekeepingBoard,
+  n as PageHeader,
+  c as PlanUsageCard,
+  l as RoomRack,
+  b as SettingsSection,
+  g as SwitchRow,
+  m as TeamMembers,
+  u as appIcon,
+  A as appIcons,
+  S as hueFrom,
+  h as initials
+};

package/dist/buttons.js

@@ -0,0 +1,26 @@
+"use client";
+import { A as a, B as n, C as u, D as s, G as B, a as e, b as i, L as r, c as l, M as d, d as h, N as c, e as m, P as p, R as G, f as R, g as S, S as w, h as D, i as P, T as b, j as g } from "./chunks/TiltGlowButton-BRHwq9Af.js";
+export {
+  a as AnimatedIconButton,
+  n as BorderDrawButton,
+  u as CyberpunkButton,
+  s as DoubleBorderButton,
+  B as GhostOutlineButton,
+  e as GlassButton,
+  i as GlowButton,
+  r as LiquidButton,
+  l as LoadingButton,
+  d as MagneticButton,
+  h as MinimalPillButton,
+  c as NeonBorderButton,
+  m as NeumorphicButton,
+  p as PulseButton,
+  G as RetroArcadeButton,
+  R as RetroShadowButton,
+  S as RippleButton,
+  w as ShimmerButton,
+  D as ShinyButton,
+  P as SlideRevealButton,
+  b as ThreeDPushButton,
+  g as TiltGlowButton
+};

package/dist/cards.js

@@ -0,0 +1,26 @@
+"use client";
+import { B as s, C as i, E as e, G as d, a as C, b as t, c as o, I as n, K as l, M as c, d as m, N as P, e as u, P as G, f as b, g as f, R as g, S as M, h as T, T as h, i as p, W as E } from "./chunks/StatsTrendCard--nij2Jv0.js";
+export {
+  s as BlogHorizontalCard,
+  i as CyberFeatureCard,
+  e as EcommerceProductCard,
+  d as GithubRepoCard,
+  C as GlassCard,
+  t as GlassEventCard,
+  o as GlowPortfolioCard,
+  n as InteractiveTiltCard,
+  l as KanbanItemCard,
+  c as MinimalLinkCard,
+  m as MusicPlayerMini,
+  P as NeumorphicCard,
+  u as NotificationCard,
+  G as PricingCard,
+  b as PricingCompareMiniCard,
+  f as ProfileCard,
+  g as RetroGameCard,
+  M as StatCard,
+  T as StatsTrendCard,
+  h as TaskKanbanCard,
+  p as TestimonialCardClean,
+  E as WeatherWidgetCard
+};