@purpurds/spacer 0.0.1

package/dist/LICENSE.txt

@@ -0,0 +1,31 @@
+Name: classnames
+Version: 2.5.1
+License: MIT
+Private: false
+Description: A simple utility for conditionally joining classNames together
+Repository: git+https://github.com/JedWatson/classnames.git
+Author: Jed Watson
+License Copyright:
+===
+
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/metadata.js

@@ -0,0 +1,9 @@
+module.exports = {
+  "moduleName": "spacer",
+  "exports": [
+    "SPACER_SIZE",
+    "SpacerSize",
+    "SpacerProps",
+    "Spacer"
+  ]
+};

package/dist/spacer.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");function d(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var h={exports:{}};var x;function n(){return x||(x=1,(function(p){(function(){var t={}.hasOwnProperty;function u(){for(var r="",e=0;e<arguments.length;e++){var s=arguments[e];s&&(r=a(r,_.call(this,s)))}return r}function _(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var e="";for(var s in r)t.call(r,s)&&r[s]&&(e=a(e,this&&this[s]||s));return e}function a(r,e){return e?r?r+" "+e:r+e:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()})(h)),h.exports}var l=n();const o=d(l),g={"purpur-spacer--width-xxxs":"_purpur-spacer--width-xxxs_1ehtd_1","purpur-spacer--width-xxs":"_purpur-spacer--width-xxs_1ehtd_4","purpur-spacer--width-xs":"_purpur-spacer--width-xs_1ehtd_7","purpur-spacer--width-sm":"_purpur-spacer--width-sm_1ehtd_10","purpur-spacer--width-md":"_purpur-spacer--width-md_1ehtd_13","purpur-spacer--width-lg":"_purpur-spacer--width-lg_1ehtd_16","purpur-spacer--width-xl":"_purpur-spacer--width-xl_1ehtd_19","purpur-spacer--width-xxl":"_purpur-spacer--width-xxl_1ehtd_22","purpur-spacer--width-xxxl":"_purpur-spacer--width-xxxl_1ehtd_25","purpur-spacer--height-xxxs":"_purpur-spacer--height-xxxs_1ehtd_28","purpur-spacer--height-xxs":"_purpur-spacer--height-xxs_1ehtd_31","purpur-spacer--height-xs":"_purpur-spacer--height-xs_1ehtd_34","purpur-spacer--height-sm":"_purpur-spacer--height-sm_1ehtd_37","purpur-spacer--height-md":"_purpur-spacer--height-md_1ehtd_40","purpur-spacer--height-lg":"_purpur-spacer--height-lg_1ehtd_43","purpur-spacer--height-xl":"_purpur-spacer--height-xl_1ehtd_46","purpur-spacer--height-xxl":"_purpur-spacer--height-xxl_1ehtd_49","purpur-spacer--height-xxxl":"_purpur-spacer--height-xxxl_1ehtd_52","purpur-spacer":"_purpur-spacer_1ehtd_1","purpur-spacer--dynamic":"_purpur-spacer--dynamic_1ehtd_60","purpur-spacer--half":"_purpur-spacer--half_1ehtd_71","purpur-spacer--bg-xxxs":"_purpur-spacer--bg-xxxs_1ehtd_87","purpur-spacer--bg-xxs":"_purpur-spacer--bg-xxs_1ehtd_90","purpur-spacer--bg-xs":"_purpur-spacer--bg-xs_1ehtd_93","purpur-spacer--bg-sm":"_purpur-spacer--bg-sm_1ehtd_96","purpur-spacer--bg-md":"_purpur-spacer--bg-md_1ehtd_99","purpur-spacer--bg-lg":"_purpur-spacer--bg-lg_1ehtd_102","purpur-spacer--bg-xl":"_purpur-spacer--bg-xl_1ehtd_105","purpur-spacer--bg-xxl":"_purpur-spacer--bg-xxl_1ehtd_108","purpur-spacer--bg-xxxl":"_purpur-spacer--bg-xxxl_1ehtd_111"},f=o.bind(g),c="purpur-spacer",b=["xxxs","xxs","xs","sm","md","lg","xl","xxl","xxxl"],m=({width:p,height:t,dynamic:u=!1,half:_,background:a,className:r,...e})=>i.jsx("div",{...e,className:f(r,c,{[`${c}--width-${p}`]:p,[`${c}--height-${t}`]:t,[`${c}--dynamic`]:u,[`${c}--half`]:_,[`${c}--bg-${p||t}`]:a&&(p||t)})});exports.SPACER_SIZE=b;exports.Spacer=m;
+//# sourceMappingURL=spacer.cjs.js.map

package/dist/spacer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/spacer.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./spacer.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-spacer\";\n\nexport const SPACER_SIZE = [\"xxxs\", \"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"xxxl\"] as const;\n\nexport type SpacerSize = (typeof SPACER_SIZE)[number];\n\nexport type SpacerProps = Omit<BaseProps, \"children\"> & {\n  /** Width spacing size (horizontal) */\n  width?: SpacerSize;\n  /** Height spacing size (vertical) */\n  height?: SpacerSize;\n  /** Whether the spacer scales with breakpoints. Default is true (dynamic). */\n  dynamic?: boolean;\n  /** Divide the size in half */\n  half?: boolean;\n  /** Show background color based on size (for presentation/debugging) */\n  background?: boolean;\n};\n\nexport const Spacer = ({\n  width,\n  height,\n  dynamic = false,\n  half,\n  background,\n  className,\n  ...props\n}: SpacerProps) => (\n  <div\n    {...props}\n    className={cx(className, rootClassName, {\n      [`${rootClassName}--width-${width}`]: width,\n      [`${rootClassName}--height-${height}`]: height,\n      [`${rootClassName}--dynamic`]: dynamic,\n      [`${rootClassName}--half`]: half,\n      [`${rootClassName}--bg-${width || height}`]: background && (width || height),\n    })}\n  />\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","SPACER_SIZE","Spacer","width","height","dynamic","half","background","className","props","jsx"],"mappings":"4RAOC,UAAY,CAGZ,IAAIA,EAAS,CAAA,EAAG,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE7D,CAEE,OAAOF,CACT,CAEC,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,SAAQ,EAGpB,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACT,CAEC,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,UAAiBT,GAOjB,OAAO,WAAaA,CAEtB,s1DCtEMU,EAAKC,EAAE,KAAKC,CAAM,EAClBC,EAAgB,gBAETC,EAAc,CAAC,OAAQ,MAAO,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,MAAM,EAiBzEC,EAAS,CAAC,CACrB,MAAAC,EACA,OAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,WAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IACEC,EAAAA,IAAC,MAAA,CACE,GAAGD,EACJ,UAAWZ,EAAGW,EAAWR,EAAe,CACtC,CAAC,GAAGA,CAAa,WAAWG,CAAK,EAAE,EAAGA,EACtC,CAAC,GAAGH,CAAa,YAAYI,CAAM,EAAE,EAAGA,EACxC,CAAC,GAAGJ,CAAa,WAAW,EAAGK,EAC/B,CAAC,GAAGL,CAAa,QAAQ,EAAGM,EAC5B,CAAC,GAAGN,CAAa,QAAQG,GAASC,CAAM,EAAE,EAAGG,IAAeJ,GAASC,EAAA,CACtE,CAAA,CACH","x_google_ignoreList":[0]}

package/dist/spacer.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { BaseProps } from '@purpurds/common-types';
+export declare const SPACER_SIZE: readonly ["xxxs", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"];
+export type SpacerSize = (typeof SPACER_SIZE)[number];
+export type SpacerProps = Omit<BaseProps, "children"> & {
+    /** Width spacing size (horizontal) */
+    width?: SpacerSize;
+    /** Height spacing size (vertical) */
+    height?: SpacerSize;
+    /** Whether the spacer scales with breakpoints. Default is true (dynamic). */
+    dynamic?: boolean;
+    /** Divide the size in half */
+    half?: boolean;
+    /** Show background color based on size (for presentation/debugging) */
+    background?: boolean;
+};
+export declare const Spacer: ({ width, height, dynamic, half, background, className, ...props }: SpacerProps) => React.JSX.Element;
+//# sourceMappingURL=spacer.d.ts.map

package/dist/spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../src/spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAQxD,eAAO,MAAM,WAAW,uEAAwE,CAAC;AAEjG,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACtD,sCAAsC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qCAAqC;IACrC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,mEAQpB,WAAW,sBAWb,CAAC"}

package/dist/spacer.es.js

@@ -0,0 +1,96 @@
+import { jsx as i } from "react/jsx-runtime";
+function d(p) {
+  return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
+}
+var a = { exports: {} };
+var x;
+function n() {
+  return x || (x = 1, (function(p) {
+    (function() {
+      var t = {}.hasOwnProperty;
+      function u() {
+        for (var r = "", e = 0; e < arguments.length; e++) {
+          var s = arguments[e];
+          s && (r = _(r, h.call(this, s)));
+        }
+        return r;
+      }
+      function h(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return this && this[r] || r;
+        if (typeof r != "object")
+          return "";
+        if (Array.isArray(r))
+          return u.apply(this, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var e = "";
+        for (var s in r)
+          t.call(r, s) && r[s] && (e = _(e, this && this[s] || s));
+        return e;
+      }
+      function _(r, e) {
+        return e ? r ? r + " " + e : r + e : r;
+      }
+      p.exports ? (u.default = u, p.exports = u) : window.classNames = u;
+    })();
+  })(a)), a.exports;
+}
+var l = n();
+const o = /* @__PURE__ */ d(l), g = {
+  "purpur-spacer--width-xxxs": "_purpur-spacer--width-xxxs_1ehtd_1",
+  "purpur-spacer--width-xxs": "_purpur-spacer--width-xxs_1ehtd_4",
+  "purpur-spacer--width-xs": "_purpur-spacer--width-xs_1ehtd_7",
+  "purpur-spacer--width-sm": "_purpur-spacer--width-sm_1ehtd_10",
+  "purpur-spacer--width-md": "_purpur-spacer--width-md_1ehtd_13",
+  "purpur-spacer--width-lg": "_purpur-spacer--width-lg_1ehtd_16",
+  "purpur-spacer--width-xl": "_purpur-spacer--width-xl_1ehtd_19",
+  "purpur-spacer--width-xxl": "_purpur-spacer--width-xxl_1ehtd_22",
+  "purpur-spacer--width-xxxl": "_purpur-spacer--width-xxxl_1ehtd_25",
+  "purpur-spacer--height-xxxs": "_purpur-spacer--height-xxxs_1ehtd_28",
+  "purpur-spacer--height-xxs": "_purpur-spacer--height-xxs_1ehtd_31",
+  "purpur-spacer--height-xs": "_purpur-spacer--height-xs_1ehtd_34",
+  "purpur-spacer--height-sm": "_purpur-spacer--height-sm_1ehtd_37",
+  "purpur-spacer--height-md": "_purpur-spacer--height-md_1ehtd_40",
+  "purpur-spacer--height-lg": "_purpur-spacer--height-lg_1ehtd_43",
+  "purpur-spacer--height-xl": "_purpur-spacer--height-xl_1ehtd_46",
+  "purpur-spacer--height-xxl": "_purpur-spacer--height-xxl_1ehtd_49",
+  "purpur-spacer--height-xxxl": "_purpur-spacer--height-xxxl_1ehtd_52",
+  "purpur-spacer": "_purpur-spacer_1ehtd_1",
+  "purpur-spacer--dynamic": "_purpur-spacer--dynamic_1ehtd_60",
+  "purpur-spacer--half": "_purpur-spacer--half_1ehtd_71",
+  "purpur-spacer--bg-xxxs": "_purpur-spacer--bg-xxxs_1ehtd_87",
+  "purpur-spacer--bg-xxs": "_purpur-spacer--bg-xxs_1ehtd_90",
+  "purpur-spacer--bg-xs": "_purpur-spacer--bg-xs_1ehtd_93",
+  "purpur-spacer--bg-sm": "_purpur-spacer--bg-sm_1ehtd_96",
+  "purpur-spacer--bg-md": "_purpur-spacer--bg-md_1ehtd_99",
+  "purpur-spacer--bg-lg": "_purpur-spacer--bg-lg_1ehtd_102",
+  "purpur-spacer--bg-xl": "_purpur-spacer--bg-xl_1ehtd_105",
+  "purpur-spacer--bg-xxl": "_purpur-spacer--bg-xxl_1ehtd_108",
+  "purpur-spacer--bg-xxxl": "_purpur-spacer--bg-xxxl_1ehtd_111"
+}, f = o.bind(g), c = "purpur-spacer", m = ["xxxs", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], w = ({
+  width: p,
+  height: t,
+  dynamic: u = !1,
+  half: h,
+  background: _,
+  className: r,
+  ...e
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    ...e,
+    className: f(r, c, {
+      [`${c}--width-${p}`]: p,
+      [`${c}--height-${t}`]: t,
+      [`${c}--dynamic`]: u,
+      [`${c}--half`]: h,
+      [`${c}--bg-${p || t}`]: _ && (p || t)
+    })
+  }
+);
+export {
+  m as SPACER_SIZE,
+  w as Spacer
+};
+//# sourceMappingURL=spacer.es.js.map

package/dist/spacer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/spacer.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./spacer.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-spacer\";\n\nexport const SPACER_SIZE = [\"xxxs\", \"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"xxxl\"] as const;\n\nexport type SpacerSize = (typeof SPACER_SIZE)[number];\n\nexport type SpacerProps = Omit<BaseProps, \"children\"> & {\n  /** Width spacing size (horizontal) */\n  width?: SpacerSize;\n  /** Height spacing size (vertical) */\n  height?: SpacerSize;\n  /** Whether the spacer scales with breakpoints. Default is true (dynamic). */\n  dynamic?: boolean;\n  /** Divide the size in half */\n  half?: boolean;\n  /** Show background color based on size (for presentation/debugging) */\n  background?: boolean;\n};\n\nexport const Spacer = ({\n  width,\n  height,\n  dynamic = false,\n  half,\n  background,\n  className,\n  ...props\n}: SpacerProps) => (\n  <div\n    {...props}\n    className={cx(className, rootClassName, {\n      [`${rootClassName}--width-${width}`]: width,\n      [`${rootClassName}--height-${height}`]: height,\n      [`${rootClassName}--dynamic`]: dynamic,\n      [`${rootClassName}--half`]: half,\n      [`${rootClassName}--bg-${width || height}`]: background && (width || height),\n    })}\n  />\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","SPACER_SIZE","Spacer","width","height","dynamic","half","background","className","props","jsx"],"mappings":";;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,cAAIC,IAAM,UAAUD,CAAC;AACrB,UAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOF;AAAA,MACT;AAEC,eAASI,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAQ;AAGpB,YAAIF,IAAU;AAEd,iBAASK,KAAOH;AACf,UAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,eAAOL;AAAA,MACT;AAEC,eAASG,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,YAAiBT,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCtEMU,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,iBAETC,IAAc,CAAC,QAAQ,OAAO,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,MAAM,GAiBzEC,IAAS,CAAC;AAAA,EACrB,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWZ,EAAGW,GAAWR,GAAe;AAAA,MACtC,CAAC,GAAGA,CAAa,WAAWG,CAAK,EAAE,GAAGA;AAAA,MACtC,CAAC,GAAGH,CAAa,YAAYI,CAAM,EAAE,GAAGA;AAAA,MACxC,CAAC,GAAGJ,CAAa,WAAW,GAAGK;AAAA,MAC/B,CAAC,GAAGL,CAAa,QAAQ,GAAGM;AAAA,MAC5B,CAAC,GAAGN,CAAa,QAAQG,KAASC,CAAM,EAAE,GAAGG,MAAeJ,KAASC;AAAA,IAAA,CACtE;AAAA,EAAA;AACH;","x_google_ignoreList":[0]}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-spacer--width-xxxs_1ehtd_1{--width-size: var(--purpur-spacing-50)}._purpur-spacer--width-xxs_1ehtd_4{--width-size: var(--purpur-spacing-100)}._purpur-spacer--width-xs_1ehtd_7{--width-size: var(--purpur-spacing-200)}._purpur-spacer--width-sm_1ehtd_10{--width-size: var(--purpur-spacing-300)}._purpur-spacer--width-md_1ehtd_13{--width-size: var(--purpur-spacing-400)}._purpur-spacer--width-lg_1ehtd_16{--width-size: var(--purpur-spacing-600)}._purpur-spacer--width-xl_1ehtd_19{--width-size: var(--purpur-spacing-800)}._purpur-spacer--width-xxl_1ehtd_22{--width-size: var(--purpur-spacing-1000)}._purpur-spacer--width-xxxl_1ehtd_25{--width-size: var(--purpur-spacing-1200)}._purpur-spacer--height-xxxs_1ehtd_28{--height-size: var(--purpur-spacing-50)}._purpur-spacer--height-xxs_1ehtd_31{--height-size: var(--purpur-spacing-100)}._purpur-spacer--height-xs_1ehtd_34{--height-size: var(--purpur-spacing-200)}._purpur-spacer--height-sm_1ehtd_37{--height-size: var(--purpur-spacing-300)}._purpur-spacer--height-md_1ehtd_40{--height-size: var(--purpur-spacing-400)}._purpur-spacer--height-lg_1ehtd_43{--height-size: var(--purpur-spacing-600)}._purpur-spacer--height-xl_1ehtd_46{--height-size: var(--purpur-spacing-800)}._purpur-spacer--height-xxl_1ehtd_49{--height-size: var(--purpur-spacing-1000)}._purpur-spacer--height-xxxl_1ehtd_52{--height-size: var(--purpur-spacing-1200)}._purpur-spacer_1ehtd_1{width:var(--width-size, 0);height:var(--height-size, 0)}@media (min-width: 600px){._purpur-spacer--dynamic_1ehtd_60{width:calc(var(--width-size, 0) * 1.5);height:calc(var(--height-size, 0) * 1.5)}}@media (min-width: 1024px){._purpur-spacer--dynamic_1ehtd_60{width:calc(var(--width-size, 0) * 2.5);height:calc(var(--height-size, 0) * 2.5)}}._purpur-spacer--half_1ehtd_71{width:calc(var(--width-size, 0) / 2);height:calc(var(--height-size, 0) / 2)}@media (min-width: 600px){._purpur-spacer--half_1ehtd_71._purpur-spacer--dynamic_1ehtd_60{width:calc(var(--width-size, 0) / 2 * 1.5);height:calc(var(--height-size, 0) / 2 * 1.5)}}@media (min-width: 1024px){._purpur-spacer--half_1ehtd_71._purpur-spacer--dynamic_1ehtd_60{width:calc(var(--width-size, 0) / 2 * 2.5);height:calc(var(--height-size, 0) / 2 * 2.5)}}._purpur-spacer--bg-xxxs_1ehtd_87{background-color:var(--purpur-color-purple-50)}._purpur-spacer--bg-xxs_1ehtd_90{background-color:var(--purpur-color-purple-100)}._purpur-spacer--bg-xs_1ehtd_93{background-color:var(--purpur-color-purple-200)}._purpur-spacer--bg-sm_1ehtd_96{background-color:var(--purpur-color-purple-300)}._purpur-spacer--bg-md_1ehtd_99{background-color:var(--purpur-color-purple-400)}._purpur-spacer--bg-lg_1ehtd_102{background-color:var(--purpur-color-purple-500)}._purpur-spacer--bg-xl_1ehtd_105{background-color:var(--purpur-color-purple-600)}._purpur-spacer--bg-xxl_1ehtd_108{background-color:var(--purpur-color-purple-700)}._purpur-spacer--bg-xxxl_1ehtd_111{background-color:var(--purpur-color-purple-800)}

package/eslint.config.mjs

@@ -0,0 +1,2 @@
+import purpurCommon from "@purpurds/component-rig/eslint.config.mjs";
+export default purpurCommon;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@purpurds/spacer",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/spacer.cjs.js",
+  "types": "./dist/spacer.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/spacer.cjs.js",
+      "types": "./dist/spacer.d.ts",
+      "default": "./dist/spacer.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/spacer.tsx",
+  "dependencies": {
+    "classnames": "~2.5.1",
+    "@purpurds/tokens": "8.16.3",
+    "@purpurds/common-types": "8.16.3"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "10.1.11",
+    "@testing-library/dom": "~10.4.1",
+    "@testing-library/jest-dom": "~6.9.1",
+    "@testing-library/react": "~16.3.0",
+    "@types/node": "22.17",
+    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.6",
+    "eslint": "9.39.2",
+    "jsdom": "~27.2.0",
+    "lint-staged": "16.2.6",
+    "prettier": "~2.8.8",
+    "react-dom": "^19.2.1",
+    "react": "^19.2.1",
+    "storybook": "10.1.11",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.10",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/spacer.module.scss

@@ -0,0 +1,164 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
+// Spacing size mappings (base values)
+// xxxs -> spacing-50 (4px)
+// xxs  -> spacing-100 (8px)
+// xs   -> spacing-200 (16px)
+// sm   -> spacing-300 (24px)
+// md   -> spacing-400 (32px)
+// lg   -> spacing-600 (48px)
+// xl   -> spacing-800 (64px)
+// xxl  -> spacing-1000 (80px)
+// xxxl -> spacing-1200 (96px)
+
+.purpur-spacer {
+  // Width sizes
+  &--width-xxxs {
+    --width-size: var(--purpur-spacing-50);
+  }
+
+  &--width-xxs {
+    --width-size: var(--purpur-spacing-100);
+  }
+
+  &--width-xs {
+    --width-size: var(--purpur-spacing-200);
+  }
+
+  &--width-sm {
+    --width-size: var(--purpur-spacing-300);
+  }
+
+  &--width-md {
+    --width-size: var(--purpur-spacing-400);
+  }
+
+  &--width-lg {
+    --width-size: var(--purpur-spacing-600);
+  }
+
+  &--width-xl {
+    --width-size: var(--purpur-spacing-800);
+  }
+
+  &--width-xxl {
+    --width-size: var(--purpur-spacing-1000);
+  }
+
+  &--width-xxxl {
+    --width-size: var(--purpur-spacing-1200);
+  }
+
+  // Height sizes
+  &--height-xxxs {
+    --height-size: var(--purpur-spacing-50);
+  }
+
+  &--height-xxs {
+    --height-size: var(--purpur-spacing-100);
+  }
+
+  &--height-xs {
+    --height-size: var(--purpur-spacing-200);
+  }
+
+  &--height-sm {
+    --height-size: var(--purpur-spacing-300);
+  }
+
+  &--height-md {
+    --height-size: var(--purpur-spacing-400);
+  }
+
+  &--height-lg {
+    --height-size: var(--purpur-spacing-600);
+  }
+
+  &--height-xl {
+    --height-size: var(--purpur-spacing-800);
+  }
+
+  &--height-xxl {
+    --height-size: var(--purpur-spacing-1000);
+  }
+
+  &--height-xxxl {
+    --height-size: var(--purpur-spacing-1200);
+  }
+
+  // Apply dimensions
+  width: var(--width-size, 0);
+  height: var(--height-size, 0);
+
+  // Dynamic scaling at breakpoints
+  &--dynamic {
+    // 1.5x above md breakpoint (600px)
+    @media (min-width: $purpur-breakpoint-md) {
+      width: calc(var(--width-size, 0) * 1.5);
+      height: calc(var(--height-size, 0) * 1.5);
+    }
+
+    // 2.5x above lg breakpoint (1024px)
+    @media (min-width: $purpur-breakpoint-lg) {
+      width: calc(var(--width-size, 0) * 2.5);
+      height: calc(var(--height-size, 0) * 2.5);
+    }
+  }
+
+  // Half size modifier - divides dimensions by 2
+  &--half {
+    width: calc(var(--width-size, 0) / 2);
+    height: calc(var(--height-size, 0) / 2);
+
+    // Half + dynamic scaling
+    &.purpur-spacer--dynamic {
+      @media (min-width: $purpur-breakpoint-md) {
+        width: calc(var(--width-size, 0) / 2 * 1.5);
+        height: calc(var(--height-size, 0) / 2 * 1.5);
+      }
+
+      @media (min-width: $purpur-breakpoint-lg) {
+        width: calc(var(--width-size, 0) / 2 * 2.5);
+        height: calc(var(--height-size, 0) / 2 * 2.5);
+      }
+    }
+  }
+
+  // Background colors (for presentation/debugging)
+  // Maps sizes to purple color scale
+  &--bg-xxxs {
+    background-color: var(--purpur-color-purple-50);
+  }
+
+  &--bg-xxs {
+    background-color: var(--purpur-color-purple-100);
+  }
+
+  &--bg-xs {
+    background-color: var(--purpur-color-purple-200);
+  }
+
+  &--bg-sm {
+    background-color: var(--purpur-color-purple-300);
+  }
+
+  &--bg-md {
+    background-color: var(--purpur-color-purple-400);
+  }
+
+  &--bg-lg {
+    background-color: var(--purpur-color-purple-500);
+  }
+
+  &--bg-xl {
+    background-color: var(--purpur-color-purple-600);
+  }
+
+  &--bg-xxl {
+    background-color: var(--purpur-color-purple-700);
+  }
+
+  &--bg-xxxl {
+    background-color: var(--purpur-color-purple-800);
+  }
+}

package/src/spacer.stories.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Spacer, SPACER_SIZE, type SpacerSize } from "./spacer";
+
+/** Mapping of size names to spacing tokens */
+const SIZE_TOKEN_MAP: Record<SpacerSize, string> = {
+  xxxs: "spacing-50 (4px)",
+  xxs: "spacing-100 (8px)",
+  xs: "spacing-200 (16px)",
+  sm: "spacing-300 (24px)",
+  md: "spacing-400 (32px)",
+  lg: "spacing-600 (48px)",
+  xl: "spacing-800 (64px)",
+  xxl: "spacing-1000 (80px)",
+  xxxl: "spacing-1200 (96px)",
+};
+
+const meta = {
+  title: "Utils/Spacer",
+  component: Spacer,
+  parameters: {
+    design: [],
+  },
+  argTypes: {
+    width: {
+      control: "select",
+      options: [undefined, ...SPACER_SIZE],
+      table: { type: { summary: SPACER_SIZE.map((x) => `"${x}"`).join(" | ") } },
+      description: "Width spacing size",
+    },
+    height: {
+      control: "select",
+      options: [undefined, ...SPACER_SIZE],
+      table: { type: { summary: SPACER_SIZE.map((x) => `"${x}"`).join(" | ") } },
+      description: "Height spacing size",
+    },
+    dynamic: {
+      control: "boolean",
+      description: "Whether the spacer scales with breakpoints (1.5x at md, 2.5x at lg)",
+    },
+    half: {
+      control: "boolean",
+      description: "Divide the size in half",
+    },
+    background: {
+      control: "boolean",
+      description: "Show background color based on size (purple scale)",
+    },
+  },
+} satisfies Meta<typeof Spacer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Box = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      backgroundColor: "var(--purpur-color-background-brand-subtle)",
+      padding: "var(--purpur-spacing-200)",
+      borderRadius: "var(--purpur-border-radius-sm)",
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const AllSizes: Story = {
+  args: {
+    dynamic: false,
+    background: true,
+  },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "var(--purpur-spacing-200)" }}>
+      <h3>Height Sizes</h3>
+      {SPACER_SIZE.map((size) => (
+        <div key={size} style={{ display: "flex", alignItems: "center" }}>
+          <span style={{ width: "10rem", display: "flex", flexDirection: "column" }}>
+            <strong>{size}</strong>
+            <small>{SIZE_TOKEN_MAP[size]}</small>
+          </span>
+          <Spacer height={size} background style={{ width: "100%" }} />
+        </div>
+      ))}
+      <h3 style={{ marginTop: "var(--purpur-spacing-400)" }}>Width Sizes</h3>
+      {SPACER_SIZE.map((size) => (
+        <div key={size} style={{ display: "flex", alignItems: "center" }}>
+          <span style={{ width: "10rem", display: "flex", flexDirection: "column" }}>
+            <strong>{size}</strong>
+            <small>{SIZE_TOKEN_MAP[size]}</small>
+          </span>
+          <Spacer width={size} background style={{ height: "var(--purpur-spacing-200)" }} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const HorizontalDynamic: Story = {
+  args: {
+    width: "md",
+    dynamic: true,
+    background: true,
+  },
+  render: (args) => (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <Box>Left</Box>
+      <Spacer {...args} style={{ height: "8px" }} />
+      <Box>Right</Box>
+    </div>
+  ),
+};
+
+export const VerticalDynamic: Story = {
+  args: {
+    height: "md",
+    dynamic: true,
+    background: true,
+  },
+  render: (args) => (
+    <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      <Box>Top</Box>
+      <Spacer {...args} style={{ width: "100%" }} />
+      <Box>Bottom</Box>
+    </div>
+  ),
+};

package/src/spacer.test.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Spacer } from "./spacer";
+
+expect.extend(matchers);
+
+describe("Spacer", () => {
+  afterEach(cleanup);
+
+  it("should render with width size class", () => {
+    render(<Spacer width="md" data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer");
+    expect(spacer).toHaveClass("purpur-spacer--width-md");
+    expect(spacer).not.toHaveClass("purpur-spacer--dynamic");
+  });
+
+  it("should render with height size class", () => {
+    render(<Spacer height="lg" data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer");
+    expect(spacer).toHaveClass("purpur-spacer--height-lg");
+    expect(spacer).not.toHaveClass("purpur-spacer--dynamic");
+  });
+
+  it("should render with both width and height sizes", () => {
+    render(<Spacer width="sm" height="xl" data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer--width-sm");
+    expect(spacer).toHaveClass("purpur-spacer--height-xl");
+  });
+
+  it("should not have dynamic class when dynamic is false", () => {
+    render(<Spacer height="md" dynamic={false} data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer");
+    expect(spacer).toHaveClass("purpur-spacer--height-md");
+    expect(spacer).not.toHaveClass("purpur-spacer--dynamic");
+  });
+
+  it("should not be dynamic by default", () => {
+    render(<Spacer height="md" data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).not.toHaveClass("purpur-spacer--dynamic");
+  });
+
+  it("should be extendable for styling, also keep existing", () => {
+    render(<Spacer width="xs" className="custom-styling" data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer");
+    expect(spacer).toHaveClass("purpur-spacer--width-xs");
+    expect(spacer).toHaveClass("custom-styling");
+  });
+
+  it('should pass through "data-" & accessibility attributes', () => {
+    render(
+      <Spacer height="sm" data-testid="spacer" data-test-id="other-convention" aria-hidden="true" />
+    );
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveAttribute("data-test-id", "other-convention");
+    expect(spacer).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("should support all size values for width prop", () => {
+    const sizes = ["xxxs", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"] as const;
+
+    sizes.forEach((size) => {
+      const { unmount } = render(<Spacer width={size} data-testid="spacer" />);
+      const spacer = screen.getByTestId("spacer");
+      expect(spacer).toHaveClass(`purpur-spacer--width-${size}`);
+      unmount();
+    });
+  });
+
+  it("should support all size values for height prop", () => {
+    const sizes = ["xxxs", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"] as const;
+
+    sizes.forEach((size) => {
+      const { unmount } = render(<Spacer height={size} data-testid="spacer" />);
+      const spacer = screen.getByTestId("spacer");
+      expect(spacer).toHaveClass(`purpur-spacer--height-${size}`);
+      unmount();
+    });
+  });
+
+  it("should apply debug class when background is true with width prop", () => {
+    render(<Spacer width="md" background data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer--bg-md");
+  });
+
+  it("should apply debug class when background is true with height prop", () => {
+    render(<Spacer height="lg" background data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer--bg-lg");
+  });
+
+  it("should not apply debug class when background is false", () => {
+    render(<Spacer height="md" background={false} data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).not.toHaveClass("purpur-spacer--bg-md");
+  });
+
+  it("should not apply debug class when background is not provided", () => {
+    render(<Spacer height="md" data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).not.toHaveClass("purpur-spacer--bg-md");
+  });
+
+  it("should use width prop for debug class when both width and height are provided", () => {
+    render(<Spacer width="sm" height="lg" background data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer--bg-sm");
+  });
+
+  it("should apply half class when half is true", () => {
+    render(<Spacer height="md" half data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer--half");
+  });
+
+  it("should not apply half class when half is false", () => {
+    render(<Spacer height="md" half={false} data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).not.toHaveClass("purpur-spacer--half");
+  });
+
+  it("should combine half with dynamic", () => {
+    render(<Spacer height="md" half dynamic data-testid="spacer" />);
+
+    const spacer = screen.getByTestId("spacer");
+    expect(spacer).toHaveClass("purpur-spacer--half");
+    expect(spacer).toHaveClass("purpur-spacer--dynamic");
+  });
+});

package/src/spacer.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import type { BaseProps } from "@purpurds/common-types";
+import c from "classnames/bind";
+
+import styles from "./spacer.module.scss";
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-spacer";
+
+export const SPACER_SIZE = ["xxxs", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"] as const;
+
+export type SpacerSize = (typeof SPACER_SIZE)[number];
+
+export type SpacerProps = Omit<BaseProps, "children"> & {
+  /** Width spacing size (horizontal) */
+  width?: SpacerSize;
+  /** Height spacing size (vertical) */
+  height?: SpacerSize;
+  /** Whether the spacer scales with breakpoints. Default is true (dynamic). */
+  dynamic?: boolean;
+  /** Divide the size in half */
+  half?: boolean;
+  /** Show background color based on size (for presentation/debugging) */
+  background?: boolean;
+};
+
+export const Spacer = ({
+  width,
+  height,
+  dynamic = false,
+  half,
+  background,
+  className,
+  ...props
+}: SpacerProps) => (
+  <div
+    {...props}
+    className={cx(className, rootClassName, {
+      [`${rootClassName}--width-${width}`]: width,
+      [`${rootClassName}--height-${height}`]: height,
+      [`${rootClassName}--dynamic`]: dynamic,
+      [`${rootClassName}--half`]: half,
+      [`${rootClassName}--bg-${width || height}`]: background && (width || height),
+    })}
+  />
+);