@kosmeo-ui/react 0.1.0

package/dist/components/inputs/typeahead/styles.css

@@ -0,0 +1,86 @@
+.k-typeahead-dropdown-container {
+  position: relative;
+  width: 100%;
+}
+
+.k-typeahead-input-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.k-typeahead-options-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+.k-typeahead-options-list-portal {
+  z-index: 10000;
+  background-color: var(--background-color-light);
+  border: 0.0625rem solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 0.25rem 0.25rem;
+  overflow-y: auto;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-shadow:
+    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+}
+
+.k-typeahead-options-list-large {
+  max-height: 30rem;
+}
+
+.k-typeahead-options-list-small {
+  max-height: 12.5rem;
+}
+
+.k-typeahead-option {
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-color);
+}
+
+.k-typeahead-option:hover,
+.k-typeahead-option:focus {
+  background-color: var(--background-color-dark);
+}
+
+.k-typeahead-no-results-item {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+}
+
+.k-typeahead-option-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-typeahead-option-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-typeahead-option-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}
+
+.k-typeahead-option-highlighted {
+  background-color: var(--background-color-dark);
+  cursor: pointer;
+}
+
+.k-typeahead-loading {
+  text-align: center;
+  color: var(--text-color-secondary);
+  font-style: italic;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-size-sm);
+}

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

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface AuthPageProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Max card width. Defaults to "narrow" = 25rem. "wide" = 31rem. */
+    width?: "narrow" | "wide";
+    children: ReactNode;
+    /** Optional footer below card (e.g., "Already have account? Sign in"). */
+    footer?: ReactNode;
+}
+declare const AuthPage: ({ title, subtitle, width, children, footer, }: AuthPageProps) => import("react").JSX.Element;
+export default AuthPage;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/authPage/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,+CAMf,aAAa,gCAaf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+const AuthPage = ({ title, subtitle, width = "narrow", children, footer, }) => {
+    return (_jsxs("div", { className: "k-auth-page", children: [_jsxs("div", { className: `k-auth-page-card k-auth-page-card-${width}`, children: [_jsxs("div", { className: "k-auth-page-header", children: [_jsx("h1", { className: "k-auth-page-title", children: title }), subtitle && _jsx("p", { className: "k-auth-page-subtitle", children: subtitle })] }), _jsx("div", { className: "k-auth-page-body", children: children })] }), footer && _jsx("div", { className: "k-auth-page-footer", children: footer })] }));
+};
+export default AuthPage;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/authPage/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAYtB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,QAAQ,EACR,MAAM,GACQ,EAAE,EAAE;IAClB,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAE,qCAAqC,KAAK,EAAE,aAC1D,eAAK,SAAS,EAAC,oBAAoB,aACjC,aAAI,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAM,EAC7C,QAAQ,IAAI,YAAG,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAK,IAC3D,EACN,cAAK,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAO,IAC9C,EACL,MAAM,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAO,IACzD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,63 @@
+.k-auth-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 2rem 1rem;
+  background-color: var(--background-color);
+}
+
+.k-auth-page-card {
+  width: 100%;
+  background: var(--background-color);
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.75rem;
+  box-shadow: 0 0.3125rem 0.9375rem var(--shadow-color);
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.k-auth-page-card-narrow {
+  max-width: 25rem;
+}
+
+.k-auth-page-card-wide {
+  max-width: 31rem;
+}
+
+.k-auth-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.k-auth-page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.k-auth-page-subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-color);
+  opacity: 0.75;
+}
+
+.k-auth-page-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.k-auth-page-footer {
+  font-size: 0.875rem;
+  color: var(--text-color);
+  opacity: 0.75;
+  text-align: center;
+}

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface BorderedSectionProps {
+    children: ReactNode;
+    /** Optional title shown above the body. */
+    title?: ReactNode;
+    /** Right-aligned actions in the title row. Implies a title row even when `title` is empty. */
+    actions?: ReactNode;
+    /** Body layout. `"stack"` (default) stacks children; `"row"` lays them out as a horizontal flex strip. */
+    layout?: "stack" | "row";
+    /** Gap between children when `layout="row"`. */
+    gap?: "sm" | "md";
+    /** When true, applies `min-width: 0` so the section can shrink inside a flex parent. */
+    minWidth0?: boolean;
+}
+declare const BorderedSection: ({ children, title, actions, layout, gap, minWidth0, }: BorderedSectionProps) => import("react").JSX.Element;
+export default BorderedSection;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/borderedSection/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0GAA0G;IAC1G,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,gDAAgD;IAChD,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,GAAI,uDAOtB,oBAAoB,gCA0BtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+const BorderedSection = ({ children, title, actions, layout = "stack", gap, minWidth0, }) => {
+    const classes = [
+        "k-bordered-section",
+        `k-bordered-section-layout-${layout}`,
+        gap ? `k-bordered-section-gap-${gap}` : "",
+        minWidth0 ? "k-bordered-section-min-width-0" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const showHeader = title !== undefined || actions !== undefined;
+    return (_jsxs("div", { className: classes, children: [showHeader && (_jsxs("div", { className: "k-bordered-section-header", children: [title !== undefined && (_jsx("h3", { className: "k-bordered-section-title", children: title })), actions !== undefined && (_jsx("div", { className: "k-bordered-section-actions", children: actions }))] })), children] }));
+};
+export default BorderedSection;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/borderedSection/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAgBtB,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,GAAG,OAAO,EAChB,GAAG,EACH,SAAS,GACY,EAAE,EAAE;IACzB,MAAM,OAAO,GAAG;QACd,oBAAoB;QACpB,6BAA6B,MAAM,EAAE;QACrC,GAAG,CAAC,CAAC,CAAC,0BAA0B,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE;KAClD;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC;IAEhE,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,UAAU,IAAI,CACb,eAAK,SAAS,EAAC,2BAA2B,aACvC,KAAK,KAAK,SAAS,IAAI,CACtB,aAAI,SAAS,EAAC,0BAA0B,YAAE,KAAK,GAAM,CACtD,EACA,OAAO,KAAK,SAAS,IAAI,CACxB,cAAK,SAAS,EAAC,4BAA4B,YAAE,OAAO,GAAO,CAC5D,IACG,CACP,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,46 @@
+.k-bordered-section {
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1rem;
+  background: var(--background-color-light);
+  box-shadow: 0 1px 3px var(--shadow-color);
+}
+
+.k-bordered-section-layout-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.k-bordered-section-gap-sm {
+  gap: 0.75rem;
+}
+
+.k-bordered-section-gap-md {
+  gap: 1rem;
+}
+
+.k-bordered-section-min-width-0 {
+  min-width: 0;
+}
+
+.k-bordered-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 0.75rem;
+}
+
+.k-bordered-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.k-bordered-section-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,29 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { PropsWithVariant } from "../../types.js";
+import "./styles.css";
+export interface CardHeader {
+    title: ReactNode;
+    actions?: ReactNode;
+}
+export interface CardProgress {
+    current: number;
+    total: number;
+    label?: ReactNode;
+}
+export interface CardProps extends PropsWithVariant {
+    children: ReactNode;
+    hoverable?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    padding?: "none" | "small" | "default" | "large";
+    /** Optional header bar. Title left, actions right. Accepts a `{ title, actions }` object or any ReactNode. */
+    header?: CardHeader | ReactNode;
+    /** Optional progress bar rendered below the header. */
+    progress?: CardProgress;
+    /** Optional footer slot rendered below the body (e.g. action buttons). */
+    footer?: ReactNode;
+    /** Body text alignment. Defaults to "left". */
+    align?: "left" | "center";
+}
+declare const Card: (props: CardProps) => import("react").JSX.Element;
+export default Card;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,8GAA8G;IAC9G,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC3B;AAOD,QAAA,MAAM,IAAI,GAAI,OAAO,SAAS,gCAuD7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ProgressBar from "../../feedback/progressBar/index.js";
+import "./styles.css";
+const isStructuredHeader = (header) => typeof header === "object" &&
+    header !== null &&
+    "title" in header;
+const Card = (props) => {
+    const { hoverable = false, padding = "default", variant = "primary", align = "left", header, progress, footer, } = props;
+    const cardClasses = [
+        "k-card",
+        hoverable ? "k-card-hoverable" : "",
+        `k-card-padding-${padding}`,
+        `k-card-${variant}`,
+        `k-card-align-${align}`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { className: cardClasses, onClick: props.onClick, children: [(header !== undefined || progress) && (_jsxs("div", { className: "k-card-header", children: [header !== undefined &&
+                        (isStructuredHeader(header) ? (_jsxs("div", { className: "k-card-header-row", children: [_jsx("div", { className: "k-card-header-title", children: header.title }), header.actions && (_jsx("div", { className: "k-card-header-actions", children: header.actions }))] })) : (_jsx("div", { className: "k-card-header-row", children: header }))), progress && (_jsxs("div", { className: "k-card-progress", children: [progress.label && (_jsx("div", { className: "k-card-progress-label", children: progress.label })), _jsx(ProgressBar, { progress: progress.total > 0
+                                    ? Math.round((progress.current / progress.total) * 100)
+                                    : 0 })] }))] })), _jsx("div", { className: "k-card-body", children: props.children }), footer && _jsx("div", { className: "k-card-footer", children: footer })] }));
+};
+export default Card;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/card/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAG9D,OAAO,cAAc,CAAC;AA4BtB,MAAM,kBAAkB,GAAG,CAAC,MAAe,EAAwB,EAAE,CACnE,OAAO,MAAM,KAAK,QAAQ;IAC1B,MAAM,KAAK,IAAI;IACf,OAAO,IAAK,MAAkC,CAAC;AAEjD,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IAChC,MAAM,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,MAAM,EACd,MAAM,EACN,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG;QAClB,QAAQ;QACR,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;QACnC,kBAAkB,OAAO,EAAE;QAC3B,UAAU,OAAO,EAAE;QACnB,gBAAgB,KAAK,EAAE;KACxB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,aAChD,CAAC,MAAM,KAAK,SAAS,IAAI,QAAQ,CAAC,IAAI,CACrC,eAAK,SAAS,EAAC,eAAe,aAC3B,MAAM,KAAK,SAAS;wBACnB,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAC5B,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,qBAAqB,YAAE,MAAM,CAAC,KAAK,GAAO,EACxD,MAAM,CAAC,OAAO,IAAI,CACjB,cAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,CAAC,OAAO,GAAO,CAC9D,IACG,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,mBAAmB,YAAE,MAAM,GAAO,CAClD,CAAC,EACH,QAAQ,IAAI,CACX,eAAK,SAAS,EAAC,iBAAiB,aAC7B,QAAQ,CAAC,KAAK,IAAI,CACjB,cAAK,SAAS,EAAC,uBAAuB,YAAE,QAAQ,CAAC,KAAK,GAAO,CAC9D,EACD,KAAC,WAAW,IACV,QAAQ,EACN,QAAQ,CAAC,KAAK,GAAG,CAAC;oCAChB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;oCACvD,CAAC,CAAC,CAAC,GAEP,IACE,CACP,IACG,CACP,EACD,cAAK,SAAS,EAAC,aAAa,YAAE,KAAK,CAAC,QAAQ,GAAO,EAClD,MAAM,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,MAAM,GAAO,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,160 @@
+/* Card Component Styles */
+.k-card {
+  background: var(--background-color);
+  border-radius: 0.9375rem;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid var(--border-color);
+}
+
+.k-card-align-left {
+  text-align: left;
+}
+
+.k-card-align-center {
+  text-align: center;
+}
+
+.k-card-hoverable {
+  box-shadow: 0 0.3125rem 0.9375rem var(--shadow-color);
+}
+
+.k-card-hoverable:hover {
+  transform: translateY(-0.3125rem);
+  box-shadow: 0 0.9375rem 1.875rem var(--shadow-color-hover);
+}
+
+.k-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-bottom: 0.75rem;
+  margin-bottom: 1rem;
+  border-bottom: 0.0625rem solid var(--border-color);
+}
+
+.k-card-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.k-card-header-title {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.k-card-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-card-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.k-card-progress-label {
+  font-size: 0.8125rem;
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+.k-card-body {
+  /* container for content below header */
+}
+
+.k-card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  margin-top: 1rem;
+  border-top: 0.0625rem solid var(--border-color);
+}
+
+/* Padding Variants */
+.k-card-padding-none {
+  padding: 0;
+}
+
+.k-card-padding-small {
+  padding: 1rem;
+}
+
+.k-card-padding-default {
+  padding: 1.5rem;
+}
+
+.k-card-padding-large {
+  padding: 2rem;
+}
+
+/* Color Variants */
+.k-card-primary {
+  border-color: var(--primary-color);
+}
+
+.k-card-primary.k-card-hoverable:hover {
+  border-color: var(--primary-color-hover);
+  box-shadow:
+    0 0.9375rem 1.875rem var(--shadow-color-hover),
+    0 0 0 0.0625rem var(--primary-color);
+}
+
+.k-card-secondary {
+  border-color: var(--secondary-color);
+}
+
+.k-card-secondary.k-card-hoverable:hover {
+  border-color: var(--secondary-color-hover);
+  box-shadow:
+    0 0.9375rem 1.875rem var(--shadow-color-hover),
+    0 0 0 0.0625rem var(--secondary-color);
+}
+
+.k-card-light {
+  border-color: var(--light-color);
+}
+
+.k-card-light.k-card-hoverable:hover {
+  border-color: var(--light-color-hover);
+  box-shadow:
+    0 0.9375rem 1.875rem var(--shadow-color-hover),
+    0 0 0 0.0625rem var(--light-color);
+}
+
+.k-card-danger {
+  border-color: var(--danger-color);
+}
+
+.k-card-danger.k-card-hoverable:hover {
+  border-color: var(--danger-color-hover);
+  box-shadow:
+    0 0.9375rem 1.875rem var(--shadow-color-hover),
+    0 0 0 0.0625rem var(--danger-color);
+}
+
+.k-card-warning {
+  border-color: var(--warning-color);
+}
+
+.k-card-warning.k-card-hoverable:hover {
+  border-color: var(--warning-color-hover);
+  box-shadow:
+    0 0.9375rem 1.875rem var(--shadow-color-hover),
+    0 0 0 0.0625rem var(--warning-color);
+}
+
+.k-card-success {
+  border-color: var(--success-color);
+}
+
+.k-card-success.k-card-hoverable:hover {
+  border-color: var(--success-color-hover);
+  box-shadow:
+    0 0.9375rem 1.875rem var(--shadow-color-hover),
+    0 0 0 0.0625rem var(--success-color);
+}

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+import "./styles.css";
+declare const Centered: (props: PropsWithChildren) => import("react").JSX.Element;
+export default Centered;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/centered/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,cAAc,CAAC;AAEtB,QAAA,MAAM,QAAQ,GAAI,OAAO,iBAAiB,gCAEzC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const Centered = (props) => {
+    return _jsx("div", { className: "k-centered", children: props.children });
+};
+export default Centered;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/centered/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAEtB,MAAM,QAAQ,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC5C,OAAO,cAAK,SAAS,EAAC,YAAY,YAAE,KAAK,CAAC,QAAQ,GAAO,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,9 @@
+.k-centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+}

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

@@ -0,0 +1,21 @@
+import { PropsWithSize, FlexAlign, FlexJustify } from "../../types.js";
+import "./styles.css";
+export interface ColProps extends PropsWithSize {
+    /** The child element(s) that will appear in the Col */
+    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 `"full"`, spans every column of the parent grid (e.g. inside `FormGrid`). */
+    span?: "full";
+    /** Adds a top border + matching top margin/padding above the Col. */
+    divider?: "solid-top";
+}
+declare const Col: (props: ColProps) => import("react").JSX.Element;
+export default Col;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/col/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,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,QAAA,MAAM,GAAG,GAAI,OAAO,QAAQ,gCAkB3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/col/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAmBtB,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IAC9B,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,OAAO,GAAG;QACd,OAAO;QACP,SAAS,IAAI,EAAE;QACf,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;QACzB,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAChC,OAAO,CAAC,CAAC,CAAC,iBAAiB,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;KAC1C;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/col/styles.css

@@ -0,0 +1,27 @@
+.k-col {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.k-col-sm {
+  gap: 0.5rem;
+}
+
+.k-col-md {
+  gap: 1rem;
+}
+
+.k-col-lg {
+  gap: 1.5rem;
+}
+
+.k-col-span-full {
+  grid-column: 1 / -1;
+}
+
+.k-col-divider-solid-top {
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border-color);
+}

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export type PageGap = "none" | "sm" | "md";
+export type PageMaxWidth = "none" | "narrow" | "default" | "wide";
+export interface PageProps {
+    children?: ReactNode;
+    /** Fill parent height (`height: 100%`). Use for list pages with internal scroll regions. */
+    fillHeight?: boolean;
+    /** Apply 1.5rem padding (1rem on small screens). */
+    padded?: boolean;
+    /** Vertical gap between direct children. */
+    gap?: PageGap;
+    /** Centered max-width constraint. */
+    maxWidth?: PageMaxWidth;
+    /** Loading state. Renders a centered spinner when true. */
+    loading?: boolean;
+}
+declare const Page: ({ children, fillHeight, padded, gap, maxWidth, loading, }: PageProps) => import("react").JSX.Element;
+export default Page;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,IAAI,GAAI,2DAOX,SAAS,gCAsBX,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Spinner from "../../feedback/spinner/index.js";
+import Centered from "../centered/index.js";
+import "./styles.css";
+const Page = ({ children, fillHeight, padded, gap = "none", maxWidth = "default", loading, }) => {
+    const classes = [
+        "k-page",
+        fillHeight && "k-page-fill",
+        padded && "k-page-padded",
+        gap !== "none" && `k-page-gap-${gap}`,
+        maxWidth !== "none" && `k-page-max-${maxWidth}`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    if (loading) {
+        return (_jsx("div", { className: `${classes} k-page-loading`, children: _jsx(Centered, { children: _jsx(Spinner, {}) }) }));
+    }
+    return _jsx("div", { className: classes, children: children });
+};
+export default Page;
+//# sourceMappingURL=index.js.map