@mohasinac/appkit 2.1.1 → 2.2.0

package/dist/features/about/index.cjs

@@ -1,286 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-require('tailwind-merge');
-require('next/link');
-require('react-dom');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var Section = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("section", __spreadProps(__spreadValues({ className, ref }, props), { children }));
-  }
-);
-Section.displayName = "Section";
-var Aside = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("aside", __spreadProps(__spreadValues({ className, ref }, props), { children }));
-  }
-);
-Aside.displayName = "Aside";
-var Div = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className }, props), { children }));
-  }
-);
-Div.displayName = "Div";
-var UI_THEME = {
-  typography: {
-    h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display",
-    h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display",
-    h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display",
-    h4: "text-lg md:text-xl lg:text-2xl font-bold font-display",
-    h5: "text-base md:text-lg lg:text-xl font-medium",
-    h6: "text-sm md:text-base lg:text-lg font-medium",
-    body: "text-base lg:text-lg",
-    small: "text-sm lg:text-base",
-    xs: "text-xs lg:text-sm"
-  },
-  themed: {
-    textPrimary: "text-zinc-900 dark:text-zinc-50",
-    textSecondary: "text-zinc-500 dark:text-zinc-400",
-    textMuted: "text-zinc-400 dark:text-zinc-500",
-    textError: "text-red-600 dark:text-red-400",
-    textSuccess: "text-emerald-600 dark:text-emerald-400"
-  }};
-function Heading(_a) {
-  var _b = _a, {
-    level = 1,
-    variant = "primary",
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "level",
-    "variant",
-    "className",
-    "children"
-  ]);
-  const Tag = `h${level}`;
-  const { typography, themed } = UI_THEME;
-  const sizeClasses = {
-    1: typography.h1,
-    2: typography.h2,
-    3: typography.h3,
-    4: typography.h4,
-    5: typography.h5,
-    6: typography.h6
-  };
-  const variantClasses = {
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    none: ""
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    __spreadProps(__spreadValues({
-      className: `${sizeClasses[level]} ${variantClasses[variant]} ${className}`
-    }, props), {
-      children
-    })
-  );
-}
-function Text(_a) {
-  var _b = _a, {
-    variant = "primary",
-    size = "base",
-    weight = "normal",
-    className = "",
-    as: Tag = "p",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "weight",
-    "className",
-    "as",
-    "children"
-  ]);
-  const { typography, themed } = UI_THEME;
-  const sizeClasses = {
-    xs: typography.xs,
-    sm: typography.small,
-    base: typography.body,
-    lg: "text-lg",
-    xl: "text-xl"
-  };
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  const variantClasses = {
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    error: themed.textError,
-    success: themed.textSuccess,
-    none: ""
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    __spreadProps(__spreadValues({
-      className: `${sizeClasses[size]} ${weightClasses[weight]} ${variantClasses[variant]} ${className}`
-    }, props), {
-      children
-    })
-  );
-}
-function Span(_a) {
-  var _b = _a, {
-    variant = "inherit",
-    size,
-    weight,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "weight",
-    "className",
-    "children"
-  ]);
-  const { themed, typography } = UI_THEME;
-  const variantClasses = {
-    inherit: "",
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    error: themed.textError,
-    success: themed.textSuccess,
-    accent: "text-primary"
-  };
-  const sizeClasses = {
-    xs: typography.xs,
-    sm: typography.small,
-    base: typography.body,
-    lg: "text-lg",
-    xl: "text-xl"
-  };
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  const classes = [
-    size ? sizeClasses[size] : "",
-    weight ? weightClasses[weight] : "",
-    variantClasses[variant],
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({ className: classes }, props), { children }));
-}
-React.createContext(null);
-function AboutView({
-  labels,
-  howItems,
-  valueItems,
-  milestones,
-  heroBannerClass = "bg-gradient-to-br from-violet-600 to-indigo-600",
-  ctaBannerClass = "bg-gradient-to-br from-violet-600 to-indigo-600",
-  renderCtaButtons
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Section, { className: `${heroBannerClass} text-white py-16 md:py-20 lg:py-24`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 1, variant: "none", className: "text-4xl md:text-5xl font-bold mb-6 text-white", children: labels.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "none", className: "text-xl text-white/80 max-w-2xl mx-auto", children: labels.subtitle })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 space-y-16 md:space-y-20", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.howItWorksTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-3 gap-6 md:gap-8", children: howItems.map(({ title, text, icon, color }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: `bg-gradient-to-br ${color != null ? color : "from-primary/5 to-primary/5"} rounded-2xl p-6 space-y-3`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl", children: icon }),
-              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })
-            ]
-          },
-          title
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.valuesTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-3 gap-5 md:gap-6", children: valueItems.map(({ title, text, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl", children: icon }),
-              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })
-            ]
-          },
-          title
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, className: "text-center mb-10", children: labels.milestonesTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-l-2 border-primary/30 pl-8 space-y-8 max-w-2xl mx-auto", children: milestones.map(({ year, text }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-10 top-1 w-4 h-4 rounded-full bg-primary border-2 border-white dark:border-slate-900" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "xs", weight: "bold", className: "text-primary uppercase tracking-wide", children: year }),
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "mt-1", children: text })
-        ] }, year)) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Section, { className: `text-center ${ctaBannerClass} rounded-2xl p-8 md:p-12 text-white`, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, variant: "none", className: "text-3xl font-bold mb-8 text-white", children: labels.ctaTitle }),
-        renderCtaButtons ? renderCtaButtons() : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center gap-3 flex-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: "text-white/70 text-sm", children: [
-          labels.ctaSell,
-          " \xB7 ",
-          labels.ctaShop
-        ] }) })
-      ] })
-    ] })
-  ] });
-}
-
-exports.AboutView = AboutView;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/features/about/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/ui/components/Semantic.tsx","../../../src/ui/components/Div.tsx","../../../src/ui/components/Typography.tsx","../../../src/ui/components/Accordion.tsx","../../../src/features/about/components/AboutView.tsx"],"names":["React","jsx","createContext","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from \"react\";\n\n/**\n * Semantic HTML Wrapper Components\n *\n * Thin wrappers around HTML5 semantic elements.\n * Using these instead of raw tags enables:\n *   - Future one-place theming (add default padding/colour here, it applies everywhere)\n *   - Enforced accessibility attributes (Nav requires aria-label)\n *   - Consistent documentation / IDE autocomplete\n *   - Clean migration path if element defaults change\n *\n * All components pass through every standard HTML attribute via `...props`.\n * Style via `className` using Tailwind CSS classes.\n *\n * @example\n * ```tsx\n * import { Section, Article, Main, Aside, Nav, Ul, Ol, Li } from '@mohasinac/ui';\n *\n * <Main className=\"max-w-7xl mx-auto px-4\">\n *   <Section className=\"py-12\">\n *     <Article>...</Article>\n *   </Section>\n *   <Aside className=\"w-64 shrink-0\">...</Aside>\n * </Main>\n *\n * <Nav aria-label=\"Main navigation\">\n *   <Ul className=\"flex gap-4\">\n *     <Li>Products</Li>\n *   </Ul>\n * </Nav>\n * ```\n */\n\n// ─── Section ─────────────────────────────────────────────────────────────────\n/**\n * Semantic `<section>` element.\n * Use for thematically grouped content that would appear in an outline.\n * Prefer this over a plain `<div>` when the block has a heading.\n */\nexport interface SectionProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  ({ className = \"\", children, ...props }, ref) => (\n    <section className={className} ref={ref} {...props}>\n      {children}\n    </section>\n  ),\n);\nSection.displayName = \"Section\";\n\n// ─── Article ─────────────────────────────────────────────────────────────────\n/**\n * Semantic `<article>` element.\n * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.\n */\nexport interface ArticleProps extends React.HTMLAttributes<HTMLElement> {\n  children?: React.ReactNode;\n}\n\nexport function Article({ className = \"\", children, ...props }: ArticleProps) {\n  return (\n    <article className={className} {...props}>\n      {children}\n    </article>\n  );\n}\n\n// ─── Main ─────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<main>` element.\n * Wraps the primary content of the document. Should appear only once per page.\n */\nexport interface MainProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport function Main({ className = \"\", children, ...props }: MainProps) {\n  return (\n    <main className={className} {...props}>\n      {children}\n    </main>\n  );\n}\n\n// ─── Aside ────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<aside>` element.\n * Use for supplementary content tangentially related to the main content:\n * sidebars, callout boxes, related-link panels.\n */\nexport interface AsideProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport const Aside = React.forwardRef<HTMLElement, AsideProps>(\n  ({ className = \"\", children, ...props }, ref) => (\n    <aside className={className} ref={ref} {...props}>\n      {children}\n    </aside>\n  ),\n);\nAside.displayName = \"Aside\";\n\n// ─── Nav ─────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<nav>` element with enforced `aria-label`.\n *\n * Every `<nav>` on a page MUST have a unique `aria-label` so assistive\n * technologies can distinguish between multiple navigation landmarks.\n *\n * @example\n * ```tsx\n * <Nav aria-label=\"Breadcrumb\">...</Nav>\n * <Nav aria-label=\"Product categories\">...</Nav>\n * ```\n */\nexport interface NavProps extends React.HTMLAttributes<HTMLElement> {\n  /** REQUIRED — describes the purpose of this navigation region for screen readers. */\n  \"aria-label\": string;\n  children: React.ReactNode;\n}\n\nexport function Nav({ className = \"\", children, ...props }: NavProps) {\n  return (\n    <nav className={className} {...props}>\n      {children}\n    </nav>\n  );\n}\n\n// ─── Header (block-level) ─────────────────────────────────────────────────────\n/**\n * Semantic `<header>` element for block-level component headers.\n * Use inside `Section`, `Article`, or card bodies — NOT as the page-level header.\n *\n * @example\n * ```tsx\n * <Article>\n *   <BlockHeader className=\"mb-4\">\n *     <Heading level={2}>Post title</Heading>\n *   </BlockHeader>\n * </Article>\n * ```\n */\nexport interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport function BlockHeader({\n  className = \"\",\n  children,\n  ...props\n}: BlockHeaderProps) {\n  return (\n    <header className={className} {...props}>\n      {children}\n    </header>\n  );\n}\n\n// ─── Footer (block-level) ─────────────────────────────────────────────────────\n/**\n * Semantic `<footer>` element for block-level component footers.\n * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.\n */\nexport interface BlockFooterProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport function BlockFooter({\n  className = \"\",\n  children,\n  ...props\n}: BlockFooterProps) {\n  return (\n    <footer className={className} {...props}>\n      {children}\n    </footer>\n  );\n}\n\n// ─── Ul ──────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<ul>` (unordered list) element.\n *\n * @example\n * ```tsx\n * <Ul className=\"space-y-2\">\n *   <Li>Item one</Li>\n *   <Li>Item two</Li>\n * </Ul>\n * ```\n */\nexport interface UlProps extends React.HTMLAttributes<HTMLUListElement> {\n  children: React.ReactNode;\n}\n\nexport function Ul({ className = \"\", children, ...props }: UlProps) {\n  return (\n    <ul className={className} {...props}>\n      {children}\n    </ul>\n  );\n}\n\n// ─── Ol ──────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<ol>` (ordered list) element.\n *\n * @example\n * ```tsx\n * <Ol className=\"list-decimal pl-4 space-y-1\">\n *   <Li>Step one</Li>\n *   <Li>Step two</Li>\n * </Ol>\n * ```\n */\nexport interface OlProps extends React.HTMLAttributes<HTMLOListElement> {\n  children: React.ReactNode;\n}\n\nexport function Ol({ className = \"\", children, ...props }: OlProps) {\n  return (\n    <ol className={className} {...props}>\n      {children}\n    </ol>\n  );\n}\n\n// ─── Li ──────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<li>` (list item) element. Use inside `Ul` or `Ol`.\n */\nexport interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode;\n}\n\nexport function Li({ className = \"\", children, ...props }: LiProps) {\n  return (\n    <li className={className} {...props}>\n      {children}\n    </li>\n  );\n}\n\n// ─── Header / Footer — convenience aliases ────────────────────────────────────\n/**\n * Aliases for `BlockHeader` and `BlockFooter`.\n * Use when importing from the standard `<Header>` / `<Footer>` names.\n */\nexport type HeaderProps = BlockHeaderProps;\nexport const Header = BlockHeader;\nexport type FooterProps = BlockFooterProps;\nexport const Footer = BlockFooter;\n","import React from \"react\";\r\n\r\nexport interface DivProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Semantic `<div>` wrapper for general-purpose layout containers.\r\n *\r\n * Use when no more specific semantic element applies\r\n * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables\r\n * future one-place theming and consistent import from `@mohasinac/appkit/ui`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Div className=\"flex items-center gap-4\">\r\n *   <Badge>New</Badge>\r\n *   <Text>Product title</Text>\r\n * </Div>\r\n * ```\r\n */\r\nexport const Div = React.forwardRef<HTMLDivElement, DivProps>(\r\n  ({ className = \"\", children, ...props }, ref) => (\r\n    <div ref={ref} className={className} {...props}>\r\n      {children}\r\n    </div>\r\n  ),\r\n);\r\nDiv.displayName = \"Div\";\r\n","import React from \"react\";\n\n/**\n * UI_THEME — inlined subset of the app-level THEME_CONSTANTS.\n * Consumer apps can override by passing `className` on each component.\n * Full THEME_CONSTANTS lives in the host app (`@/constants`).\n */\nconst UI_THEME = {\n  typography: {\n    h1: \"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display\",\n    h2: \"text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display\",\n    h3: \"text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display\",\n    h4: \"text-lg md:text-xl lg:text-2xl font-bold font-display\",\n    h5: \"text-base md:text-lg lg:text-xl font-medium\",\n    h6: \"text-sm md:text-base lg:text-lg font-medium\",\n    body: \"text-base lg:text-lg\",\n    small: \"text-sm lg:text-base\",\n    xs: \"text-xs lg:text-sm\",\n  },\n  themed: {\n    textPrimary: \"text-zinc-900 dark:text-zinc-50\",\n    textSecondary: \"text-zinc-500 dark:text-zinc-400\",\n    textMuted: \"text-zinc-400 dark:text-zinc-500\",\n    textError: \"text-red-600 dark:text-red-400\",\n    textSuccess: \"text-emerald-600 dark:text-emerald-400\",\n  },\n  colors: {\n    form: {\n      required: \"text-red-500\",\n    },\n  },\n} as const;\n\n// ─── Heading ─────────────────────────────────────────────────────────────────\n\ninterface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  variant?: \"primary\" | \"secondary\" | \"muted\" | \"none\";\n  children: React.ReactNode;\n}\n\nexport function Heading({\n  level = 1,\n  variant = \"primary\",\n  className = \"\",\n  children,\n  ...props\n}: HeadingProps) {\n  const Tag = `h${level}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  const { typography, themed } = UI_THEME;\n\n  const sizeClasses = {\n    1: typography.h1,\n    2: typography.h2,\n    3: typography.h3,\n    4: typography.h4,\n    5: typography.h5,\n    6: typography.h6,\n  };\n\n  const variantClasses = {\n    primary: themed.textPrimary,\n    secondary: themed.textSecondary,\n    muted: themed.textMuted,\n    none: \"\",\n  };\n\n  return (\n    <Tag\n      className={`${sizeClasses[level]} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n}\n\n// ─── Text ─────────────────────────────────────────────────────────────────────\n\ninterface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  variant?: \"primary\" | \"secondary\" | \"muted\" | \"error\" | \"success\" | \"none\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\";\n  weight?: \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n  /** Override the rendered element. Defaults to `p`. */\n  as?: React.ElementType;\n  children: React.ReactNode;\n}\n\nexport function Text({\n  variant = \"primary\",\n  size = \"base\",\n  weight = \"normal\",\n  className = \"\",\n  as: Tag = \"p\",\n  children,\n  ...props\n}: TextProps) {\n  const { typography, themed } = UI_THEME;\n\n  const sizeClasses = {\n    xs: typography.xs,\n    sm: typography.small,\n    base: typography.body,\n    lg: \"text-lg\",\n    xl: \"text-xl\",\n  };\n\n  const weightClasses = {\n    normal: \"font-normal\",\n    medium: \"font-medium\",\n    semibold: \"font-semibold\",\n    bold: \"font-bold\",\n  };\n\n  const variantClasses = {\n    primary: themed.textPrimary,\n    secondary: themed.textSecondary,\n    muted: themed.textMuted,\n    error: themed.textError,\n    success: themed.textSuccess,\n    none: \"\",\n  };\n\n  return (\n    <Tag\n      className={`${sizeClasses[size]} ${weightClasses[weight]} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n}\n\n// ─── Label ────────────────────────────────────────────────────────────────────\n\ninterface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Label({\n  required,\n  className = \"\",\n  children,\n  ...props\n}: LabelProps) {\n  const { themed, typography, colors } = UI_THEME;\n  return (\n    <label\n      className={`block ${typography.small} font-medium ${themed.textSecondary} mb-1.5 ${className}`}\n      {...props}\n    >\n      {children}\n      {required && <span className={`${colors.form.required} ml-1`}>*</span>}\n    </label>\n  );\n}\n\n// ─── Caption ─────────────────────────────────────────────────────────────────\n\ninterface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** \"default\" — muted grey (default); \"accent\" — indigo, semibold; \"inverse\" — light indigo for use on dark indigo backgrounds */\n  variant?: \"default\" | \"accent\" | \"inverse\";\n  children: React.ReactNode;\n}\n\nexport function Caption({\n  variant = \"default\",\n  className = \"\",\n  children,\n  ...props\n}: CaptionProps) {\n  const { themed, typography } = UI_THEME;\n\n  const variantClasses = {\n    default: themed.textMuted,\n    accent: \"text-primary font-semibold\",\n    inverse: \"text-primary/40\",\n  };\n\n  return (\n    <span\n      className={`${typography.xs} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\n// ─── Span ─────────────────────────────────────────────────────────────────────\n/**\n * Inline wrapper for styled text fragments. Use instead of a raw `<span>`.\n * When `variant` is \"inherit\" (default) the element carries no colour classes\n * so it blends with its parent — perfect for purely structural/CSS wrappers.\n *\n * @example\n * ```tsx\n * <Span className=\"bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent\">\n *   Highlighted\n * </Span>\n *\n * <Span variant=\"error\" weight=\"semibold\">Required</Span>\n * ```\n */\ninterface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant. \"inherit\" (default) applies no colour class. */\n  variant?:\n    | \"inherit\"\n    | \"primary\"\n    | \"secondary\"\n    | \"muted\"\n    | \"error\"\n    | \"success\"\n    | \"accent\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\";\n  weight?: \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n  children?: React.ReactNode;\n}\n\nexport function Span({\n  variant = \"inherit\",\n  size,\n  weight,\n  className = \"\",\n  children,\n  ...props\n}: SpanProps) {\n  const { themed, typography } = UI_THEME;\n\n  const variantClasses: Record<NonNullable<SpanProps[\"variant\"]>, string> = {\n    inherit: \"\",\n    primary: themed.textPrimary,\n    secondary: themed.textSecondary,\n    muted: themed.textMuted,\n    error: themed.textError,\n    success: themed.textSuccess,\n    accent: \"text-primary\",\n  };\n\n  const sizeClasses: Record<NonNullable<SpanProps[\"size\"]>, string> = {\n    xs: typography.xs,\n    sm: typography.small,\n    base: typography.body,\n    lg: \"text-lg\",\n    xl: \"text-xl\",\n  };\n\n  const weightClasses: Record<NonNullable<SpanProps[\"weight\"]>, string> = {\n    normal: \"font-normal\",\n    medium: \"font-medium\",\n    semibold: \"font-semibold\",\n    bold: \"font-bold\",\n  };\n\n  const classes = [\n    size ? sizeClasses[size] : \"\",\n    weight ? weightClasses[weight] : \"\",\n    variantClasses[variant],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <span className={classes} {...props}>\n      {children}\n    </span>\n  );\n}\n","\"use client\";\r\n\r\nimport React, { createContext, useContext, useMemo, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Div } from \"./Div\";\r\nimport { Span } from \"./Typography\";\r\n\r\ninterface AccordionContextValue {\r\n  type: \"single\" | \"multiple\";\r\n  openValues: string[];\r\n  toggle: (value: string) => void;\r\n}\r\n\r\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\r\n\r\nexport interface AccordionProps {\r\n  /** Legacy simple mode: renders a native details/summary accordion */\r\n  title?: React.ReactNode;\r\n  /** Legacy simple mode open state */\r\n  open?: boolean;\r\n  /** Legacy simple mode title styling */\r\n  titleClassName?: string;\r\n  /** Legacy simple mode content styling */\r\n  contentClassName?: string;\r\n\r\n  /** Controlled/list mode: single or multiple expanded items */\r\n  type?: \"single\" | \"multiple\";\r\n  defaultValue?: string | string[];\r\n  value?: string | string[];\r\n  onChange?: (value: string | string[]) => void;\r\n\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport interface AccordionItemProps {\r\n  value: string;\r\n  title: React.ReactNode;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nfunction toArray(value?: string | string[]): string[] {\r\n  if (!value) return [];\r\n  return Array.isArray(value) ? value : [value];\r\n}\r\n\r\nfunction renderLegacyAccordion({\r\n  title,\r\n  children,\r\n  open,\r\n  className = \"\",\r\n  titleClassName = \"\",\r\n  contentClassName = \"\",\r\n}: {\r\n  title: React.ReactNode;\r\n  children?: React.ReactNode;\r\n  open: boolean;\r\n  className?: string;\r\n  titleClassName?: string;\r\n  contentClassName?: string;\r\n}) {\r\n  return (\r\n    <details\r\n      open={open}\r\n      className={`group border-b border-zinc-200 dark:border-zinc-700 ${className}`}\r\n    >\r\n      <summary\r\n        className={`flex cursor-pointer select-none list-none items-center justify-between py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100 ${titleClassName}`}\r\n      >\r\n        {title}\r\n        <span\r\n          className=\"ml-2 flex-shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-180\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          ▾\r\n        </span>\r\n      </summary>\r\n      <div\r\n        className={`pb-4 text-sm text-zinc-600 dark:text-zinc-400 ${contentClassName}`}\r\n      >\r\n        {children}\r\n      </div>\r\n    </details>\r\n  );\r\n}\r\n\r\nexport function Accordion({\r\n  title,\r\n  children,\r\n  open = false,\r\n  className = \"\",\r\n  titleClassName = \"\",\r\n  contentClassName = \"\",\r\n  type = \"single\",\r\n  defaultValue,\r\n  value,\r\n  onChange,\r\n}: AccordionProps) {\r\n  // Backward-compatible simple details mode.\r\n  if (title !== undefined) {\r\n    return renderLegacyAccordion({\r\n      title,\r\n      children,\r\n      open,\r\n      className,\r\n      titleClassName,\r\n      contentClassName,\r\n    });\r\n  }\r\n\r\n  const initialOpen = useMemo(() => {\r\n    if (value !== undefined) return toArray(value);\r\n    return toArray(defaultValue);\r\n  }, [defaultValue, value]);\r\n\r\n  const [internalOpenValues, setInternalOpenValues] =\r\n    useState<string[]>(initialOpen);\r\n\r\n  const activeOpenValues =\r\n    value !== undefined ? toArray(value) : internalOpenValues;\r\n\r\n  const toggle = (itemValue: string) => {\r\n    const nextOpenValues =\r\n      type === \"single\"\r\n        ? activeOpenValues.includes(itemValue)\r\n          ? []\r\n          : [itemValue]\r\n        : activeOpenValues.includes(itemValue)\r\n          ? activeOpenValues.filter((v) => v !== itemValue)\r\n          : [...activeOpenValues, itemValue];\r\n\r\n    if (value === undefined) {\r\n      setInternalOpenValues(nextOpenValues);\r\n    }\r\n\r\n    onChange?.(type === \"single\" ? (nextOpenValues[0] ?? \"\") : nextOpenValues);\r\n  };\r\n\r\n  return (\r\n    <AccordionContext.Provider\r\n      value={{ type, openValues: activeOpenValues, toggle }}\r\n    >\r\n      <Div className={className}>{children}</Div>\r\n    </AccordionContext.Provider>\r\n  );\r\n}\r\n\r\nexport function AccordionItem({\r\n  value,\r\n  title,\r\n  disabled = false,\r\n  className = \"\",\r\n  children,\r\n}: AccordionItemProps) {\r\n  const ctx = useContext(AccordionContext);\r\n  if (!ctx) {\r\n    throw new Error(\"AccordionItem must be used within Accordion.\");\r\n  }\r\n\r\n  const isOpen = ctx.openValues.includes(value);\r\n\r\n  return (\r\n    <Div\r\n      className={`border-b border-gray-200 dark:border-gray-700 ${className}`}\r\n    >\r\n      <Button\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-expanded={isOpen}\r\n        onClick={() => ctx.toggle(value)}\r\n        className=\"w-full flex items-center justify-between py-3 px-1 text-left text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed\"\r\n      >\r\n        <Span>{title}</Span>\r\n        <Span\r\n          className={`transition-transform duration-200 ${isOpen ? \"rotate-180\" : \"\"}`}\r\n        >\r\n          ▾\r\n        </Span>\r\n      </Button>\r\n      {isOpen && (\r\n        <Div className=\"pb-3 px-1 text-sm text-gray-600 dark:text-gray-400\">\r\n          {children}\r\n        </Div>\r\n      )}\r\n    </Div>\r\n  );\r\n}\r\n","import React from \"react\";\r\nimport { Heading, Section, Span, Text } from \"@mohasinac/ui\";\r\n\r\nexport interface AboutHowItem {\r\n  title: string;\r\n  text: string;\r\n  icon: string;\r\n  color?: string;\r\n}\r\n\r\nexport interface AboutValueItem {\r\n  title: string;\r\n  text: string;\r\n  icon: string;\r\n}\r\n\r\nexport interface AboutMilestone {\r\n  year: string;\r\n  text: string;\r\n}\r\n\r\nexport interface AboutViewProps {\r\n  labels: {\r\n    title: string;\r\n    subtitle: string;\r\n    missionTitle: string;\r\n    missionText: string;\r\n    howItWorksTitle: string;\r\n    valuesTitle: string;\r\n    milestonesTitle: string;\r\n    ctaTitle: string;\r\n    ctaSell: string;\r\n    ctaShop: string;\r\n  };\r\n  howItems: AboutHowItem[];\r\n  valueItems: AboutValueItem[];\r\n  milestones: AboutMilestone[];\r\n  heroBannerClass?: string;\r\n  ctaBannerClass?: string;\r\n  /** Render the CTA action buttons  */\r\n  renderCtaButtons?: () => React.ReactNode;\r\n}\r\n\r\nexport function AboutView({\r\n  labels,\r\n  howItems,\r\n  valueItems,\r\n  milestones,\r\n  heroBannerClass = \"bg-gradient-to-br from-violet-600 to-indigo-600\",\r\n  ctaBannerClass = \"bg-gradient-to-br from-violet-600 to-indigo-600\",\r\n  renderCtaButtons,\r\n}: AboutViewProps) {\r\n  return (\r\n    <div className=\"-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10\">\r\n      <Section className={`${heroBannerClass} text-white py-16 md:py-20 lg:py-24`}>\r\n        <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n          <Heading level={1} variant=\"none\" className=\"text-4xl md:text-5xl font-bold mb-6 text-white\">\r\n            {labels.title}\r\n          </Heading>\r\n          <Text variant=\"none\" className=\"text-xl text-white/80 max-w-2xl mx-auto\">\r\n            {labels.subtitle}\r\n          </Text>\r\n        </div>\r\n      </Section>\r\n\r\n      <div className=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 space-y-16 md:space-y-20\">\r\n        <Section className=\"text-center max-w-3xl mx-auto\">\r\n          <Heading level={2} className=\"mb-4\">{labels.missionTitle}</Heading>\r\n          <Text size=\"lg\" variant=\"secondary\" className=\"leading-relaxed\">\r\n            {labels.missionText}\r\n          </Text>\r\n        </Section>\r\n\r\n        <Section>\r\n          <Heading level={2} className=\"text-center mb-12\">{labels.howItWorksTitle}</Heading>\r\n          <div className=\"grid md:grid-cols-3 gap-6 md:gap-8\">\r\n            {howItems.map(({ title, text, icon, color }) => (\r\n              <div\r\n                key={title}\r\n                className={`bg-gradient-to-br ${color ?? \"from-primary/5 to-primary/5\"} rounded-2xl p-6 space-y-3`}\r\n              >\r\n                <div className=\"text-4xl\">{icon}</div>\r\n                <Heading level={3}>{title}</Heading>\r\n                <Text size=\"sm\" variant=\"secondary\" className=\"leading-relaxed\">\r\n                  {text}\r\n                </Text>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </Section>\r\n\r\n        <Section>\r\n          <Heading level={2} className=\"text-center mb-12\">{labels.valuesTitle}</Heading>\r\n          <div className=\"grid md:grid-cols-3 gap-5 md:gap-6\">\r\n            {valueItems.map(({ title, text, icon }) => (\r\n              <div\r\n                key={title}\r\n                className=\"bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700\"\r\n              >\r\n                <div className=\"text-3xl\">{icon}</div>\r\n                <Heading level={3}>{title}</Heading>\r\n                <Text size=\"sm\" variant=\"secondary\" className=\"leading-relaxed\">\r\n                  {text}\r\n                </Text>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </Section>\r\n\r\n        <Section>\r\n          <Heading level={2} className=\"text-center mb-10\">{labels.milestonesTitle}</Heading>\r\n          <div className=\"relative border-l-2 border-primary/30 pl-8 space-y-8 max-w-2xl mx-auto\">\r\n            {milestones.map(({ year, text }) => (\r\n              <div key={year} className=\"relative\">\r\n                <div className=\"absolute -left-10 top-1 w-4 h-4 rounded-full bg-primary border-2 border-white dark:border-slate-900\" />\r\n                <Span size=\"xs\" weight=\"bold\" className=\"text-primary uppercase tracking-wide\">\r\n                  {year}\r\n                </Span>\r\n                <Text className=\"mt-1\">{text}</Text>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </Section>\r\n\r\n        <Section className={`text-center ${ctaBannerClass} rounded-2xl p-8 md:p-12 text-white`}>\r\n          <Heading level={2} variant=\"none\" className=\"text-3xl font-bold mb-8 text-white\">\r\n            {labels.ctaTitle}\r\n          </Heading>\r\n          {renderCtaButtons ? (\r\n            renderCtaButtons()\r\n          ) : (\r\n            <div className=\"flex justify-center gap-3 flex-wrap\">\r\n              <Span className=\"text-white/70 text-sm\">\r\n                {labels.ctaSell} · {labels.ctaShop}\r\n              </Span>\r\n            </div>\r\n          )}\r\n        </Section>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"]}

package/dist/features/about/index.d.cts

@@ -1,42 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-interface AboutHowItem {
-    title: string;
-    text: string;
-    icon: string;
-    color?: string;
-}
-interface AboutValueItem {
-    title: string;
-    text: string;
-    icon: string;
-}
-interface AboutMilestone {
-    year: string;
-    text: string;
-}
-interface AboutViewProps {
-    labels: {
-        title: string;
-        subtitle: string;
-        missionTitle: string;
-        missionText: string;
-        howItWorksTitle: string;
-        valuesTitle: string;
-        milestonesTitle: string;
-        ctaTitle: string;
-        ctaSell: string;
-        ctaShop: string;
-    };
-    howItems: AboutHowItem[];
-    valueItems: AboutValueItem[];
-    milestones: AboutMilestone[];
-    heroBannerClass?: string;
-    ctaBannerClass?: string;
-    /** Render the CTA action buttons  */
-    renderCtaButtons?: () => React.ReactNode;
-}
-declare function AboutView({ labels, howItems, valueItems, milestones, heroBannerClass, ctaBannerClass, renderCtaButtons, }: AboutViewProps): react_jsx_runtime.JSX.Element;
-
-export { type AboutHowItem, type AboutMilestone, type AboutValueItem, AboutView, type AboutViewProps };

package/dist/features/about/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/ui/components/Semantic.tsx","../../../src/ui/components/Div.tsx","../../../src/ui/components/Typography.tsx","../../../src/ui/components/Accordion.tsx","../../../src/features/about/components/AboutView.tsx"],"names":["React","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CO,IAAM,UAAU,KAAA,CAAM,UAAA;AAAA,EAC3B,CAAC,IAAwC,GAAA,KAAK;AAA7C,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,SAAA,GAAY,IAAI,QAAA,EA7CrB,GA6CG,IAA+B,KAAA,GAAA,SAAA,CAA/B,EAAA,EAA+B,CAA7B,WAAA,EAAgB,UAAA,CAAA,CAAA;AACjB,IAAA,uBAAA,GAAA,CAAC,SAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAQ,SAAA,EAAsB,GAAA,EAAA,EAAc,KAAA,CAAA,EAA5C,EACE,QAAA,EAAA,CACH,CAAA;AAAA,EAAA;AAEJ,CAAA;AACA,OAAA,CAAQ,WAAA,GAAc,SAAA;AA8Cf,IAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,IAAwC,GAAA,KAAK;AAA7C,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,SAAA,GAAY,IAAI,QAAA,EAlGrB,GAkGG,IAA+B,KAAA,GAAA,SAAA,CAA/B,EAAA,EAA+B,CAA7B,WAAA,EAAgB,UAAA,CAAA,CAAA;AACjB,IAAA,uBAAA,GAAA,CAAC,OAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAM,SAAA,EAAsB,GAAA,EAAA,EAAc,KAAA,CAAA,EAA1C,EACE,QAAA,EAAA,CACH,CAAA;AAAA,EAAA;AAEJ,CAAA;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;ACnFb,IAAM,MAAMA,KAAAA,CAAM,UAAA;AAAA,EACvB,CAAC,IAAwC,GAAA,KAAK;AAA7C,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,SAAA,GAAY,IAAI,QAAA,EAtBrB,GAsBG,IAA+B,KAAA,GAAA,SAAA,CAA/B,EAAA,EAA+B,CAA7B,WAAA,EAAgB,UAAA,CAAA,CAAA;AACjB,IAAA,uBAAAC,IAAC,KAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAI,GAAA,EAAU,SAAA,EAAA,EAA0B,KAAA,CAAA,EAAxC,EACE,QAAA,EAAA,CACH,CAAA;AAAA,EAAA;AAEJ,CAAA;AACA,GAAA,CAAI,WAAA,GAAc,KAAA;ACrBlB,IAAM,QAAA,GAAW;AAAA,EACf,UAAA,EAAY;AAAA,IACV,EAAA,EAAI,wEAAA;AAAA,IACJ,EAAA,EAAI,wEAAA;AAAA,IACJ,EAAA,EAAI,uEAAA;AAAA,IACJ,EAAA,EAAI,uDAAA;AAAA,IACJ,EAAA,EAAI,6CAAA;AAAA,IACJ,EAAA,EAAI,6CAAA;AAAA,IACJ,IAAA,EAAM,sBAAA;AAAA,IACN,KAAA,EAAO,sBAAA;AAAA,IACP,EAAA,EAAI;AAAA,GACN;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa,iCAAA;AAAA,IACb,aAAA,EAAe,kCAAA;AAAA,IACf,SAAA,EAAW,kCAAA;AAAA,IACX,SAAA,EAAW,gCAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAOjB,CAAA;AAUO,SAAS,QAAQ,EAAA,EAMP;AANO,EAAA,IAAA,EAAA,GAAA,EAAA,EACtB;AAAA,IAAA,KAAA,GAAQ,CAAA;AAAA,IACR,OAAA,GAAU,SAAA;AAAA,IACV,SAAA,GAAY,EAAA;AAAA,IACZ;AAAA,GA7CF,GAyCwB,EAAA,EAKnB,KAAA,GAAA,SAAA,CALmB,EAAA,EAKnB;AAAA,IAJH,OAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,GAAA,GAAM,IAAI,KAAK,CAAA,CAAA;AACrB,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAO,GAAI,QAAA;AAE/B,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,GAAG,UAAA,CAAW,EAAA;AAAA,IACd,GAAG,UAAA,CAAW,EAAA;AAAA,IACd,GAAG,UAAA,CAAW,EAAA;AAAA,IACd,GAAG,UAAA,CAAW,EAAA;AAAA,IACd,GAAG,UAAA,CAAW,EAAA;AAAA,IACd,GAAG,UAAA,CAAW;AAAA,GAChB;AAEA,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,SAAS,MAAA,CAAO,WAAA;AAAA,IAChB,WAAW,MAAA,CAAO,aAAA;AAAA,IAClB,OAAO,MAAA,CAAO,SAAA;AAAA,IACd,IAAA,EAAM;AAAA,GACR;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,GAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,CAAA,EAAG,WAAA,CAAY,KAAK,CAAC,IAAI,cAAA,CAAe,OAAO,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,KAAA,EACpE,KAAA,CAAA,EAFL;AAAA,MAIE;AAAA,KAAA;AAAA,GACH;AAEJ;AAaO,SAAS,KAAK,EAAA,EAQP;AARO,EAAA,IAAA,EAAA,GAAA,EAAA,EACnB;AAAA,IAAA,OAAA,GAAU,SAAA;AAAA,IACV,IAAA,GAAO,MAAA;AAAA,IACP,MAAA,GAAS,QAAA;AAAA,IACT,SAAA,GAAY,EAAA;AAAA,IACZ,IAAI,GAAA,GAAM,GAAA;AAAA,IACV;AAAA,GA9FF,GAwFqB,EAAA,EAOhB,KAAA,GAAA,SAAA,CAPgB,EAAA,EAOhB;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAO,GAAI,QAAA;AAE/B,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,IAAI,UAAA,CAAW,EAAA;AAAA,IACf,IAAI,UAAA,CAAW,KAAA;AAAA,IACf,MAAM,UAAA,CAAW,IAAA;AAAA,IACjB,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAEA,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,MAAA,EAAQ,aAAA;AAAA,IACR,MAAA,EAAQ,aAAA;AAAA,IACR,QAAA,EAAU,eAAA;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAEA,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,SAAS,MAAA,CAAO,WAAA;AAAA,IAChB,WAAW,MAAA,CAAO,aAAA;AAAA,IAClB,OAAO,MAAA,CAAO,SAAA;AAAA,IACd,OAAO,MAAA,CAAO,SAAA;AAAA,IACd,SAAS,MAAA,CAAO,WAAA;AAAA,IAChB,IAAA,EAAM;AAAA,GACR;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,GAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,CAAA,EAAG,WAAA,CAAY,IAAI,CAAC,CAAA,CAAA,EAAI,aAAA,CAAc,MAAM,CAAC,CAAA,CAAA,EAAI,cAAA,CAAe,OAAO,CAAC,IAAI,SAAS,CAAA;AAAA,KAAA,EAC5F,KAAA,CAAA,EAFL;AAAA,MAIE;AAAA,KAAA;AAAA,GACH;AAEJ;AAyFO,SAAS,KAAK,EAAA,EAOP;AAPO,EAAA,IAAA,EAAA,GAAA,EAAA,EACnB;AAAA,IAAA,OAAA,GAAU,SAAA;AAAA,IACV,IAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA,GAAY,EAAA;AAAA,IACZ;AAAA,GAjOF,GA4NqB,EAAA,EAMhB,KAAA,GAAA,SAAA,CANgB,EAAA,EAMhB;AAAA,IALH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAA,EAAW,GAAI,QAAA;AAE/B,EAAA,MAAM,cAAA,GAAoE;AAAA,IACxE,OAAA,EAAS,EAAA;AAAA,IACT,SAAS,MAAA,CAAO,WAAA;AAAA,IAChB,WAAW,MAAA,CAAO,aAAA;AAAA,IAClB,OAAO,MAAA,CAAO,SAAA;AAAA,IACd,OAAO,MAAA,CAAO,SAAA;AAAA,IACd,SAAS,MAAA,CAAO,WAAA;AAAA,IAChB,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,MAAM,WAAA,GAA8D;AAAA,IAClE,IAAI,UAAA,CAAW,EAAA;AAAA,IACf,IAAI,UAAA,CAAW,KAAA;AAAA,IACf,MAAM,UAAA,CAAW,IAAA;AAAA,IACjB,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAEA,EAAA,MAAM,aAAA,GAAkE;AAAA,IACtE,MAAA,EAAQ,aAAA;AAAA,IACR,MAAA,EAAQ,aAAA;AAAA,IACR,QAAA,EAAU,eAAA;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAEA,EAAA,MAAM,OAAA,GAAU;AAAA,IACd,IAAA,GAAO,WAAA,CAAY,IAAI,CAAA,GAAI,EAAA;AAAA,IAC3B,MAAA,GAAS,aAAA,CAAc,MAAM,CAAA,GAAI,EAAA;AAAA,IACjC,eAAe,OAAO,CAAA;AAAA,IACtB;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACEA,GAAAA,CAAC,MAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAK,WAAW,OAAA,EAAA,EAAa,KAAA,CAAA,EAA7B,EACE,QAAA,EAAA,CACH,CAAA;AAEJ;AChQyB,cAA4C,IAAI;AC8BlE,SAAS,SAAA,CAAU;AAAA,EACxB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA,GAAkB,iDAAA;AAAA,EAClB,cAAA,GAAiB,iDAAA;AAAA,EACjB;AACF,CAAA,EAAmB;AACjB,EAAA,uBACEC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kDAAA,EACb,QAAA,EAAA;AAAA,oBAAAD,GAAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,CAAA,EAAG,eAAe,uCACpC,QAAA,kBAAAC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,EAAA;AAAA,sBAAAD,GAAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,EAAG,SAAQ,MAAA,EAAO,SAAA,EAAU,gDAAA,EACzC,QAAA,EAAA,MAAA,CAAO,KAAA,EACV,CAAA;AAAA,sBACAA,IAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAO,SAAA,EAAU,yCAAA,EAC5B,iBAAO,QAAA,EACV;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,oBAEAC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,IAAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,+BAAA,EACjB,QAAA,EAAA;AAAA,wBAAAD,IAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAG,SAAA,EAAU,MAAA,EAAQ,iBAAO,YAAA,EAAa,CAAA;AAAA,wBACzDA,GAAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAK,SAAQ,WAAA,EAAY,SAAA,EAAU,iBAAA,EAC3C,QAAA,EAAA,MAAA,CAAO,WAAA,EACV;AAAA,OAAA,EACF,CAAA;AAAA,sBAEAC,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAD,IAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAG,SAAA,EAAU,mBAAA,EAAqB,iBAAO,eAAA,EAAgB,CAAA;AAAA,wBACzEA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCACZ,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,KAAA,uBAClCC,IAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAW,CAAA,kBAAA,EAAqB,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,6BAA6B,CAAA,0BAAA,CAAA;AAAA,YAEtE,QAAA,EAAA;AAAA,8BAAAD,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,8BAChCA,GAAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,8BAC1BA,IAAC,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,OAAA,EAAQ,WAAA,EAAY,SAAA,EAAU,iBAAA,EAC3C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA,WAAA;AAAA,UAPK;AAAA,SASR,CAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBAEAC,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAD,IAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAG,SAAA,EAAU,mBAAA,EAAqB,iBAAO,WAAA,EAAY,CAAA;AAAA,wBACrEA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EACZ,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,uBAC9BC,IAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,qGAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAAD,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,8BAChCA,GAAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,8BAC1BA,IAAC,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,OAAA,EAAQ,WAAA,EAAY,SAAA,EAAU,iBAAA,EAC3C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA,WAAA;AAAA,UAPK;AAAA,SASR,CAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBAEAC,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAD,IAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAG,SAAA,EAAU,mBAAA,EAAqB,iBAAO,eAAA,EAAgB,CAAA;AAAA,wBACzEA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wEAAA,EACZ,qBAAW,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,MAAK,qBAC5BC,IAAAA,CAAC,KAAA,EAAA,EAAe,WAAU,UAAA,EACxB,QAAA,EAAA;AAAA,0BAAAD,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qGAAA,EAAsG,CAAA;AAAA,0BACrHA,IAAC,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,MAAA,EAAO,MAAA,EAAO,SAAA,EAAU,sCAAA,EACrC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,0BACAA,GAAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAQ,QAAA,EAAA,IAAA,EAAK;AAAA,SAAA,EAAA,EALrB,IAMV,CACD,CAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBAEAC,IAAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,CAAA,YAAA,EAAe,cAAc,CAAA,mCAAA,CAAA,EAC/C,QAAA,EAAA;AAAA,wBAAAD,GAAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,EAAG,SAAQ,MAAA,EAAO,SAAA,EAAU,oCAAA,EACzC,QAAA,EAAA,MAAA,CAAO,QAAA,EACV,CAAA;AAAA,QACC,gBAAA,GACC,gBAAA,EAAiB,mBAEjBA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,kBAAAC,IAAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EACb,QAAA,EAAA;AAAA,UAAA,MAAA,CAAO,OAAA;AAAA,UAAQ,QAAA;AAAA,UAAI,MAAA,CAAO;AAAA,SAAA,EAC7B,CAAA,EACF;AAAA,OAAA,EAEJ;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"index.js","sourcesContent":["import React from \"react\";\n\n/**\n * Semantic HTML Wrapper Components\n *\n * Thin wrappers around HTML5 semantic elements.\n * Using these instead of raw tags enables:\n *   - Future one-place theming (add default padding/colour here, it applies everywhere)\n *   - Enforced accessibility attributes (Nav requires aria-label)\n *   - Consistent documentation / IDE autocomplete\n *   - Clean migration path if element defaults change\n *\n * All components pass through every standard HTML attribute via `...props`.\n * Style via `className` using Tailwind CSS classes.\n *\n * @example\n * ```tsx\n * import { Section, Article, Main, Aside, Nav, Ul, Ol, Li } from '@mohasinac/ui';\n *\n * <Main className=\"max-w-7xl mx-auto px-4\">\n *   <Section className=\"py-12\">\n *     <Article>...</Article>\n *   </Section>\n *   <Aside className=\"w-64 shrink-0\">...</Aside>\n * </Main>\n *\n * <Nav aria-label=\"Main navigation\">\n *   <Ul className=\"flex gap-4\">\n *     <Li>Products</Li>\n *   </Ul>\n * </Nav>\n * ```\n */\n\n// ─── Section ─────────────────────────────────────────────────────────────────\n/**\n * Semantic `<section>` element.\n * Use for thematically grouped content that would appear in an outline.\n * Prefer this over a plain `<div>` when the block has a heading.\n */\nexport interface SectionProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  ({ className = \"\", children, ...props }, ref) => (\n    <section className={className} ref={ref} {...props}>\n      {children}\n    </section>\n  ),\n);\nSection.displayName = \"Section\";\n\n// ─── Article ─────────────────────────────────────────────────────────────────\n/**\n * Semantic `<article>` element.\n * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.\n */\nexport interface ArticleProps extends React.HTMLAttributes<HTMLElement> {\n  children?: React.ReactNode;\n}\n\nexport function Article({ className = \"\", children, ...props }: ArticleProps) {\n  return (\n    <article className={className} {...props}>\n      {children}\n    </article>\n  );\n}\n\n// ─── Main ─────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<main>` element.\n * Wraps the primary content of the document. Should appear only once per page.\n */\nexport interface MainProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport function Main({ className = \"\", children, ...props }: MainProps) {\n  return (\n    <main className={className} {...props}>\n      {children}\n    </main>\n  );\n}\n\n// ─── Aside ────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<aside>` element.\n * Use for supplementary content tangentially related to the main content:\n * sidebars, callout boxes, related-link panels.\n */\nexport interface AsideProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport const Aside = React.forwardRef<HTMLElement, AsideProps>(\n  ({ className = \"\", children, ...props }, ref) => (\n    <aside className={className} ref={ref} {...props}>\n      {children}\n    </aside>\n  ),\n);\nAside.displayName = \"Aside\";\n\n// ─── Nav ─────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<nav>` element with enforced `aria-label`.\n *\n * Every `<nav>` on a page MUST have a unique `aria-label` so assistive\n * technologies can distinguish between multiple navigation landmarks.\n *\n * @example\n * ```tsx\n * <Nav aria-label=\"Breadcrumb\">...</Nav>\n * <Nav aria-label=\"Product categories\">...</Nav>\n * ```\n */\nexport interface NavProps extends React.HTMLAttributes<HTMLElement> {\n  /** REQUIRED — describes the purpose of this navigation region for screen readers. */\n  \"aria-label\": string;\n  children: React.ReactNode;\n}\n\nexport function Nav({ className = \"\", children, ...props }: NavProps) {\n  return (\n    <nav className={className} {...props}>\n      {children}\n    </nav>\n  );\n}\n\n// ─── Header (block-level) ─────────────────────────────────────────────────────\n/**\n * Semantic `<header>` element for block-level component headers.\n * Use inside `Section`, `Article`, or card bodies — NOT as the page-level header.\n *\n * @example\n * ```tsx\n * <Article>\n *   <BlockHeader className=\"mb-4\">\n *     <Heading level={2}>Post title</Heading>\n *   </BlockHeader>\n * </Article>\n * ```\n */\nexport interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport function BlockHeader({\n  className = \"\",\n  children,\n  ...props\n}: BlockHeaderProps) {\n  return (\n    <header className={className} {...props}>\n      {children}\n    </header>\n  );\n}\n\n// ─── Footer (block-level) ─────────────────────────────────────────────────────\n/**\n * Semantic `<footer>` element for block-level component footers.\n * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.\n */\nexport interface BlockFooterProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\nexport function BlockFooter({\n  className = \"\",\n  children,\n  ...props\n}: BlockFooterProps) {\n  return (\n    <footer className={className} {...props}>\n      {children}\n    </footer>\n  );\n}\n\n// ─── Ul ──────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<ul>` (unordered list) element.\n *\n * @example\n * ```tsx\n * <Ul className=\"space-y-2\">\n *   <Li>Item one</Li>\n *   <Li>Item two</Li>\n * </Ul>\n * ```\n */\nexport interface UlProps extends React.HTMLAttributes<HTMLUListElement> {\n  children: React.ReactNode;\n}\n\nexport function Ul({ className = \"\", children, ...props }: UlProps) {\n  return (\n    <ul className={className} {...props}>\n      {children}\n    </ul>\n  );\n}\n\n// ─── Ol ──────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<ol>` (ordered list) element.\n *\n * @example\n * ```tsx\n * <Ol className=\"list-decimal pl-4 space-y-1\">\n *   <Li>Step one</Li>\n *   <Li>Step two</Li>\n * </Ol>\n * ```\n */\nexport interface OlProps extends React.HTMLAttributes<HTMLOListElement> {\n  children: React.ReactNode;\n}\n\nexport function Ol({ className = \"\", children, ...props }: OlProps) {\n  return (\n    <ol className={className} {...props}>\n      {children}\n    </ol>\n  );\n}\n\n// ─── Li ──────────────────────────────────────────────────────────────────────\n/**\n * Semantic `<li>` (list item) element. Use inside `Ul` or `Ol`.\n */\nexport interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  children: React.ReactNode;\n}\n\nexport function Li({ className = \"\", children, ...props }: LiProps) {\n  return (\n    <li className={className} {...props}>\n      {children}\n    </li>\n  );\n}\n\n// ─── Header / Footer — convenience aliases ────────────────────────────────────\n/**\n * Aliases for `BlockHeader` and `BlockFooter`.\n * Use when importing from the standard `<Header>` / `<Footer>` names.\n */\nexport type HeaderProps = BlockHeaderProps;\nexport const Header = BlockHeader;\nexport type FooterProps = BlockFooterProps;\nexport const Footer = BlockFooter;\n","import React from \"react\";\r\n\r\nexport interface DivProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Semantic `<div>` wrapper for general-purpose layout containers.\r\n *\r\n * Use when no more specific semantic element applies\r\n * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables\r\n * future one-place theming and consistent import from `@mohasinac/appkit/ui`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Div className=\"flex items-center gap-4\">\r\n *   <Badge>New</Badge>\r\n *   <Text>Product title</Text>\r\n * </Div>\r\n * ```\r\n */\r\nexport const Div = React.forwardRef<HTMLDivElement, DivProps>(\r\n  ({ className = \"\", children, ...props }, ref) => (\r\n    <div ref={ref} className={className} {...props}>\r\n      {children}\r\n    </div>\r\n  ),\r\n);\r\nDiv.displayName = \"Div\";\r\n","import React from \"react\";\n\n/**\n * UI_THEME — inlined subset of the app-level THEME_CONSTANTS.\n * Consumer apps can override by passing `className` on each component.\n * Full THEME_CONSTANTS lives in the host app (`@/constants`).\n */\nconst UI_THEME = {\n  typography: {\n    h1: \"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display\",\n    h2: \"text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display\",\n    h3: \"text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display\",\n    h4: \"text-lg md:text-xl lg:text-2xl font-bold font-display\",\n    h5: \"text-base md:text-lg lg:text-xl font-medium\",\n    h6: \"text-sm md:text-base lg:text-lg font-medium\",\n    body: \"text-base lg:text-lg\",\n    small: \"text-sm lg:text-base\",\n    xs: \"text-xs lg:text-sm\",\n  },\n  themed: {\n    textPrimary: \"text-zinc-900 dark:text-zinc-50\",\n    textSecondary: \"text-zinc-500 dark:text-zinc-400\",\n    textMuted: \"text-zinc-400 dark:text-zinc-500\",\n    textError: \"text-red-600 dark:text-red-400\",\n    textSuccess: \"text-emerald-600 dark:text-emerald-400\",\n  },\n  colors: {\n    form: {\n      required: \"text-red-500\",\n    },\n  },\n} as const;\n\n// ─── Heading ─────────────────────────────────────────────────────────────────\n\ninterface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  variant?: \"primary\" | \"secondary\" | \"muted\" | \"none\";\n  children: React.ReactNode;\n}\n\nexport function Heading({\n  level = 1,\n  variant = \"primary\",\n  className = \"\",\n  children,\n  ...props\n}: HeadingProps) {\n  const Tag = `h${level}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  const { typography, themed } = UI_THEME;\n\n  const sizeClasses = {\n    1: typography.h1,\n    2: typography.h2,\n    3: typography.h3,\n    4: typography.h4,\n    5: typography.h5,\n    6: typography.h6,\n  };\n\n  const variantClasses = {\n    primary: themed.textPrimary,\n    secondary: themed.textSecondary,\n    muted: themed.textMuted,\n    none: \"\",\n  };\n\n  return (\n    <Tag\n      className={`${sizeClasses[level]} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n}\n\n// ─── Text ─────────────────────────────────────────────────────────────────────\n\ninterface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  variant?: \"primary\" | \"secondary\" | \"muted\" | \"error\" | \"success\" | \"none\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\";\n  weight?: \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n  /** Override the rendered element. Defaults to `p`. */\n  as?: React.ElementType;\n  children: React.ReactNode;\n}\n\nexport function Text({\n  variant = \"primary\",\n  size = \"base\",\n  weight = \"normal\",\n  className = \"\",\n  as: Tag = \"p\",\n  children,\n  ...props\n}: TextProps) {\n  const { typography, themed } = UI_THEME;\n\n  const sizeClasses = {\n    xs: typography.xs,\n    sm: typography.small,\n    base: typography.body,\n    lg: \"text-lg\",\n    xl: \"text-xl\",\n  };\n\n  const weightClasses = {\n    normal: \"font-normal\",\n    medium: \"font-medium\",\n    semibold: \"font-semibold\",\n    bold: \"font-bold\",\n  };\n\n  const variantClasses = {\n    primary: themed.textPrimary,\n    secondary: themed.textSecondary,\n    muted: themed.textMuted,\n    error: themed.textError,\n    success: themed.textSuccess,\n    none: \"\",\n  };\n\n  return (\n    <Tag\n      className={`${sizeClasses[size]} ${weightClasses[weight]} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n}\n\n// ─── Label ────────────────────────────────────────────────────────────────────\n\ninterface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Label({\n  required,\n  className = \"\",\n  children,\n  ...props\n}: LabelProps) {\n  const { themed, typography, colors } = UI_THEME;\n  return (\n    <label\n      className={`block ${typography.small} font-medium ${themed.textSecondary} mb-1.5 ${className}`}\n      {...props}\n    >\n      {children}\n      {required && <span className={`${colors.form.required} ml-1`}>*</span>}\n    </label>\n  );\n}\n\n// ─── Caption ─────────────────────────────────────────────────────────────────\n\ninterface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** \"default\" — muted grey (default); \"accent\" — indigo, semibold; \"inverse\" — light indigo for use on dark indigo backgrounds */\n  variant?: \"default\" | \"accent\" | \"inverse\";\n  children: React.ReactNode;\n}\n\nexport function Caption({\n  variant = \"default\",\n  className = \"\",\n  children,\n  ...props\n}: CaptionProps) {\n  const { themed, typography } = UI_THEME;\n\n  const variantClasses = {\n    default: themed.textMuted,\n    accent: \"text-primary font-semibold\",\n    inverse: \"text-primary/40\",\n  };\n\n  return (\n    <span\n      className={`${typography.xs} ${variantClasses[variant]} ${className}`}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\n// ─── Span ─────────────────────────────────────────────────────────────────────\n/**\n * Inline wrapper for styled text fragments. Use instead of a raw `<span>`.\n * When `variant` is \"inherit\" (default) the element carries no colour classes\n * so it blends with its parent — perfect for purely structural/CSS wrappers.\n *\n * @example\n * ```tsx\n * <Span className=\"bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent\">\n *   Highlighted\n * </Span>\n *\n * <Span variant=\"error\" weight=\"semibold\">Required</Span>\n * ```\n */\ninterface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant. \"inherit\" (default) applies no colour class. */\n  variant?:\n    | \"inherit\"\n    | \"primary\"\n    | \"secondary\"\n    | \"muted\"\n    | \"error\"\n    | \"success\"\n    | \"accent\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\";\n  weight?: \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n  children?: React.ReactNode;\n}\n\nexport function Span({\n  variant = \"inherit\",\n  size,\n  weight,\n  className = \"\",\n  children,\n  ...props\n}: SpanProps) {\n  const { themed, typography } = UI_THEME;\n\n  const variantClasses: Record<NonNullable<SpanProps[\"variant\"]>, string> = {\n    inherit: \"\",\n    primary: themed.textPrimary,\n    secondary: themed.textSecondary,\n    muted: themed.textMuted,\n    error: themed.textError,\n    success: themed.textSuccess,\n    accent: \"text-primary\",\n  };\n\n  const sizeClasses: Record<NonNullable<SpanProps[\"size\"]>, string> = {\n    xs: typography.xs,\n    sm: typography.small,\n    base: typography.body,\n    lg: \"text-lg\",\n    xl: \"text-xl\",\n  };\n\n  const weightClasses: Record<NonNullable<SpanProps[\"weight\"]>, string> = {\n    normal: \"font-normal\",\n    medium: \"font-medium\",\n    semibold: \"font-semibold\",\n    bold: \"font-bold\",\n  };\n\n  const classes = [\n    size ? sizeClasses[size] : \"\",\n    weight ? weightClasses[weight] : \"\",\n    variantClasses[variant],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <span className={classes} {...props}>\n      {children}\n    </span>\n  );\n}\n","\"use client\";\r\n\r\nimport React, { createContext, useContext, useMemo, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Div } from \"./Div\";\r\nimport { Span } from \"./Typography\";\r\n\r\ninterface AccordionContextValue {\r\n  type: \"single\" | \"multiple\";\r\n  openValues: string[];\r\n  toggle: (value: string) => void;\r\n}\r\n\r\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\r\n\r\nexport interface AccordionProps {\r\n  /** Legacy simple mode: renders a native details/summary accordion */\r\n  title?: React.ReactNode;\r\n  /** Legacy simple mode open state */\r\n  open?: boolean;\r\n  /** Legacy simple mode title styling */\r\n  titleClassName?: string;\r\n  /** Legacy simple mode content styling */\r\n  contentClassName?: string;\r\n\r\n  /** Controlled/list mode: single or multiple expanded items */\r\n  type?: \"single\" | \"multiple\";\r\n  defaultValue?: string | string[];\r\n  value?: string | string[];\r\n  onChange?: (value: string | string[]) => void;\r\n\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport interface AccordionItemProps {\r\n  value: string;\r\n  title: React.ReactNode;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nfunction toArray(value?: string | string[]): string[] {\r\n  if (!value) return [];\r\n  return Array.isArray(value) ? value : [value];\r\n}\r\n\r\nfunction renderLegacyAccordion({\r\n  title,\r\n  children,\r\n  open,\r\n  className = \"\",\r\n  titleClassName = \"\",\r\n  contentClassName = \"\",\r\n}: {\r\n  title: React.ReactNode;\r\n  children?: React.ReactNode;\r\n  open: boolean;\r\n  className?: string;\r\n  titleClassName?: string;\r\n  contentClassName?: string;\r\n}) {\r\n  return (\r\n    <details\r\n      open={open}\r\n      className={`group border-b border-zinc-200 dark:border-zinc-700 ${className}`}\r\n    >\r\n      <summary\r\n        className={`flex cursor-pointer select-none list-none items-center justify-between py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100 ${titleClassName}`}\r\n      >\r\n        {title}\r\n        <span\r\n          className=\"ml-2 flex-shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-180\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          ▾\r\n        </span>\r\n      </summary>\r\n      <div\r\n        className={`pb-4 text-sm text-zinc-600 dark:text-zinc-400 ${contentClassName}`}\r\n      >\r\n        {children}\r\n      </div>\r\n    </details>\r\n  );\r\n}\r\n\r\nexport function Accordion({\r\n  title,\r\n  children,\r\n  open = false,\r\n  className = \"\",\r\n  titleClassName = \"\",\r\n  contentClassName = \"\",\r\n  type = \"single\",\r\n  defaultValue,\r\n  value,\r\n  onChange,\r\n}: AccordionProps) {\r\n  // Backward-compatible simple details mode.\r\n  if (title !== undefined) {\r\n    return renderLegacyAccordion({\r\n      title,\r\n      children,\r\n      open,\r\n      className,\r\n      titleClassName,\r\n      contentClassName,\r\n    });\r\n  }\r\n\r\n  const initialOpen = useMemo(() => {\r\n    if (value !== undefined) return toArray(value);\r\n    return toArray(defaultValue);\r\n  }, [defaultValue, value]);\r\n\r\n  const [internalOpenValues, setInternalOpenValues] =\r\n    useState<string[]>(initialOpen);\r\n\r\n  const activeOpenValues =\r\n    value !== undefined ? toArray(value) : internalOpenValues;\r\n\r\n  const toggle = (itemValue: string) => {\r\n    const nextOpenValues =\r\n      type === \"single\"\r\n        ? activeOpenValues.includes(itemValue)\r\n          ? []\r\n          : [itemValue]\r\n        : activeOpenValues.includes(itemValue)\r\n          ? activeOpenValues.filter((v) => v !== itemValue)\r\n          : [...activeOpenValues, itemValue];\r\n\r\n    if (value === undefined) {\r\n      setInternalOpenValues(nextOpenValues);\r\n    }\r\n\r\n    onChange?.(type === \"single\" ? (nextOpenValues[0] ?? \"\") : nextOpenValues);\r\n  };\r\n\r\n  return (\r\n    <AccordionContext.Provider\r\n      value={{ type, openValues: activeOpenValues, toggle }}\r\n    >\r\n      <Div className={className}>{children}</Div>\r\n    </AccordionContext.Provider>\r\n  );\r\n}\r\n\r\nexport function AccordionItem({\r\n  value,\r\n  title,\r\n  disabled = false,\r\n  className = \"\",\r\n  children,\r\n}: AccordionItemProps) {\r\n  const ctx = useContext(AccordionContext);\r\n  if (!ctx) {\r\n    throw new Error(\"AccordionItem must be used within Accordion.\");\r\n  }\r\n\r\n  const isOpen = ctx.openValues.includes(value);\r\n\r\n  return (\r\n    <Div\r\n      className={`border-b border-gray-200 dark:border-gray-700 ${className}`}\r\n    >\r\n      <Button\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-expanded={isOpen}\r\n        onClick={() => ctx.toggle(value)}\r\n        className=\"w-full flex items-center justify-between py-3 px-1 text-left text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed\"\r\n      >\r\n        <Span>{title}</Span>\r\n        <Span\r\n          className={`transition-transform duration-200 ${isOpen ? \"rotate-180\" : \"\"}`}\r\n        >\r\n          ▾\r\n        </Span>\r\n      </Button>\r\n      {isOpen && (\r\n        <Div className=\"pb-3 px-1 text-sm text-gray-600 dark:text-gray-400\">\r\n          {children}\r\n        </Div>\r\n      )}\r\n    </Div>\r\n  );\r\n}\r\n","import React from \"react\";\r\nimport { Heading, Section, Span, Text } from \"@mohasinac/ui\";\r\n\r\nexport interface AboutHowItem {\r\n  title: string;\r\n  text: string;\r\n  icon: string;\r\n  color?: string;\r\n}\r\n\r\nexport interface AboutValueItem {\r\n  title: string;\r\n  text: string;\r\n  icon: string;\r\n}\r\n\r\nexport interface AboutMilestone {\r\n  year: string;\r\n  text: string;\r\n}\r\n\r\nexport interface AboutViewProps {\r\n  labels: {\r\n    title: string;\r\n    subtitle: string;\r\n    missionTitle: string;\r\n    missionText: string;\r\n    howItWorksTitle: string;\r\n    valuesTitle: string;\r\n    milestonesTitle: string;\r\n    ctaTitle: string;\r\n    ctaSell: string;\r\n    ctaShop: string;\r\n  };\r\n  howItems: AboutHowItem[];\r\n  valueItems: AboutValueItem[];\r\n  milestones: AboutMilestone[];\r\n  heroBannerClass?: string;\r\n  ctaBannerClass?: string;\r\n  /** Render the CTA action buttons  */\r\n  renderCtaButtons?: () => React.ReactNode;\r\n}\r\n\r\nexport function AboutView({\r\n  labels,\r\n  howItems,\r\n  valueItems,\r\n  milestones,\r\n  heroBannerClass = \"bg-gradient-to-br from-violet-600 to-indigo-600\",\r\n  ctaBannerClass = \"bg-gradient-to-br from-violet-600 to-indigo-600\",\r\n  renderCtaButtons,\r\n}: AboutViewProps) {\r\n  return (\r\n    <div className=\"-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10\">\r\n      <Section className={`${heroBannerClass} text-white py-16 md:py-20 lg:py-24`}>\r\n        <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n          <Heading level={1} variant=\"none\" className=\"text-4xl md:text-5xl font-bold mb-6 text-white\">\r\n            {labels.title}\r\n          </Heading>\r\n          <Text variant=\"none\" className=\"text-xl text-white/80 max-w-2xl mx-auto\">\r\n            {labels.subtitle}\r\n          </Text>\r\n        </div>\r\n      </Section>\r\n\r\n      <div className=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 space-y-16 md:space-y-20\">\r\n        <Section className=\"text-center max-w-3xl mx-auto\">\r\n          <Heading level={2} className=\"mb-4\">{labels.missionTitle}</Heading>\r\n          <Text size=\"lg\" variant=\"secondary\" className=\"leading-relaxed\">\r\n            {labels.missionText}\r\n          </Text>\r\n        </Section>\r\n\r\n        <Section>\r\n          <Heading level={2} className=\"text-center mb-12\">{labels.howItWorksTitle}</Heading>\r\n          <div className=\"grid md:grid-cols-3 gap-6 md:gap-8\">\r\n            {howItems.map(({ title, text, icon, color }) => (\r\n              <div\r\n                key={title}\r\n                className={`bg-gradient-to-br ${color ?? \"from-primary/5 to-primary/5\"} rounded-2xl p-6 space-y-3`}\r\n              >\r\n                <div className=\"text-4xl\">{icon}</div>\r\n                <Heading level={3}>{title}</Heading>\r\n                <Text size=\"sm\" variant=\"secondary\" className=\"leading-relaxed\">\r\n                  {text}\r\n                </Text>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </Section>\r\n\r\n        <Section>\r\n          <Heading level={2} className=\"text-center mb-12\">{labels.valuesTitle}</Heading>\r\n          <div className=\"grid md:grid-cols-3 gap-5 md:gap-6\">\r\n            {valueItems.map(({ title, text, icon }) => (\r\n              <div\r\n                key={title}\r\n                className=\"bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700\"\r\n              >\r\n                <div className=\"text-3xl\">{icon}</div>\r\n                <Heading level={3}>{title}</Heading>\r\n                <Text size=\"sm\" variant=\"secondary\" className=\"leading-relaxed\">\r\n                  {text}\r\n                </Text>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </Section>\r\n\r\n        <Section>\r\n          <Heading level={2} className=\"text-center mb-10\">{labels.milestonesTitle}</Heading>\r\n          <div className=\"relative border-l-2 border-primary/30 pl-8 space-y-8 max-w-2xl mx-auto\">\r\n            {milestones.map(({ year, text }) => (\r\n              <div key={year} className=\"relative\">\r\n                <div className=\"absolute -left-10 top-1 w-4 h-4 rounded-full bg-primary border-2 border-white dark:border-slate-900\" />\r\n                <Span size=\"xs\" weight=\"bold\" className=\"text-primary uppercase tracking-wide\">\r\n                  {year}\r\n                </Span>\r\n                <Text className=\"mt-1\">{text}</Text>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </Section>\r\n\r\n        <Section className={`text-center ${ctaBannerClass} rounded-2xl p-8 md:p-12 text-white`}>\r\n          <Heading level={2} variant=\"none\" className=\"text-3xl font-bold mb-8 text-white\">\r\n            {labels.ctaTitle}\r\n          </Heading>\r\n          {renderCtaButtons ? (\r\n            renderCtaButtons()\r\n          ) : (\r\n            <div className=\"flex justify-center gap-3 flex-wrap\">\r\n              <Span className=\"text-white/70 text-sm\">\r\n                {labels.ctaSell} · {labels.ctaShop}\r\n              </Span>\r\n            </div>\r\n          )}\r\n        </Section>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"]}