@lssm/lib.design-system 0.0.0-canary-20251217052941 → 0.0.0-canary-20251217060433

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+import { CtaAction, HeaderNavItem, NavLink, NavSection, UserMenuItem } from "./types/navigation.js";
+import { formRenderer } from "./renderers/form-contract.js";
+import "./renderers/index.js";
+import { Button } from "./components/atoms/Button.js";
+import { Cta } from "./components/atoms/Cta.js";
+import { ButtonLink } from "./components/atoms/ButtonLink.js";
+import { Link } from "./components/atoms/Link.js";
+import { Input } from "./components/atoms/Input.js";
+import { Textarea } from "./components/atoms/Textarea.js";
+import { EmptyState } from "./components/atoms/EmptyState.js";
+import { Stepper } from "./components/atoms/Stepper.js";
+import { DeleteButton, EditButton, ToggleButton, ToggleLeftButton, ToggleRightButton, ViewButton } from "./components/atoms/ActionButtons.js";
+import { DateChip, DurationChip, PlaceChip, TimeChip } from "./components/atoms/DataChips.js";
+import { NavMain } from "./components/molecules/NavMain.js";
+import { NavUser } from "./components/molecules/NavUser.js";
+import { ApprovalQueue } from "./components/agent/ApprovalQueue.js";
+import { AgentMonitor } from "./components/agent/AgentMonitor.js";
+import { AppSidebar } from "./components/organisms/AppSidebar.js";
+import { DesktopHeader, Header, MobileHeader } from "./components/organisms/Header.js";
+import { Footer } from "./components/organisms/Footer.js";
+import { FeatureCarousel } from "./components/organisms/FeatureCarousel.js";
+import { CommandPalette } from "./components/molecules/CommandPalette.js";
+import { LangSwitch } from "./components/molecules/LangSwitch.js";
+import { MarketingHeader } from "./components/organisms/MarketingHeader.js";
+import { MarketingHeaderDesktop } from "./components/organisms/MarketingHeaderDesktop.js";
+import { MarketingHeaderMobile } from "./components/organisms/MarketingHeaderMobile.js";
+import { MarketingLayout } from "./components/organisms/MarketingLayout.js";
+import { MarketingSection, MarketingSectionPadding, MarketingSectionTone } from "./components/marketing/MarketingSection.js";
+import { MarketingCardsSection } from "./components/marketing/MarketingCardsSection.js";
+import { CardContent, CardDescription, CardHeader, CardTitle, MarketingCard, MarketingCardTone } from "./components/marketing/MarketingCard.js";
+import { MarketingIconCard } from "./components/marketing/MarketingIconCard.js";
+import { MarketingStepCard } from "./components/marketing/MarketingStepCard.js";
+import { MarketingComparisonSection } from "./components/marketing/MarketingComparisonSection.js";
+import { AppLayout } from "./components/organisms/AppLayout.js";
+import { AcademyLayout } from "./components/organisms/AcademyLayout.js";
+import { AppHeader } from "./components/organisms/AppHeader.js";
+import { NavBrand } from "./components/atoms/NavBrand.js";
+import { Breadcrumbs } from "./components/molecules/Breadcrumbs.js";
+import { CommandSearchTrigger } from "./components/molecules/CommandSearchTrigger.js";
+import { StatusChip } from "./components/molecules/StatusChip.js";
+import { EntityCard } from "./components/molecules/EntityCard.js";
+import { StatCard, StatCardGroup } from "./components/molecules/StatCard.js";
+import { OverviewCard } from "./components/molecules/OverviewCard.js";
+import { HoverPreview } from "./components/molecules/HoverPreview.js";
+import { HoverPreviewSimple } from "./components/molecules/hover-previews/Simple.js";
+import { HoverPreviewMedia } from "./components/molecules/hover-previews/Media.js";
+import { HoverPreviewDoc } from "./components/molecules/hover-previews/Doc.js";
+import { HoverPreviewUser } from "./components/molecules/hover-previews/User.js";
+import { HoverPreviewStats } from "./components/molecules/hover-previews/Stats.js";
+import { PricingCarousel } from "./components/organisms/PricingCarousel.js";
+import { TestimonialCarousel } from "./components/organisms/TestimonialCarousel.js";
+import { HeroSection } from "./components/organisms/HeroSection.js";
+import { HeroResponsive } from "./components/organisms/HeroResponsive.js";
+import { FeaturesSection } from "./components/organisms/FeaturesSection.js";
+import { PageHeaderResponsive } from "./components/organisms/PageHeaderResponsive.js";
+import { PricingSection } from "./components/organisms/PricingSection.js";
+import { FAQSection } from "./components/organisms/FAQSection.js";
+import { ListPageResponsive } from "./components/organisms/ListPageResponsive.js";
+import { ListGridPage } from "./components/organisms/ListGridPage.js";
+import { ListCardPage } from "./components/organisms/ListCardPage.js";
+import { ListTablePage } from "./components/organisms/ListTablePage.js";
+import { FiltersToolbar } from "./components/molecules/FiltersToolbar.js";
+import { ListPageTemplate } from "./components/templates/lists/ListPageTemplate/index.web.js";
+import "./components/templates/lists/ListPageTemplate/index.js";
+import { AiLinkButton } from "./components/molecules/AiLinkButton.js";
+import { EmptyDataList } from "./components/organisms/EmptyDataList.js";
+import { EmptySearchResult } from "./components/organisms/EmptySearchResult.js";
+import { LoaderCircular } from "./components/atoms/LoaderCircular.js";
+import { LoaderBlock } from "./components/molecules/LoaderBlock.js";
+import { SkeletonBlock } from "./components/molecules/SkeletonBlock/index.web.js";
+import "./components/molecules/SkeletonBlock/index.js";
+import { SkeletonCircle } from "./components/molecules/SkeletonCircle/index.web.js";
+import "./components/molecules/SkeletonCircle/index.js";
+import { SkeletonList } from "./components/molecules/SkeletonList/index.web.js";
+import "./components/molecules/SkeletonList/index.js";
+import { ErrorState } from "./components/atoms/ErrorState.js";
+import { useListUrlState } from "./hooks/useListUrlState.js";
+import { LegalHeading } from "./components/legal/atoms/LegalHeading.js";
+import { LegalText } from "./components/legal/atoms/LegalText.js";
+import { LegalSection } from "./components/legal/atoms/LegalSection.js";
+import { DefinitionList } from "./components/legal/atoms/DefinitionList.js";
+import { KeyValueList } from "./components/legal/atoms/KeyValueList.js";
+import { LegalList } from "./components/legal/atoms/LegalList.js";
+import { LegalCallout } from "./components/legal/atoms/LegalCallout.js";
+import { LegalTOC } from "./components/legal/molecules/LegalTOC.js";
+import { LegalMeta } from "./components/legal/molecules/LegalMeta.js";
+import { ConsentItem, ConsentList } from "./components/legal/molecules/Consent.js";
+import { ContactFields } from "./components/legal/molecules/ContactFields.js";
+import { LegalPageLayout } from "./components/legal/organisms/LegalPageLayout.js";
+import { GDPRRights } from "./components/legal/organisms/GDPRRights.js";
+import { ContactForm } from "./components/legal/organisms/ContactForm.js";
+import { GDPRDataRequest } from "./components/legal/organisms/GDPRDataRequest.js";
+import { TermsTemplate } from "./components/legal/templates/TermsTemplate.js";
+import { SalesTermsTemplate } from "./components/legal/templates/SalesTermsTemplate.js";
+import { PrivacyTemplate } from "./components/legal/templates/PrivacyTemplate.js";
+import { CookiesTemplate } from "./components/legal/templates/CookiesTemplate.js";
+import { ContactTemplate } from "./components/legal/templates/ContactTemplate.js";
+import { Breakpoints, DEFAULT_BREAKPOINTS, PlatformKind, PlatformUI, WithPlatformUIOptions, withPlatformUI } from "./platform/withPlatformUI.js";
+import { useResponsive } from "./platform/useResponsive.js";
+import { useReducedMotion } from "./platform/useReducedMotion.js";
+import { useColorScheme } from "./platform/useColorScheme.js";
+import { DSBaseVariantsProps, DensityVariant, EmphasisVariant, SizeVariant, ToneVariant, dsBaseVariants } from "./theme/variants.js";
+import { ColorTokens, RadiusTokens, SpaceTokens, ThemeTokens, TypographyTokens, defaultTokens } from "./theme/tokens.js";
+import { mapTokensForPlatform } from "./theme/tokenBridge.js";
+import { FormDialog } from "./components/forms/FormDialog.js";
+import { ZodForm } from "./components/forms/ZodForm.js";
+import { FormGrid, FormRow, FormSection } from "./components/forms/FormLayout.js";
+import { FormCardLayout } from "./components/forms/FormCardLayout.js";
+import { FormStepsLayout } from "./components/forms/FormStepsLayout.js";
+import { FormOneByOneLayout } from "./components/forms/FormOneByOneLayout.js";
+import { ActionForm } from "./components/forms/ActionForm.js";
+import { DataViewList } from "./components/data-view/DataViewList.js";
+import { DataViewTable } from "./components/data-view/DataViewTable.js";
+import { DataViewDetail } from "./components/data-view/DataViewDetail.js";
+import { DataViewRenderer } from "./components/data-view/DataViewRenderer.js";
+export { AcademyLayout, ActionForm, AgentMonitor, AiLinkButton, AppHeader, AppLayout, AppSidebar, ApprovalQueue, Breadcrumbs, Breakpoints, Button, ButtonLink, ColorTokens, CommandPalette, CommandSearchTrigger, ConsentItem, ConsentList, ContactFields, ContactForm, ContactTemplate, CookiesTemplate, Cta, CtaAction, DEFAULT_BREAKPOINTS, DSBaseVariantsProps, DataViewDetail, DataViewList, DataViewRenderer, DataViewTable, DateChip, DefinitionList, DeleteButton, DensityVariant, DesktopHeader, DurationChip, EditButton, EmphasisVariant, EmptyDataList, EmptySearchResult, EmptyState, EntityCard, ErrorState, FAQSection, FeatureCarousel, FeaturesSection, FiltersToolbar, Footer, FormCardLayout, FormDialog, FormGrid, FormOneByOneLayout, FormRow, FormSection, FormStepsLayout, GDPRDataRequest, GDPRRights, Header, HeaderNavItem, HeroResponsive, HeroSection, HoverPreview, HoverPreviewDoc, HoverPreviewMedia, HoverPreviewSimple, HoverPreviewStats, HoverPreviewUser, Input, KeyValueList, LangSwitch, LegalCallout, LegalHeading, LegalList, LegalMeta, LegalPageLayout, LegalSection, LegalTOC, LegalText, Link, ListCardPage, ListGridPage, ListPageResponsive, ListPageTemplate, ListTablePage, LoaderBlock, LoaderCircular, MarketingCard, CardContent as MarketingCardContent, CardDescription as MarketingCardDescription, CardHeader as MarketingCardHeader, CardTitle as MarketingCardTitle, type MarketingCardTone, MarketingCardsSection, MarketingComparisonSection, MarketingHeader, MarketingHeaderDesktop, MarketingHeaderMobile, MarketingIconCard, MarketingLayout, MarketingSection, type MarketingSectionPadding, type MarketingSectionTone, MarketingStepCard, MobileHeader, NavBrand, NavLink, NavMain, NavSection, NavUser, OverviewCard, PageHeaderResponsive, PlaceChip, PlatformKind, PlatformUI, PricingCarousel, PricingSection, PrivacyTemplate, RadiusTokens, SalesTermsTemplate, SizeVariant, SkeletonBlock, SkeletonCircle, SkeletonList, SpaceTokens, StatCard, StatCardGroup, StatusChip, Stepper, TermsTemplate, TestimonialCarousel, Textarea, ThemeTokens, TimeChip, ToggleButton, ToggleLeftButton, ToggleRightButton, ToneVariant, TypographyTokens, UserMenuItem, ViewButton, WithPlatformUIOptions, ZodForm, defaultTokens, dsBaseVariants, formRenderer, mapTokensForPlatform, useColorScheme, useListUrlState, useReducedMotion, useResponsive, withPlatformUI };

package/dist/lib/keyboard.d.ts

@@ -0,0 +1,12 @@
+//#region src/lib/keyboard.d.ts
+type KeyboardKind = 'text' | 'email' | 'password' | 'new-password' | 'username' | 'url' | 'search' | 'phone' | 'tel' | 'number' | 'int' | 'decimal' | 'numbers-and-punctuation' | 'otp' | 'name' | 'given-name' | 'family-name' | 'address-line1' | 'address-line2' | 'postal-code' | 'cc-number' | 'cc-exp' | 'cc-csc' | 'off' | 'date';
+type AutoCompleteToken = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'photo' | 'email' | 'impp' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-local-prefix' | 'tel-local-suffix' | 'tel-extension' | 'url' | 'webauthn' | `section-${string}` | (string & {});
+interface KeyboardOptions {
+  kind?: KeyboardKind;
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  autoComplete?: AutoCompleteToken;
+  autoCorrect?: boolean;
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'search' | 'send';
+}
+//#endregion
+export { KeyboardOptions };

package/dist/platform/useColorScheme.d.ts

@@ -0,0 +1,5 @@
+//#region src/platform/useColorScheme.d.ts
+type ColorScheme = 'light' | 'dark';
+declare function useColorScheme(): ColorScheme;
+//#endregion
+export { useColorScheme };

package/dist/platform/useReducedMotion.d.ts

@@ -0,0 +1,4 @@
+//#region src/platform/useReducedMotion.d.ts
+declare function useReducedMotion(): boolean;
+//#endregion
+export { useReducedMotion };

package/dist/platform/useResponsive.d.ts

@@ -0,0 +1,23 @@
+//#region src/platform/useResponsive.d.ts
+interface Breakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+declare function useResponsive(custom?: Partial<Breakpoints>): {
+  readonly width: number;
+  readonly breakpoints: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  readonly isSM: boolean;
+  readonly isMD: boolean;
+  readonly isLG: boolean;
+  readonly isXL: boolean;
+  readonly screen: "mobile" | "tablet" | "desktop";
+};
+//#endregion
+export { useResponsive };

package/dist/platform/withPlatformUI.d.ts

@@ -0,0 +1,28 @@
+//#region src/platform/withPlatformUI.d.ts
+/**
+ * withPlatformUI
+ * Lightweight adapter inspired by gluestack's withGluestack pattern.
+ * It centralizes tokens and responsive options while keeping DS imports
+ * pointed at @ui-kit-web. Metro/Webpack aliases can swap to @ui-kit in native.
+ */
+type PlatformKind = 'web' | 'native';
+interface Breakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+interface WithPlatformUIOptions<TTokens extends Record<string, unknown>> {
+  tokens: TTokens;
+  platform?: PlatformKind;
+  breakpoints?: Partial<Breakpoints>;
+}
+interface PlatformUI<TTokens> {
+  platform: PlatformKind;
+  tokens: TTokens;
+  breakpoints: Breakpoints;
+}
+declare const DEFAULT_BREAKPOINTS: Breakpoints;
+declare function withPlatformUI<TTokens extends Record<string, unknown>>(options: WithPlatformUIOptions<TTokens>): PlatformUI<TTokens>;
+//#endregion
+export { Breakpoints, DEFAULT_BREAKPOINTS, PlatformKind, PlatformUI, WithPlatformUIOptions, withPlatformUI };

package/dist/renderers/form-contract.d.ts

@@ -0,0 +1,11 @@
+import * as _lssm_lib_contracts_client_react_form_render0 from "@lssm/lib.contracts/client/react/form-render";
+import * as react_jsx_runtime108 from "react/jsx-runtime";
+import * as _lssm_lib_schema0 from "@lssm/lib.schema";
+import * as _lssm_lib_contracts_forms0 from "@lssm/lib.contracts/forms";
+
+//#region src/renderers/form-contract.d.ts
+declare const formRenderer: {
+  render: (spec: _lssm_lib_contracts_forms0.FormSpec<_lssm_lib_schema0.AnySchemaModel>, options?: _lssm_lib_contracts_client_react_form_render0.RenderOptions<Record<string, any>> | undefined) => react_jsx_runtime108.JSX.Element;
+};
+//#endregion
+export { formRenderer };

package/dist/renderers/index.d.ts

@@ -0,0 +1 @@
+import { formRenderer } from "./form-contract.js";

package/dist/theme/tokenBridge.d.ts

@@ -0,0 +1,19 @@
+import { ColorTokens, RadiusTokens, SpaceTokens, defaultTokens } from "./tokens.js";
+
+//#region src/theme/tokenBridge.d.ts
+type PlatformKind = 'web' | 'native';
+type WebTokens = typeof defaultTokens;
+interface NativeTokens {
+  colors: ColorTokens;
+  spacing: SpaceTokens;
+  typography: {
+    h1: number;
+    body: number;
+  };
+  radii: RadiusTokens;
+  icons: Record<string, number>;
+}
+type BridgedTokens = WebTokens | NativeTokens;
+declare function mapTokensForPlatform(platform: PlatformKind): BridgedTokens;
+//#endregion
+export { mapTokensForPlatform };

package/dist/theme/tokens.d.ts

@@ -0,0 +1,50 @@
+//#region src/theme/tokens.d.ts
+interface ColorTokens {
+  background: string;
+  foreground: string;
+  muted: string;
+  mutedForeground: string;
+  primary: string;
+  primaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  border: string;
+  ring: string;
+}
+interface RadiusTokens {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  full: number;
+}
+interface SpaceTokens {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+interface TypographyTokens {
+  h1: number;
+  h2: number;
+  h3: number;
+  body: number;
+  small: number;
+}
+interface ThemeTokens {
+  colors: ColorTokens;
+  radii: RadiusTokens;
+  space: SpaceTokens;
+  typography: TypographyTokens;
+  icons: {
+    sm: number;
+    md: number;
+    lg: number;
+  };
+}
+declare const defaultTokens: ThemeTokens;
+//#endregion
+export { ColorTokens, RadiusTokens, SpaceTokens, ThemeTokens, TypographyTokens, defaultTokens };

package/dist/theme/variants.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types21 from "class-variance-authority/types";
+
+//#region src/theme/variants.d.ts
+type SizeVariant = 'sm' | 'md' | 'lg';
+type DensityVariant = 'compact' | 'comfortable';
+type ToneVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type EmphasisVariant = 'default' | 'subtle' | 'strong';
+/**
+ * Base CVA example to compose in DS components.
+ * Consumers can extend this with component-specific classes.
+ */
+declare const dsBaseVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+  density?: "compact" | "comfortable" | null | undefined;
+  tone?: "neutral" | "danger" | "info" | "success" | "warning" | null | undefined;
+  emphasis?: "default" | "strong" | "subtle" | null | undefined;
+} & class_variance_authority_types21.ClassProp) | undefined) => string;
+type DSBaseVariantsProps = VariantProps<typeof dsBaseVariants>;
+//#endregion
+export { DSBaseVariantsProps, DensityVariant, EmphasisVariant, SizeVariant, ToneVariant, dsBaseVariants };

package/dist/types/navigation.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+//#region src/types/navigation.d.ts
+interface NavLink {
+  label: React.ReactNode;
+  href: string;
+  icon?: React.ReactNode;
+  badge?: string | number;
+  target?: '_self' | '_blank';
+  ariaLabel?: string;
+  external?: boolean;
+  description?: React.ReactNode;
+  imageSrc?: string;
+  imageAlt?: string;
+  categories?: string[];
+}
+interface NavSection {
+  title?: React.ReactNode;
+  items: NavLink[];
+}
+interface UserMenuItem {
+  label: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  icon?: React.ReactNode;
+  danger?: boolean;
+}
+interface HeaderNavItem {
+  label: React.ReactNode;
+  href?: string;
+  description?: React.ReactNode;
+  key?: string;
+  items?: NavLink[];
+  match?: 'exact' | 'startsWith';
+}
+interface CtaAction {
+  label: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+//#endregion
+export { CtaAction, HeaderNavItem, NavLink, NavSection, UserMenuItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lssm/lib.design-system",
-  "version": "0.0.0-canary-20251217052941",
+  "version": "0.0.0-canary-20251217060433",
   "scripts": {
     "publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
     "publish:pkg:canary": "bun publish:pkg --tag canary",
@@ -21,10 +21,10 @@
   "tree-shake": true,
   "dependencies": {
     "@hookform/resolvers": "5.2.2",
-    "@lssm/lib.ai-agent": "0.0.0-canary-20251217052941",
-    "@lssm/lib.contracts": "0.0.0-canary-20251217052941",
-    "@lssm/lib.ui-kit": "0.0.0-canary-20251217052941",
-    "@lssm/lib.ui-kit-web": "0.0.0-canary-20251217052941",
+    "@lssm/lib.ai-agent": "0.0.0-canary-20251217060433",
+    "@lssm/lib.contracts": "0.0.0-canary-20251217060433",
+    "@lssm/lib.ui-kit": "0.0.0-canary-20251217060433",
+    "@lssm/lib.ui-kit-web": "0.0.0-canary-20251217060433",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.535.0",
@@ -35,8 +35,8 @@
     "zod": "^4.1.13"
   },
   "devDependencies": {
-    "@lssm/tool.typescript": "0.0.0-canary-20251217052941",
-    "@lssm/tool.tsdown": "0.0.0-canary-20251217052941",
+    "@lssm/tool.typescript": "0.0.0-canary-20251217060433",
+    "@lssm/tool.tsdown": "0.0.0-canary-20251217060433",
     "@types/node": "^24.9.0",
     "@types/react-dom": "^19.0.14",
     "postcss": "^8.5",
@@ -50,7 +50,7 @@
     "README.md"
   ],
   "exports": {
-    ".": "./src/index.ts",
+    ".": "./dist/index.js",
     "./*": "./*"
   },
   "publishConfig": {