@jiwambe/components 0.2.0

package/dist/types/spacing.d.ts

@@ -0,0 +1,105 @@
+/**
+ * All valid fixed spacing token keys in the Jiwambe design system.
+ * Each key corresponds to a --space-* CSS custom property injected by
+ * jiwambe-plugin. Example: 'space-4' → var(--space-4) → 1rem.
+ *
+ * Use these as values for any spacing prop (p, px, mt, gap etc.) on
+ * Box, Stack, Grid, Container, and List.
+ */
+export type FixedSpacingToken = 'space-0' | 'space-0-25' | 'space-1' | 'space-2' | 'space-3' | 'space-4' | 'space-5' | 'space-6' | 'space-8' | 'space-9' | 'space-12' | 'space-16' | 'space-18' | 'space-24' | 'space-30' | 'space-36' | 'space-48' | 'space-72';
+/**
+ * All valid fluid spacing token keys in the Jiwambe design system.
+ * Each key corresponds to a --space-fluid-* CSS custom property injected
+ * by jiwambe-plugin. Fluid tokens use clamp() to scale smoothly between
+ * a minimum and maximum value across viewport widths.
+ *
+ * Example: 'fluid-4-9' → var(--space-fluid-4-9)
+ *          → clamp(1rem, 0.6032rem + 1.9841vw, 2.25rem)
+ *
+ * Prefer fluid tokens for horizontal padding on page-level containers
+ * and section wrappers where breathing room should scale with the viewport.
+ */
+export type FluidSpacingToken = 'fluid-1-2' | 'fluid-2-4' | 'fluid-4-5' | 'fluid-4-6' | 'fluid-4-8' | 'fluid-4-9' | 'fluid-5-6' | 'fluid-6-9' | 'fluid-8-16' | 'fluid-16-18' | 'fluid-30-36' | 'fluid-48-72';
+/**
+ * Union of all valid spacing token keys — both fixed and fluid.
+ * This is the accepted type for all spacing props across layout components.
+ *
+ * @see FixedSpacingToken
+ * @see FluidSpacingToken
+ */
+export type SpacingToken = FixedSpacingToken | FluidSpacingToken;
+/**
+ * SpacingToken plus 'auto'. 'auto' is valid only for margin props (m, mx, my,
+ * mt, mb, ml, mr) — not for padding or gap. Use mx="auto" on a Box with a
+ * defined width to centre it horizontally.
+ */
+export type MarginToken = SpacingToken | 'auto';
+/**
+ * Box-model spacing props accepted by Box, Container, Stack, and Grid.
+ * All values must be Jiwambe design token strings — not raw CSS values,
+ * not numbers, not Tailwind class names.
+ *
+ * Token strings map to CSS custom properties injected by jiwambe-plugin:
+ *   p="space-4"     → padding: var(--space-4)       → 1rem
+ *   px="fluid-4-9"  → padding-inline: var(--space-fluid-4-9) → clamp(...)
+ *
+ * More specific props override shorthand: pt overrides py which overrides p
+ * for the top side; px overrides p for horizontal axis. Prefer explicit props
+ * over shorthands where possible.
+ *
+ * @example
+ * <Box p="space-4" />
+ * @example
+ * <Box px="fluid-4-9" py="space-6" />
+ * @example
+ * <Box mt="space-8" mx="auto" />
+ */
+export interface SpacingProps {
+    /** Padding on all four sides. @default undefined */
+    p?: SpacingToken;
+    /** Horizontal padding (left and right). Overrides p for horizontal axis. @default undefined */
+    px?: SpacingToken;
+    /** Vertical padding (top and bottom). Overrides p for vertical axis. @default undefined */
+    py?: SpacingToken;
+    /** Padding top only. Overrides p and py for the top side. @default undefined */
+    pt?: SpacingToken;
+    /** Padding bottom only. Overrides p and py for the bottom side. @default undefined */
+    pb?: SpacingToken;
+    /** Padding left only. Overrides p and px for the left side. @default undefined */
+    pl?: SpacingToken;
+    /** Padding right only. Overrides p and px for the right side. @default undefined */
+    pr?: SpacingToken;
+    /** Margin on all four sides. @default undefined */
+    m?: MarginToken;
+    /** Horizontal margin (left and right). Overrides m for horizontal axis. Use "auto" to centre. @default undefined */
+    mx?: MarginToken;
+    /** Vertical margin (top and bottom). Overrides m for vertical axis. @default undefined */
+    my?: MarginToken;
+    /** Margin top only. Overrides m and my for the top side. @default undefined */
+    mt?: SpacingToken;
+    /** Margin bottom only. Overrides m and my for the bottom side. @default undefined */
+    mb?: SpacingToken;
+    /** Margin left only. Overrides m and mx for the left side. @default undefined */
+    ml?: MarginToken;
+    /** Margin right only. Overrides m and mx for the right side. @default undefined */
+    mr?: MarginToken;
+}
+/**
+ * Gap props for Grid and Stack only. Controls spacing between direct children
+ * using CSS gap — not padding and not margin on children. All values must be
+ * Jiwambe spacing token strings. Do not use for list or container padding.
+ *
+ * @example
+ * <Grid gap="space-4" />
+ * @example
+ * <Grid rowGap="space-6" columnGap="space-4" />
+ */
+export interface GapProps {
+    /** Spacing between all grid/flex children (row and column). @default undefined */
+    gap?: SpacingToken;
+    /** Spacing between rows only. Overrides gap for row axis. @default undefined */
+    rowGap?: SpacingToken;
+    /** Spacing between columns only. Overrides gap for column axis. @default undefined */
+    columnGap?: SpacingToken;
+}
+//# sourceMappingURL=spacing.d.ts.map

package/dist/types/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/types/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,CAAC;AAEf;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAEjE;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,YAAY;IAC3B,oDAAoD;IACpD,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,+FAA+F;IAC/F,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,2FAA2F;IAC3F,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,gFAAgF;IAChF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,sFAAsF;IACtF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,kFAAkF;IAClF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,oFAAoF;IACpF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,mDAAmD;IACnD,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,oHAAoH;IACpH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,0FAA0F;IAC1F,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,qFAAqF;IACrF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,iFAAiF;IACjF,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,mFAAmF;IACnF,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAQ;IACvB,kFAAkF;IAClF,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,gFAAgF;IAChF,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sFAAsF;IACtF,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B"}

package/dist/utils/layoutClasses.d.ts

@@ -0,0 +1,44 @@
+import { DisplayValue, AlignItemsValue, JustifyContentValue, FlexDirectionValue, FlexWrapValue, AlignSelfValue, LayoutProps, StackLayoutProps } from '../types/layout';
+export declare const displayMap: Record<DisplayValue, string>;
+export declare const alignItemsMap: Record<AlignItemsValue, string>;
+export declare const justifyContentMap: Record<JustifyContentValue, string>;
+export declare const flexDirectionMap: Record<FlexDirectionValue, string>;
+export declare const flexWrapMap: Record<FlexWrapValue, string>;
+export declare const alignSelfMap: Record<AlignSelfValue, string>;
+export declare const flexGrowMap: Record<0 | 1, string>;
+export declare const flexShrinkMap: Record<0 | 1, string>;
+/**
+ * Converts a LayoutProps object into a space-separated string of Tailwind
+ * utility classes for display and alignment properties. Each prop value (a
+ * CSS value string) is looked up in a static class map and resolved to the
+ * corresponding Tailwind utility class. Returns an empty string if no layout
+ * props are provided.
+ *
+ * @param props - An object containing any LayoutProps keys.
+ * @returns A space-separated Tailwind class string or empty string.
+ *
+ * @example
+ * resolveLayout({ display: 'inline-flex', alignItems: 'center' })
+ * // → 'inline-flex items-center'
+ *
+ * @example
+ * resolveLayout({ flexGrow: 1, alignSelf: 'flex-end' })
+ * // → 'grow self-end'
+ */
+export declare function resolveLayout(props: LayoutProps): string;
+/**
+ * Converts a StackLayoutProps object into a space-separated Tailwind class string.
+ * Handles only the alignItems and justifyContent subset used by Stack (CSS-value
+ * aliases for align/justify). Same pattern as resolveLayout but for the Stack
+ * alignment subset only.
+ *
+ * @param props - An object containing StackLayoutProps keys (alignItems, justifyContent).
+ * @returns A space-separated Tailwind class string or empty string.
+ *
+ * @example
+ * resolveStackLayout({ alignItems: 'center', justifyContent: 'space-between' })
+ * // → 'items-center justify-between'
+ */
+export declare function resolveStackLayout(props: StackLayoutProps): string;
+export declare const LAYOUT_PROP_KEYS: Set<string>;
+//# sourceMappingURL=layoutClasses.d.ts.map

package/dist/utils/layoutClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutClasses.d.ts","sourceRoot":"","sources":["../../src/utils/layoutClasses.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,WAAW,EACX,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAUnD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAMzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAOjE,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK/D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAIrD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAOvD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAG7C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAG/C,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAaxD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAOlE;AAED,eAAO,MAAM,gBAAgB,aAS3B,CAAC"}

package/dist/utils/layoutClasses.js

@@ -0,0 +1,88 @@
+const displayMap = {
+  block: "block",
+  "inline-block": "inline-block",
+  inline: "inline",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid",
+  "inline-grid": "inline-grid",
+  none: "hidden",
+  contents: "contents"
+};
+const alignItemsMap = {
+  "flex-start": "items-start",
+  "flex-end": "items-end",
+  center: "items-center",
+  baseline: "items-baseline",
+  stretch: "items-stretch"
+};
+const justifyContentMap = {
+  "flex-start": "justify-start",
+  "flex-end": "justify-end",
+  center: "justify-center",
+  "space-between": "justify-between",
+  "space-around": "justify-around",
+  "space-evenly": "justify-evenly"
+};
+const flexDirectionMap = {
+  row: "flex-row",
+  "row-reverse": "flex-row-reverse",
+  column: "flex-col",
+  "column-reverse": "flex-col-reverse"
+};
+const flexWrapMap = {
+  nowrap: "flex-nowrap",
+  wrap: "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse"
+};
+const alignSelfMap = {
+  auto: "self-auto",
+  "flex-start": "self-start",
+  "flex-end": "self-end",
+  center: "self-center",
+  baseline: "self-baseline",
+  stretch: "self-stretch"
+};
+const flexGrowMap = {
+  0: "grow-0",
+  1: "grow"
+};
+const flexShrinkMap = {
+  0: "shrink-0",
+  1: "shrink"
+};
+function resolveLayout(props) {
+  const classes = [];
+  if (props.display !== void 0) classes.push(displayMap[props.display]);
+  if (props.alignItems !== void 0) classes.push(alignItemsMap[props.alignItems]);
+  if (props.justifyContent !== void 0) classes.push(justifyContentMap[props.justifyContent]);
+  if (props.flexDirection !== void 0) classes.push(flexDirectionMap[props.flexDirection]);
+  if (props.flexWrap !== void 0) classes.push(flexWrapMap[props.flexWrap]);
+  if (props.alignSelf !== void 0) classes.push(alignSelfMap[props.alignSelf]);
+  if (props.flexGrow !== void 0) classes.push(flexGrowMap[props.flexGrow]);
+  if (props.flexShrink !== void 0) classes.push(flexShrinkMap[props.flexShrink]);
+  return classes.filter(Boolean).join(" ");
+}
+const LAYOUT_PROP_KEYS = /* @__PURE__ */ new Set([
+  "display",
+  "alignItems",
+  "justifyContent",
+  "flexDirection",
+  "flexWrap",
+  "alignSelf",
+  "flexGrow",
+  "flexShrink"
+]);
+export {
+  LAYOUT_PROP_KEYS,
+  alignItemsMap,
+  alignSelfMap,
+  displayMap,
+  flexDirectionMap,
+  flexGrowMap,
+  flexShrinkMap,
+  flexWrapMap,
+  justifyContentMap,
+  resolveLayout
+};
+//# sourceMappingURL=layoutClasses.js.map

package/dist/utils/layoutClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutClasses.js","sources":["../../src/utils/layoutClasses.ts"],"sourcesContent":["/**\n * Static Tailwind class maps for layout/alignment props.\n * No template literals — every class is a complete string literal for Tailwind's content scanner.\n */\nimport type {\n  DisplayValue,\n  AlignItemsValue,\n  JustifyContentValue,\n  FlexDirectionValue,\n  FlexWrapValue,\n  AlignSelfValue,\n  LayoutProps,\n  StackLayoutProps,\n} from '../types/layout';\n\nexport const displayMap: Record<DisplayValue, string> = {\n  block: 'block',\n  'inline-block': 'inline-block',\n  inline: 'inline',\n  flex: 'flex',\n  'inline-flex': 'inline-flex',\n  grid: 'grid',\n  'inline-grid': 'inline-grid',\n  none: 'hidden',\n  contents: 'contents',\n};\n\nexport const alignItemsMap: Record<AlignItemsValue, string> = {\n  'flex-start': 'items-start',\n  'flex-end': 'items-end',\n  center: 'items-center',\n  baseline: 'items-baseline',\n  stretch: 'items-stretch',\n};\n\nexport const justifyContentMap: Record<JustifyContentValue, string> = {\n  'flex-start': 'justify-start',\n  'flex-end': 'justify-end',\n  center: 'justify-center',\n  'space-between': 'justify-between',\n  'space-around': 'justify-around',\n  'space-evenly': 'justify-evenly',\n};\n\nexport const flexDirectionMap: Record<FlexDirectionValue, string> = {\n  row: 'flex-row',\n  'row-reverse': 'flex-row-reverse',\n  column: 'flex-col',\n  'column-reverse': 'flex-col-reverse',\n};\n\nexport const flexWrapMap: Record<FlexWrapValue, string> = {\n  nowrap: 'flex-nowrap',\n  wrap: 'flex-wrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n};\n\nexport const alignSelfMap: Record<AlignSelfValue, string> = {\n  auto: 'self-auto',\n  'flex-start': 'self-start',\n  'flex-end': 'self-end',\n  center: 'self-center',\n  baseline: 'self-baseline',\n  stretch: 'self-stretch',\n};\n\nexport const flexGrowMap: Record<0 | 1, string> = {\n  0: 'grow-0',\n  1: 'grow',\n};\n\nexport const flexShrinkMap: Record<0 | 1, string> = {\n  0: 'shrink-0',\n  1: 'shrink',\n};\n\n/**\n * Converts a LayoutProps object into a space-separated string of Tailwind\n * utility classes for display and alignment properties. Each prop value (a\n * CSS value string) is looked up in a static class map and resolved to the\n * corresponding Tailwind utility class. Returns an empty string if no layout\n * props are provided.\n *\n * @param props - An object containing any LayoutProps keys.\n * @returns A space-separated Tailwind class string or empty string.\n *\n * @example\n * resolveLayout({ display: 'inline-flex', alignItems: 'center' })\n * // → 'inline-flex items-center'\n *\n * @example\n * resolveLayout({ flexGrow: 1, alignSelf: 'flex-end' })\n * // → 'grow self-end'\n */\nexport function resolveLayout(props: LayoutProps): string {\n  const classes: string[] = [];\n\n  if (props.display !== undefined) classes.push(displayMap[props.display]);\n  if (props.alignItems !== undefined) classes.push(alignItemsMap[props.alignItems]);\n  if (props.justifyContent !== undefined) classes.push(justifyContentMap[props.justifyContent]);\n  if (props.flexDirection !== undefined) classes.push(flexDirectionMap[props.flexDirection]);\n  if (props.flexWrap !== undefined) classes.push(flexWrapMap[props.flexWrap]);\n  if (props.alignSelf !== undefined) classes.push(alignSelfMap[props.alignSelf]);\n  if (props.flexGrow !== undefined) classes.push(flexGrowMap[props.flexGrow]);\n  if (props.flexShrink !== undefined) classes.push(flexShrinkMap[props.flexShrink]);\n\n  return classes.filter(Boolean).join(' ');\n}\n\n/**\n * Converts a StackLayoutProps object into a space-separated Tailwind class string.\n * Handles only the alignItems and justifyContent subset used by Stack (CSS-value\n * aliases for align/justify). Same pattern as resolveLayout but for the Stack\n * alignment subset only.\n *\n * @param props - An object containing StackLayoutProps keys (alignItems, justifyContent).\n * @returns A space-separated Tailwind class string or empty string.\n *\n * @example\n * resolveStackLayout({ alignItems: 'center', justifyContent: 'space-between' })\n * // → 'items-center justify-between'\n */\nexport function resolveStackLayout(props: StackLayoutProps): string {\n  const classes: string[] = [];\n\n  if (props.alignItems !== undefined) classes.push(alignItemsMap[props.alignItems]);\n  if (props.justifyContent !== undefined) classes.push(justifyContentMap[props.justifyContent]);\n\n  return classes.filter(Boolean).join(' ');\n}\n\nexport const LAYOUT_PROP_KEYS = new Set<string>([\n  'display',\n  'alignItems',\n  'justifyContent',\n  'flexDirection',\n  'flexWrap',\n  'alignSelf',\n  'flexGrow',\n  'flexShrink',\n]);\n"],"names":[],"mappings":"AAeO,MAAM,aAA2C;AAAA,EACtD,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,eAAe;AAAA,EACf,MAAM;AAAA,EACN,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AACZ;AAEO,MAAM,gBAAiD;AAAA,EAC5D,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,oBAAyD;AAAA,EACpE,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;AAEO,MAAM,mBAAuD;AAAA,EAClE,KAAK;AAAA,EACL,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,kBAAkB;AACpB;AAEO,MAAM,cAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AAClB;AAEO,MAAM,eAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,cAAqC;AAAA,EAChD,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,gBAAuC;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AACL;AAoBO,SAAS,cAAc,OAA4B;AACxD,QAAM,UAAoB,CAAA;AAE1B,MAAI,MAAM,YAAY,OAAW,SAAQ,KAAK,WAAW,MAAM,OAAO,CAAC;AACvE,MAAI,MAAM,eAAe,OAAW,SAAQ,KAAK,cAAc,MAAM,UAAU,CAAC;AAChF,MAAI,MAAM,mBAAmB,OAAW,SAAQ,KAAK,kBAAkB,MAAM,cAAc,CAAC;AAC5F,MAAI,MAAM,kBAAkB,OAAW,SAAQ,KAAK,iBAAiB,MAAM,aAAa,CAAC;AACzF,MAAI,MAAM,aAAa,OAAW,SAAQ,KAAK,YAAY,MAAM,QAAQ,CAAC;AAC1E,MAAI,MAAM,cAAc,OAAW,SAAQ,KAAK,aAAa,MAAM,SAAS,CAAC;AAC7E,MAAI,MAAM,aAAa,OAAW,SAAQ,KAAK,YAAY,MAAM,QAAQ,CAAC;AAC1E,MAAI,MAAM,eAAe,OAAW,SAAQ,KAAK,cAAc,MAAM,UAAU,CAAC;AAEhF,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAwBO,MAAM,uCAAuB,IAAY;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;"}

package/dist/utils/responsive-props.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+declare const BREAKPOINTS: {
+    readonly sm: "600px";
+    readonly md: "800px";
+    readonly lg: "940px";
+    readonly xl: "1440px";
+};
+export type Breakpoint = keyof typeof BREAKPOINTS;
+export { BREAKPOINTS };
+export type ResponsiveValue<T> = T | Partial<Record<'base' | Breakpoint, T>>;
+export declare function isResponsiveObject<T>(val: ResponsiveValue<T>): val is Partial<Record<'base' | Breakpoint, T>>;
+export declare function resolveToken(value: string | undefined): string | undefined;
+export interface SpacingProps {
+    p?: ResponsiveValue<string>;
+    px?: ResponsiveValue<string>;
+    py?: ResponsiveValue<string>;
+    pt?: ResponsiveValue<string>;
+    pb?: ResponsiveValue<string>;
+    pl?: ResponsiveValue<string>;
+    pr?: ResponsiveValue<string>;
+    m?: ResponsiveValue<string>;
+    mx?: ResponsiveValue<string>;
+    my?: ResponsiveValue<string>;
+    mt?: ResponsiveValue<string>;
+    mb?: ResponsiveValue<string>;
+    ml?: ResponsiveValue<string>;
+    mr?: ResponsiveValue<string>;
+}
+export interface DimensionProps {
+    width?: ResponsiveValue<string>;
+    height?: ResponsiveValue<string>;
+    minWidth?: ResponsiveValue<string>;
+    minHeight?: ResponsiveValue<string>;
+    maxWidth?: ResponsiveValue<string>;
+    maxHeight?: ResponsiveValue<string>;
+}
+export interface LayoutProps {
+    display?: ResponsiveValue<'block' | 'flex' | 'grid' | 'inline' | 'inline-flex' | 'inline-block' | 'none'>;
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    flex?: string;
+}
+export type SystemProps = SpacingProps & DimensionProps & LayoutProps;
+export declare const SYSTEM_PROP_KEYS: Set<string>;
+export declare function generateScopeId(cssContent: string, prefix?: string): string;
+export declare function buildMediaCSS(mediaRules: Record<string, Record<string, string>>): string;
+export interface ResolvedStyles {
+    baseStyle: React.CSSProperties;
+    mediaCSS: string;
+    needsId: boolean;
+}
+export declare function resolveSystemProps(props: SystemProps, existingStyle?: React.CSSProperties): ResolvedStyles;
+export interface SystemPropsRenderResult {
+    style: React.CSSProperties;
+    styleTag: React.ReactNode;
+    dataId?: string;
+}
+export declare function renderSystemProps(systemProps: SystemProps, existingStyle?: React.CSSProperties): SystemPropsRenderResult;
+export declare function stripSystemProps<T extends Record<string, unknown>>(props: T): Omit<T, keyof SystemProps>;
+export declare function renderScopedStyle(mediaCSS: string, scopeId: string): React.ReactNode;
+//# sourceMappingURL=responsive-props.d.ts.map

package/dist/utils/responsive-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-props.d.ts","sourceRoot":"","sources":["../../src/utils/responsive-props.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,WAAW;;;;;CAKP,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,CAAC;AAMvB,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAE7E,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC,CAE7G;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAG1E;AAwCD,MAAM,WAAW,YAAY;IAC3B,CAAC,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,EAAE,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,eAAe,CACvB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,MAAM,CAC/E,CAAC;IACF,QAAQ,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,WAAW,CAAC;AAEtE,eAAO,MAAM,gBAAgB,aAM3B,CAAC;AAeH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,SAAQ,GAAG,MAAM,CAE1E;AA+BD,wBAAgB,aAAa,CAC3B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GACjD,MAAM,CAWR;AAMD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,WAAW,EAClB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,GAClC,cAAc,CAoEhB;AAOD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,WAAW,EACxB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,GAClC,uBAAuB,CAmBzB;AAMD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,KAAK,EAAE,CAAC,GACP,IAAI,CAAC,CAAC,EAAE,MAAM,WAAW,CAAC,CAM5B;AAMD,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,GACd,KAAK,CAAC,SAAS,CAKjB"}

package/dist/utils/responsive-props.js

@@ -0,0 +1,184 @@
+import { jsx } from "react/jsx-runtime";
+const BREAKPOINTS = {
+  sm: "600px",
+  md: "800px",
+  lg: "940px",
+  xl: "1440px"
+};
+function isResponsiveObject(val) {
+  return typeof val === "object" && val !== null && !Array.isArray(val);
+}
+function resolveToken(value) {
+  if (value === void 0) return void 0;
+  return value.startsWith("space-") ? `var(--${value})` : value;
+}
+const SPACING_MAP = {
+  p: "padding",
+  px: ["paddingLeft", "paddingRight"],
+  py: ["paddingTop", "paddingBottom"],
+  pt: "paddingTop",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  pr: "paddingRight",
+  m: "margin",
+  mx: ["marginLeft", "marginRight"],
+  my: ["marginTop", "marginBottom"],
+  mt: "marginTop",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mr: "marginRight"
+};
+const DIMENSION_MAP = {
+  width: "width",
+  height: "height",
+  minWidth: "minWidth",
+  minHeight: "minHeight",
+  maxWidth: "maxWidth",
+  maxHeight: "maxHeight"
+};
+const ALL_MAPPINGS = { ...SPACING_MAP, ...DIMENSION_MAP };
+const SYSTEM_PROP_KEYS = /* @__PURE__ */ new Set([
+  ...Object.keys(SPACING_MAP),
+  ...Object.keys(DIMENSION_MAP),
+  "display",
+  "position",
+  "flex"
+]);
+function hashString(str) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+function generateScopeId(cssContent, prefix = "jds") {
+  return `${prefix}${hashString(cssContent)}`;
+}
+function assignCss(target, cssProp, value) {
+  const resolved = resolveToken(value) ?? value;
+  if (Array.isArray(cssProp)) {
+    for (const p of cssProp) {
+      target[p] = resolved;
+    }
+  } else {
+    target[cssProp] = resolved;
+  }
+}
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+const ORDERED_BREAKPOINTS = ["sm", "md", "lg", "xl"];
+function buildMediaCSS(mediaRules) {
+  let css = "";
+  for (const bp of ORDERED_BREAKPOINTS) {
+    const rules = mediaRules[bp];
+    if (!rules) continue;
+    const declarations = Object.entries(rules).map(([prop, val]) => `${prop}:${val} !important`).join(";");
+    css += `@media(min-width:${BREAKPOINTS[bp]}){__SEL__{${declarations}}}`;
+  }
+  return css;
+}
+function resolveSystemProps(props, existingStyle) {
+  const base = {};
+  const mediaRules = {};
+  let needsId = false;
+  for (const [propName, mapping] of Object.entries(ALL_MAPPINGS)) {
+    const value = props[propName];
+    if (value === void 0) continue;
+    if (isResponsiveObject(value)) {
+      needsId = true;
+      for (const [bp, val] of Object.entries(value)) {
+        if (val === void 0) continue;
+        if (bp === "base") {
+          assignCss(base, mapping, val);
+        } else {
+          if (!mediaRules[bp]) mediaRules[bp] = {};
+          assignCss(mediaRules[bp], mapping, val);
+        }
+      }
+    } else {
+      assignCss(base, mapping, value);
+    }
+  }
+  if (props.display !== void 0) {
+    if (isResponsiveObject(props.display)) {
+      needsId = true;
+      for (const [bp, val] of Object.entries(props.display)) {
+        if (val === void 0) continue;
+        if (bp === "base") {
+          base.display = val;
+        } else {
+          if (!mediaRules[bp]) mediaRules[bp] = {};
+          mediaRules[bp].display = val;
+        }
+      }
+    } else {
+      base.display = props.display;
+    }
+  }
+  if (props.position !== void 0) {
+    base.position = props.position;
+  }
+  if (props.flex !== void 0) {
+    base.flex = props.flex;
+  }
+  const mediaCSS = buildMediaCSS(
+    Object.fromEntries(
+      Object.entries(mediaRules).map(([bp, rules]) => [
+        bp,
+        Object.fromEntries(
+          Object.entries(rules).map(([prop, val]) => [camelToKebab(prop), val])
+        )
+      ])
+    )
+  );
+  const baseStyle = {
+    ...base,
+    ...existingStyle
+  };
+  return { baseStyle, mediaCSS, needsId };
+}
+function renderSystemProps(systemProps, existingStyle) {
+  const { baseStyle, mediaCSS, needsId } = resolveSystemProps(
+    systemProps,
+    existingStyle
+  );
+  if (!needsId || !mediaCSS) {
+    return { style: baseStyle, styleTag: null };
+  }
+  const scopeId = generateScopeId(mediaCSS);
+  const selector = `[data-jds="${scopeId}"]`;
+  const scoped = mediaCSS.replace(/__SEL__/g, selector);
+  return {
+    style: baseStyle,
+    styleTag: /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: scoped } }),
+    dataId: scopeId
+  };
+}
+function stripSystemProps(props) {
+  const result = { ...props };
+  for (const key of SYSTEM_PROP_KEYS) {
+    delete result[key];
+  }
+  return result;
+}
+function renderScopedStyle(mediaCSS, scopeId) {
+  if (!mediaCSS) return null;
+  const selector = `[data-jds="${scopeId}"]`;
+  const scoped = mediaCSS.replace(/__SEL__/g, selector);
+  return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: scoped } });
+}
+export {
+  BREAKPOINTS,
+  SYSTEM_PROP_KEYS,
+  buildMediaCSS,
+  generateScopeId,
+  isResponsiveObject,
+  renderScopedStyle,
+  renderSystemProps,
+  resolveSystemProps,
+  resolveToken,
+  stripSystemProps
+};
+//# sourceMappingURL=responsive-props.js.map

package/dist/utils/responsive-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.tsx"],"sourcesContent":["import React from 'react';\n\n// ---------------------------------------------------------------------------\n// Breakpoints — must match the plugin's `screens` config\n// ---------------------------------------------------------------------------\n\nconst BREAKPOINTS = {\n  sm: '600px',\n  md: '800px',\n  lg: '940px',\n  xl: '1440px',\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\nexport { BREAKPOINTS };\n\n// ---------------------------------------------------------------------------\n// Responsive value type\n// ---------------------------------------------------------------------------\n\nexport type ResponsiveValue<T> = T | Partial<Record<'base' | Breakpoint, T>>;\n\nexport function isResponsiveObject<T>(val: ResponsiveValue<T>): val is Partial<Record<'base' | Breakpoint, T>> {\n  return typeof val === 'object' && val !== null && !Array.isArray(val);\n}\n\n// ---------------------------------------------------------------------------\n// Token resolution\n// ---------------------------------------------------------------------------\n\nexport function resolveToken(value: string | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return value.startsWith('space-') ? `var(--${value})` : value;\n}\n\n// ---------------------------------------------------------------------------\n// System prop definitions — maps prop names to CSS properties\n// ---------------------------------------------------------------------------\n\ntype CSSPropMapping = Record<string, string | string[]>;\n\nconst SPACING_MAP: CSSPropMapping = {\n  p: 'padding',\n  px: ['paddingLeft', 'paddingRight'],\n  py: ['paddingTop', 'paddingBottom'],\n  pt: 'paddingTop',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  pr: 'paddingRight',\n  m: 'margin',\n  mx: ['marginLeft', 'marginRight'],\n  my: ['marginTop', 'marginBottom'],\n  mt: 'marginTop',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mr: 'marginRight',\n};\n\nconst DIMENSION_MAP: CSSPropMapping = {\n  width: 'width',\n  height: 'height',\n  minWidth: 'minWidth',\n  minHeight: 'minHeight',\n  maxWidth: 'maxWidth',\n  maxHeight: 'maxHeight',\n};\n\nconst ALL_MAPPINGS: CSSPropMapping = { ...SPACING_MAP, ...DIMENSION_MAP };\n\n// ---------------------------------------------------------------------------\n// Spacing prop types\n// ---------------------------------------------------------------------------\n\nexport interface SpacingProps {\n  p?: ResponsiveValue<string>;\n  px?: ResponsiveValue<string>;\n  py?: ResponsiveValue<string>;\n  pt?: ResponsiveValue<string>;\n  pb?: ResponsiveValue<string>;\n  pl?: ResponsiveValue<string>;\n  pr?: ResponsiveValue<string>;\n  m?: ResponsiveValue<string>;\n  mx?: ResponsiveValue<string>;\n  my?: ResponsiveValue<string>;\n  mt?: ResponsiveValue<string>;\n  mb?: ResponsiveValue<string>;\n  ml?: ResponsiveValue<string>;\n  mr?: ResponsiveValue<string>;\n}\n\nexport interface DimensionProps {\n  width?: ResponsiveValue<string>;\n  height?: ResponsiveValue<string>;\n  minWidth?: ResponsiveValue<string>;\n  minHeight?: ResponsiveValue<string>;\n  maxWidth?: ResponsiveValue<string>;\n  maxHeight?: ResponsiveValue<string>;\n}\n\nexport interface LayoutProps {\n  display?: ResponsiveValue<\n    'block' | 'flex' | 'grid' | 'inline' | 'inline-flex' | 'inline-block' | 'none'\n  >;\n  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';\n  flex?: string;\n}\n\nexport type SystemProps = SpacingProps & DimensionProps & LayoutProps;\n\nexport const SYSTEM_PROP_KEYS = new Set<string>([\n  ...Object.keys(SPACING_MAP),\n  ...Object.keys(DIMENSION_MAP),\n  'display',\n  'position',\n  'flex',\n]);\n\n// ---------------------------------------------------------------------------\n// Scoped ID generation — deterministic content-hash, SSR-safe\n// ---------------------------------------------------------------------------\n\nfunction hashString(str: string): string {\n  let h = 0x811c9dc5;\n  for (let i = 0; i < str.length; i++) {\n    h ^= str.charCodeAt(i);\n    h = Math.imul(h, 0x01000193);\n  }\n  return (h >>> 0).toString(36);\n}\n\nexport function generateScopeId(cssContent: string, prefix = 'jds'): string {\n  return `${prefix}${hashString(cssContent)}`;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction assignCss(\n  target: Record<string, string>,\n  cssProp: string | string[],\n  value: string,\n) {\n  const resolved = resolveToken(value) ?? value;\n  if (Array.isArray(cssProp)) {\n    for (const p of cssProp) {\n      target[p] = resolved;\n    }\n  } else {\n    target[cssProp] = resolved;\n  }\n}\n\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);\n}\n\n// ---------------------------------------------------------------------------\n// Ordered breakpoints for consistent media query output\n// ---------------------------------------------------------------------------\n\nconst ORDERED_BREAKPOINTS: Breakpoint[] = ['sm', 'md', 'lg', 'xl'];\n\nexport function buildMediaCSS(\n  mediaRules: Record<string, Record<string, string>>,\n): string {\n  let css = '';\n  for (const bp of ORDERED_BREAKPOINTS) {\n    const rules = mediaRules[bp];\n    if (!rules) continue;\n    const declarations = Object.entries(rules)\n      .map(([prop, val]) => `${prop}:${val} !important`)\n      .join(';');\n    css += `@media(min-width:${BREAKPOINTS[bp]}){__SEL__{${declarations}}}`;\n  }\n  return css;\n}\n\n// ---------------------------------------------------------------------------\n// Core: resolve system props into base styles + media-query CSS (pure function)\n// ---------------------------------------------------------------------------\n\nexport interface ResolvedStyles {\n  baseStyle: React.CSSProperties;\n  mediaCSS: string;\n  needsId: boolean;\n}\n\nexport function resolveSystemProps(\n  props: SystemProps,\n  existingStyle?: React.CSSProperties,\n): ResolvedStyles {\n  const base: Record<string, string> = {};\n  const mediaRules: Record<string, Record<string, string>> = {};\n  let needsId = false;\n\n  for (const [propName, mapping] of Object.entries(ALL_MAPPINGS)) {\n    const value = (props as Record<string, unknown>)[propName] as\n      | ResponsiveValue<string>\n      | undefined;\n    if (value === undefined) continue;\n\n    if (isResponsiveObject(value)) {\n      needsId = true;\n      for (const [bp, val] of Object.entries(value)) {\n        if (val === undefined) continue;\n        if (bp === 'base') {\n          assignCss(base, mapping, val);\n        } else {\n          if (!mediaRules[bp]) mediaRules[bp] = {};\n          assignCss(mediaRules[bp], mapping, val);\n        }\n      }\n    } else {\n      assignCss(base, mapping, value);\n    }\n  }\n\n  if (props.display !== undefined) {\n    if (isResponsiveObject(props.display)) {\n      needsId = true;\n      for (const [bp, val] of Object.entries(props.display)) {\n        if (val === undefined) continue;\n        if (bp === 'base') {\n          base.display = val;\n        } else {\n          if (!mediaRules[bp]) mediaRules[bp] = {};\n          mediaRules[bp].display = val;\n        }\n      }\n    } else {\n      base.display = props.display;\n    }\n  }\n\n  if (props.position !== undefined) {\n    base.position = props.position;\n  }\n  if (props.flex !== undefined) {\n    base.flex = props.flex;\n  }\n\n  const mediaCSS = buildMediaCSS(\n    Object.fromEntries(\n      Object.entries(mediaRules).map(([bp, rules]) => [\n        bp,\n        Object.fromEntries(\n          Object.entries(rules).map(([prop, val]) => [camelToKebab(prop), val]),\n        ),\n      ]),\n    ),\n  );\n\n  const baseStyle: React.CSSProperties = {\n    ...(base as unknown as React.CSSProperties),\n    ...existingStyle,\n  };\n\n  return { baseStyle, mediaCSS, needsId };\n}\n\n// ---------------------------------------------------------------------------\n// renderSystemProps — returns everything needed to render a system-prop element\n// Pure function, no hooks. SSR-safe.\n// ---------------------------------------------------------------------------\n\nexport interface SystemPropsRenderResult {\n  style: React.CSSProperties;\n  styleTag: React.ReactNode;\n  dataId?: string;\n}\n\nexport function renderSystemProps(\n  systemProps: SystemProps,\n  existingStyle?: React.CSSProperties,\n): SystemPropsRenderResult {\n  const { baseStyle, mediaCSS, needsId } = resolveSystemProps(\n    systemProps,\n    existingStyle,\n  );\n\n  if (!needsId || !mediaCSS) {\n    return { style: baseStyle, styleTag: null };\n  }\n\n  const scopeId = generateScopeId(mediaCSS);\n  const selector = `[data-jds=\"${scopeId}\"]`;\n  const scoped = mediaCSS.replace(/__SEL__/g, selector);\n\n  return {\n    style: baseStyle,\n    styleTag: <style dangerouslySetInnerHTML={{ __html: scoped }} />,\n    dataId: scopeId,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Utility: strip system props from a rest-props object\n// ---------------------------------------------------------------------------\n\nexport function stripSystemProps<T extends Record<string, unknown>>(\n  props: T,\n): Omit<T, keyof SystemProps> {\n  const result = { ...props };\n  for (const key of SYSTEM_PROP_KEYS) {\n    delete result[key];\n  }\n  return result as Omit<T, keyof SystemProps>;\n}\n\n// ---------------------------------------------------------------------------\n// Utility: scope and render media CSS as a <style> tag\n// ---------------------------------------------------------------------------\n\nexport function renderScopedStyle(\n  mediaCSS: string,\n  scopeId: string,\n): React.ReactNode {\n  if (!mediaCSS) return null;\n  const selector = `[data-jds=\"${scopeId}\"]`;\n  const scoped = mediaCSS.replace(/__SEL__/g, selector);\n  return <style dangerouslySetInnerHTML={{ __html: scoped }} />;\n}\n"],"names":[],"mappings":"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"}

package/dist/utils/spacing.d.ts

@@ -0,0 +1,52 @@
+import { SpacingToken, MarginToken, SpacingProps, GapProps } from '../types/spacing';
+export declare const pMap: Record<SpacingToken, string>;
+export declare const pxMap: Record<SpacingToken, string>;
+export declare const pyMap: Record<SpacingToken, string>;
+export declare const ptMap: Record<SpacingToken, string>;
+export declare const pbMap: Record<SpacingToken, string>;
+export declare const plMap: Record<SpacingToken, string>;
+export declare const prMap: Record<SpacingToken, string>;
+export declare const mMap: Record<MarginToken, string>;
+export declare const mxMap: Record<MarginToken, string>;
+export declare const myMap: Record<MarginToken, string>;
+export declare const mtMap: Record<MarginToken, string>;
+export declare const mbMap: Record<MarginToken, string>;
+export declare const mlMap: Record<MarginToken, string>;
+export declare const mrMap: Record<MarginToken, string>;
+export declare const gapMap: Record<SpacingToken, string>;
+export declare const rowGapMap: Record<SpacingToken, string>;
+export declare const colGapMap: Record<SpacingToken, string>;
+/** Shorthand values for Stack's align prop (cross-axis alignment). */
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+/** Shorthand values for Stack's justify prop (main-axis distribution). */
+export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+export declare const alignMap: Record<StackAlign, string>;
+export declare const justifyMap: Record<StackJustify, string>;
+export declare const SPACING_PROP_KEYS: (keyof SpacingProps)[];
+/**
+ * Converts a SpacingProps (and optional GapProps) object into a space-separated
+ * string of Tailwind utility classes. Each prop value (a SpacingToken string)
+ * is looked up in a static class map and resolved to the corresponding Tailwind
+ * utility class generated by jiwambe-plugin's spacing theme extension.
+ *
+ * Returns an empty string if no spacing props are provided. Safe to pass
+ * directly to a className prop.
+ *
+ * @param props - An object containing any SpacingProps or GapProps keys.
+ *                Non-spacing keys are ignored.
+ * @returns A space-separated Tailwind class string or empty string.
+ *
+ * @example
+ * resolveSpacing({ p: 'space-4', mt: 'space-8' })
+ * // → 'p-space-4 mt-space-8'
+ *
+ * @example
+ * resolveSpacing({ px: 'fluid-4-9', mx: 'auto' })
+ * // → 'px-fluid-4-9 mx-auto'
+ *
+ * @example
+ * resolveSpacing({})
+ * // → ''
+ */
+export declare function resolveSpacing(props: SpacingProps & Partial<GapProps>): string;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/utils/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/utils/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM1F,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B9C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B9C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B9C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B9C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B9C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B9C,CAAC;AAMF,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC5C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC7C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAgC7C,CAAC;AAMF,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+B/C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+BlD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CA+BlD,CAAC;AAMF,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEhE,0EAA0E;AAC1E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7E,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKtC,CAAC;AAEX,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM1C,CAAC;AAMX,eAAO,MAAM,iBAAiB,EAAE,CAAC,MAAM,YAAY,CAAC,EAGnD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,MAAM,CAwB9E"}