@oscarrf2/goo-ds 0.1.0 → 0.1.2

package/dist/components/InputImage/InputImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputImage.js","sources":["../../../src/components/InputImage/InputImage.tsx"],"sourcesContent":["import type { InputImageProps } from \"./InputImage.types\";\r\nimport { Button } from \"../Button/Button\";\r\nimport { CoreText } from \"../CoreText/CoreText\";\r\nimport \"./InputImage.css\";\r\n\r\n/**\r\n * InputImage - Image upload input component with drag-and-drop support\r\n *\r\n * Provides a file upload interface with multiple visual states including:\r\n * - Default: Empty state with drag-and-drop zone\r\n * - Hover: Visual feedback during drag-over\r\n * - Filled: Shows uploaded image with remove button\r\n * - Loading: Loading skeleton state\r\n * - Generating: Blurred preview during processing\r\n * - Generated: Final result with optional comparison slider\r\n * - Disabled: Non-interactive state\r\n *\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputImage state=\"Default\" onUploadClick={handleUpload} />\r\n * <InputImage state=\"Filled\" imageSrc=\"/path/to/image.jpg\" onRemoveClick={handleRemove} />\r\n * <InputImage state=\"Generated\" imageSrc=\"/path/to/image.jpg\" comparisonSlider={true} />\r\n * ```\r\n */\r\nexport function InputImage({\r\n  state = \"Default\",\r\n  comparisonSlider = true,\r\n  imageSrc,\r\n  imageAlt = \"\",\r\n  onUploadClick,\r\n  onRemoveClick,\r\n  onDragEnter,\r\n  onDragLeave,\r\n  onDrop,\r\n  className = \"\",\r\n  children,\r\n  sliderPosition = 50,\r\n  // onSliderDrag not yet implemented\r\n}: InputImageProps) {\r\n  // Default state\r\n  if (state === \"Default\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-default ${className}`.trim()}\r\n        onDragEnter={onDragEnter}\r\n        onDragLeave={onDragLeave}\r\n        onDrop={onDrop}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      >\r\n        {children || (\r\n          <>\r\n            <CoreText\r\n              style=\"label-lg-medium\"\r\n              className=\"gds-input-image-label\"\r\n            >\r\n              Drag and drop\r\n            </CoreText>\r\n            <CoreText\r\n              style=\"body-sm-regular\"\r\n              className=\"gds-input-image-separator\"\r\n            >\r\n              or\r\n            </CoreText>\r\n            <Button\r\n              variant=\"primary\"\r\n              size=\"small\"\r\n              onClick={onUploadClick}\r\n              className=\"gds-input-image-button\"\r\n            >\r\n              Click to upload\r\n            </Button>\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Hover state\r\n  if (state === \"Hover\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-hover ${className}`.trim()}\r\n        onDragEnter={onDragEnter}\r\n        onDragLeave={onDragLeave}\r\n        onDrop={onDrop}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      >\r\n        {children || (\r\n          <>\r\n            <CoreText\r\n              style=\"label-lg-medium\"\r\n              className=\"gds-input-image-label\"\r\n            >\r\n              Drag and drop\r\n            </CoreText>\r\n            <CoreText\r\n              style=\"body-sm-regular\"\r\n              className=\"gds-input-image-separator\"\r\n            >\r\n              or\r\n            </CoreText>\r\n            <Button\r\n              variant=\"primary\"\r\n              size=\"small\"\r\n              onClick={onUploadClick}\r\n              className=\"gds-input-image-button\"\r\n            >\r\n              Click to upload\r\n            </Button>\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Filled state\r\n  if (state === \"Filled\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-filled ${className}`.trim()}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      >\r\n        {imageSrc && (\r\n          <img\r\n            src={imageSrc}\r\n            alt={imageAlt}\r\n            className=\"gds-input-image-preview\"\r\n          />\r\n        )}\r\n        <Button\r\n          variant=\"primary\"\r\n          size=\"small\"\r\n          onClick={onRemoveClick}\r\n          className=\"gds-input-image-remove-button\"\r\n          iconLeft={\r\n            <svg\r\n              width=\"16\"\r\n              height=\"16\"\r\n              viewBox=\"0 0 16 16\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path\r\n                d=\"M12 4L4 12M4 4L12 12\"\r\n                stroke=\"currentColor\"\r\n                strokeWidth=\"2\"\r\n                strokeLinecap=\"round\"\r\n                strokeLinejoin=\"round\"\r\n              />\r\n            </svg>\r\n          }\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Loading state\r\n  if (state === \"Loading\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-loading ${className}`.trim()}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      />\r\n    );\r\n  }\r\n\r\n  // Generating state\r\n  if (state === \"Generating\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-generating ${className}`.trim()}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      >\r\n        <div className=\"gds-input-image-blur-container\">\r\n          {imageSrc && (\r\n            <img\r\n              src={imageSrc}\r\n              alt={imageAlt}\r\n              className=\"gds-input-image-blur-preview\"\r\n            />\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Generated state\r\n  if (state === \"Generated\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-generated ${className}`.trim()}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      >\r\n        {imageSrc && (\r\n          <img\r\n            src={imageSrc}\r\n            alt={imageAlt}\r\n            className=\"gds-input-image-result\"\r\n          />\r\n        )}\r\n        {comparisonSlider && (\r\n          <div \r\n            className=\"gds-input-image-comparison-slider\"\r\n            style={{\r\n              left: `${sliderPosition}%`,\r\n            }}\r\n          >\r\n            <div className=\"gds-input-image-slider-line\" />\r\n            <Button\r\n              variant=\"secondary\"\r\n              size=\"small\"\r\n              className=\"gds-input-image-slider-button\"\r\n              iconLeft={\r\n                <svg\r\n                  width=\"16\"\r\n                  height=\"16\"\r\n                  viewBox=\"0 0 16 16\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <path\r\n                    d=\"M6 12L2 8L6 4\"\r\n                    stroke=\"currentColor\"\r\n                    strokeWidth=\"2\"\r\n                    strokeLinecap=\"round\"\r\n                    strokeLinejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M10 4L14 8L10 12\"\r\n                    stroke=\"currentColor\"\r\n                    strokeWidth=\"2\"\r\n                    strokeLinecap=\"round\"\r\n                    strokeLinejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              }\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Disabled state\r\n  if (state === \"Disabled\") {\r\n    return (\r\n      <div\r\n        className={`gds-input-image gds-input-image-disabled ${className}`.trim()}\r\n        data-component=\"InputImage\"\r\n        data-state={state}\r\n      >\r\n        {children || (\r\n          <>\r\n            <CoreText\r\n              style=\"label-lg-medium\"\r\n              className=\"gds-input-image-label\"\r\n            >\r\n              Drag and drop\r\n            </CoreText>\r\n            <CoreText\r\n              style=\"body-sm-regular\"\r\n              className=\"gds-input-image-separator\"\r\n            >\r\n              or\r\n            </CoreText>\r\n            <Button\r\n              variant=\"primary\"\r\n              size=\"small\"\r\n              disabled\r\n              className=\"gds-input-image-button\"\r\n            >\r\n              Click to upload\r\n            </Button>\r\n          </>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Fallback to default\r\n  return (\r\n    <div\r\n      className={`gds-input-image gds-input-image-default ${className}`.trim()}\r\n      data-component=\"InputImage\"\r\n      data-state=\"Default\"\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default InputImage;\r\n"],"names":["InputImage","state","comparisonSlider","imageSrc","imageAlt","onUploadClick","onRemoveClick","onDragEnter","onDragLeave","onDrop","className","children","sliderPosition","jsx","jsxs","Fragment","CoreText","Button"],"mappings":"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"}

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,27 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+/* empty css            */
+function m({
+  children: e,
+  showDivider: d = !0,
+  className: i = "",
+  ...r
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: `gds-sidebar ${i}`.trim(),
+      "data-component": "Sidebar",
+      "data-show-divider": d,
+      ...r,
+      children: [
+        /* @__PURE__ */ a("div", { className: "gds-sidebar-content", children: e }),
+        d && /* @__PURE__ */ a("div", { className: "gds-sidebar-divider", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  m as Sidebar,
+  m as default
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import type { SidebarProps } from \"./Sidebar.types\";\r\nimport \"./Sidebar.css\";\r\n\r\n/**\r\n * Sidebar - Sidebar container component for the goo-ds design system\r\n *\r\n * Provides consistent sidebar layout with proper spacing and background.\r\n * Designed to contain SidebarItem components, titles, and other navigation elements.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Sidebar>\r\n *   <CoreText style=\"headline-xs-bold\">Navigation</CoreText>\r\n *   <Spacer size=\"16\" />\r\n *   <SidebarItem icon={<HomeIcon />}>Home</SidebarItem>\r\n *   <SidebarItem icon={<SettingsIcon />}>Settings</SidebarItem>\r\n * </Sidebar>\r\n * ```\r\n */\r\nexport function Sidebar({\r\n  children,\r\n  showDivider = true,\r\n  className = \"\",\r\n  ...props\r\n}: SidebarProps) {\r\n  return (\r\n    <div\r\n      className={`gds-sidebar ${className}`.trim()}\r\n      data-component=\"Sidebar\"\r\n      data-show-divider={showDivider}\r\n      {...props}\r\n    >\r\n      <div className=\"gds-sidebar-content\">\r\n        {children}\r\n      </div>\r\n      {showDivider && <div className=\"gds-sidebar-divider\" aria-hidden=\"true\" />}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Sidebar;\r\n"],"names":["Sidebar","children","showDivider","className","props","jsxs","jsx"],"mappings":";;AAoBO,SAASA,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAeF,CAAS,GAAG,KAAA;AAAA,MACtC,kBAAe;AAAA,MACf,qBAAmBD;AAAA,MAClB,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAL,EAAA,CACH;AAAA,QACCC,KAAe,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBAAsB,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;"}

package/dist/components/SidebarItem/SidebarItem.js

@@ -0,0 +1,37 @@
+import { jsxs as l, jsx as d } from "react/jsx-runtime";
+/* empty css                */
+function v({
+  active: i = !1,
+  icon: s,
+  children: r,
+  className: n = "",
+  onClick: e,
+  href: t,
+  ...o
+}) {
+  const a = !!(e || t), m = (c) => {
+    e && e(c), t && !e && (window.location.href = t);
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `gds-sidebar-item ${i ? "gds-sidebar-item-active" : ""} ${a ? "gds-sidebar-item-interactive" : ""} ${n}`.trim(),
+      onClick: a ? m : void 0,
+      role: a ? "button" : void 0,
+      tabIndex: a ? 0 : void 0,
+      "aria-current": i ? "page" : void 0,
+      "data-component": "SidebarItem",
+      "data-active": i,
+      ...o,
+      children: [
+        s && /* @__PURE__ */ d("span", { className: "gds-sidebar-item-icon", children: s }),
+        /* @__PURE__ */ d("span", { className: "gds-sidebar-item-text", children: r })
+      ]
+    }
+  );
+}
+export {
+  v as SidebarItem,
+  v as default
+};
+//# sourceMappingURL=SidebarItem.js.map

package/dist/components/SidebarItem/SidebarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.js","sources":["../../../src/components/SidebarItem/SidebarItem.tsx"],"sourcesContent":["import type { SidebarItemProps } from \"./SidebarItem.types\";\r\nimport \"./SidebarItem.css\";\r\n\r\n/**\r\n * SidebarItem - Sidebar navigation item component for the goo-ds design system\r\n *\r\n * Provides consistent sidebar navigation item with interactive states.\r\n * Supports icons and active state indication.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <SidebarItem>Dashboard</SidebarItem>\r\n * <SidebarItem active icon={<HomeIcon />}>Home</SidebarItem>\r\n * <SidebarItem onClick={() => navigate('/settings')}>Settings</SidebarItem>\r\n * ```\r\n */\r\nexport function SidebarItem({\r\n  active = false,\r\n  icon,\r\n  children,\r\n  className = \"\",\r\n  onClick,\r\n  href,\r\n  ...props\r\n}: SidebarItemProps) {\r\n  const isInteractive = Boolean(onClick || href);\r\n\r\n  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (onClick) {\r\n      onClick(event);\r\n    }\r\n    if (href && !onClick) {\r\n      window.location.href = href;\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`gds-sidebar-item ${active ? \"gds-sidebar-item-active\" : \"\"} ${isInteractive ? \"gds-sidebar-item-interactive\" : \"\"} ${className}`.trim()}\r\n      onClick={isInteractive ? handleClick : undefined}\r\n      role={isInteractive ? \"button\" : undefined}\r\n      tabIndex={isInteractive ? 0 : undefined}\r\n      aria-current={active ? \"page\" : undefined}\r\n      data-component=\"SidebarItem\"\r\n      data-active={active}\r\n      {...props}\r\n    >\r\n      {icon && <span className=\"gds-sidebar-item-icon\">{icon}</span>}\r\n      <span className=\"gds-sidebar-item-text\">{children}</span>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default SidebarItem;\r\n"],"names":["SidebarItem","active","icon","children","className","onClick","href","props","isInteractive","handleClick","event","jsxs","jsx"],"mappings":";;AAiBO,SAASA,EAAY;AAAA,EAC1B,QAAAC,IAAS;AAAA,EACT,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAgB,GAAQH,KAAWC,IAEnCG,IAAc,CAACC,MAA4C;AAC/D,IAAIL,KACFA,EAAQK,CAAK,GAEXJ,KAAQ,CAACD,MACX,OAAO,SAAS,OAAOC;AAAA,EAE3B;AAEA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oBAAoBV,IAAS,4BAA4B,EAAE,IAAIO,IAAgB,iCAAiC,EAAE,IAAIJ,CAAS,GAAG,KAAA;AAAA,MAC7I,SAASI,IAAgBC,IAAc;AAAA,MACvC,MAAMD,IAAgB,WAAW;AAAA,MACjC,UAAUA,IAAgB,IAAI;AAAA,MAC9B,gBAAcP,IAAS,SAAS;AAAA,MAChC,kBAAe;AAAA,MACf,eAAaA;AAAA,MACZ,GAAGM;AAAA,MAEH,UAAA;AAAA,QAAAL,KAAQ,gBAAAU,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAV,GAAK;AAAA,QACvD,gBAAAU,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAT,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxD;"}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,30 @@
+import { jsx as d } from "react/jsx-runtime";
+function l({
+  size: e = "16",
+  className: a = "",
+  width: r = "100%",
+  animate: o = !0,
+  ...t
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: `${o ? "skeleton-pulse" : ""} ${a}`.trim(),
+      style: {
+        height: `var(--size-${e})`,
+        width: r,
+        backgroundColor: "var(--skeleton-background-default)",
+        borderRadius: "var(--radius-50)",
+        overflow: "clip"
+      },
+      "aria-hidden": t["aria-hidden"] !== !1,
+      "data-component": "Skeleton",
+      "data-size": e
+    }
+  );
+}
+export {
+  l as Skeleton,
+  l as default
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { SkeletonProps } from \"./Skeleton.types\";\r\n\r\n/**\r\n * Skeleton - Loading state placeholder component for the goo-ds design system\r\n *\r\n * Provides consistent loading state placeholders using design system tokens.\r\n * Includes a pulse animation to indicate loading state.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Skeleton size=\"16\" />\r\n * <Skeleton size=\"48\" width=\"200px\" />\r\n * <Skeleton size=\"64\" animate={false} />\r\n * ```\r\n */\r\nexport function Skeleton({\r\n  size = \"16\",\r\n  className = \"\",\r\n  width = \"100%\",\r\n  animate = true,\r\n  ...props\r\n}: SkeletonProps) {\r\n  return (\r\n    <div\r\n      className={`${animate ? \"skeleton-pulse\" : \"\"} ${className}`.trim()}\r\n      style={{\r\n        height: `var(--size-${size})`,\r\n        width: width,\r\n        backgroundColor: \"var(--skeleton-background-default)\",\r\n        borderRadius: \"var(--radius-50)\",\r\n        overflow: \"clip\",\r\n      }}\r\n      aria-hidden={props[\"aria-hidden\"] !== false}\r\n      data-component=\"Skeleton\"\r\n      data-size={size}\r\n    />\r\n  );\r\n}\r\n\r\nexport default Skeleton;\r\n"],"names":["Skeleton","size","className","width","animate","props","jsx"],"mappings":";AAgBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAAkB;AAChB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGF,IAAU,mBAAmB,EAAE,IAAIF,CAAS,GAAG,KAAA;AAAA,MAC7D,OAAO;AAAA,QACL,QAAQ,cAAcD,CAAI;AAAA,QAC1B,OAAAE;AAAA,QACA,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,MAEZ,eAAaE,EAAM,aAAa,MAAM;AAAA,MACtC,kBAAe;AAAA,MACf,aAAWJ;AAAA,IAAA;AAAA,EAAA;AAGjB;"}

package/dist/components/Spacer/Spacer.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+function d({ size: a = "16", className: e = "", ...t }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: e,
+      style: {
+        height: `var(--size-${a})`,
+        width: "100%"
+      },
+      "aria-hidden": t["aria-hidden"] !== !1,
+      "data-component": "Spacer",
+      "data-size": a
+    }
+  );
+}
+export {
+  d as Spacer,
+  d as default
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/components/Spacer/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import type { SpacerProps } from \"./Spacer.types\";\r\n\r\n/**\r\n * Spacer - Layout spacing component for the goo-ds design system\r\n *\r\n * Provides consistent vertical spacing using number tokens from Figma.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Spacer size=\"16\" />\r\n * <Spacer size=\"32\" />\r\n * <Spacer size=\"64\" />\r\n * ```\r\n */\r\nexport function Spacer({ size = \"16\", className = \"\", ...props }: SpacerProps) {\r\n  return (\r\n    <div\r\n      className={className}\r\n      style={{\r\n        height: `var(--size-${size})`,\r\n        width: \"100%\",\r\n      }}\r\n      aria-hidden={props[\"aria-hidden\"] !== false}\r\n      data-component=\"Spacer\"\r\n      data-size={size}\r\n    />\r\n  );\r\n}\r\n\r\nexport default Spacer;\r\n"],"names":["Spacer","size","className","props","jsx"],"mappings":";AAeO,SAASA,EAAO,EAAE,MAAAC,IAAO,MAAM,WAAAC,IAAY,IAAI,GAAGC,KAAsB;AAC7E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAAF;AAAA,MACA,OAAO;AAAA,QACL,QAAQ,cAAcD,CAAI;AAAA,QAC1B,OAAO;AAAA,MAAA;AAAA,MAET,eAAaE,EAAM,aAAa,MAAM;AAAA,MACtC,kBAAe;AAAA,MACf,aAAWF;AAAA,IAAA;AAAA,EAAA;AAGjB;"}

package/dist/components/TabItem/TabItem.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+/* empty css            */
+function r({
+  selected: t = !1,
+  children: s,
+  className: m = "",
+  onClick: i,
+  disabled: a = !1,
+  ...b
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: `gds-tab-item ${t ? "gds-tab-item-selected" : "gds-tab-item-unselected"} ${a ? "gds-tab-item-disabled" : ""} ${m}`.trim(),
+      onClick: i,
+      disabled: a,
+      role: "tab",
+      "aria-selected": t,
+      "aria-disabled": a,
+      tabIndex: t ? 0 : -1,
+      "data-component": "TabItem",
+      "data-selected": t,
+      ...b,
+      children: /* @__PURE__ */ e("span", { className: "gds-tab-item-text", children: s })
+    }
+  );
+}
+export {
+  r as TabItem,
+  r as default
+};
+//# sourceMappingURL=TabItem.js.map

package/dist/components/TabItem/TabItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.js","sources":["../../../src/components/TabItem/TabItem.tsx"],"sourcesContent":["import type { TabItemProps } from \"./TabItem.types\";\r\nimport \"./TabItem.css\";\r\n\r\n/**\r\n * TabItem - Tab navigation item component for the goo-ds design system\r\n *\r\n * Provides consistent tab item with selected/unselected states.\r\n * Designed to be used within a Tabs container.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <TabItem selected>Overview</TabItem>\r\n * <TabItem onClick={() => handleTabChange('details')}>Details</TabItem>\r\n * <TabItem>Settings</TabItem>\r\n * ```\r\n */\r\nexport function TabItem({\r\n  selected = false,\r\n  children,\r\n  className = \"\",\r\n  onClick,\r\n  disabled = false,\r\n  ...props\r\n}: TabItemProps) {\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      className={`gds-tab-item ${selected ? \"gds-tab-item-selected\" : \"gds-tab-item-unselected\"} ${disabled ? \"gds-tab-item-disabled\" : \"\"} ${className}`.trim()}\r\n      onClick={onClick}\r\n      disabled={disabled}\r\n      role=\"tab\"\r\n      aria-selected={selected}\r\n      aria-disabled={disabled}\r\n      tabIndex={selected ? 0 : -1}\r\n      data-component=\"TabItem\"\r\n      data-selected={selected}\r\n      {...props}\r\n    >\r\n      <span className=\"gds-tab-item-text\">{children}</span>\r\n    </button>\r\n  );\r\n}\r\n\r\nexport default TabItem;\r\n"],"names":["TabItem","selected","children","className","onClick","disabled","props","jsx"],"mappings":";;AAiBO,SAASA,EAAQ;AAAA,EACtB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,gBAAgBN,IAAW,0BAA0B,yBAAyB,IAAII,IAAW,0BAA0B,EAAE,IAAIF,CAAS,GAAG,KAAA;AAAA,MACpJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAK;AAAA,MACL,iBAAeJ;AAAA,MACf,iBAAeI;AAAA,MACf,UAAUJ,IAAW,IAAI;AAAA,MACzB,kBAAe;AAAA,MACf,iBAAeA;AAAA,MACd,GAAGK;AAAA,MAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAL,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/dist/components/Table/Table.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+/* empty css          */
+function m({ children: a, className: e = "", ...o }) {
+  return /* @__PURE__ */ t(
+    "table",
+    {
+      className: `gds-table ${e}`.trim(),
+      "data-component": "Table",
+      ...o,
+      children: /* @__PURE__ */ t("tbody", { children: a })
+    }
+  );
+}
+export {
+  m as Table,
+  m as default
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { TableProps } from \"./Table.types\";\r\nimport \"./Table.css\";\r\n\r\n/**\r\n * Table - Table container component for the goo-ds design system\r\n *\r\n * Provides consistent table layout with background, border, and rounded corners.\r\n * Designed to contain TableRow components with Cell children.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Table>\r\n *   <TableRow>\r\n *     <Cell type=\"header\">Name</Cell>\r\n *     <Cell type=\"header\">Email</Cell>\r\n *   </TableRow>\r\n *   <TableRow>\r\n *     <Cell>John Doe</Cell>\r\n *     <Cell>john@example.com</Cell>\r\n *   </TableRow>\r\n * </Table>\r\n * ```\r\n */\r\nexport function Table({ children, className = \"\", ...props }: TableProps) {\r\n  return (\r\n    <table\r\n      className={`gds-table ${className}`.trim()}\r\n      data-component=\"Table\"\r\n      {...props}\r\n    >\r\n      <tbody>\r\n        {children}\r\n      </tbody>\r\n    </table>\r\n  );\r\n}\r\n\r\nexport default Table;\r\n"],"names":["Table","children","className","props","jsx"],"mappings":";;AAwBO,SAASA,EAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,KAAqB;AACxE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,aAAaF,CAAS,GAAG,KAAA;AAAA,MACpC,kBAAe;AAAA,MACd,GAAGC;AAAA,MAEJ,UAAA,gBAAAC,EAAC,WACE,UAAAH,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/TableRow/TableRow.js

@@ -0,0 +1,35 @@
+import { jsx as s } from "react/jsx-runtime";
+/* empty css             */
+function c({
+  divider: o = !0,
+  selected: t = !1,
+  disabled: a = !1,
+  children: d,
+  className: i = "",
+  onClick: r,
+  ...l
+}) {
+  const e = !!(r && !a);
+  return /* @__PURE__ */ s(
+    "tr",
+    {
+      className: `gds-table-row ${o ? "gds-table-row-divider" : ""} ${t ? "gds-table-row-selected" : ""} ${a ? "gds-table-row-disabled" : ""} ${e ? "gds-table-row-interactive" : ""} ${i}`.trim(),
+      onClick: a ? void 0 : r,
+      role: e ? "button" : void 0,
+      tabIndex: e ? 0 : void 0,
+      "aria-disabled": a,
+      "aria-selected": t,
+      "data-component": "TableRow",
+      "data-divider": o,
+      "data-selected": t,
+      "data-disabled": a,
+      ...l,
+      children: d
+    }
+  );
+}
+export {
+  c as TableRow,
+  c as default
+};
+//# sourceMappingURL=TableRow.js.map

package/dist/components/TableRow/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../../../src/components/TableRow/TableRow.tsx"],"sourcesContent":["import type { TableRowProps } from \"./TableRow.types\";\r\nimport \"./TableRow.css\";\r\n\r\n/**\r\n * TableRow - Table row component for the goo-ds design system\r\n *\r\n * Provides consistent table row layout with interactive states and dividers.\r\n * Designed to contain Cell components.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <TableRow>\r\n *   <Cell>Name</Cell>\r\n *   <Cell>Email</Cell>\r\n * </TableRow>\r\n * <TableRow selected>\r\n *   <Cell>John</Cell>\r\n *   <Cell>john@example.com</Cell>\r\n * </TableRow>\r\n * ```\r\n */\r\nexport function TableRow({\r\n  divider = true,\r\n  selected = false,\r\n  disabled = false,\r\n  children,\r\n  className = \"\",\r\n  onClick,\r\n  ...props\r\n}: TableRowProps) {\r\n  const isInteractive = Boolean(onClick && !disabled);\r\n\r\n  return (\r\n    <tr\r\n      className={`gds-table-row ${divider ? \"gds-table-row-divider\" : \"\"} ${selected ? \"gds-table-row-selected\" : \"\"} ${disabled ? \"gds-table-row-disabled\" : \"\"} ${isInteractive ? \"gds-table-row-interactive\" : \"\"} ${className}`.trim()}\r\n      onClick={disabled ? undefined : onClick}\r\n      role={isInteractive ? \"button\" : undefined}\r\n      tabIndex={isInteractive ? 0 : undefined}\r\n      aria-disabled={disabled}\r\n      aria-selected={selected}\r\n      data-component=\"TableRow\"\r\n      data-divider={divider}\r\n      data-selected={selected}\r\n      data-disabled={disabled}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </tr>\r\n  );\r\n}\r\n\r\nexport default TableRow;\r\n"],"names":["TableRow","divider","selected","disabled","children","className","onClick","props","isInteractive","jsx"],"mappings":";;AAsBO,SAASA,EAAS;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAgB,GAAQF,KAAW,CAACH;AAE1C,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBR,IAAU,0BAA0B,EAAE,IAAIC,IAAW,2BAA2B,EAAE,IAAIC,IAAW,2BAA2B,EAAE,IAAIK,IAAgB,8BAA8B,EAAE,IAAIH,CAAS,GAAG,KAAA;AAAA,MAC9N,SAASF,IAAW,SAAYG;AAAA,MAChC,MAAME,IAAgB,WAAW;AAAA,MACjC,UAAUA,IAAgB,IAAI;AAAA,MAC9B,iBAAeL;AAAA,MACf,iBAAeD;AAAA,MACf,kBAAe;AAAA,MACf,gBAAcD;AAAA,MACd,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACd,GAAGI;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+/* empty css         */
+function i({
+  children: t,
+  className: a = "",
+  ...s
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: `gds-tabs ${a}`.trim(),
+      role: "tablist",
+      "data-component": "Tabs",
+      ...s,
+      children: t
+    }
+  );
+}
+export {
+  i as Tabs,
+  i as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type { TabsProps } from \"./Tabs.types\";\r\nimport \"./Tabs.css\";\r\n\r\n/**\r\n * Tabs - Tab navigation container component for the goo-ds design system\r\n *\r\n * Provides consistent tab navigation container.\r\n * Designed to contain TabItem components.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Tabs>\r\n *   <TabItem selected>Overview</TabItem>\r\n *   <TabItem>Details</TabItem>\r\n *   <TabItem>Settings</TabItem>\r\n * </Tabs>\r\n * ```\r\n */\r\nexport function Tabs({\r\n  children,\r\n  className = \"\",\r\n  ...props\r\n}: TabsProps) {\r\n  return (\r\n    <div\r\n      className={`gds-tabs ${className}`.trim()}\r\n      role=\"tablist\"\r\n      data-component=\"Tabs\"\r\n      {...props}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Tabs;\r\n"],"names":["Tabs","children","className","props","jsx"],"mappings":";;AAmBO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAc;AACZ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,YAAYF,CAAS,GAAG,KAAA;AAAA,MACnC,MAAK;AAAA,MACL,kBAAe;AAAA,MACd,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/index.js

@@ -0,0 +1,32 @@
+import { CoreText as t } from "./components/CoreText/CoreText.js";
+import { Spacer as p } from "./components/Spacer/Spacer.js";
+/* empty css                                 */
+import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
+import { Button as b } from "./components/Button/Button.js";
+import { Cell as i } from "./components/Cell/Cell.js";
+import { TableRow as d } from "./components/TableRow/TableRow.js";
+import { Table as S } from "./components/Table/Table.js";
+import { SidebarItem as C } from "./components/SidebarItem/SidebarItem.js";
+import { Sidebar as k } from "./components/Sidebar/Sidebar.js";
+import { Divider as g } from "./components/Divider/Divider.js";
+import { Codeblock as v } from "./components/Codeblock/Codeblock.js";
+import { InputImage as B } from "./components/InputImage/InputImage.js";
+import { TabItem as R } from "./components/TabItem/TabItem.js";
+import { Tabs as j } from "./components/Tabs/Tabs.js";
+export {
+  b as Button,
+  i as Cell,
+  v as Codeblock,
+  t as CoreText,
+  g as Divider,
+  B as InputImage,
+  k as Sidebar,
+  C as SidebarItem,
+  f as Skeleton,
+  p as Spacer,
+  R as TabItem,
+  S as Table,
+  d as TableRow,
+  j as Tabs
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/styles.css

@@ -0,0 +1,17 @@
+/* Design System CSS Entry Point - Distribution Version */
+/* Import order is fixed per Constitution and Scaffold */
+
+/* 1. Fonts (must load first) */
+@import "./styles/fonts.css";
+
+/* 2. Base token layers */
+@import "./styles/global-tokens.css";
+@import "./styles/semantic-tokens.css";
+@import "./styles/number-tokens.css";
+@import "./styles/typography-tokens.css";
+
+/* 3. Figma styles (text styles, gradients, shadows) */
+@import "./styles/style-tokens.css";
+
+/* 4. Theme layer (component tokens via alias) */
+@import "./styles/component-tokens.current.css";

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,28 +1,24 @@
 {
   "name": "@oscarrf2/goo-ds",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./styles.css": "./src/styles.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.css",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/App.tsx",
-    "!src/App.css",
-    "!src/main.tsx",
-    "!src/assets",
-    "README.md"
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
   ],
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -39,6 +35,7 @@
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
+    "glob": "^13.0.0",
     "globals": "^16.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^26.1.0",
@@ -51,7 +48,10 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "pnpm run build:types && pnpm run build:js && pnpm run build:css",
+    "build:types": "tsc --project tsconfig.build.json",
+    "build:js": "vite build",
+    "build:css": "node scripts/copy-styles.js",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",

package/src/components/Button/Button.tsx

@@ -1,82 +0,0 @@
-import type { ButtonProps } from "./Button.types";
-import "./Button.css";
-
-/**
- * Button - Interactive button component for the goo-ds design system
- *
- * Provides consistent button styles with multiple variants, sizes, and states.
- * Supports icons, disabled state, and all standard button interactions.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <Button>Click me</Button>
- * <Button variant="secondary" size="small">Small button</Button>
- * <Button variant="destructive" disabled>Disabled</Button>
- * <Button iconLeft={<PlusIcon />}>With icon</Button>
- * ```
- */
-export function Button({
-  variant = "primary",
-  size = "medium",
-  iconLeft,
-  iconRight,
-  disabled = false,
-  children,
-  className = "",
-  type = "button",
-  ...props
-}: ButtonProps) {
-  const hasIcons = iconLeft || iconRight;
-  const isIconOnly = hasIcons && !children;
-
-  // Build CSS custom properties for the button variant
-  const buttonVars = {
-    "--btn-background": `var(--button-${variant}-background-default)`,
-    "--btn-background-hover": `var(--button-${variant}-background-hover, var(--button-${variant}-background-default))`,
-    "--btn-background-pressed": `var(--button-${variant}-background-pressed, var(--button-${variant}-background-default))`,
-    "--btn-background-disabled": `var(--button-${variant}-background-disabled, var(--button-${variant}-background-default))`,
-    "--btn-text": `var(--button-${variant}-text-default)`,
-    "--btn-text-disabled": `var(--button-${variant}-text-disabled, var(--button-${variant}-text-default))`,
-    "--btn-icon": `var(--button-${variant}-icon-default)`,
-    "--btn-icon-disabled": `var(--button-${variant}-icon-disabled, var(--button-${variant}-icon-default))`,
-    "--btn-stroke": `var(--button-${variant}-stroke-default, transparent)`,
-    "--btn-stroke-hover": `var(--button-${variant}-stroke-hover, var(--button-${variant}-stroke-default, transparent))`,
-    "--btn-stroke-disabled": `var(--button-${variant}-stroke-disabled, var(--button-${variant}-stroke-default, transparent))`,
-  } as React.CSSProperties;
-
-  // Size-dependent layout tokens
-  const buttonType = isIconOnly ? "icon" : "cta";
-  const sizeKey = size === "extraSmall" ? "extraSmall" : size;
-
-  const layoutVars = {
-    "--btn-gap": `var(--button-${sizeKey}-${buttonType}-gap)`,
-    "--btn-padding-v": `var(--button-${sizeKey}-${buttonType}-paddingVertical)`,
-    "--btn-padding-h": `var(--button-${sizeKey}-${buttonType}-paddingHorizontal)`,
-    "--btn-min-height": `var(--button-${sizeKey}-${buttonType}-minHeight)`,
-    "--btn-radius": `var(--button-${sizeKey}-${buttonType}-radius)`,
-    "--btn-stroke-width": `var(--button-${sizeKey}-${buttonType}-strokeWidth)`,
-    "--btn-min-width": isIconOnly ? `var(--button-${sizeKey}-${buttonType}-minWidth)` : "auto",
-    "--btn-font-size": `var(--font-size-${size === "large" ? "md" : size === "medium" ? "sm" : "xs"})`,
-    "--btn-line-height": `var(--font-lineHeight-${size === "large" ? "md" : size === "medium" ? "sm" : "xs"})`,
-  } as React.CSSProperties;
-
-  return (
-    <button
-      type={type}
-      disabled={disabled}
-      className={`gds-button gds-button-${variant} gds-button-${size} ${isIconOnly ? "gds-button-icon-only" : ""} ${className}`.trim()}
-      style={{ ...buttonVars, ...layoutVars }}
-      data-component="Button"
-      data-variant={variant}
-      data-size={size}
-      {...props}
-    >
-      {iconLeft && <span className="gds-button-icon gds-button-icon-left">{iconLeft}</span>}
-      {children && <span className="gds-button-text">{children}</span>}
-      {iconRight && <span className="gds-button-icon gds-button-icon-right">{iconRight}</span>}
-    </button>
-  );
-}
-
-export default Button;

package/src/components/Button/Button.types.ts

@@ -1,62 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * Button component props
- * Provides interactive buttons using design system tokens
- */
-
-export type ButtonVariant =
-  | "primary"
-  | "secondary"
-  | "destructive"
-  | "outline"
-  | "ghost"
-  | "link";
-
-export type ButtonSize = "extraSmall" | "small" | "medium" | "large";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The visual style variant of the button
-   * @default "primary"
-   */
-  variant?: ButtonVariant;
-
-  /**
-   * The size of the button
-   * @default "medium"
-   */
-  size?: ButtonSize;
-
-  /**
-   * Icon to display before the text
-   */
-  iconLeft?: ReactNode;
-
-  /**
-   * Icon to display after the text
-   */
-  iconRight?: ReactNode;
-
-  /**
-   * Whether the button is disabled
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Button content (text or other elements)
-   */
-  children?: ReactNode;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * Button type attribute
-   * @default "button"
-   */
-  type?: "button" | "submit" | "reset";
-}

package/src/components/Button/index.ts

@@ -1,3 +0,0 @@
-export { Button } from "./Button";
-export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.types";
-export { default } from "./Button";

package/src/components/Cell/Cell.tsx

@@ -1,42 +0,0 @@
-import type { CellProps } from "./Cell.types";
-import "./Cell.css";
-
-/**
- * Cell - Table cell component for the goo-ds design system
- *
- * Provides consistent table cell layout with alignment and width presets.
- * Designed to be used within table structures.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <Cell type="header">Name</Cell>
- * <Cell>John Doe</Cell>
- * <Cell alignment="right" width="sm">$100</Cell>
- * ```
- */
-export function Cell({
-  type = "body",
-  alignment = "left",
-  width = "md",
-  children,
-  className = "",
-  ...props
-}: CellProps) {
-  const Tag = type === "header" ? "th" : "td";
-  
-  return (
-    <Tag
-      className={`gds-cell gds-cell-${type} gds-cell-align-${alignment} gds-cell-width-${width} ${className}`.trim()}
-      data-component="Cell"
-      data-type={type}
-      data-alignment={alignment}
-      data-width={width}
-      {...props}
-    >
-      {children}
-    </Tag>
-  );
-}
-
-export default Cell;