@salesmind-ai/design-system 0.5.0 → 0.7.0

package/dist/chunk-MDB2WCRQ.cjs

@@ -1,137 +0,0 @@
-'use strict';
-
-var react = require('react');
-var clsx = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-// src/tokens/spacing.ts
-var SPACING = {
-  1: "var(--space-1)",
-  2: "var(--space-2)",
-  3: "var(--space-3)",
-  4: "var(--space-4)",
-  5: "var(--space-5)",
-  6: "var(--space-6)",
-  8: "var(--space-8)",
-  10: "var(--space-10)",
-  12: "var(--space-12)",
-  16: "var(--space-16)",
-  20: "var(--space-20)"
-};
-
-// src/components/LayoutPrimitives/utils.ts
-var SPACING_ALIASES = {
-  xs: "var(--space-2)",
-  sm: "var(--space-3)",
-  md: "var(--space-4)",
-  lg: "var(--space-6)",
-  xl: "var(--space-8)",
-  "2xl": "var(--space-12)"
-};
-function resolveSpacing(value) {
-  if (value === void 0) return void 0;
-  if (typeof value === "number" && SPACING[value]) {
-    return SPACING[value];
-  }
-  if (typeof value === "string" && value in SPACING_ALIASES) {
-    return SPACING_ALIASES[value];
-  }
-  return String(value);
-}
-function extractSpacingStyles(props) {
-  const styles = {};
-  if (props.m !== void 0) styles.margin = resolveSpacing(props.m);
-  if (props.mt !== void 0) styles.marginTop = resolveSpacing(props.mt);
-  if (props.mb !== void 0) styles.marginBottom = resolveSpacing(props.mb);
-  if (props.ml !== void 0) styles.marginLeft = resolveSpacing(props.ml);
-  if (props.mr !== void 0) styles.marginRight = resolveSpacing(props.mr);
-  if (props.mx !== void 0) {
-    styles.marginLeft = resolveSpacing(props.mx);
-    styles.marginRight = resolveSpacing(props.mx);
-  }
-  if (props.my !== void 0) {
-    styles.marginTop = resolveSpacing(props.my);
-    styles.marginBottom = resolveSpacing(props.my);
-  }
-  if (props.p !== void 0) styles.padding = resolveSpacing(props.p);
-  if (props.pt !== void 0) styles.paddingTop = resolveSpacing(props.pt);
-  if (props.pb !== void 0) styles.paddingBottom = resolveSpacing(props.pb);
-  if (props.pl !== void 0) styles.paddingLeft = resolveSpacing(props.pl);
-  if (props.pr !== void 0) styles.paddingRight = resolveSpacing(props.pr);
-  if (props.px !== void 0) {
-    styles.paddingLeft = resolveSpacing(props.px);
-    styles.paddingRight = resolveSpacing(props.px);
-  }
-  if (props.py !== void 0) {
-    styles.paddingTop = resolveSpacing(props.py);
-    styles.paddingBottom = resolveSpacing(props.py);
-  }
-  if (props.gap !== void 0) styles.gap = resolveSpacing(props.gap);
-  return styles;
-}
-var Box = react.forwardRef(
-  ({ as: Component = "div", className, style, children, ...props }, ref) => {
-    const spacingStyles = extractSpacingStyles(props);
-    const { m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, gap, ...domProps } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: clsx__default.default("ds-box", className),
-        style: { ...spacingStyles, ...style },
-        ...domProps,
-        children
-      }
-    );
-  }
-);
-Box.displayName = "Box";
-var CONTAINER_SIZE_MAP = {
-  sm: "768px",
-  // 48rem — max-w-3xl
-  md: "1024px",
-  // 64rem — max-w-5xl
-  lg: "1152px",
-  // 72rem — max-w-6xl
-  xl: "1280px",
-  // 80rem — max-w-7xl
-  full: "100%"
-};
-var Container = react.forwardRef(
-  ({ size, fluid, maxWidth, className, style, ...props }, ref) => {
-    let resolvedMaxWidth;
-    if (fluid) {
-      resolvedMaxWidth = "100%";
-    } else if (size) {
-      resolvedMaxWidth = CONTAINER_SIZE_MAP[size];
-    } else {
-      resolvedMaxWidth = maxWidth || "var(--container-default-max, 1200px)";
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Box,
-      {
-        ref,
-        className: clsx__default.default("ds-container", className),
-        style: {
-          maxWidth: resolvedMaxWidth,
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Container.displayName = "Container";
-
-exports.Box = Box;
-exports.CONTAINER_SIZE_MAP = CONTAINER_SIZE_MAP;
-exports.Container = Container;
-exports.SPACING = SPACING;
-exports.extractSpacingStyles = extractSpacingStyles;
-exports.resolveSpacing = resolveSpacing;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-MDB2WCRQ.cjs.map

package/dist/chunk-MDB2WCRQ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/spacing.ts","../src/components/LayoutPrimitives/utils.ts","../src/components/LayoutPrimitives/Box.tsx","../src/components/LayoutPrimitives/Container.tsx"],"names":["forwardRef","clsx","jsx"],"mappings":"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","sourcesContent":["export const SPACING = {\n  1: 'var(--space-1)',\n  2: 'var(--space-2)',\n  3: 'var(--space-3)',\n  4: 'var(--space-4)',\n  5: 'var(--space-5)',\n  6: 'var(--space-6)',\n  8: 'var(--space-8)',\n  10: 'var(--space-10)',\n  12: 'var(--space-12)',\n  16: 'var(--space-16)',\n  20: 'var(--space-20)',\n} as const;\n\nexport type SpacingToken = keyof typeof SPACING;\n","import { CSSProperties } from 'react';\nimport { SPACING } from '../../tokens/spacing';\n\ntype SpacingValue = keyof typeof SPACING | number | string;\n\n/**\n * Named spacing aliases that map semantic sizes to DS space tokens.\n * Allows consumers to pass gap=\"lg\" instead of gap={6}.\n */\nconst SPACING_ALIASES: Record<string, string> = {\n  xs:  'var(--space-2)',\n  sm:  'var(--space-3)',\n  md:  'var(--space-4)',\n  lg:  'var(--space-6)',\n  xl:  'var(--space-8)',\n  '2xl': 'var(--space-12)',\n};\n\nexport function resolveSpacing(value: SpacingValue | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  if (typeof value === 'number' && SPACING[value as keyof typeof SPACING]) {\n    return SPACING[value as keyof typeof SPACING];\n  }\n  if (typeof value === 'string' && value in SPACING_ALIASES) {\n    return SPACING_ALIASES[value];\n  }\n  return String(value);\n}\n\nexport interface SpacingProps {\n  m?: SpacingValue;\n  mt?: SpacingValue;\n  mb?: SpacingValue;\n  ml?: SpacingValue;\n  mr?: SpacingValue;\n  mx?: SpacingValue;\n  my?: SpacingValue;\n  p?: SpacingValue;\n  pt?: SpacingValue;\n  pb?: SpacingValue;\n  pl?: SpacingValue;\n  pr?: SpacingValue;\n  px?: SpacingValue;\n  py?: SpacingValue;\n  gap?: SpacingValue;\n}\n\nexport function extractSpacingStyles(props: SpacingProps): CSSProperties {\n  const styles: CSSProperties = {};\n\n  if (props.m !== undefined) styles.margin = resolveSpacing(props.m);\n  if (props.mt !== undefined) styles.marginTop = resolveSpacing(props.mt);\n  if (props.mb !== undefined) styles.marginBottom = resolveSpacing(props.mb);\n  if (props.ml !== undefined) styles.marginLeft = resolveSpacing(props.ml);\n  if (props.mr !== undefined) styles.marginRight = resolveSpacing(props.mr);\n  if (props.mx !== undefined) {\n    styles.marginLeft = resolveSpacing(props.mx);\n    styles.marginRight = resolveSpacing(props.mx);\n  }\n  if (props.my !== undefined) {\n    styles.marginTop = resolveSpacing(props.my);\n    styles.marginBottom = resolveSpacing(props.my);\n  }\n\n  if (props.p !== undefined) styles.padding = resolveSpacing(props.p);\n  if (props.pt !== undefined) styles.paddingTop = resolveSpacing(props.pt);\n  if (props.pb !== undefined) styles.paddingBottom = resolveSpacing(props.pb);\n  if (props.pl !== undefined) styles.paddingLeft = resolveSpacing(props.pl);\n  if (props.pr !== undefined) styles.paddingRight = resolveSpacing(props.pr);\n  if (props.px !== undefined) {\n    styles.paddingLeft = resolveSpacing(props.px);\n    styles.paddingRight = resolveSpacing(props.px);\n  }\n  if (props.py !== undefined) {\n    styles.paddingTop = resolveSpacing(props.py);\n    styles.paddingBottom = resolveSpacing(props.py);\n  }\n\n  if (props.gap !== undefined) styles.gap = resolveSpacing(props.gap);\n\n  return styles;\n}\n","import { ElementType, HTMLAttributes, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SpacingProps, extractSpacingStyles } from './utils';\nimport './LayoutPrimitives.css';\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement>, SpacingProps {\n  as?: ElementType;\n}\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n  ({ as: Component = 'div', className, style, children, ...props }, ref) => {\n    const spacingStyles = extractSpacingStyles(props);\n\n    // Filter out spacing props from passing to DOM\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, gap, ...domProps } = props;\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx('ds-box', className)}\n        style={{ ...spacingStyles, ...style }}\n        {...domProps}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nBox.displayName = 'Box';\n","import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { Box, BoxProps } from './Box';\n\nexport type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Maps named sizes to max-width values.\n * Aligns with common web breakpoints (Tailwind `max-w-*` scale).\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const CONTAINER_SIZE_MAP: Record<ContainerSize, string> = {\n  sm: '768px',   // 48rem — max-w-3xl\n  md: '1024px',  // 64rem — max-w-5xl\n  lg: '1152px',  // 72rem — max-w-6xl\n  xl: '1280px',  // 80rem — max-w-7xl\n  full: '100%',\n};\n\nexport interface ContainerProps extends BoxProps {\n  /**\n   * Named size preset. Overrides `maxWidth` when set.\n   * @example <Container size=\"lg\">…</Container>\n   */\n  size?: ContainerSize;\n  /** Pass `true` to stretch to 100% width (same as `size=\"full\"`). */\n  fluid?: boolean;\n  /** Custom max-width value. Ignored when `size` or `fluid` is set. */\n  maxWidth?: number | string;\n}\n\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n  ({ size, fluid, maxWidth, className, style, ...props }, ref) => {\n    let resolvedMaxWidth: string | number;\n    if (fluid) {\n      resolvedMaxWidth = '100%';\n    } else if (size) {\n      resolvedMaxWidth = CONTAINER_SIZE_MAP[size];\n    } else {\n      resolvedMaxWidth = maxWidth || 'var(--container-default-max, 1200px)';\n    }\n\n    return (\n      <Box\n        ref={ref}\n        className={clsx('ds-container', className)}\n        style={{\n          maxWidth: resolvedMaxWidth,\n          ...style,\n        }}\n        {...props}\n      />\n    );\n  },\n);\n\nContainer.displayName = 'Container';\n"]}

package/dist/chunk-MQRB634A.cjs

@@ -1,34 +0,0 @@
-'use strict';
-
-var chunkMDB2WCRQ_cjs = require('./chunk-MDB2WCRQ.cjs');
-var react = require('react');
-var clsx = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-var Stack = react.forwardRef(
-  ({ direction = "column", align, justify, wrap, className, style, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkMDB2WCRQ_cjs.Box,
-      {
-        ref,
-        className: clsx__default.default("ds-stack", direction === "row" && "ds-stack--horizontal", className),
-        style: {
-          alignItems: align,
-          justifyContent: justify === "between" ? "space-between" : justify,
-          flexWrap: wrap ? "wrap" : void 0,
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Stack.displayName = "Stack";
-
-exports.Stack = Stack;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-MQRB634A.cjs.map

package/dist/chunk-MQRB634A.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/LayoutPrimitives/Stack.tsx"],"names":[],"mappings":";;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AAaX;AAHC,IAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,YAAY,UAAU,OAAO,SAAS,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,YAAY,cAAc,SAAS,wBAAwB,SAAS;AAAA,QACpF,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,gBAAgB,YAAY,YAAY,kBAAkB;AAAA,UAC1D,UAAU,OAAO,SAAS;AAAA,UAC1B,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc","sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { Box, BoxProps } from './Box';\n\nexport interface StackProps extends BoxProps {\n  direction?: 'row' | 'column';\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  wrap?: boolean;\n}\n\nexport const Stack = forwardRef<HTMLElement, StackProps>(\n  ({ direction = 'column', align, justify, wrap, className, style, ...props }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        className={clsx('ds-stack', direction === 'row' && 'ds-stack--horizontal', className)}\n        style={{\n          alignItems: align,\n          justifyContent: justify === 'between' ? 'space-between' : justify,\n          flexWrap: wrap ? 'wrap' : undefined,\n          ...style,\n        }}\n        {...props}\n      />\n    );\n  },\n);\n\nStack.displayName = 'Stack';\n"]}

package/dist/chunk-NN3TUHIH.js

@@ -1,28 +0,0 @@
-import { Box } from './chunk-HN4PHABT.js';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { jsx } from 'react/jsx-runtime';
-
-var Stack = forwardRef(
-  ({ direction = "column", align, justify, wrap, className, style, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        className: clsx("ds-stack", direction === "row" && "ds-stack--horizontal", className),
-        style: {
-          alignItems: align,
-          justifyContent: justify === "between" ? "space-between" : justify,
-          flexWrap: wrap ? "wrap" : void 0,
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Stack.displayName = "Stack";
-
-export { Stack };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-NN3TUHIH.js.map

package/dist/chunk-NN3TUHIH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/LayoutPrimitives/Stack.tsx"],"names":[],"mappings":";;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AAaX;AAHC,IAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,YAAY,UAAU,OAAO,SAAS,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,YAAY,cAAc,SAAS,wBAAwB,SAAS;AAAA,QACpF,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,gBAAgB,YAAY,YAAY,kBAAkB;AAAA,UAC1D,UAAU,OAAO,SAAS;AAAA,UAC1B,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc","sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { Box, BoxProps } from './Box';\n\nexport interface StackProps extends BoxProps {\n  direction?: 'row' | 'column';\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  wrap?: boolean;\n}\n\nexport const Stack = forwardRef<HTMLElement, StackProps>(\n  ({ direction = 'column', align, justify, wrap, className, style, ...props }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        className={clsx('ds-stack', direction === 'row' && 'ds-stack--horizontal', className)}\n        style={{\n          alignItems: align,\n          justifyContent: justify === 'between' ? 'space-between' : justify,\n          flexWrap: wrap ? 'wrap' : undefined,\n          ...style,\n        }}\n        {...props}\n      />\n    );\n  },\n);\n\nStack.displayName = 'Stack';\n"]}