@brycks/core-front 0.2.7 → 0.2.9

package/dist/data.d.ts

@@ -0,0 +1,198 @@
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { TdHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
+
+export declare const InfoItem: ForwardRefExoticComponent<InfoItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare type InfoItemLayout = 'vertical' | 'horizontal' | 'inline';
+
+export declare interface InfoItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Label text */
+    label: ReactNode;
+    /** Value to display */
+    value?: ReactNode;
+    /** Children (alternative to value prop) */
+    children?: ReactNode;
+    /** Layout direction */
+    layout?: InfoItemLayout;
+    /** Size variant */
+    size?: InfoItemSize;
+    /** Hide if value is empty */
+    hideEmpty?: boolean;
+    /** Custom label width (for horizontal layout) */
+    labelWidth?: string | number;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type InfoItemSize = 'sm' | 'md' | 'lg';
+
+export declare const InfoList: ForwardRefExoticComponent<InfoListProps & RefAttributes<HTMLDListElement>>;
+
+/**
+ * InfoList Component
+ *
+ * A container for multiple InfoItem components.
+ * Provides consistent spacing and layout for info items.
+ */
+export declare interface InfoListProps extends HTMLAttributes<HTMLDListElement> {
+    /** Gap between items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Number of columns */
+    columns?: 1 | 2 | 3 | 4;
+    /** Children (InfoItem components) */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const List: ForwardRefExoticComponent<ListProps & RefAttributes<HTMLUListElement>>;
+
+export declare const ListDivider: ForwardRefExoticComponent<ListDividerProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const ListHeader: ForwardRefExoticComponent<ListHeaderProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListHeaderProps extends HTMLAttributes<HTMLLIElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const ListItem: ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** Icon or avatar on the left */
+    leftElement?: ReactNode;
+    /** Element on the right (badge, button, etc.) */
+    rightElement?: ReactNode;
+    /** Secondary text below the main content */
+    secondary?: ReactNode;
+    /** Whether the item is selected */
+    selected?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item is clickable */
+    clickable?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** List size */
+    size?: ListSize;
+    /** List variant */
+    variant?: ListVariant;
+    /** Whether list items are interactive */
+    interactive?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ListSize = 'sm' | 'md' | 'lg';
+
+export declare type ListVariant = 'default' | 'bordered' | 'separated';
+
+export declare const Table: ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>;
+
+export declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableCaption: ForwardRefExoticComponent<TableCaptionProps & RefAttributes<HTMLTableCaptionElement>>;
+
+export declare interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /** Caption placement */
+    placement?: 'top' | 'bottom';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableCell: ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLTableCellElement>>;
+
+export declare interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether to truncate text */
+    truncate?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableFoot: ForwardRefExoticComponent<TableFootProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableHead: ForwardRefExoticComponent<TableHeadProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableCellElement>>;
+
+export declare interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Sort direction */
+    sortDirection?: 'asc' | 'desc' | null;
+    /** Callback when sort is requested */
+    onSort?: () => void;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Whether the header is sticky */
+    sticky?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Table size */
+    size?: TableSize;
+    /** Table variant */
+    variant?: TableVariant;
+    /** Whether the table has a sticky header */
+    stickyHeader?: boolean;
+    /** Whether the table is in a loading state */
+    loading?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+
+export declare interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Whether the row is selected */
+    selected?: boolean;
+    /** Whether the row is clickable */
+    clickable?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type TableSize = 'sm' | 'md' | 'lg';
+
+export declare type TableVariant = 'default' | 'striped' | 'bordered';
+
+export { }

package/dist/design-system/primitives/focus.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={default:"0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))",error:"0 0 0 3px var(--brycks-focus-ring-error, rgba(239, 68, 68, 0.35))",success:"0 0 0 3px var(--brycks-focus-ring-success, rgba(16, 185, 129, 0.35))",subtle:"0 0 0 2px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.25))",none:"none"},o={default:"0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-primary-default)",error:"0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-error-default)"},e={outline:{outline:"2px solid var(--brycks-border-focus)",outlineOffset:"2px"},ring:{outline:"none",boxShadow:r.default},ringError:{outline:"none",boxShadow:r.error},none:{outline:"none",boxShadow:"none"}};exports.focusRing=r;exports.focusRingOffset=o;exports.focusStyles=e;
+//# sourceMappingURL=focus.cjs.map

package/dist/design-system/primitives/focus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.cjs","sources":["../../../src/design-system/primitives/focus.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Focus State Primitives\r\n *\r\n * Centralized focus ring and state definitions.\r\n * Ensures consistent accessibility across all interactive elements.\r\n *\r\n * RULE: All focusable elements MUST use these focus styles.\r\n */\r\n\r\n/**\r\n * Focus ring box-shadow values.\r\n * Uses CSS variables for theme-aware colors.\r\n */\r\nexport const focusRing = {\r\n  /** Default focus ring - primary color */\r\n  default: '0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))',\r\n  /** Error state focus ring */\r\n  error: '0 0 0 3px var(--brycks-focus-ring-error, rgba(239, 68, 68, 0.35))',\r\n  /** Success state focus ring */\r\n  success: '0 0 0 3px var(--brycks-focus-ring-success, rgba(16, 185, 129, 0.35))',\r\n  /** Subtle focus ring - for nested elements */\r\n  subtle: '0 0 0 2px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.25))',\r\n  /** None - explicitly no focus ring */\r\n  none: 'none',\r\n} as const\r\n\r\n/**\r\n * Focus ring with offset (for elements with borders).\r\n */\r\nexport const focusRingOffset = {\r\n  default: '0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-primary-default)',\r\n  error: '0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-error-default)',\r\n} as const\r\n\r\n/**\r\n * CSS custom properties that should be set by ThemeProvider.\r\n * These enable theme-aware focus rings.\r\n */\r\nexport const focusRingCSSVars = {\r\n  color: '--brycks-focus-ring-color',\r\n  error: '--brycks-focus-ring-error',\r\n  success: '--brycks-focus-ring-success',\r\n} as const\r\n\r\n/**\r\n * Complete focus styles object for spreading.\r\n */\r\nexport const focusStyles = {\r\n  /** Outline-based focus (native) */\r\n  outline: {\r\n    outline: '2px solid var(--brycks-border-focus)',\r\n    outlineOffset: '2px',\r\n  },\r\n  /** Box-shadow based focus (custom) */\r\n  ring: {\r\n    outline: 'none',\r\n    boxShadow: focusRing.default,\r\n  },\r\n  /** Error state focus */\r\n  ringError: {\r\n    outline: 'none',\r\n    boxShadow: focusRing.error,\r\n  },\r\n  /** Remove focus styles (use sparingly) */\r\n  none: {\r\n    outline: 'none',\r\n    boxShadow: 'none',\r\n  },\r\n} as const\r\n\r\nexport type FocusRingVariant = keyof typeof focusRing\r\n"],"names":["focusRing","focusRingOffset","focusStyles"],"mappings":"gFAaO,MAAMA,EAAY,CAEvB,QAAS,qEAET,MAAO,oEAEP,QAAS,uEAET,OAAQ,qEAER,KAAM,MACR,EAKaC,EAAkB,CAC7B,QAAS,kFACT,MAAO,+EACT,EAeaC,EAAc,CAEzB,QAAS,CACP,QAAS,uCACT,cAAe,KAAA,EAGjB,KAAM,CACJ,QAAS,OACT,UAAWF,EAAU,OAAA,EAGvB,UAAW,CACT,QAAS,OACT,UAAWA,EAAU,KAAA,EAGvB,KAAM,CACJ,QAAS,OACT,UAAW,MAAA,CAEf"}

package/dist/design-system/primitives/focus.js

@@ -0,0 +1,42 @@
+const r = {
+  /** Default focus ring - primary color */
+  default: "0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))",
+  /** Error state focus ring */
+  error: "0 0 0 3px var(--brycks-focus-ring-error, rgba(239, 68, 68, 0.35))",
+  /** Success state focus ring */
+  success: "0 0 0 3px var(--brycks-focus-ring-success, rgba(16, 185, 129, 0.35))",
+  /** Subtle focus ring - for nested elements */
+  subtle: "0 0 0 2px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.25))",
+  /** None - explicitly no focus ring */
+  none: "none"
+}, o = {
+  default: "0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-primary-default)",
+  error: "0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-error-default)"
+}, n = {
+  /** Outline-based focus (native) */
+  outline: {
+    outline: "2px solid var(--brycks-border-focus)",
+    outlineOffset: "2px"
+  },
+  /** Box-shadow based focus (custom) */
+  ring: {
+    outline: "none",
+    boxShadow: r.default
+  },
+  /** Error state focus */
+  ringError: {
+    outline: "none",
+    boxShadow: r.error
+  },
+  /** Remove focus styles (use sparingly) */
+  none: {
+    outline: "none",
+    boxShadow: "none"
+  }
+};
+export {
+  r as focusRing,
+  o as focusRingOffset,
+  n as focusStyles
+};
+//# sourceMappingURL=focus.js.map

package/dist/design-system/primitives/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sources":["../../../src/design-system/primitives/focus.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Focus State Primitives\r\n *\r\n * Centralized focus ring and state definitions.\r\n * Ensures consistent accessibility across all interactive elements.\r\n *\r\n * RULE: All focusable elements MUST use these focus styles.\r\n */\r\n\r\n/**\r\n * Focus ring box-shadow values.\r\n * Uses CSS variables for theme-aware colors.\r\n */\r\nexport const focusRing = {\r\n  /** Default focus ring - primary color */\r\n  default: '0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))',\r\n  /** Error state focus ring */\r\n  error: '0 0 0 3px var(--brycks-focus-ring-error, rgba(239, 68, 68, 0.35))',\r\n  /** Success state focus ring */\r\n  success: '0 0 0 3px var(--brycks-focus-ring-success, rgba(16, 185, 129, 0.35))',\r\n  /** Subtle focus ring - for nested elements */\r\n  subtle: '0 0 0 2px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.25))',\r\n  /** None - explicitly no focus ring */\r\n  none: 'none',\r\n} as const\r\n\r\n/**\r\n * Focus ring with offset (for elements with borders).\r\n */\r\nexport const focusRingOffset = {\r\n  default: '0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-primary-default)',\r\n  error: '0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-error-default)',\r\n} as const\r\n\r\n/**\r\n * CSS custom properties that should be set by ThemeProvider.\r\n * These enable theme-aware focus rings.\r\n */\r\nexport const focusRingCSSVars = {\r\n  color: '--brycks-focus-ring-color',\r\n  error: '--brycks-focus-ring-error',\r\n  success: '--brycks-focus-ring-success',\r\n} as const\r\n\r\n/**\r\n * Complete focus styles object for spreading.\r\n */\r\nexport const focusStyles = {\r\n  /** Outline-based focus (native) */\r\n  outline: {\r\n    outline: '2px solid var(--brycks-border-focus)',\r\n    outlineOffset: '2px',\r\n  },\r\n  /** Box-shadow based focus (custom) */\r\n  ring: {\r\n    outline: 'none',\r\n    boxShadow: focusRing.default,\r\n  },\r\n  /** Error state focus */\r\n  ringError: {\r\n    outline: 'none',\r\n    boxShadow: focusRing.error,\r\n  },\r\n  /** Remove focus styles (use sparingly) */\r\n  none: {\r\n    outline: 'none',\r\n    boxShadow: 'none',\r\n  },\r\n} as const\r\n\r\nexport type FocusRingVariant = keyof typeof focusRing\r\n"],"names":["focusRing","focusRingOffset","focusStyles"],"mappings":"AAaO,MAAMA,IAAY;AAAA;AAAA,EAEvB,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,SAAS;AAAA;AAAA,EAET,QAAQ;AAAA;AAAA,EAER,MAAM;AACR,GAKaC,IAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,OAAO;AACT,GAeaC,IAAc;AAAA;AAAA,EAEzB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,EAAA;AAAA;AAAA,EAGjB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAWF,EAAU;AAAA,EAAA;AAAA;AAAA,EAGvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,WAAWA,EAAU;AAAA,EAAA;AAAA;AAAA,EAGvB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAEf;"}

package/dist/design-system/primitives/layout.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../tokens/spacing.cjs"),n={collapsed:72,expanded:240,logoSize:i.spacing[8],navIconSize:i.spacing[5]},s={height:i.spacing[16],compact:i.spacing[12]},a={xs:i.spacing[6],sm:i.spacing[8],md:36,lg:i.spacing[10],xl:i.spacing[12],"2xl":i.spacing[16]},c={xs:28,sm:i.spacing[8],md:36,lg:i.spacing[10],xl:i.spacing[12]},e={iconContainer:i.spacing[12],padding:i.spacing[4]},t={mobile:i.spacing[4],tablet:i.spacing[5],desktop:i.spacing[6],wide:i.spacing[8]},g={marginBottom:i.spacing[6]},o={minWidth:240,iconLeft:i.spacing[3],paddingLeft:36},p={iconContainer:i.spacing[12]};exports.avatarSizes=a;exports.contentPadding=t;exports.headerSizes=s;exports.iconButtonSizes=c;exports.pageHeaderSpacing=g;exports.quickActionSizes=e;exports.searchInputSizes=o;exports.sidebarSizes=n;exports.statCardSizes=p;
+//# sourceMappingURL=layout.cjs.map

package/dist/design-system/primitives/layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.cjs","sources":["../../../src/design-system/primitives/layout.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Layout Primitives\r\n *\r\n * Standardized layout dimensions for application shells.\r\n * All values are derived from the spacing token system (4px grid).\r\n *\r\n * RULE: Application layouts MUST use these constants. Never hardcode dimensions.\r\n */\r\n\r\nimport { spacing } from '../tokens/spacing'\r\n\r\n/**\r\n * Sidebar dimensions\r\n */\r\nexport const sidebarSizes = {\r\n  /** Collapsed sidebar width: 72px */\r\n  collapsed: 72,\r\n  /** Expanded sidebar width: 240px */\r\n  expanded: 240,\r\n  /** Logo size: 32px */\r\n  logoSize: spacing[8],\r\n  /** Nav icon size: 20px */\r\n  navIconSize: spacing[5],\r\n} as const\r\n\r\n/**\r\n * Header dimensions\r\n */\r\nexport const headerSizes = {\r\n  /** Standard header height: 64px */\r\n  height: spacing[16],\r\n  /** Compact header height: 48px */\r\n  compact: spacing[12],\r\n} as const\r\n\r\n/**\r\n * Avatar dimensions\r\n */\r\nexport const avatarSizes = {\r\n  /** 24px - Extra small */\r\n  xs: spacing[6],\r\n  /** 32px - Small */\r\n  sm: spacing[8],\r\n  /** 36px - Medium (default) */\r\n  md: 36,\r\n  /** 40px - Large */\r\n  lg: spacing[10],\r\n  /** 48px - Extra large */\r\n  xl: spacing[12],\r\n  /** 64px - 2x large (for hero sections) */\r\n  '2xl': spacing[16],\r\n} as const\r\n\r\n/**\r\n * Icon button sizes (square buttons with icons)\r\n */\r\nexport const iconButtonSizes = {\r\n  /** 28px */\r\n  xs: 28,\r\n  /** 32px */\r\n  sm: spacing[8],\r\n  /** 36px */\r\n  md: 36,\r\n  /** 40px */\r\n  lg: spacing[10],\r\n  /** 48px */\r\n  xl: spacing[12],\r\n} as const\r\n\r\n/**\r\n * Quick action card dimensions\r\n */\r\nexport const quickActionSizes = {\r\n  /** Icon container size: 48px */\r\n  iconContainer: spacing[12],\r\n  /** Default padding: 16px */\r\n  padding: spacing[4],\r\n} as const\r\n\r\n/**\r\n * Content area padding\r\n */\r\nexport const contentPadding = {\r\n  /** Mobile padding: 16px */\r\n  mobile: spacing[4],\r\n  /** Tablet padding: 20px */\r\n  tablet: spacing[5],\r\n  /** Desktop padding: 24px */\r\n  desktop: spacing[6],\r\n  /** Large screen padding: 32px */\r\n  wide: spacing[8],\r\n} as const\r\n\r\n/**\r\n * Page header spacing\r\n */\r\nexport const pageHeaderSpacing = {\r\n  /** Bottom margin: 24px */\r\n  marginBottom: spacing[6],\r\n} as const\r\n\r\n/**\r\n * Search input dimensions\r\n */\r\nexport const searchInputSizes = {\r\n  /** Minimum width: 240px */\r\n  minWidth: 240,\r\n  /** Icon left offset: 12px */\r\n  iconLeft: spacing[3],\r\n  /** Input left padding to accommodate icon: 36px */\r\n  paddingLeft: 36,\r\n} as const\r\n\r\n/**\r\n * Stat card dimensions\r\n */\r\nexport const statCardSizes = {\r\n  /** Icon container size: 48px */\r\n  iconContainer: spacing[12],\r\n} as const\r\n\r\nexport type SidebarSizes = typeof sidebarSizes\r\nexport type HeaderSizes = typeof headerSizes\r\nexport type AvatarSizes = typeof avatarSizes\r\nexport type IconButtonSizes = typeof iconButtonSizes\r\n"],"names":["sidebarSizes","spacing","headerSizes","avatarSizes","iconButtonSizes","quickActionSizes","contentPadding","pageHeaderSpacing","searchInputSizes","statCardSizes"],"mappings":"yHAcaA,EAAe,CAE1B,UAAW,GAEX,SAAU,IAEV,SAAUC,EAAAA,QAAQ,CAAC,EAEnB,YAAaA,EAAAA,QAAQ,CAAC,CACxB,EAKaC,EAAc,CAEzB,OAAQD,EAAAA,QAAQ,EAAE,EAElB,QAASA,EAAAA,QAAQ,EAAE,CACrB,EAKaE,EAAc,CAEzB,GAAIF,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAI,GAEJ,GAAIA,EAAAA,QAAQ,EAAE,EAEd,GAAIA,EAAAA,QAAQ,EAAE,EAEd,MAAOA,EAAAA,QAAQ,EAAE,CACnB,EAKaG,EAAkB,CAE7B,GAAI,GAEJ,GAAIH,EAAAA,QAAQ,CAAC,EAEb,GAAI,GAEJ,GAAIA,EAAAA,QAAQ,EAAE,EAEd,GAAIA,EAAAA,QAAQ,EAAE,CAChB,EAKaI,EAAmB,CAE9B,cAAeJ,EAAAA,QAAQ,EAAE,EAEzB,QAASA,EAAAA,QAAQ,CAAC,CACpB,EAKaK,EAAiB,CAE5B,OAAQL,EAAAA,QAAQ,CAAC,EAEjB,OAAQA,EAAAA,QAAQ,CAAC,EAEjB,QAASA,EAAAA,QAAQ,CAAC,EAElB,KAAMA,EAAAA,QAAQ,CAAC,CACjB,EAKaM,EAAoB,CAE/B,aAAcN,EAAAA,QAAQ,CAAC,CACzB,EAKaO,EAAmB,CAE9B,SAAU,IAEV,SAAUP,EAAAA,QAAQ,CAAC,EAEnB,YAAa,EACf,EAKaQ,EAAgB,CAE3B,cAAeR,EAAAA,QAAQ,EAAE,CAC3B"}

package/dist/design-system/primitives/layout.js

@@ -0,0 +1,79 @@
+import { spacing as n } from "../tokens/spacing.js";
+const e = {
+  /** Collapsed sidebar width: 72px */
+  collapsed: 72,
+  /** Expanded sidebar width: 240px */
+  expanded: 240,
+  /** Logo size: 32px */
+  logoSize: n[8],
+  /** Nav icon size: 20px */
+  navIconSize: n[5]
+}, i = {
+  /** Standard header height: 64px */
+  height: n[16],
+  /** Compact header height: 48px */
+  compact: n[12]
+}, o = {
+  /** 24px - Extra small */
+  xs: n[6],
+  /** 32px - Small */
+  sm: n[8],
+  /** 36px - Medium (default) */
+  md: 36,
+  /** 40px - Large */
+  lg: n[10],
+  /** 48px - Extra large */
+  xl: n[12],
+  /** 64px - 2x large (for hero sections) */
+  "2xl": n[16]
+}, s = {
+  /** 28px */
+  xs: 28,
+  /** 32px */
+  sm: n[8],
+  /** 36px */
+  md: 36,
+  /** 40px */
+  lg: n[10],
+  /** 48px */
+  xl: n[12]
+}, a = {
+  /** Icon container size: 48px */
+  iconContainer: n[12],
+  /** Default padding: 16px */
+  padding: n[4]
+}, c = {
+  /** Mobile padding: 16px */
+  mobile: n[4],
+  /** Tablet padding: 20px */
+  tablet: n[5],
+  /** Desktop padding: 24px */
+  desktop: n[6],
+  /** Large screen padding: 32px */
+  wide: n[8]
+}, d = {
+  /** Bottom margin: 24px */
+  marginBottom: n[6]
+}, p = {
+  /** Minimum width: 240px */
+  minWidth: 240,
+  /** Icon left offset: 12px */
+  iconLeft: n[3],
+  /** Input left padding to accommodate icon: 36px */
+  paddingLeft: 36
+}, r = {
+  /** Icon container size: 48px */
+  iconContainer: n[12]
+};
+export {
+  o as avatarSizes,
+  c as contentPadding,
+  i as headerSizes,
+  s as iconButtonSizes,
+  d as pageHeaderSpacing,
+  a as quickActionSizes,
+  p as searchInputSizes,
+  e as sidebarSizes,
+  r as statCardSizes
+};
+//# sourceMappingURL=layout.js.map

package/dist/design-system/primitives/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":["../../../src/design-system/primitives/layout.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Layout Primitives\r\n *\r\n * Standardized layout dimensions for application shells.\r\n * All values are derived from the spacing token system (4px grid).\r\n *\r\n * RULE: Application layouts MUST use these constants. Never hardcode dimensions.\r\n */\r\n\r\nimport { spacing } from '../tokens/spacing'\r\n\r\n/**\r\n * Sidebar dimensions\r\n */\r\nexport const sidebarSizes = {\r\n  /** Collapsed sidebar width: 72px */\r\n  collapsed: 72,\r\n  /** Expanded sidebar width: 240px */\r\n  expanded: 240,\r\n  /** Logo size: 32px */\r\n  logoSize: spacing[8],\r\n  /** Nav icon size: 20px */\r\n  navIconSize: spacing[5],\r\n} as const\r\n\r\n/**\r\n * Header dimensions\r\n */\r\nexport const headerSizes = {\r\n  /** Standard header height: 64px */\r\n  height: spacing[16],\r\n  /** Compact header height: 48px */\r\n  compact: spacing[12],\r\n} as const\r\n\r\n/**\r\n * Avatar dimensions\r\n */\r\nexport const avatarSizes = {\r\n  /** 24px - Extra small */\r\n  xs: spacing[6],\r\n  /** 32px - Small */\r\n  sm: spacing[8],\r\n  /** 36px - Medium (default) */\r\n  md: 36,\r\n  /** 40px - Large */\r\n  lg: spacing[10],\r\n  /** 48px - Extra large */\r\n  xl: spacing[12],\r\n  /** 64px - 2x large (for hero sections) */\r\n  '2xl': spacing[16],\r\n} as const\r\n\r\n/**\r\n * Icon button sizes (square buttons with icons)\r\n */\r\nexport const iconButtonSizes = {\r\n  /** 28px */\r\n  xs: 28,\r\n  /** 32px */\r\n  sm: spacing[8],\r\n  /** 36px */\r\n  md: 36,\r\n  /** 40px */\r\n  lg: spacing[10],\r\n  /** 48px */\r\n  xl: spacing[12],\r\n} as const\r\n\r\n/**\r\n * Quick action card dimensions\r\n */\r\nexport const quickActionSizes = {\r\n  /** Icon container size: 48px */\r\n  iconContainer: spacing[12],\r\n  /** Default padding: 16px */\r\n  padding: spacing[4],\r\n} as const\r\n\r\n/**\r\n * Content area padding\r\n */\r\nexport const contentPadding = {\r\n  /** Mobile padding: 16px */\r\n  mobile: spacing[4],\r\n  /** Tablet padding: 20px */\r\n  tablet: spacing[5],\r\n  /** Desktop padding: 24px */\r\n  desktop: spacing[6],\r\n  /** Large screen padding: 32px */\r\n  wide: spacing[8],\r\n} as const\r\n\r\n/**\r\n * Page header spacing\r\n */\r\nexport const pageHeaderSpacing = {\r\n  /** Bottom margin: 24px */\r\n  marginBottom: spacing[6],\r\n} as const\r\n\r\n/**\r\n * Search input dimensions\r\n */\r\nexport const searchInputSizes = {\r\n  /** Minimum width: 240px */\r\n  minWidth: 240,\r\n  /** Icon left offset: 12px */\r\n  iconLeft: spacing[3],\r\n  /** Input left padding to accommodate icon: 36px */\r\n  paddingLeft: 36,\r\n} as const\r\n\r\n/**\r\n * Stat card dimensions\r\n */\r\nexport const statCardSizes = {\r\n  /** Icon container size: 48px */\r\n  iconContainer: spacing[12],\r\n} as const\r\n\r\nexport type SidebarSizes = typeof sidebarSizes\r\nexport type HeaderSizes = typeof headerSizes\r\nexport type AvatarSizes = typeof avatarSizes\r\nexport type IconButtonSizes = typeof iconButtonSizes\r\n"],"names":["sidebarSizes","spacing","headerSizes","avatarSizes","iconButtonSizes","quickActionSizes","contentPadding","pageHeaderSpacing","searchInputSizes","statCardSizes"],"mappings":";AAcO,MAAMA,IAAe;AAAA;AAAA,EAE1B,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,UAAUC,EAAQ,CAAC;AAAA;AAAA,EAEnB,aAAaA,EAAQ,CAAC;AACxB,GAKaC,IAAc;AAAA;AAAA,EAEzB,QAAQD,EAAQ,EAAE;AAAA;AAAA,EAElB,SAASA,EAAQ,EAAE;AACrB,GAKaE,IAAc;AAAA;AAAA,EAEzB,IAAIF,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAI;AAAA;AAAA,EAEJ,IAAIA,EAAQ,EAAE;AAAA;AAAA,EAEd,IAAIA,EAAQ,EAAE;AAAA;AAAA,EAEd,OAAOA,EAAQ,EAAE;AACnB,GAKaG,IAAkB;AAAA;AAAA,EAE7B,IAAI;AAAA;AAAA,EAEJ,IAAIH,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAI;AAAA;AAAA,EAEJ,IAAIA,EAAQ,EAAE;AAAA;AAAA,EAEd,IAAIA,EAAQ,EAAE;AAChB,GAKaI,IAAmB;AAAA;AAAA,EAE9B,eAAeJ,EAAQ,EAAE;AAAA;AAAA,EAEzB,SAASA,EAAQ,CAAC;AACpB,GAKaK,IAAiB;AAAA;AAAA,EAE5B,QAAQL,EAAQ,CAAC;AAAA;AAAA,EAEjB,QAAQA,EAAQ,CAAC;AAAA;AAAA,EAEjB,SAASA,EAAQ,CAAC;AAAA;AAAA,EAElB,MAAMA,EAAQ,CAAC;AACjB,GAKaM,IAAoB;AAAA;AAAA,EAE/B,cAAcN,EAAQ,CAAC;AACzB,GAKaO,IAAmB;AAAA;AAAA,EAE9B,UAAU;AAAA;AAAA,EAEV,UAAUP,EAAQ,CAAC;AAAA;AAAA,EAEnB,aAAa;AACf,GAKaQ,IAAgB;AAAA;AAAA,EAE3B,eAAeR,EAAQ,EAAE;AAC3B;"}

package/dist/design-system/primitives/opacity.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={transparent:0,5:.05,10:.1,15:.15,20:.2,25:.25,30:.3,40:.4,50:.5,60:.6,70:.7,75:.75,80:.8,90:.9,95:.95,opaque:1},t={disabled:e[50],placeholder:e[50],hoverOverlay:e[5],activeOverlay:e[10],backdrop:e[40],loading:e[70],muted:e[60],subtle:e[30]},a={pressed:.98,pressedStrong:.95,controlPressed:.92,hidden:.95,normal:1,hover:1.02,emphasized:1.05};exports.opacity=e;exports.scale=a;exports.stateOpacity=t;
+//# sourceMappingURL=opacity.cjs.map

package/dist/design-system/primitives/opacity.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"opacity.cjs","sources":["../../../src/design-system/primitives/opacity.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Opacity Primitives\r\n *\r\n * Standardized opacity values for consistent visual states.\r\n *\r\n * RULE: Components MUST use these values. Never hardcode opacity.\r\n */\r\n\r\n/**\r\n * Opacity scale for various visual states.\r\n */\r\nexport const opacity = {\r\n  /** 0 - Fully transparent */\r\n  transparent: 0,\r\n  /** 0.05 - Barely visible */\r\n  5: 0.05,\r\n  /** 0.1 - Subtle hint */\r\n  10: 0.1,\r\n  /** 0.15 - Light overlay */\r\n  15: 0.15,\r\n  /** 0.2 - Soft background */\r\n  20: 0.2,\r\n  /** 0.25 - Quarter visible */\r\n  25: 0.25,\r\n  /** 0.3 - Light emphasis */\r\n  30: 0.3,\r\n  /** 0.4 - Medium-light */\r\n  40: 0.4,\r\n  /** 0.5 - Half visible (disabled) */\r\n  50: 0.5,\r\n  /** 0.6 - Medium */\r\n  60: 0.6,\r\n  /** 0.7 - Medium-strong */\r\n  70: 0.7,\r\n  /** 0.75 - Three-quarter visible */\r\n  75: 0.75,\r\n  /** 0.8 - Strong */\r\n  80: 0.8,\r\n  /** 0.9 - Almost opaque */\r\n  90: 0.9,\r\n  /** 0.95 - Nearly opaque */\r\n  95: 0.95,\r\n  /** 1 - Fully opaque */\r\n  opaque: 1,\r\n} as const\r\n\r\n/**\r\n * Semantic opacity values for common states.\r\n */\r\nexport const stateOpacity = {\r\n  /** Disabled elements */\r\n  disabled: opacity[50],\r\n  /** Placeholder text */\r\n  placeholder: opacity[50],\r\n  /** Hover overlay */\r\n  hoverOverlay: opacity[5],\r\n  /** Active/pressed overlay */\r\n  activeOverlay: opacity[10],\r\n  /** Modal backdrop */\r\n  backdrop: opacity[40],\r\n  /** Loading state */\r\n  loading: opacity[70],\r\n  /** Secondary text */\r\n  muted: opacity[60],\r\n  /** Subtle decorative elements */\r\n  subtle: opacity[30],\r\n} as const\r\n\r\n/**\r\n * Scale transform values for interactive states.\r\n */\r\nexport const scale = {\r\n  /** Pressed state - subtle shrink */\r\n  pressed: 0.98,\r\n  /** Strong pressed - more noticeable */\r\n  pressedStrong: 0.95,\r\n  /** Checkbox pressed */\r\n  controlPressed: 0.92,\r\n  /** Hidden/initial state for animations */\r\n  hidden: 0.95,\r\n  /** Normal state */\r\n  normal: 1,\r\n  /** Slight grow on hover */\r\n  hover: 1.02,\r\n  /** Emphasized grow */\r\n  emphasized: 1.05,\r\n} as const\r\n\r\nexport type OpacityValue = keyof typeof opacity\r\nexport type StateOpacity = keyof typeof stateOpacity\r\nexport type ScaleValue = keyof typeof scale\r\n"],"names":["opacity","stateOpacity","scale"],"mappings":"gFAWO,MAAMA,EAAU,CAErB,YAAa,EAEb,EAAG,IAEH,GAAI,GAEJ,GAAI,IAEJ,GAAI,GAEJ,GAAI,IAEJ,GAAI,GAEJ,GAAI,GAEJ,GAAI,GAEJ,GAAI,GAEJ,GAAI,GAEJ,GAAI,IAEJ,GAAI,GAEJ,GAAI,GAEJ,GAAI,IAEJ,OAAQ,CACV,EAKaC,EAAe,CAE1B,SAAUD,EAAQ,EAAE,EAEpB,YAAaA,EAAQ,EAAE,EAEvB,aAAcA,EAAQ,CAAC,EAEvB,cAAeA,EAAQ,EAAE,EAEzB,SAAUA,EAAQ,EAAE,EAEpB,QAASA,EAAQ,EAAE,EAEnB,MAAOA,EAAQ,EAAE,EAEjB,OAAQA,EAAQ,EAAE,CACpB,EAKaE,EAAQ,CAEnB,QAAS,IAET,cAAe,IAEf,eAAgB,IAEhB,OAAQ,IAER,OAAQ,EAER,MAAO,KAEP,WAAY,IACd"}

package/dist/design-system/primitives/opacity.js

@@ -0,0 +1,72 @@
+const e = {
+  /** 0 - Fully transparent */
+  transparent: 0,
+  /** 0.05 - Barely visible */
+  5: 0.05,
+  /** 0.1 - Subtle hint */
+  10: 0.1,
+  /** 0.15 - Light overlay */
+  15: 0.15,
+  /** 0.2 - Soft background */
+  20: 0.2,
+  /** 0.25 - Quarter visible */
+  25: 0.25,
+  /** 0.3 - Light emphasis */
+  30: 0.3,
+  /** 0.4 - Medium-light */
+  40: 0.4,
+  /** 0.5 - Half visible (disabled) */
+  50: 0.5,
+  /** 0.6 - Medium */
+  60: 0.6,
+  /** 0.7 - Medium-strong */
+  70: 0.7,
+  /** 0.75 - Three-quarter visible */
+  75: 0.75,
+  /** 0.8 - Strong */
+  80: 0.8,
+  /** 0.9 - Almost opaque */
+  90: 0.9,
+  /** 0.95 - Nearly opaque */
+  95: 0.95,
+  /** 1 - Fully opaque */
+  opaque: 1
+}, a = {
+  /** Disabled elements */
+  disabled: e[50],
+  /** Placeholder text */
+  placeholder: e[50],
+  /** Hover overlay */
+  hoverOverlay: e[5],
+  /** Active/pressed overlay */
+  activeOverlay: e[10],
+  /** Modal backdrop */
+  backdrop: e[40],
+  /** Loading state */
+  loading: e[70],
+  /** Secondary text */
+  muted: e[60],
+  /** Subtle decorative elements */
+  subtle: e[30]
+}, o = {
+  /** Pressed state - subtle shrink */
+  pressed: 0.98,
+  /** Strong pressed - more noticeable */
+  pressedStrong: 0.95,
+  /** Checkbox pressed */
+  controlPressed: 0.92,
+  /** Hidden/initial state for animations */
+  hidden: 0.95,
+  /** Normal state */
+  normal: 1,
+  /** Slight grow on hover */
+  hover: 1.02,
+  /** Emphasized grow */
+  emphasized: 1.05
+};
+export {
+  e as opacity,
+  o as scale,
+  a as stateOpacity
+};
+//# sourceMappingURL=opacity.js.map

package/dist/design-system/primitives/opacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opacity.js","sources":["../../../src/design-system/primitives/opacity.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Opacity Primitives\r\n *\r\n * Standardized opacity values for consistent visual states.\r\n *\r\n * RULE: Components MUST use these values. Never hardcode opacity.\r\n */\r\n\r\n/**\r\n * Opacity scale for various visual states.\r\n */\r\nexport const opacity = {\r\n  /** 0 - Fully transparent */\r\n  transparent: 0,\r\n  /** 0.05 - Barely visible */\r\n  5: 0.05,\r\n  /** 0.1 - Subtle hint */\r\n  10: 0.1,\r\n  /** 0.15 - Light overlay */\r\n  15: 0.15,\r\n  /** 0.2 - Soft background */\r\n  20: 0.2,\r\n  /** 0.25 - Quarter visible */\r\n  25: 0.25,\r\n  /** 0.3 - Light emphasis */\r\n  30: 0.3,\r\n  /** 0.4 - Medium-light */\r\n  40: 0.4,\r\n  /** 0.5 - Half visible (disabled) */\r\n  50: 0.5,\r\n  /** 0.6 - Medium */\r\n  60: 0.6,\r\n  /** 0.7 - Medium-strong */\r\n  70: 0.7,\r\n  /** 0.75 - Three-quarter visible */\r\n  75: 0.75,\r\n  /** 0.8 - Strong */\r\n  80: 0.8,\r\n  /** 0.9 - Almost opaque */\r\n  90: 0.9,\r\n  /** 0.95 - Nearly opaque */\r\n  95: 0.95,\r\n  /** 1 - Fully opaque */\r\n  opaque: 1,\r\n} as const\r\n\r\n/**\r\n * Semantic opacity values for common states.\r\n */\r\nexport const stateOpacity = {\r\n  /** Disabled elements */\r\n  disabled: opacity[50],\r\n  /** Placeholder text */\r\n  placeholder: opacity[50],\r\n  /** Hover overlay */\r\n  hoverOverlay: opacity[5],\r\n  /** Active/pressed overlay */\r\n  activeOverlay: opacity[10],\r\n  /** Modal backdrop */\r\n  backdrop: opacity[40],\r\n  /** Loading state */\r\n  loading: opacity[70],\r\n  /** Secondary text */\r\n  muted: opacity[60],\r\n  /** Subtle decorative elements */\r\n  subtle: opacity[30],\r\n} as const\r\n\r\n/**\r\n * Scale transform values for interactive states.\r\n */\r\nexport const scale = {\r\n  /** Pressed state - subtle shrink */\r\n  pressed: 0.98,\r\n  /** Strong pressed - more noticeable */\r\n  pressedStrong: 0.95,\r\n  /** Checkbox pressed */\r\n  controlPressed: 0.92,\r\n  /** Hidden/initial state for animations */\r\n  hidden: 0.95,\r\n  /** Normal state */\r\n  normal: 1,\r\n  /** Slight grow on hover */\r\n  hover: 1.02,\r\n  /** Emphasized grow */\r\n  emphasized: 1.05,\r\n} as const\r\n\r\nexport type OpacityValue = keyof typeof opacity\r\nexport type StateOpacity = keyof typeof stateOpacity\r\nexport type ScaleValue = keyof typeof scale\r\n"],"names":["opacity","stateOpacity","scale"],"mappings":"AAWO,MAAMA,IAAU;AAAA;AAAA,EAErB,aAAa;AAAA;AAAA,EAEb,GAAG;AAAA;AAAA,EAEH,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,QAAQ;AACV,GAKaC,IAAe;AAAA;AAAA,EAE1B,UAAUD,EAAQ,EAAE;AAAA;AAAA,EAEpB,aAAaA,EAAQ,EAAE;AAAA;AAAA,EAEvB,cAAcA,EAAQ,CAAC;AAAA;AAAA,EAEvB,eAAeA,EAAQ,EAAE;AAAA;AAAA,EAEzB,UAAUA,EAAQ,EAAE;AAAA;AAAA,EAEpB,SAASA,EAAQ,EAAE;AAAA;AAAA,EAEnB,OAAOA,EAAQ,EAAE;AAAA;AAAA,EAEjB,QAAQA,EAAQ,EAAE;AACpB,GAKaE,IAAQ;AAAA;AAAA,EAEnB,SAAS;AAAA;AAAA,EAET,eAAe;AAAA;AAAA,EAEf,gBAAgB;AAAA;AAAA,EAEhB,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA;AAAA,EAER,OAAO;AAAA;AAAA,EAEP,YAAY;AACd;"}

package/dist/design-system/primitives/sizing.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../tokens/spacing.cjs"),i={xs:n.spacing[6],sm:n.spacing[8],md:n.spacing[10],lg:n.spacing[12],xl:n.spacing[14]},s={xs:n.spacing[3],sm:n.spacing[4],md:n.spacing[5],lg:n.spacing[6],xl:n.spacing[8]},c={xs:n.spacing[2],sm:n.spacing[3],md:n.spacing[4],lg:n.spacing[5],xl:n.spacing[6]},o={xs:n.spacing[1],sm:n.spacing[1.5],md:n.spacing[2],lg:n.spacing[2.5],xl:n.spacing[3]},g={xs:n.spacing[1],sm:n.spacing[1.5],md:n.spacing[2],lg:n.spacing[2.5],xl:n.spacing[3]},p={sm:400,md:500,lg:640,xl:800,full:"calc(100vw - 48px)"},t={tooltipMaxWidth:300,popoverMaxWidth:400,arrowSize:n.spacing[2],offset:n.spacing[2]},a={sm:{box:16,icon:10},md:{box:18,icon:12},lg:{box:22,icon:14}},e={sm:{width:36,height:20,thumb:16},md:{width:44,height:24,thumb:20},lg:{width:52,height:28,thumb:24}};exports.componentGap=g;exports.componentHeights=i;exports.componentPaddingX=c;exports.componentPaddingY=o;exports.controlSizes=a;exports.iconSizes=s;exports.modalWidths=p;exports.popoverSizing=t;exports.switchSizes=e;
+//# sourceMappingURL=sizing.cjs.map

package/dist/design-system/primitives/sizing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.cjs","sources":["../../../src/design-system/primitives/sizing.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Component Sizing Primitives\r\n *\r\n * Standardized sizing scales for consistent component dimensions.\r\n * All values are derived from the spacing token system (4px grid).\r\n *\r\n * RULE: Components MUST use these scales. Never hardcode dimensions.\r\n */\r\n\r\nimport { spacing } from '../tokens/spacing'\r\n\r\n/**\r\n * Standard component heights for interactive elements.\r\n * Based on touch-target guidelines (minimum 44px for accessibility).\r\n */\r\nexport const componentHeights = {\r\n  /** 24px - Micro elements (tags, small badges) */\r\n  xs: spacing[6],\r\n  /** 32px - Small inputs, compact buttons */\r\n  sm: spacing[8],\r\n  /** 40px - Default size for most interactive elements */\r\n  md: spacing[10],\r\n  /** 48px - Large inputs, prominent buttons */\r\n  lg: spacing[12],\r\n  /** 56px - Extra large, hero CTAs */\r\n  xl: spacing[14],\r\n} as const\r\n\r\n/**\r\n * Icon sizes that align with component heights.\r\n */\r\nexport const iconSizes = {\r\n  /** 12px */\r\n  xs: spacing[3],\r\n  /** 16px */\r\n  sm: spacing[4],\r\n  /** 20px */\r\n  md: spacing[5],\r\n  /** 24px */\r\n  lg: spacing[6],\r\n  /** 32px */\r\n  xl: spacing[8],\r\n} as const\r\n\r\n/**\r\n * Standard padding for interactive components (horizontal).\r\n * Follows a progressive scale for visual balance.\r\n */\r\nexport const componentPaddingX = {\r\n  /** 8px */\r\n  xs: spacing[2],\r\n  /** 12px */\r\n  sm: spacing[3],\r\n  /** 16px */\r\n  md: spacing[4],\r\n  /** 20px */\r\n  lg: spacing[5],\r\n  /** 24px */\r\n  xl: spacing[6],\r\n} as const\r\n\r\n/**\r\n * Standard padding for interactive components (vertical).\r\n */\r\nexport const componentPaddingY = {\r\n  /** 4px */\r\n  xs: spacing[1],\r\n  /** 6px */\r\n  sm: spacing[1.5],\r\n  /** 8px */\r\n  md: spacing[2],\r\n  /** 10px */\r\n  lg: spacing[2.5],\r\n  /** 12px */\r\n  xl: spacing[3],\r\n} as const\r\n\r\n/**\r\n * Standard gap values for component internals.\r\n */\r\nexport const componentGap = {\r\n  /** 4px - Tight spacing between icons and text */\r\n  xs: spacing[1],\r\n  /** 6px */\r\n  sm: spacing[1.5],\r\n  /** 8px - Default internal spacing */\r\n  md: spacing[2],\r\n  /** 10px */\r\n  lg: spacing[2.5],\r\n  /** 12px - Spacious internal spacing */\r\n  xl: spacing[3],\r\n} as const\r\n\r\n/**\r\n * Modal/dialog width presets.\r\n */\r\nexport const modalWidths = {\r\n  /** 400px - Small dialogs, confirmations */\r\n  sm: 400,\r\n  /** 500px - Medium dialogs */\r\n  md: 500,\r\n  /** 640px - Large dialogs */\r\n  lg: 640,\r\n  /** 800px - Extra large dialogs */\r\n  xl: 800,\r\n  /** Full width minus margins */\r\n  full: 'calc(100vw - 48px)',\r\n} as const\r\n\r\n/**\r\n * Tooltip and popover constraints.\r\n */\r\nexport const popoverSizing = {\r\n  /** Default tooltip max width */\r\n  tooltipMaxWidth: 300,\r\n  /** Default popover max width */\r\n  popoverMaxWidth: 400,\r\n  /** Arrow size for tooltips */\r\n  arrowSize: spacing[2],\r\n  /** Gap between trigger and popover */\r\n  offset: spacing[2],\r\n} as const\r\n\r\n/**\r\n * Checkbox and radio sizes.\r\n */\r\nexport const controlSizes = {\r\n  sm: {\r\n    box: 16,\r\n    icon: 10,\r\n  },\r\n  md: {\r\n    box: 18,\r\n    icon: 12,\r\n  },\r\n  lg: {\r\n    box: 22,\r\n    icon: 14,\r\n  },\r\n} as const\r\n\r\n/**\r\n * Switch/toggle sizes.\r\n */\r\nexport const switchSizes = {\r\n  sm: {\r\n    width: 36,\r\n    height: 20,\r\n    thumb: 16,\r\n  },\r\n  md: {\r\n    width: 44,\r\n    height: 24,\r\n    thumb: 20,\r\n  },\r\n  lg: {\r\n    width: 52,\r\n    height: 28,\r\n    thumb: 24,\r\n  },\r\n} as const\r\n\r\nexport type ComponentSize = keyof typeof componentHeights\r\nexport type IconSize = keyof typeof iconSizes\r\nexport type ControlSize = keyof typeof controlSizes\r\nexport type SwitchSize = keyof typeof switchSizes\r\n"],"names":["componentHeights","spacing","iconSizes","componentPaddingX","componentPaddingY","componentGap","modalWidths","popoverSizing","controlSizes","switchSizes"],"mappings":"yHAeaA,EAAmB,CAE9B,GAAIC,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,EAAE,EAEd,GAAIA,EAAAA,QAAQ,EAAE,EAEd,GAAIA,EAAAA,QAAQ,EAAE,CAChB,EAKaC,EAAY,CAEvB,GAAID,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,CACf,EAMaE,EAAoB,CAE/B,GAAIF,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,CAAC,CACf,EAKaG,EAAoB,CAE/B,GAAIH,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,GAAG,EAEf,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,GAAG,EAEf,GAAIA,EAAAA,QAAQ,CAAC,CACf,EAKaI,EAAe,CAE1B,GAAIJ,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,GAAG,EAEf,GAAIA,EAAAA,QAAQ,CAAC,EAEb,GAAIA,EAAAA,QAAQ,GAAG,EAEf,GAAIA,EAAAA,QAAQ,CAAC,CACf,EAKaK,EAAc,CAEzB,GAAI,IAEJ,GAAI,IAEJ,GAAI,IAEJ,GAAI,IAEJ,KAAM,oBACR,EAKaC,EAAgB,CAE3B,gBAAiB,IAEjB,gBAAiB,IAEjB,UAAWN,EAAAA,QAAQ,CAAC,EAEpB,OAAQA,EAAAA,QAAQ,CAAC,CACnB,EAKaO,EAAe,CAC1B,GAAI,CACF,IAAK,GACL,KAAM,EAAA,EAER,GAAI,CACF,IAAK,GACL,KAAM,EAAA,EAER,GAAI,CACF,IAAK,GACL,KAAM,EAAA,CAEV,EAKaC,EAAc,CACzB,GAAI,CACF,MAAO,GACP,OAAQ,GACR,MAAO,EAAA,EAET,GAAI,CACF,MAAO,GACP,OAAQ,GACR,MAAO,EAAA,EAET,GAAI,CACF,MAAO,GACP,OAAQ,GACR,MAAO,EAAA,CAEX"}

package/dist/design-system/primitives/sizing.js

@@ -0,0 +1,118 @@
+import { spacing as o } from "../tokens/spacing.js";
+const s = {
+  /** 24px - Micro elements (tags, small badges) */
+  xs: o[6],
+  /** 32px - Small inputs, compact buttons */
+  sm: o[8],
+  /** 40px - Default size for most interactive elements */
+  md: o[10],
+  /** 48px - Large inputs, prominent buttons */
+  lg: o[12],
+  /** 56px - Extra large, hero CTAs */
+  xl: o[14]
+}, i = {
+  /** 12px */
+  xs: o[3],
+  /** 16px */
+  sm: o[4],
+  /** 20px */
+  md: o[5],
+  /** 24px */
+  lg: o[6],
+  /** 32px */
+  xl: o[8]
+}, m = {
+  /** 8px */
+  xs: o[2],
+  /** 12px */
+  sm: o[3],
+  /** 16px */
+  md: o[4],
+  /** 20px */
+  lg: o[5],
+  /** 24px */
+  xl: o[6]
+}, n = {
+  /** 4px */
+  xs: o[1],
+  /** 6px */
+  sm: o[1.5],
+  /** 8px */
+  md: o[2],
+  /** 10px */
+  lg: o[2.5],
+  /** 12px */
+  xl: o[3]
+}, c = {
+  /** 4px - Tight spacing between icons and text */
+  xs: o[1],
+  /** 6px */
+  sm: o[1.5],
+  /** 8px - Default internal spacing */
+  md: o[2],
+  /** 10px */
+  lg: o[2.5],
+  /** 12px - Spacious internal spacing */
+  xl: o[3]
+}, l = {
+  /** 400px - Small dialogs, confirmations */
+  sm: 400,
+  /** 500px - Medium dialogs */
+  md: 500,
+  /** 640px - Large dialogs */
+  lg: 640,
+  /** 800px - Extra large dialogs */
+  xl: 800,
+  /** Full width minus margins */
+  full: "calc(100vw - 48px)"
+}, d = {
+  /** Default tooltip max width */
+  tooltipMaxWidth: 300,
+  /** Default popover max width */
+  popoverMaxWidth: 400,
+  /** Arrow size for tooltips */
+  arrowSize: o[2],
+  /** Gap between trigger and popover */
+  offset: o[2]
+}, x = {
+  sm: {
+    box: 16,
+    icon: 10
+  },
+  md: {
+    box: 18,
+    icon: 12
+  },
+  lg: {
+    box: 22,
+    icon: 14
+  }
+}, h = {
+  sm: {
+    width: 36,
+    height: 20,
+    thumb: 16
+  },
+  md: {
+    width: 44,
+    height: 24,
+    thumb: 20
+  },
+  lg: {
+    width: 52,
+    height: 28,
+    thumb: 24
+  }
+};
+export {
+  c as componentGap,
+  s as componentHeights,
+  m as componentPaddingX,
+  n as componentPaddingY,
+  x as controlSizes,
+  i as iconSizes,
+  l as modalWidths,
+  d as popoverSizing,
+  h as switchSizes
+};
+//# sourceMappingURL=sizing.js.map

package/dist/design-system/primitives/sizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.js","sources":["../../../src/design-system/primitives/sizing.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Component Sizing Primitives\r\n *\r\n * Standardized sizing scales for consistent component dimensions.\r\n * All values are derived from the spacing token system (4px grid).\r\n *\r\n * RULE: Components MUST use these scales. Never hardcode dimensions.\r\n */\r\n\r\nimport { spacing } from '../tokens/spacing'\r\n\r\n/**\r\n * Standard component heights for interactive elements.\r\n * Based on touch-target guidelines (minimum 44px for accessibility).\r\n */\r\nexport const componentHeights = {\r\n  /** 24px - Micro elements (tags, small badges) */\r\n  xs: spacing[6],\r\n  /** 32px - Small inputs, compact buttons */\r\n  sm: spacing[8],\r\n  /** 40px - Default size for most interactive elements */\r\n  md: spacing[10],\r\n  /** 48px - Large inputs, prominent buttons */\r\n  lg: spacing[12],\r\n  /** 56px - Extra large, hero CTAs */\r\n  xl: spacing[14],\r\n} as const\r\n\r\n/**\r\n * Icon sizes that align with component heights.\r\n */\r\nexport const iconSizes = {\r\n  /** 12px */\r\n  xs: spacing[3],\r\n  /** 16px */\r\n  sm: spacing[4],\r\n  /** 20px */\r\n  md: spacing[5],\r\n  /** 24px */\r\n  lg: spacing[6],\r\n  /** 32px */\r\n  xl: spacing[8],\r\n} as const\r\n\r\n/**\r\n * Standard padding for interactive components (horizontal).\r\n * Follows a progressive scale for visual balance.\r\n */\r\nexport const componentPaddingX = {\r\n  /** 8px */\r\n  xs: spacing[2],\r\n  /** 12px */\r\n  sm: spacing[3],\r\n  /** 16px */\r\n  md: spacing[4],\r\n  /** 20px */\r\n  lg: spacing[5],\r\n  /** 24px */\r\n  xl: spacing[6],\r\n} as const\r\n\r\n/**\r\n * Standard padding for interactive components (vertical).\r\n */\r\nexport const componentPaddingY = {\r\n  /** 4px */\r\n  xs: spacing[1],\r\n  /** 6px */\r\n  sm: spacing[1.5],\r\n  /** 8px */\r\n  md: spacing[2],\r\n  /** 10px */\r\n  lg: spacing[2.5],\r\n  /** 12px */\r\n  xl: spacing[3],\r\n} as const\r\n\r\n/**\r\n * Standard gap values for component internals.\r\n */\r\nexport const componentGap = {\r\n  /** 4px - Tight spacing between icons and text */\r\n  xs: spacing[1],\r\n  /** 6px */\r\n  sm: spacing[1.5],\r\n  /** 8px - Default internal spacing */\r\n  md: spacing[2],\r\n  /** 10px */\r\n  lg: spacing[2.5],\r\n  /** 12px - Spacious internal spacing */\r\n  xl: spacing[3],\r\n} as const\r\n\r\n/**\r\n * Modal/dialog width presets.\r\n */\r\nexport const modalWidths = {\r\n  /** 400px - Small dialogs, confirmations */\r\n  sm: 400,\r\n  /** 500px - Medium dialogs */\r\n  md: 500,\r\n  /** 640px - Large dialogs */\r\n  lg: 640,\r\n  /** 800px - Extra large dialogs */\r\n  xl: 800,\r\n  /** Full width minus margins */\r\n  full: 'calc(100vw - 48px)',\r\n} as const\r\n\r\n/**\r\n * Tooltip and popover constraints.\r\n */\r\nexport const popoverSizing = {\r\n  /** Default tooltip max width */\r\n  tooltipMaxWidth: 300,\r\n  /** Default popover max width */\r\n  popoverMaxWidth: 400,\r\n  /** Arrow size for tooltips */\r\n  arrowSize: spacing[2],\r\n  /** Gap between trigger and popover */\r\n  offset: spacing[2],\r\n} as const\r\n\r\n/**\r\n * Checkbox and radio sizes.\r\n */\r\nexport const controlSizes = {\r\n  sm: {\r\n    box: 16,\r\n    icon: 10,\r\n  },\r\n  md: {\r\n    box: 18,\r\n    icon: 12,\r\n  },\r\n  lg: {\r\n    box: 22,\r\n    icon: 14,\r\n  },\r\n} as const\r\n\r\n/**\r\n * Switch/toggle sizes.\r\n */\r\nexport const switchSizes = {\r\n  sm: {\r\n    width: 36,\r\n    height: 20,\r\n    thumb: 16,\r\n  },\r\n  md: {\r\n    width: 44,\r\n    height: 24,\r\n    thumb: 20,\r\n  },\r\n  lg: {\r\n    width: 52,\r\n    height: 28,\r\n    thumb: 24,\r\n  },\r\n} as const\r\n\r\nexport type ComponentSize = keyof typeof componentHeights\r\nexport type IconSize = keyof typeof iconSizes\r\nexport type ControlSize = keyof typeof controlSizes\r\nexport type SwitchSize = keyof typeof switchSizes\r\n"],"names":["componentHeights","spacing","iconSizes","componentPaddingX","componentPaddingY","componentGap","modalWidths","popoverSizing","controlSizes","switchSizes"],"mappings":";AAeO,MAAMA,IAAmB;AAAA;AAAA,EAE9B,IAAIC,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,EAAE;AAAA;AAAA,EAEd,IAAIA,EAAQ,EAAE;AAAA;AAAA,EAEd,IAAIA,EAAQ,EAAE;AAChB,GAKaC,IAAY;AAAA;AAAA,EAEvB,IAAID,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AACf,GAMaE,IAAoB;AAAA;AAAA,EAE/B,IAAIF,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,CAAC;AACf,GAKaG,IAAoB;AAAA;AAAA,EAE/B,IAAIH,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,GAAG;AAAA;AAAA,EAEf,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,GAAG;AAAA;AAAA,EAEf,IAAIA,EAAQ,CAAC;AACf,GAKaI,IAAe;AAAA;AAAA,EAE1B,IAAIJ,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,GAAG;AAAA;AAAA,EAEf,IAAIA,EAAQ,CAAC;AAAA;AAAA,EAEb,IAAIA,EAAQ,GAAG;AAAA;AAAA,EAEf,IAAIA,EAAQ,CAAC;AACf,GAKaK,IAAc;AAAA;AAAA,EAEzB,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,MAAM;AACR,GAKaC,IAAgB;AAAA;AAAA,EAE3B,iBAAiB;AAAA;AAAA,EAEjB,iBAAiB;AAAA;AAAA,EAEjB,WAAWN,EAAQ,CAAC;AAAA;AAAA,EAEpB,QAAQA,EAAQ,CAAC;AACnB,GAKaO,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,KAAK;AAAA,IACL,MAAM;AAAA,EAAA;AAAA,EAER,IAAI;AAAA,IACF,KAAK;AAAA,IACL,MAAM;AAAA,EAAA;AAAA,EAER,IAAI;AAAA,IACF,KAAK;AAAA,IACL,MAAM;AAAA,EAAA;AAEV,GAKaC,IAAc;AAAA,EACzB,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;"}