@orion-ds/react 4.4.0 → 4.6.0

package/dist/blocks/sections/Pricing/Pricing.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Pricing.types').PricingProps & import('react').RefAttributes<HTMLElement>> & {
+        Card: React.FC<import('./Pricing.types').PricingCardProps>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TwoPlans: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Pricing.stories.d.ts.map

package/dist/blocks/sections/Pricing/Pricing.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pricing.stories.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/Pricing.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;CAKsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6BnC,eAAO,MAAM,OAAO,EAAE,KAA2E,CAAC;AAElG,eAAO,MAAM,QAAQ,EAAE,KAA8D,CAAC;AAEtF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC"}

package/dist/blocks/sections/Pricing/Pricing.types.d.ts

@@ -1,129 +1,33 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-/**
- * Grid column count for pricing cards
- */
-export type PricingColumns = 2 | 3 | 4;
-/**
- * Feature item in a pricing plan
- */
-export interface PricingFeature {
-    /**
-     * Feature text
-     */
-    text: string;
-    /**
-     * Whether the feature is included in the plan
-     * @default true
-     */
-    included?: boolean;
-}
-/**
- * Pricing plan data structure
- */
 export interface PricingPlan {
-    /**
-     * Plan name (e.g., "Starter", "Pro", "Enterprise")
-     */
+    /** Plan name */
     name: string;
-    /**
-     * Price display (e.g., "$9", "$29/mo", or ReactNode for custom)
-     */
-    price: string | ReactNode;
-    /**
-     * Billing period (e.g., "per month", "per user/month")
-     */
+    /** Price display string */
+    price: string;
+    /** Billing period (e.g. "/month") */
     period?: string;
-    /**
-     * Short description of the plan
-     */
+    /** Short plan description */
     description?: string;
-    /**
-     * List of features included in the plan
-     */
-    features: (string | PricingFeature)[];
-    /**
-     * Call-to-action button/element
-     */
+    /** List of included features */
+    features: string[];
+    /** CTA element */
     action?: ReactNode;
-    /**
-     * Mark as most popular/recommended
-     * @default false
-     */
+    /** Highlight this plan as popular/recommended */
     popular?: boolean;
-    /**
-     * Optional badge text (e.g., "Best Value", "Most Popular")
-     */
-    badge?: ReactNode;
 }
-/**
- * Pricing card props (internal component)
- */
-export interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Pricing plan data
-     */
-    plan: PricingPlan;
+export interface PricingCardProps extends PricingPlan {
+    /** Additional CSS class */
+    className?: string;
 }
-/**
- * Pricing section props
- *
- * @example
- * ```tsx
- * <Pricing
- *   title="Simple, transparent pricing"
- *   description="Choose the plan that's right for you"
- *   plans={[
- *     {
- *       name: "Starter",
- *       price: "$9",
- *       period: "per month",
- *       features: ["5 projects", "Basic support"],
- *       action: <Button>Get Started</Button>
- *     },
- *     {
- *       name: "Pro",
- *       price: "$29",
- *       period: "per month",
- *       features: ["Unlimited projects", "Priority support"],
- *       action: <Button>Get Started</Button>,
- *       popular: true
- *     }
- *   ]}
- * />
- * ```
- */
-export interface PricingProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-    /**
-     * Optional eyebrow/badge above title
-     */
-    eyebrow?: ReactNode;
-    /**
-     * Section title
-     */
-    title?: ReactNode;
-    /**
-     * Section description
-     */
-    description?: ReactNode;
-    /**
-     * Array of pricing plans
-     */
+export interface PricingProps {
+    /** Section heading */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Array of pricing plans */
     plans: PricingPlan[];
-    /**
-     * Number of grid columns
-     * @default 3
-     */
-    columns?: PricingColumns;
-    /**
-     * Background style
-     * @default 'subtle'
-     */
-    background?: "base" | "subtle" | "none";
-    /**
-     * Center the header text
-     * @default true
-     */
-    centered?: boolean;
+    /** Additional CSS class */
+    className?: string;
 }
 //# sourceMappingURL=Pricing.types.d.ts.map

package/dist/blocks/sections/Pricing/Pricing.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pricing.types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/Pricing.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IAEtC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,WAAW,CAAC,EAC3B,OAAO,CACR;IACC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAExC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"Pricing.types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/Pricing.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,kBAAkB;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/blocks/sections/Pricing/PricingCard.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lucide-react"),a=require("./Pricing.module.css.cjs"),u=require("../../../components/Card/Card.cjs"),y=require("../../../components/Badge/Badge.cjs"),o=({plan:p,className:m})=>{const{name:f,price:x,period:d,description:l,features:j,action:i,popular:r,badge:c}=p,h=[a.default.pricingCard,r&&a.default.popular,m].filter(Boolean).join(" "),N=s=>typeof s=="string"?{text:s,included:!0}:{...s,included:s.included!==!1};return e.jsx(u.Card,{variant:r?"elevated":"base",className:h,children:e.jsxs(u.Card.Body,{className:a.default.cardBody,children:[e.jsxs("div",{className:a.default.cardHeader,children:[e.jsxs("div",{className:a.default.planInfo,children:[e.jsx("h3",{className:a.default.planName,children:f}),(c||r)&&e.jsx(y.Badge,{variant:r?"primary":"secondary",size:"sm",children:c||"Most Popular"})]}),e.jsxs("div",{className:a.default.priceWrapper,children:[e.jsx("span",{className:a.default.price,children:x}),d&&e.jsx("span",{className:a.default.period,children:d})]}),l&&e.jsx("p",{className:a.default.planDescription,children:l})]}),e.jsx("ul",{className:a.default.featureList,children:j.map((s,g)=>{const{text:v,included:n}=N(s);return e.jsxs("li",{className:`${a.default.featureItem} ${n?"":a.default.excluded}`,children:[e.jsx("span",{className:a.default.featureIcon,children:n?e.jsx(t.Check,{size:16}):e.jsx(t.X,{size:16})}),e.jsx("span",{className:a.default.featureText,children:v})]},g)})}),i&&e.jsx("div",{className:a.default.action,children:i})]})})};o.displayName="PricingCard";exports.PricingCard=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./Pricing.module.css.cjs"),t=({name:n,price:u,period:s,description:l,features:r,action:i,popular:c,className:o})=>e.jsxs("div",{className:`${a.default.card} ${c?a.default.cardPopular:""} ${o||""}`,children:[c&&e.jsx("span",{className:a.default.popularBadge,children:"Most Popular"}),e.jsx("h3",{className:a.default.cardName,children:n}),e.jsxs("div",{className:a.default.cardPrice,children:[e.jsx("span",{className:a.default.priceValue,children:u}),s&&e.jsx("span",{className:a.default.pricePeriod,children:s})]}),l&&e.jsx("p",{className:a.default.cardDescription,children:l}),r.length>0&&e.jsx("ul",{className:a.default.featureList,children:r.map(d=>e.jsxs("li",{className:a.default.featureItem,children:[e.jsx("svg",{className:a.default.featureCheck,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"20 6 9 17 4 12"})}),d]},d))}),i&&e.jsx("div",{className:a.default.cardAction,children:i})]});t.displayName="PricingCard";exports.PricingCard=t;

package/dist/blocks/sections/Pricing/PricingCard.d.ts

@@ -1,7 +1,5 @@
+import { default as React } from 'react';
 import { PricingCardProps } from './Pricing.types';
 
-export declare const PricingCard: {
-    ({ plan, className }: PricingCardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const PricingCard: React.FC<PricingCardProps>;
 //# sourceMappingURL=PricingCard.d.ts.map

package/dist/blocks/sections/Pricing/PricingCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PricingCard.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/PricingCard.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAkB,MAAM,iBAAiB,CAAC;AAMxE,eAAO,MAAM,WAAW;0BAAyB,gBAAgB;;CA6DhE,CAAC"}
+{"version":3,"file":"PricingCard.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/PricingCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAC"}

package/dist/blocks/sections/Pricing/PricingCard.mjs

@@ -1,40 +1,49 @@
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import { Check as g, X as C } from "lucide-react";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import e from "./Pricing.module.css.mjs";
-import { Card as o } from "../../../components/Card/Card.mjs";
-import { Badge as z } from "../../../components/Badge/Badge.mjs";
-const B = ({ plan: m, className: p }) => {
-  const { name: h, price: u, period: c, description: n, features: N, action: l, popular: s, badge: d } = m, f = [e.pricingCard, s && e.popular, p].filter(Boolean).join(" "), v = (r) => typeof r == "string" ? { text: r, included: !0 } : { ...r, included: r.included !== !1 };
-  return /* @__PURE__ */ a(o, { variant: s ? "elevated" : "base", className: f, children: /* @__PURE__ */ i(o.Body, { className: e.cardBody, children: [
-    /* @__PURE__ */ i("div", { className: e.cardHeader, children: [
-      /* @__PURE__ */ i("div", { className: e.planInfo, children: [
-        /* @__PURE__ */ a("h3", { className: e.planName, children: h }),
-        (d || s) && /* @__PURE__ */ a(z, { variant: s ? "primary" : "secondary", size: "sm", children: d || "Most Popular" })
+const h = ({
+  name: o,
+  price: t,
+  period: s,
+  description: c,
+  features: i,
+  action: l,
+  popular: n,
+  className: m
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: `${e.card} ${n ? e.cardPopular : ""} ${m || ""}`,
+    children: [
+      n && /* @__PURE__ */ r("span", { className: e.popularBadge, children: "Most Popular" }),
+      /* @__PURE__ */ r("h3", { className: e.cardName, children: o }),
+      /* @__PURE__ */ a("div", { className: e.cardPrice, children: [
+        /* @__PURE__ */ r("span", { className: e.priceValue, children: t }),
+        s && /* @__PURE__ */ r("span", { className: e.pricePeriod, children: s })
       ] }),
-      /* @__PURE__ */ i("div", { className: e.priceWrapper, children: [
-        /* @__PURE__ */ a("span", { className: e.price, children: u }),
-        c && /* @__PURE__ */ a("span", { className: e.period, children: c })
-      ] }),
-      n && /* @__PURE__ */ a("p", { className: e.planDescription, children: n })
-    ] }),
-    /* @__PURE__ */ a("ul", { className: e.featureList, children: N.map((r, x) => {
-      const { text: y, included: t } = v(r);
-      return /* @__PURE__ */ i(
-        "li",
-        {
-          className: `${e.featureItem} ${t ? "" : e.excluded}`,
-          children: [
-            /* @__PURE__ */ a("span", { className: e.featureIcon, children: t ? /* @__PURE__ */ a(g, { size: 16 }) : /* @__PURE__ */ a(C, { size: 16 }) }),
-            /* @__PURE__ */ a("span", { className: e.featureText, children: y })
-          ]
-        },
-        x
-      );
-    }) }),
-    l && /* @__PURE__ */ a("div", { className: e.action, children: l })
-  ] }) });
-};
-B.displayName = "PricingCard";
+      c && /* @__PURE__ */ r("p", { className: e.cardDescription, children: c }),
+      i.length > 0 && /* @__PURE__ */ r("ul", { className: e.featureList, children: i.map((d) => /* @__PURE__ */ a("li", { className: e.featureItem, children: [
+        /* @__PURE__ */ r(
+          "svg",
+          {
+            className: e.featureCheck,
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ r("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ),
+        d
+      ] }, d)) }),
+      l && /* @__PURE__ */ r("div", { className: e.cardAction, children: l })
+    ]
+  }
+);
+h.displayName = "PricingCard";
 export {
-  B as PricingCard
+  h as PricingCard
 };

package/dist/blocks/sections/Pricing/index.d.ts

@@ -1,7 +1,4 @@
-/**
- * Pricing Component Exports
- */
 export { Pricing } from './Pricing';
 export { PricingCard } from './PricingCard';
-export type { PricingProps, PricingPlan, PricingFeature, PricingCardProps, PricingColumns, } from './Pricing.types';
+export type { PricingProps, PricingCardProps, PricingPlan } from './Pricing.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/sections/Pricing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,cAAc,GACf,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/Pricing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/blocks/sections/SettingsLayout/SettingsLayout.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),f=require("lucide-react"),e=require("./SettingsLayout.module.css.cjs"),v=o.forwardRef(({navigation:h,activeSection:i,onNavigate:j,children:m,title:n,description:c,headerActions:r,navWidth:x=240,stickyNav:N=!0,mobileNav:u=!0,className:p,style:b,...y},g)=>{const[t,d]=o.useState(!1),I=l=>{l.disabled||(j(l.id),d(!1))},S=[e.default.settingsLayout,p].filter(Boolean).join(" "),L={...b,"--nav-width":`${x}px`};return a.jsxs("div",{ref:g,className:S,style:L,...y,children:[(n||u)&&a.jsxs("header",{className:e.default.header,children:[a.jsxs("div",{className:e.default.headerContent,children:[u&&a.jsx("button",{type:"button",className:e.default.mobileNavToggle,onClick:()=>d(!t),"aria-label":"Toggle navigation",children:t?a.jsx(f.X,{size:20}):a.jsx(f.Menu,{size:20})}),a.jsxs("div",{className:e.default.headerText,children:[n&&a.jsx("h1",{className:e.default.title,children:n}),c&&a.jsx("p",{className:e.default.description,children:c})]})]}),r&&a.jsx("div",{className:e.default.headerActions,children:r})]}),a.jsxs("div",{className:e.default.body,children:[a.jsx("nav",{className:`${e.default.nav} ${N?e.default.navSticky:""} ${t?e.default.navOpen:""}`,children:h.map((l,$)=>a.jsxs("div",{className:e.default.navGroup,children:[l.title&&a.jsx("div",{className:e.default.navGroupTitle,children:l.title}),a.jsx("ul",{className:e.default.navList,children:l.items.map(s=>a.jsx("li",{children:a.jsxs("button",{type:"button",className:`${e.default.navItem} ${i===s.id?e.default.navItemActive:""} ${s.disabled?e.default.navItemDisabled:""}`,onClick:()=>I(s),"aria-current":i===s.id?"page":void 0,children:[s.icon&&a.jsx("span",{className:e.default.navItemIcon,children:s.icon}),a.jsxs("span",{className:e.default.navItemContent,children:[a.jsx("span",{className:e.default.navItemLabel,children:s.label}),s.description&&a.jsx("span",{className:e.default.navItemDescription,children:s.description})]}),s.badge&&a.jsx("span",{className:e.default.navItemBadge,children:s.badge})]})},s.id))})]},l.title||$))}),t&&a.jsx("div",{className:e.default.overlay,onClick:()=>d(!1),"aria-hidden":"true"}),a.jsx("main",{className:e.default.content,children:m})]})]})});v.displayName="SettingsLayout";exports.SettingsLayout=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),e=require("./SettingsLayout.module.css.cjs"),c=l.forwardRef(({title:d="Settings",navigation:i,activeSection:r,onNavigate:u,children:o,className:m},v)=>{const[f,j]=l.useState(r||i[0]?.items[0]?.id||""),p=a=>{j(a),u?.(a)};return t.jsxs("section",{ref:v,className:`${e.default.section} ${m||""}`,children:[t.jsxs("aside",{className:e.default.sidebar,children:[t.jsx("h2",{className:e.default.sidebarTitle,children:d}),i.map(a=>t.jsxs("div",{className:e.default.navGroup,children:[t.jsx("p",{className:e.default.navGroupTitle,children:a.title}),a.items.map(s=>{const n=f===s.id;return t.jsxs("button",{className:`${e.default.navItem} ${n?e.default.navItemActive:""}`,onClick:()=>p(s.id),type:"button",children:[t.jsx("span",{className:`${e.default.navItemLabel} ${n?e.default.navItemActiveLabel:""}`,children:s.label}),s.description&&t.jsx("span",{className:e.default.navItemDescription,children:s.description})]},s.id)})]},a.title))]}),t.jsx("main",{className:e.default.main,children:o})]})});c.displayName="SettingsLayout";exports.SettingsLayout=c;

package/dist/blocks/sections/SettingsLayout/SettingsLayout.d.ts

@@ -1,4 +1,5 @@
+import { default as React } from 'react';
 import { SettingsLayoutProps } from './SettingsLayout.types';
 
-export declare const SettingsLayout: import('react').ForwardRefExoticComponent<SettingsLayoutProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SettingsLayout: React.ForwardRefExoticComponent<SettingsLayoutProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=SettingsLayout.d.ts.map

package/dist/blocks/sections/SettingsLayout/SettingsLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsLayout.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/SettingsLayout/SettingsLayout.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,wBAAwB,CAAC;AAGhC,eAAO,MAAM,cAAc,gHAkI1B,CAAC"}
+{"version":3,"file":"SettingsLayout.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/SettingsLayout/SettingsLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAGlE,eAAO,MAAM,cAAc,yFA6D1B,CAAC"}

package/dist/blocks/sections/SettingsLayout/SettingsLayout.mjs

@@ -1,91 +1,55 @@
 "use client";
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as x, useState as L } from "react";
-import { X as S, Menu as T } from "lucide-react";
-import a from "./SettingsLayout.module.css.mjs";
-const j = x(
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import b, { useState as u } from "react";
+import e from "./SettingsLayout.module.css.mjs";
+const S = b.forwardRef(
   ({
-    navigation: v,
-    activeSection: d,
-    onNavigate: h,
-    children: N,
-    title: c,
-    description: r,
-    headerActions: o,
-    navWidth: p = 240,
-    stickyNav: b = !0,
-    mobileNav: m = !0,
-    className: u,
-    style: y,
-    ...f
-  }, g) => {
-    const [i, t] = L(!1), I = (l) => {
-      l.disabled || (h(l.id), t(!1));
-    }, $ = [a.settingsLayout, u].filter(Boolean).join(" "), C = {
-      ...y,
-      "--nav-width": `${p}px`
+    title: l = "Settings",
+    navigation: n,
+    activeSection: r,
+    onNavigate: o,
+    children: m,
+    className: d
+  }, p) => {
+    const [v, N] = u(
+      r || n[0]?.items[0]?.id || ""
+    ), h = (t) => {
+      N(t), o?.(t);
     };
-    return /* @__PURE__ */ n("div", { ref: g, className: $, style: C, ...f, children: [
-      (c || m) && /* @__PURE__ */ n("header", { className: a.header, children: [
-        /* @__PURE__ */ n("div", { className: a.headerContent, children: [
-          m && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              className: a.mobileNavToggle,
-              onClick: () => t(!i),
-              "aria-label": "Toggle navigation",
-              children: i ? /* @__PURE__ */ e(S, { size: 20 }) : /* @__PURE__ */ e(T, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ n("div", { className: a.headerText, children: [
-            c && /* @__PURE__ */ e("h1", { className: a.title, children: c }),
-            r && /* @__PURE__ */ e("p", { className: a.description, children: r })
-          ] })
-        ] }),
-        o && /* @__PURE__ */ e("div", { className: a.headerActions, children: o })
+    return /* @__PURE__ */ i("section", { ref: p, className: `${e.section} ${d || ""}`, children: [
+      /* @__PURE__ */ i("aside", { className: e.sidebar, children: [
+        /* @__PURE__ */ s("h2", { className: e.sidebarTitle, children: l }),
+        n.map((t) => /* @__PURE__ */ i("div", { className: e.navGroup, children: [
+          /* @__PURE__ */ s("p", { className: e.navGroupTitle, children: t.title }),
+          t.items.map((a) => {
+            const c = v === a.id;
+            return /* @__PURE__ */ i(
+              "button",
+              {
+                className: `${e.navItem} ${c ? e.navItemActive : ""}`,
+                onClick: () => h(a.id),
+                type: "button",
+                children: [
+                  /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: `${e.navItemLabel} ${c ? e.navItemActiveLabel : ""}`,
+                      children: a.label
+                    }
+                  ),
+                  a.description && /* @__PURE__ */ s("span", { className: e.navItemDescription, children: a.description })
+                ]
+              },
+              a.id
+            );
+          })
+        ] }, t.title))
       ] }),
-      /* @__PURE__ */ n("div", { className: a.body, children: [
-        /* @__PURE__ */ e(
-          "nav",
-          {
-            className: `${a.nav} ${b ? a.navSticky : ""} ${i ? a.navOpen : ""}`,
-            children: v.map((l, k) => /* @__PURE__ */ n("div", { className: a.navGroup, children: [
-              l.title && /* @__PURE__ */ e("div", { className: a.navGroupTitle, children: l.title }),
-              /* @__PURE__ */ e("ul", { className: a.navList, children: l.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ n(
-                "button",
-                {
-                  type: "button",
-                  className: `${a.navItem} ${d === s.id ? a.navItemActive : ""} ${s.disabled ? a.navItemDisabled : ""}`,
-                  onClick: () => I(s),
-                  "aria-current": d === s.id ? "page" : void 0,
-                  children: [
-                    s.icon && /* @__PURE__ */ e("span", { className: a.navItemIcon, children: s.icon }),
-                    /* @__PURE__ */ n("span", { className: a.navItemContent, children: [
-                      /* @__PURE__ */ e("span", { className: a.navItemLabel, children: s.label }),
-                      s.description && /* @__PURE__ */ e("span", { className: a.navItemDescription, children: s.description })
-                    ] }),
-                    s.badge && /* @__PURE__ */ e("span", { className: a.navItemBadge, children: s.badge })
-                  ]
-                }
-              ) }, s.id)) })
-            ] }, l.title || k))
-          }
-        ),
-        i && /* @__PURE__ */ e(
-          "div",
-          {
-            className: a.overlay,
-            onClick: () => t(!1),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ e("main", { className: a.content, children: N })
-      ] })
+      /* @__PURE__ */ s("main", { className: e.main, children: m })
     ] });
   }
 );
-j.displayName = "SettingsLayout";
+S.displayName = "SettingsLayout";
 export {
-  j as SettingsLayout
+  S as SettingsLayout
 };

package/dist/blocks/sections/SettingsLayout/SettingsLayout.module.css

@@ -1 +1 @@
-._settingsLayout_1383a_8{display:flex;flex-direction:column;min-height:100%}._header_1383a_18{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-4);padding:var(--spacing-6) var(--spacing-8);border-bottom:1px solid var(--border-subtle);background:transparent;position:relative}._header_1383a_18:before{display:none}._headerContent_1383a_34{display:flex;align-items:flex-start;gap:var(--spacing-4)}._mobileNavToggle_1383a_40{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);flex-shrink:0}._headerText_1383a_54{flex:1}._title_1383a_58{font-family:var(--font-primary);font-size:clamp(1.5rem,2vw,1.75rem);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0;line-height:var(--line-height-tight);letter-spacing:-.02em}._description_1383a_68{font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-secondary);margin:var(--spacing-1) 0 0 0;line-height:var(--line-height-relaxed)}._headerActions_1383a_76{display:flex;align-items:center;gap:var(--spacing-2);flex-shrink:0}._body_1383a_87{display:flex;flex:1;position:relative}._nav_1383a_97{width:var(--nav-width);flex-shrink:0;padding:var(--spacing-6);border-right:1px solid var(--border-subtle);background:var(--surface-base);overflow-y:auto}._navSticky_1383a_106{position:sticky;top:0;height:fit-content;max-height:100vh}._navGroup_1383a_113{margin-bottom:var(--spacing-6)}._navGroup_1383a_113:last-child{margin-bottom:0}._navGroupTitle_1383a_121{font-family:var(--font-secondary);font-size:var(--font-size-11);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:var(--spacing-2) var(--spacing-3);margin-bottom:var(--spacing-1)}._navList_1383a_132{list-style:none;margin:0;padding:0}._navItem_1383a_138{display:flex;align-items:flex-start;gap:var(--spacing-3);width:100%;padding:var(--spacing-2-5) var(--spacing-3);font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-secondary);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:all var(--mode-hover-duration);margin-bottom:2px}._navItem_1383a_138:hover{background:var(--surface-subtle);color:var(--text-primary)}._navItemActive_1383a_161{background:var(--interactive-primary);color:var(--interactive-primary-text)}._navItemActive_1383a_161:hover{background:var(--interactive-primary-hover);color:var(--interactive-primary-text)}._navItemDisabled_1383a_171{opacity:.5;cursor:not-allowed}._navItemIcon_1383a_176{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;margin-top:2px}._navItemContent_1383a_186{flex:1;min-width:0;display:flex;flex-direction:column}._navItemLabel_1383a_193{font-weight:var(--font-weight-medium)}._navItemDescription_1383a_197{font-size:var(--font-size-12);opacity:.8;margin-top:2px}._navItemBadge_1383a_203{flex-shrink:0;margin-top:2px}._content_1383a_212{flex:1;padding:var(--spacing-8);overflow-y:auto;min-width:0;background:var(--surface-subtle)}._overlay_1383a_224{display:none;position:fixed;inset:0;background:var(--surface-overlay);z-index:var(--z-overlay)}@media(max-width:768px){._mobileNavToggle_1383a_40{display:flex}._nav_1383a_97{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:var(--z-modal);transform:translate(-100%);transition:transform .2s ease-out;border-right:1px solid var(--border-subtle);box-shadow:var(--shadow-xl)}._navOpen_1383a_254{transform:translate(0)}._overlay_1383a_224{display:block}._content_1383a_212,._header_1383a_18{padding:var(--spacing-4)}}
+._section_o99kt_1{display:flex;gap:var(--spacing-6);padding:var(--spacing-6);background:var(--surface-base);min-height:480px}._sidebar_o99kt_9{width:240px;flex-shrink:0}._sidebarTitle_o99kt_14{font-family:var(--font-primary);font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin:0 0 var(--spacing-6) 0}._navGroup_o99kt_22{margin-bottom:var(--spacing-4)}._navGroupTitle_o99kt_26{font-family:var(--font-secondary);font-size:var(--font-size-xs);font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:var(--spacing-2) var(--spacing-3);margin:0}._navItem_o99kt_37{display:block;width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;border-radius:var(--radius-control);background:transparent;text-align:left;cursor:pointer;transition:background .15s ease}._navItem_o99kt_37:hover,._navItemActive_o99kt_53{background:var(--surface-subtle)}._navItemLabel_o99kt_57{display:block;font-family:var(--font-secondary);font-size:var(--font-size-base);font-weight:500;color:var(--text-primary)}._navItemActiveLabel_o99kt_65{color:var(--interactive-primary)}._navItemDescription_o99kt_69{display:block;font-family:var(--font-secondary);font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:2px}._main_o99kt_77{flex:1;min-width:0;padding:var(--spacing-4) var(--spacing-6);background:var(--surface-subtle);border-radius:var(--radius-container)}

package/dist/blocks/sections/SettingsLayout/SettingsLayout.module.css.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_settingsLayout_1383a_8",t="_header_1383a_18",n="_headerContent_1383a_34",a="_mobileNavToggle_1383a_40",o="_headerText_1383a_54",_="_title_1383a_58",v="_description_1383a_68",s="_headerActions_1383a_76",c="_body_1383a_87",i="_nav_1383a_97",r="_navSticky_1383a_106",m="_navGroup_1383a_113",d="_navGroupTitle_1383a_121",I="_navList_1383a_132",l="_navItem_1383a_138",p="_navItemActive_1383a_161",u="_navItemDisabled_1383a_171",b="_navItemIcon_1383a_176",g="_navItemContent_1383a_186",y="_navItemLabel_1383a_193",h="_navItemDescription_1383a_197",T="_navItemBadge_1383a_203",L="_content_1383a_212",A="_overlay_1383a_224",C="_navOpen_1383a_254",D={settingsLayout:e,header:t,headerContent:n,mobileNavToggle:a,headerText:o,title:_,description:v,headerActions:s,body:c,nav:i,navSticky:r,navGroup:m,navGroupTitle:d,navList:I,navItem:l,navItemActive:p,navItemDisabled:u,navItemIcon:b,navItemContent:g,navItemLabel:y,navItemDescription:h,navItemBadge:T,content:L,overlay:A,navOpen:C};exports.body=c;exports.content=L;exports.default=D;exports.description=v;exports.header=t;exports.headerActions=s;exports.headerContent=n;exports.headerText=o;exports.mobileNavToggle=a;exports.nav=i;exports.navGroup=m;exports.navGroupTitle=d;exports.navItem=l;exports.navItemActive=p;exports.navItemBadge=T;exports.navItemContent=g;exports.navItemDescription=h;exports.navItemDisabled=u;exports.navItemIcon=b;exports.navItemLabel=y;exports.navList=I;exports.navOpen=C;exports.navSticky=r;exports.overlay=A;exports.settingsLayout=e;exports.title=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_section_o99kt_1",e="_sidebar_o99kt_9",n="_sidebarTitle_o99kt_14",a="_navGroup_o99kt_22",i="_navGroupTitle_o99kt_26",o="_navItem_o99kt_37",v="_navItemActive_o99kt_53",_="_navItemLabel_o99kt_57",s="_navItemActiveLabel_o99kt_65",c="_navItemDescription_o99kt_69",m="_main_o99kt_77",r={section:t,sidebar:e,sidebarTitle:n,navGroup:a,navGroupTitle:i,navItem:o,navItemActive:v,navItemLabel:_,navItemActiveLabel:s,navItemDescription:c,main:m};exports.default=r;exports.main=m;exports.navGroup=a;exports.navGroupTitle=i;exports.navItem=o;exports.navItemActive=v;exports.navItemActiveLabel=s;exports.navItemDescription=c;exports.navItemLabel=_;exports.section=t;exports.sidebar=e;exports.sidebarTitle=n;

package/dist/blocks/sections/SettingsLayout/SettingsLayout.module.css.mjs

@@ -1,55 +1,27 @@
-const t = "_settingsLayout_1383a_8", n = "_header_1383a_18", e = "_headerContent_1383a_34", a = "_mobileNavToggle_1383a_40", _ = "_headerText_1383a_54", o = "_title_1383a_58", v = "_description_1383a_68", s = "_headerActions_1383a_76", c = "_body_1383a_87", i = "_nav_1383a_97", r = "_navSticky_1383a_106", m = "_navGroup_1383a_113", I = "_navGroupTitle_1383a_121", d = "_navList_1383a_132", l = "_navItem_1383a_138", p = "_navItemActive_1383a_161", y = "_navItemDisabled_1383a_171", b = "_navItemIcon_1383a_176", g = "_navItemContent_1383a_186", h = "_navItemLabel_1383a_193", u = "_navItemDescription_1383a_197", L = "_navItemBadge_1383a_203", T = "_content_1383a_212", A = "_overlay_1383a_224", C = "_navOpen_1383a_254", D = {
-  settingsLayout: t,
-  header: n,
-  headerContent: e,
-  mobileNavToggle: a,
-  headerText: _,
-  title: o,
-  description: v,
-  headerActions: s,
-  body: c,
-  nav: i,
-  navSticky: r,
-  navGroup: m,
-  navGroupTitle: I,
-  navList: d,
-  navItem: l,
-  navItemActive: p,
-  navItemDisabled: y,
-  navItemIcon: b,
-  navItemContent: g,
-  navItemLabel: h,
-  navItemDescription: u,
-  navItemBadge: L,
-  content: T,
-  overlay: A,
-  navOpen: C
+const t = "_section_o99kt_1", e = "_sidebar_o99kt_9", n = "_sidebarTitle_o99kt_14", a = "_navGroup_o99kt_22", o = "_navGroupTitle_o99kt_26", _ = "_navItem_o99kt_37", i = "_navItemActive_o99kt_53", s = "_navItemLabel_o99kt_57", v = "_navItemActiveLabel_o99kt_65", c = "_navItemDescription_o99kt_69", m = "_main_o99kt_77", r = {
+  section: t,
+  sidebar: e,
+  sidebarTitle: n,
+  navGroup: a,
+  navGroupTitle: o,
+  navItem: _,
+  navItemActive: i,
+  navItemLabel: s,
+  navItemActiveLabel: v,
+  navItemDescription: c,
+  main: m
 };
 export {
-  c as body,
-  T as content,
-  D as default,
-  v as description,
-  n as header,
-  s as headerActions,
-  e as headerContent,
-  _ as headerText,
-  a as mobileNavToggle,
-  i as nav,
-  m as navGroup,
-  I as navGroupTitle,
-  l as navItem,
-  p as navItemActive,
-  L as navItemBadge,
-  g as navItemContent,
-  u as navItemDescription,
-  y as navItemDisabled,
-  b as navItemIcon,
-  h as navItemLabel,
-  d as navList,
-  C as navOpen,
-  r as navSticky,
-  A as overlay,
-  t as settingsLayout,
-  o as title
+  r as default,
+  m as main,
+  a as navGroup,
+  o as navGroupTitle,
+  _ as navItem,
+  i as navItemActive,
+  v as navItemActiveLabel,
+  c as navItemDescription,
+  s as navItemLabel,
+  t as section,
+  e as sidebar,
+  n as sidebarTitle
 };

package/dist/blocks/sections/SettingsLayout/SettingsLayout.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./SettingsLayout.types').SettingsLayoutProps & import('react').RefAttributes<HTMLElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Compact: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=SettingsLayout.stories.d.ts.map

package/dist/blocks/sections/SettingsLayout/SettingsLayout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsLayout.stories.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/SettingsLayout/SettingsLayout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;CAK6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuBnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC"}