@kosmeo-ui/react 0.1.0

package/dist/components/layout/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/page/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAE5C,OAAO,cAAc,CAAC;AAmBtB,MAAM,IAAI,GAAG,CAAC,EACZ,QAAQ,EACR,UAAU,EACV,MAAM,EACN,GAAG,GAAG,MAAM,EACZ,QAAQ,GAAG,SAAS,EACpB,OAAO,GACG,EAAE,EAAE;IACd,MAAM,OAAO,GAAG;QACd,QAAQ;QACR,UAAU,IAAI,aAAa;QAC3B,MAAM,IAAI,eAAe;QACzB,GAAG,KAAK,MAAM,IAAI,cAAc,GAAG,EAAE;QACrC,QAAQ,KAAK,MAAM,IAAI,cAAc,QAAQ,EAAE;KAChD;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,OAAO,iBAAiB,YACzC,KAAC,QAAQ,cACP,KAAC,OAAO,KAAG,GACF,GACP,CACP,CAAC;IACJ,CAAC;IAED,OAAO,cAAK,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAO,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/layout/page/styles.css

@@ -0,0 +1,53 @@
+.k-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.k-page-fill {
+  height: 100%;
+  min-height: 0;
+}
+
+.k-page-padded {
+  padding: 1.5rem;
+}
+
+.k-page-gap-sm {
+  gap: 0.75rem;
+}
+
+.k-page-gap-md {
+  gap: 1.5rem;
+}
+
+.k-page-max-narrow {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.k-page-max-default {
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.k-page-max-wide {
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.k-page-loading {
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+}
+
+@media (max-width: 640px) {
+  .k-page-padded {
+    padding: 1rem;
+  }
+  .k-page-gap-md {
+    gap: 1rem;
+  }
+}

package/dist/components/layout/row/index.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithSize, FlexAlign, FlexJustify } from "../../types.js";
+import "./styles.css";
+export interface RowProps extends PropsWithSize {
+    /** The child element(s) that will appear in the Row */
+    children: React.ReactNode;
+    /** Inline styles forwarded to the underlying div. */
+    style?: React.CSSProperties;
+    /** Cross-axis alignment (`align-items`). Defaults to `stretch`. */
+    align?: FlexAlign;
+    /** Main-axis alignment (`justify-content`). Defaults to `start`. */
+    justify?: FlexJustify;
+    /** When true, enables `flex-wrap: wrap`. */
+    wrap?: boolean;
+    /** When true, renders as an inline-flex cluster (auto width, always row direction). Use for badge/tag groups beside other inline content. */
+    inline?: boolean;
+}
+declare const Row: (props: RowProps) => import("react").JSX.Element;
+export default Row;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/row/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,QAAS,SAAQ,aAAa;IAC7C,uDAAuD;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6IAA6I;IAC7I,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,GAAG,GAAI,OAAO,QAAQ,gCAiB3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/components/layout/row/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const Row = (props) => {
+    const { size = "md", align, justify, wrap, inline, style } = props;
+    const classes = [
+        "k-row",
+        `k-row-${size}`,
+        inline ? "k-row-inline" : "",
+        align ? `k-flex-align-${align}` : "",
+        justify ? `k-flex-justify-${justify}` : "",
+        wrap ? "k-flex-wrap" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", { className: classes, style: style, children: props.children }));
+};
+export default Row;
+//# sourceMappingURL=index.js.map

package/dist/components/layout/row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/row/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAiBtB,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IAC9B,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,OAAO,GAAG;QACd,OAAO;QACP,SAAS,IAAI,EAAE;QACf,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAC5B,KAAK,CAAC,CAAC,CAAC,gBAAgB,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QACpC,OAAO,CAAC,CAAC,CAAC,kBAAkB,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;KAC1B;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,YAClC,KAAK,CAAC,QAAQ,GACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/components/layout/row/styles.css

@@ -0,0 +1,33 @@
+.k-row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.k-row-inline {
+  display: inline-flex;
+  flex-direction: row;
+  width: auto;
+}
+
+.k-row-sm {
+  gap: 0.5rem;
+}
+
+.k-row-md {
+  gap: 1rem;
+}
+
+.k-row-lg {
+  gap: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .k-row {
+    flex-direction: row;
+  }
+  .k-row .k-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+}

package/dist/components/layout/sectionHeader/index.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface SectionHeaderProps {
+    title: ReactNode;
+    /** Small text shown below the title. */
+    subtitle?: ReactNode;
+    /** Pill/badge row shown beside the title (status pills, tags). */
+    badges?: ReactNode;
+    /** Small text/breadcrumb row shown above the title. */
+    preface?: ReactNode;
+    /** Center-aligned content between the title and actions. */
+    center?: ReactNode;
+    /** Right-side actions (buttons, dropdowns). */
+    actions?: ReactNode;
+    /** Optional element rendered before the title (icon, badge, avatar). */
+    leading?: ReactNode;
+    /** Heading level. Defaults to `h3`. `h1` adds a bottom divider by default. */
+    as?: "h1" | "h2" | "h3" | "h4";
+    /** Reduce vertical spacing. */
+    dense?: boolean;
+    /** Show bottom divider + extra margin. Defaults to `true` when `as="h1"`. */
+    divider?: boolean;
+}
+declare const SectionHeader: ({ title, subtitle, badges, preface, center, actions, leading, as: Tag, dense, divider, }: SectionHeaderProps) => import("react").JSX.Element;
+export default SectionHeader;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/sectionHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sectionHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,GAAI,0FAWpB,kBAAkB,gCAoCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/layout/sectionHeader/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+const SectionHeader = ({ title, subtitle, badges, preface, center, actions, leading, as: Tag = "h3", dense, divider, }) => {
+    const showDivider = divider ?? Tag === "h1";
+    const classes = [
+        "k-section-header",
+        `k-section-header-${Tag}`,
+        dense && "k-section-header-dense",
+        showDivider && "k-section-header-divider",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("header", { className: classes, children: [preface && _jsx("div", { className: "k-section-header-preface", children: preface }), _jsxs("div", { className: center
+                    ? "k-section-header-row k-section-header-row-with-center"
+                    : "k-section-header-row", children: [_jsxs("div", { className: "k-section-header-left", children: [leading && _jsx("div", { className: "k-section-header-leading", children: leading }), _jsxs("div", { className: "k-section-header-titles", children: [_jsx(Tag, { className: "k-section-header-title", children: title }), subtitle && (_jsx("div", { className: "k-section-header-subtitle", children: subtitle })), badges && _jsx("div", { className: "k-section-header-badges", children: badges })] })] }), center && _jsx("div", { className: "k-section-header-center", children: center }), actions && _jsx("div", { className: "k-section-header-actions", children: actions })] })] }));
+};
+export default SectionHeader;
+//# sourceMappingURL=index.js.map

package/dist/components/layout/sectionHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/sectionHeader/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAwBtB,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,EAAE,EAAE,GAAG,GAAG,IAAI,EACd,KAAK,EACL,OAAO,GACY,EAAE,EAAE;IACvB,MAAM,WAAW,GAAG,OAAO,IAAI,GAAG,KAAK,IAAI,CAAC;IAC5C,MAAM,OAAO,GAAG;QACd,kBAAkB;QAClB,oBAAoB,GAAG,EAAE;QACzB,KAAK,IAAI,wBAAwB;QACjC,WAAW,IAAI,0BAA0B;KAC1C;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kBAAQ,SAAS,EAAE,OAAO,aACvB,OAAO,IAAI,cAAK,SAAS,EAAC,0BAA0B,YAAE,OAAO,GAAO,EACrE,eACE,SAAS,EACP,MAAM;oBACJ,CAAC,CAAC,uDAAuD;oBACzD,CAAC,CAAC,sBAAsB,aAG5B,eAAK,SAAS,EAAC,uBAAuB,aACnC,OAAO,IAAI,cAAK,SAAS,EAAC,0BAA0B,YAAE,OAAO,GAAO,EACrE,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,GAAG,IAAC,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAO,EACpD,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,CAC5D,EACA,MAAM,IAAI,cAAK,SAAS,EAAC,yBAAyB,YAAE,MAAM,GAAO,IAC9D,IACF,EACL,MAAM,IAAI,cAAK,SAAS,EAAC,yBAAyB,YAAE,MAAM,GAAO,EACjE,OAAO,IAAI,cAAK,SAAS,EAAC,0BAA0B,YAAE,OAAO,GAAO,IACjE,IACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/layout/sectionHeader/styles.css

@@ -0,0 +1,116 @@
+.k-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.k-section-header-dense {
+  margin-bottom: 0.375rem;
+}
+
+.k-section-header-divider {
+  padding-bottom: 1rem;
+  border-bottom: 0.0625rem solid var(--border-color);
+  margin-bottom: 1.5rem;
+}
+
+.k-section-header-preface {
+  font-size: 0.875rem;
+  color: var(--text-color-secondary);
+}
+
+.k-section-header-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.k-section-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.k-section-header-row-with-center .k-section-header-left {
+  flex: 1;
+}
+
+.k-section-header-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.k-section-header-leading {
+  display: inline-flex;
+  align-items: center;
+}
+
+.k-section-header-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.k-section-header-title {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.25;
+  word-break: break-word;
+}
+
+.k-section-header-h1 .k-section-header-title {
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+.k-section-header-h2 .k-section-header-title {
+  font-size: 1.25rem;
+}
+.k-section-header-h3 .k-section-header-title {
+  font-size: 1rem;
+}
+.k-section-header-h4 .k-section-header-title {
+  font-size: 0.9375rem;
+}
+
+.k-section-header-subtitle {
+  font-size: 0.8125rem;
+  color: var(--text-color);
+  opacity: 0.65;
+}
+
+.k-section-header-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}
+
+.k-section-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.k-section-header-row-with-center .k-section-header-actions {
+  flex: 1;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .k-section-header-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .k-section-header-actions {
+    width: 100%;
+  }
+}

package/dist/components/navigation/breadcrumbs/index.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+export interface Breadcrumb {
+    /** The text to be displayed to the user */
+    label: string;
+    /** The URL path that the user will be taken to when clicked */
+    path: string;
+    /**
+     * Optional click handler. Receives the native event so consumers can
+     * `preventDefault()` to override the anchor's navigation (e.g. to keep
+     * SPA state rather than doing a full page load).
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+export interface BreadcrumbsProps extends PropsWithSize {
+    /** An array of Breadcrumb object that represent each part of the Breadcrumb tree */
+    items: Breadcrumb[];
+}
+declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react").JSX.Element;
+export default Breadcrumbs;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,oFAAoF;IACpF,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAsB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/navigation/breadcrumbs/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const Breadcrumbs = (props) => {
+    const { size = "md" } = props;
+    return (_jsx("nav", { "aria-label": "breadcrumb", children: _jsx("ol", { className: "k-breadcrumbs-list", children: props.items.map((item, index) => (_jsx("li", { className: `k-breadcrumb-item k-breadcrumb-item-${size}`, children: index < props.items.length - 1 ? (_jsx("a", { href: item.path, onClick: item.onClick, children: item.label })) : (_jsx("span", { children: item.label })) }, index))) }) }));
+};
+export default Breadcrumbs;
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAoBtB,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC9B,OAAO,CACL,4BAAgB,YAAY,YAC1B,aAAI,SAAS,EAAC,oBAAoB,YAC/B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,aAEE,SAAS,EAAE,uCAAuC,IAAI,EAAE,YAEvD,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChC,YAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,YACtC,IAAI,CAAC,KAAK,GACT,CACL,CAAC,CAAC,CAAC,CACF,yBAAO,IAAI,CAAC,KAAK,GAAQ,CAC1B,IATI,KAAK,CAUP,CACN,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/navigation/breadcrumbs/styles.css

@@ -0,0 +1,42 @@
+.k-breadcrumbs-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.k-breadcrumb-item {
+  font-size: var(--text-size-md);
+}
+
+.k-breadcrumb-item a {
+  text-decoration: none;
+  color: var(--text-color-link);
+}
+
+.k-breadcrumb-item a:hover {
+  text-decoration: underline;
+}
+
+.k-breadcrumb-item span {
+  color: var(--text-color-secondary);
+}
+
+.k-breadcrumb-item + .k-breadcrumb-item::before {
+  content: "/";
+  margin: 0 0.5rem;
+  color: var(--text-color-secondary);
+}
+
+.k-breadcrumb-item-sm {
+  font-size: var(--text-size-sm);
+}
+
+.k-breadcrumb-item-md {
+  font-size: var(--text-size-md);
+}
+
+.k-breadcrumb-item-lg {
+  font-size: var(--text-size-lg);
+}

package/dist/components/navigation/sidebar/index.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import "./styles.css";
+export interface SidebarProps {
+    children: ReactNode;
+}
+export declare const Sidebar: ({ children }: SidebarProps) => import("react").JSX.Element;
+export interface SidebarNavGroupProps {
+    label: ReactNode;
+    children: ReactNode;
+}
+export declare const SidebarNavGroup: ({ label, children }: SidebarNavGroupProps) => import("react").JSX.Element;
+type SidebarNavLinkOwnProps<E extends ElementType> = {
+    /** Element type used for the link. Pass `NavLink` from react-router for active styling. Defaults to `a`. */
+    as?: E;
+    /** Icon rendered before the label. */
+    icon?: IconDefinition;
+    children: ReactNode;
+};
+export type SidebarNavLinkProps<E extends ElementType = "a"> = SidebarNavLinkOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof SidebarNavLinkOwnProps<E>>;
+export declare const SidebarNavLink: <E extends ElementType = "a">(props: SidebarNavLinkProps<E>) => import("react").JSX.Element;
+export default Sidebar;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,cAAc,YAAY,gCAEjD,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,gCAOxE,CAAC;AAEF,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IACnD,4GAA4G;IAC5G,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IACzD,sBAAsB,CAAC,CAAC,CAAC,GACvB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,GAAG,EACxD,OAAO,mBAAmB,CAAC,CAAC,CAAC,gCAc9B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/navigation/sidebar/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./styles.css";
+export const Sidebar = ({ children }) => {
+    return _jsx("nav", { className: "k-sidebar-nav", children: children });
+};
+export const SidebarNavGroup = ({ label, children }) => {
+    return (_jsxs("div", { className: "k-sidebar-nav-group", children: [_jsx("div", { className: "k-sidebar-nav-group-label", children: label }), children] }));
+};
+export const SidebarNavLink = (props) => {
+    const { as, icon, children, ...rest } = props;
+    const Component = as ?? "a";
+    return (_jsxs(Component, { ...rest, className: "k-sidebar-nav-link", children: [icon && _jsx(FontAwesomeIcon, { icon: icon }), _jsx("span", { children: children })] }));
+};
+export default Sidebar;
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,cAAc,CAAC;AAMtB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAgB,EAAE,EAAE;IACpD,OAAO,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,CAAC;AACzD,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAwB,EAAE,EAAE;IAC3E,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAO,EACvD,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAIb,CAAC;IAC5B,MAAM,SAAS,GAAgB,EAAE,IAAI,GAAG,CAAC;IACzC,OAAO,CACL,MAAC,SAAS,OAAK,IAAI,EAAE,SAAS,EAAC,oBAAoB,aAChD,IAAI,IAAI,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,GAAI,EACxC,yBAAO,QAAQ,GAAQ,IACb,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/navigation/sidebar/styles.css

@@ -0,0 +1,57 @@
+.k-sidebar-nav {
+  flex: 1;
+  padding: 0.5rem 0;
+  overflow-y: auto;
+}
+
+.k-sidebar-nav-group + .k-sidebar-nav-group {
+  margin-top: 0.5rem;
+}
+
+.k-sidebar-nav-group-label {
+  padding: 0.5rem 1.5rem 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--overlay-light-medium);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.k-sidebar-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1.5rem;
+  color: var(--text-color-light);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.k-sidebar-nav-link:hover {
+  background-color: var(--overlay-light-weak);
+}
+
+.k-sidebar-nav-link.active {
+  background-color: var(--overlay-light-medium);
+  color: var(--text-color-light);
+  font-weight: 600;
+}
+
+.k-sidebar-nav-link > svg {
+  flex-shrink: 0;
+  width: 1.125rem;
+}
+
+.k-sidebar-nav-link > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/components/navigation/stepper/index.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export type StepperStatus = "pending" | "active" | "complete" | "error";
+export interface StepperStep {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    status: StepperStatus;
+    /** When false, this step ignores `onStepClick`. Defaults to true if `onStepClick` is provided. */
+    clickable?: boolean;
+}
+export interface StepperProps {
+    steps: StepperStep[];
+    /** Orientation. Defaults to horizontal. */
+    orientation?: "horizontal" | "vertical";
+    /** Optional handler invoked when a step is clicked. Provides the step `key` and its index. */
+    onStepClick?: (key: string, index: number) => void;
+}
+declare const Stepper: ({ steps, orientation, onStepClick, }: StepperProps) => import("react").JSX.Element;
+export default Stepper;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/stepper/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;IACtB,kGAAkG;IAClG,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD,QAAA,MAAM,OAAO,GAAI,sCAId,YAAY,gCAgCd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/navigation/stepper/index.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./styles.css";
+const defaultIconForStatus = (status, index) => {
+    if (status === "complete")
+        return _jsx(FontAwesomeIcon, { icon: faCheck });
+    if (status === "error")
+        return _jsx(FontAwesomeIcon, { icon: faXmark });
+    return _jsx("span", { children: index + 1 });
+};
+const Stepper = ({ steps, orientation = "horizontal", onStepClick, }) => {
+    return (_jsx("ol", { className: `k-stepper k-stepper-${orientation}`, "aria-label": "Progress", children: steps.map((step, i) => {
+            const isClickable = !!onStepClick &&
+                (step.clickable ?? true) &&
+                step.status !== "pending";
+            const handleClick = isClickable
+                ? () => onStepClick(step.key, i)
+                : undefined;
+            return (_jsxs("li", { className: `k-stepper-step k-stepper-step-${step.status}${isClickable ? " k-stepper-step-clickable" : ""}`, "aria-current": step.status === "active" ? "step" : undefined, onClick: handleClick, children: [_jsx("div", { className: "k-stepper-marker", children: step.icon ?? defaultIconForStatus(step.status, i) }), _jsx("div", { className: "k-stepper-label", children: step.label }), i < steps.length - 1 && (_jsx("div", { className: "k-stepper-connector", "aria-hidden": true }))] }, step.key));
+        }) }));
+};
+export default Stepper;
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/stepper/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,cAAc,CAAC;AAqBtB,MAAM,oBAAoB,GAAG,CAAC,MAAqB,EAAE,KAAa,EAAE,EAAE;IACpE,IAAI,MAAM,KAAK,UAAU;QAAE,OAAO,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC;IACrE,IAAI,MAAM,KAAK,OAAO;QAAE,OAAO,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC;IAClE,OAAO,yBAAO,KAAK,GAAG,CAAC,GAAQ,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,WAAW,GAAG,YAAY,EAC1B,WAAW,GACE,EAAE,EAAE;IACjB,OAAO,CACL,aAAI,SAAS,EAAE,uBAAuB,WAAW,EAAE,gBAAa,UAAU,YACvE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACrB,MAAM,WAAW,GACf,CAAC,CAAC,WAAW;gBACb,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC;gBACxB,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;YAC5B,MAAM,WAAW,GAAG,WAAW;gBAC7B,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;gBAChC,CAAC,CAAC,SAAS,CAAC;YACd,OAAO,CACL,cAEE,SAAS,EAAE,iCAAiC,IAAI,CAAC,MAAM,GACrD,WAAW,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAC9C,EAAE,kBACY,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3D,OAAO,EAAE,WAAW,aAEpB,cAAK,SAAS,EAAC,kBAAkB,YAC9B,IAAI,CAAC,IAAI,IAAI,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,GAC9C,EACN,cAAK,SAAS,EAAC,iBAAiB,YAAE,IAAI,CAAC,KAAK,GAAO,EAClD,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACvB,cAAK,SAAS,EAAC,qBAAqB,wBAAe,CACpD,KAbI,IAAI,CAAC,GAAG,CAcV,CACN,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/navigation/stepper/styles.css

@@ -0,0 +1,101 @@
+.k-stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.k-stepper-horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.k-stepper-vertical {
+  flex-direction: column;
+}
+
+.k-stepper-step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  flex: 1;
+}
+
+.k-stepper-step-clickable {
+  cursor: pointer;
+}
+
+.k-stepper-horizontal .k-stepper-step {
+  flex-direction: column;
+  text-align: center;
+}
+
+.k-stepper-marker {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  border-radius: 50%;
+  border: 0.125rem solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  background: var(--background-color);
+  color: var(--text-color);
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+  z-index: 1;
+}
+
+.k-stepper-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.k-stepper-connector {
+  position: absolute;
+  background: var(--border-color);
+}
+
+.k-stepper-horizontal .k-stepper-connector {
+  top: 1rem;
+  left: 50%;
+  right: -50%;
+  height: 0.125rem;
+}
+
+.k-stepper-vertical .k-stepper-connector {
+  left: 0.9375rem;
+  top: 2rem;
+  bottom: -0.5rem;
+  width: 0.125rem;
+}
+
+.k-stepper-step-active .k-stepper-marker {
+  border-color: var(--primary-color);
+  background: var(--primary-color);
+  color: var(--text-color-light);
+}
+
+.k-stepper-step-complete .k-stepper-marker {
+  border-color: var(--success-color);
+  background: var(--success-color);
+  color: var(--text-color-light);
+}
+
+.k-stepper-step-error .k-stepper-marker {
+  border-color: var(--danger-color);
+  background: var(--danger-color);
+  color: var(--text-color-light);
+}
+
+.k-stepper-step-complete .k-stepper-connector,
+.k-stepper-step-active .k-stepper-connector {
+  background: var(--primary-color);
+}