@common-origin/design-system 2.18.0 → 2.20.0

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs

@@ -0,0 +1,161 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module, { keyframes } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Icon } from '../Icon/Icon.mjs';
+import { reducedMotion, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+// Destructure tokens for cleaner access
+var statusColors = tokens.component.status;
+var _a = tokens.semantic,
+  space = _a.space,
+  radius = _a.radius;
+var _b = tokens.semantic.motion,
+  transition = _b.transition,
+  duration = _b.duration,
+  easing = _b.easing;
+var labelHeight = tokens.semantic.size.label;
+var label = tokens.component.badge.label;
+var scaleIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+var getStatusConfig = function getStatusConfig(status) {
+  var configs = {
+    pending: {
+      color: statusColors.pending.text,
+      bgColor: statusColors.pending.background,
+      icon: 'refresh',
+      // Fallback until 'clock' icon is added
+      label: 'Pending'
+    },
+    completed: {
+      color: statusColors.completed.text,
+      bgColor: statusColors.completed.background,
+      icon: 'check',
+      label: 'Completed'
+    },
+    failed: {
+      color: statusColors.failed.text,
+      bgColor: statusColors.failed.background,
+      icon: 'close',
+      label: 'Failed'
+    },
+    cancelled: {
+      color: statusColors.cancelled.text,
+      bgColor: statusColors.cancelled.background,
+      icon: 'cancel',
+      label: 'Cancelled'
+    },
+    processing: {
+      color: statusColors.processing.text,
+      bgColor: statusColors.processing.background,
+      icon: 'refresh',
+      label: 'Processing'
+    },
+    scheduled: {
+      color: statusColors.scheduled.text,
+      bgColor: statusColors.scheduled.background,
+      icon: 'bell',
+      // Fallback until 'calendar' icon is added
+      label: 'Scheduled'
+    }
+  };
+  return configs[status];
+};
+// Size configuration
+var sizeConfig = {
+  small: {
+    height: labelHeight.small,
+    padding: "".concat(space[100], " ").concat(space[200]),
+    font: label.typography.small,
+    gap: space[100],
+    iconSize: 'xs'
+  },
+  medium: {
+    height: labelHeight.medium,
+    padding: "".concat(space[100], " ").concat(space[200]),
+    font: label.typography.medium,
+    gap: space[100],
+    iconSize: 'sm'
+  }
+};
+var StyledStatusLabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "StatusLabelBase__StyledStatusLabel",
+  componentId: "sc-1ye9xz5-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius.full, scaleIn, duration.moderate, easing.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
+  var $size = _a.$size;
+  var size = sizeConfig[$size];
+  return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      font-weight: ").concat(label.fontWeight, ";\n      gap: ").concat(size.gap, ";\n    ");
+}, function (_a) {
+  var $status = _a.$status;
+  var config = getStatusConfig($status);
+  return "\n      background-color: ".concat(config.bgColor, ";\n      color: ").concat(config.color, ";\n    ");
+});
+var ScreenReaderOnly = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StatusLabelBase__ScreenReaderOnly",
+  componentId: "sc-1ye9xz5-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+])), visuallyHidden);
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+var VisibleContent = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StatusLabelBase__VisibleContent",
+  componentId: "sc-1ye9xz5-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
+/**
+ * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
+ * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
+ * (decision 0018).
+ */])));
+/**
+ * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
+ * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
+ * (decision 0018).
+ */
+var StatusLabelBase = function StatusLabelBase(_a) {
+  var status = _a.status,
+    label = _a.label,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    _c = _a.showIcon,
+    showIcon = _c === void 0 ? true : _c,
+    _d = _a.liveRegion,
+    liveRegion = _d === void 0 ? true : _d,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"];
+  var statusConfig = getStatusConfig(status);
+  var sizeStyles = sizeConfig[size];
+  var displayLabel = label || statusConfig.label;
+  // A blank aria-label is no label at all, so it falls back like a missing one
+  var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
+  return jsxs(StyledStatusLabel, {
+    "$status": status,
+    "$size": size,
+    role: "status",
+    "aria-label": accessibleLabel || "Status: ".concat(displayLabel),
+    "aria-live": liveRegion ? 'polite' : 'off',
+    "aria-atomic": liveRegion ? 'true' : undefined,
+    "data-testid": dataTestId,
+    children: [jsxs(VisibleContent, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [showIcon && jsx(Icon, {
+        name: statusConfig.icon,
+        size: sizeStyles.iconSize,
+        iconColor: "inherit"
+      }), displayLabel, jsxs(ScreenReaderOnly, {
+        children: [status, " status"]
+      })]
+    }), accessibleLabel && jsx(ScreenReaderOnly, {
+      children: accessibleLabel
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { StatusLabelBase };
+//# sourceMappingURL=StatusLabelBase.mjs.map

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusLabelBase.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/StatusLabel/index.d.mts

@@ -0,0 +1,2 @@
+export { StatusLabel } from './StatusLabel.mjs';
+export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabel.mjs';

package/dist/components/atoms/Tag/Tag.d.mts

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface TagProps {
+    /**
+     * Text content to display in the tag
+     */
+    children: React.ReactNode;
+    /**
+     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
+     * tag stand out. `success`, `warning` and `error` are deprecated (status belongs to
+     * `StatusLabel`), and so is `interactive` (a blue fill on a static label is decoration).
+     * They keep working until they are removed in 3.0 (decision 0029).
+     * @default 'default'
+     */
+    variant?: 'default' | 'interactive' | 'success' | 'warning' | 'error' | 'emphasis';
+    /**
+     * Whether to show a border
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Size: small (20px) for dense layouts, or medium (24px). Decision 0018 size scale.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */
+export declare const Tag: React.FC<TagProps>;

package/dist/components/atoms/Tag/Tag.mjs

@@ -0,0 +1,115 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color,
+  size = semantic.size;
+var label = tokens.component.badge.label;
+var space = semantic.space;
+var radius = semantic.radius;
+var StyledTag = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Tag__StyledTag",
+  componentId: "sc-lzfmti-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n\n  /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  font-weight: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */])), radius.sm, function (_a) {
+  var $size = _a.$size;
+  return size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? "0 ".concat(space[200]) : "".concat(space[100], " ").concat(space[200]);
+}, label.typography.small, label.fontWeight, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'interactive':
+      return color.fill['accent-muted'];
+    case 'success':
+      return color.fill['success-muted'];
+    case 'warning':
+      return color.fill['warning-muted'];
+    case 'error':
+      return color.fill['danger-muted'];
+    case 'emphasis':
+      return color.fill.emphasis;
+    default:
+      return color.fill.muted;
+  }
+}, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'interactive':
+      return color.text.accent;
+    case 'success':
+      return color.text.success;
+    case 'warning':
+      return color.text.warning;
+    case 'error':
+      return color.text.danger;
+    case 'emphasis':
+      return color.text.inverse;
+    default:
+      return color.text["default"];
+  }
+}, function (_a) {
+  var $variant = _a.$variant,
+    $border = _a.$border;
+  if (!$border) return 'none';
+  switch ($variant) {
+    case 'interactive':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.accent);
+    case 'success':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.success);
+    case 'warning':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.warning);
+    case 'error':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.danger);
+    case 'emphasis':
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.fill.emphasis);
+    default:
+      return "".concat(semantic.border.width.thin, " solid ").concat(color.border["default"]);
+  }
+});
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */
+var Tag = function Tag(_a) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.border,
+    border = _c === void 0 ? true : _c,
+    _d = _a.size,
+    tagSize = _d === void 0 ? 'medium' : _d,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["children", "variant", "border", "size", 'data-testid']);
+  return jsx(StyledTag, __assign({
+    "$variant": variant,
+    "$border": border,
+    "$size": tagSize,
+    "data-testid": dataTestId,
+    "data-variant": variant,
+    "data-border": border,
+    role: "status",
+    "aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
+  }, props, {
+    children: children
+  }));
+};
+var templateObject_1;
+
+export { Tag };
+//# sourceMappingURL=Tag.mjs.map

package/dist/components/atoms/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Tag/index.d.mts

@@ -0,0 +1,2 @@
+export { Tag } from './Tag.mjs';
+export type { TagProps } from './Tag.mjs';

package/dist/components/atoms/Typography/Typography.d.mts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type TypographyVariant = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | 'body' | 'small' | 'overline' | 'caption' | 'button1' | 'button2' | 'button3' | 'label';
+export type TypographyColor = "default" | "emphasis" | "subdued" | "inverse" | "disabled" | "interactive" | "error" | "success" | "warning";
+export interface TypographyProps {
+    /** Typography variant defining the semantic meaning and style */
+    variant?: TypographyVariant;
+    /** Color variant for the text */
+    color?: TypographyColor;
+    /** Content to render */
+    children: React.ReactNode;
+    /** HTML element to render as (overrides default semantic element) */
+    as?: React.ElementType;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+export declare const Typography: React.FC<TypographyProps>;

package/dist/components/atoms/Typography/Typography.mjs

@@ -0,0 +1,139 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var _a = tokens.semantic,
+  typography = _a.typography,
+  color = _a.color,
+  letterSpacing = _a.letterSpacing;
+var getTypographyStyles = function getTypographyStyles(variant) {
+  var styles = {
+    display: "font: ".concat(typography.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h1: "font: ".concat(typography.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
+    h2: "font: ".concat(typography.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h3: "font: ".concat(typography.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h4: "font: ".concat(typography.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
+    h5: "font: ".concat(typography.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    h6: "font: ".concat(typography.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
+    subtitle: "font: ".concat(typography.subtitle, ";"),
+    body: "font: ".concat(typography.body, ";"),
+    small: "font: ".concat(typography.small, ";"),
+    overline: "font: ".concat(typography.overline, ";"),
+    caption: "font: ".concat(typography.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
+    button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, ";"),
+    label: "font: ".concat(typography.label, ";")
+  };
+  return styles[variant] || styles.body;
+};
+var getTextColor = function getTextColor(colorVariant) {
+  var colorMap = {
+    "default": color.text["default"],
+    emphasis: color.text.emphasis,
+    subdued: color.text.muted,
+    inverse: color.text.inverse,
+    disabled: color.text.disabled,
+    interactive: color.text.accent,
+    error: color.text.danger,
+    success: color.text.success,
+    warning: color.text.warning
+  };
+  return colorMap[colorVariant] || colorMap["default"];
+};
+var getDefaultElement = function getDefaultElement(variant) {
+  var elementMap = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'p',
+    body: 'p',
+    small: 'span',
+    overline: 'span',
+    caption: 'span',
+    button1: 'span',
+    button2: 'span',
+    button3: 'span',
+    label: 'span'
+  };
+  return elementMap[variant] || 'span';
+};
+var StyledTypography = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-17mqo4k-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n"
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */])), function (_a) {
+  var $variant = _a.$variant;
+  return getTypographyStyles($variant);
+}, function (_a) {
+  var $color = _a.$color;
+  return getTextColor($color);
+});
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+var Typography = function Typography(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    children = _a.children,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    as = _a.as,
+    dataTestId = _a["data-testid"];
+  // $variant and $color are only used for styled-components prop filtering
+  var defaultElement = getDefaultElement(variant);
+  var elementType = as || defaultElement;
+  return jsx(StyledTypography, {
+    as: elementType,
+    "$variant": variant,
+    "$color": color,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var templateObject_1;
+
+export { Typography };
+//# sourceMappingURL=Typography.mjs.map

package/dist/components/atoms/Typography/Typography.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Typography/index.d.mts

@@ -0,0 +1 @@
+export * from './Typography.mjs';

package/dist/components/atoms/index.d.mts

@@ -0,0 +1,20 @@
+export * from './Avatar/index.mjs';
+export * from './Badge/index.mjs';
+export * from './Box/index.mjs';
+export * from './Button/index.mjs';
+export * from './CategoryBadge/index.mjs';
+export * from './CategoryLabel/index.mjs';
+export * from './Chip/index.mjs';
+export * from './Container/index.mjs';
+export * from './Picture/index.mjs';
+export * from './DateFormatter/index.mjs';
+export * from './Icon/index.mjs';
+export * from './IconButton/index.mjs';
+export * from './MoneyDisplay/index.mjs';
+export * from './ProgressBar/index.mjs';
+export * from './Divider/index.mjs';
+export * from './Stack/index.mjs';
+export * from './StatusBadge/index.mjs';
+export * from './StatusLabel/index.mjs';
+export * from './Tag/index.mjs';
+export * from './Typography/index.mjs';

package/dist/components/index.d.mts

@@ -0,0 +1,4 @@
+export * from './atoms//index.mjs';
+export * from './molecules//index.mjs';
+export * from './layout//index.mjs';
+export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem/index.mjs';

package/dist/components/layout/GridSystem/GridSystem.d.mts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { Tokens } from '../../../types/tokens.mjs';
+interface GridProps {
+    cols?: number;
+    gap?: keyof Tokens['base']['spacing'];
+    gapX?: keyof Tokens['base']['spacing'];
+    gapY?: keyof Tokens['base']['spacing'];
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const Grid: React.FC<GridProps>;
+interface GridColProps {
+    span?: number;
+    spanSm?: number;
+    spanMd?: number;
+    spanLg?: number;
+    spanXl?: number;
+    order?: number;
+    orderSm?: number;
+    orderMd?: number;
+    orderLg?: number;
+    orderXl?: number;
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const GridCol: React.FC<GridColProps>;
+interface ResponsiveGridProps {
+    cols: number;
+    colsSm?: number;
+    colsMd?: number;
+    colsLg?: number;
+    colsXl?: number;
+    gap?: keyof Tokens['base']['spacing'];
+    gapSm?: keyof Tokens['base']['spacing'];
+    gapMd?: keyof Tokens['base']['spacing'];
+    gapLg?: keyof Tokens['base']['spacing'];
+    gapXl?: keyof Tokens['base']['spacing'];
+    gapX?: keyof Tokens['base']['spacing'];
+    gapXSm?: keyof Tokens['base']['spacing'];
+    gapXMd?: keyof Tokens['base']['spacing'];
+    gapXLg?: keyof Tokens['base']['spacing'];
+    gapXXl?: keyof Tokens['base']['spacing'];
+    gapY?: keyof Tokens['base']['spacing'];
+    gapYSm?: keyof Tokens['base']['spacing'];
+    gapYMd?: keyof Tokens['base']['spacing'];
+    gapYLg?: keyof Tokens['base']['spacing'];
+    gapYXl?: keyof Tokens['base']['spacing'];
+    className?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
+export {};