@oscarrf2/goo-ds 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,74 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1] - 2026-01-18
+
+### Fixed
+
+- **Build Configuration**: Package now exports compiled JavaScript instead of TypeScript source files
+- **TypeScript Definitions**: All `.d.ts` files are now properly generated and included
+- **CSS Assets**: All token CSS files and component styles are now correctly bundled
+- **InputImage Component**: Fixed CoreText prop usage (changed from `variant/size/weight` to `style`)
+
+### Changed
+
+- **Package Exports**: Now exports compiled `dist/` folder instead of `src/` files
+- **Build Process**: Split into three steps (types, JS compilation, CSS copying)
+- **Package Size**: 30.1 kB (was 21.4 kB due to proper source maps inclusion)
+
+### Notes
+
+- This version fixes the "Missing module type" error when consuming the package in Next.js/Vite projects
+- Consumers can now properly import and use all components without TypeScript compilation errors
+
+## [0.1.0] - 2026-01-18
+
+### Deprecated
+
+⚠️ **This version has critical issues and should not be used.** Please upgrade to 0.1.1 or higher.
+
+### Added
+
+**Components:**
+- Button - Versatile button component with variants (primary, secondary, tertiary, ghost) and sizes (small, medium, large)
+- CoreText - Typography component with text styles from design tokens
+- Spacer - Layout spacing component with token-driven sizes
+- Divider - Horizontal/vertical divider component
+- Sidebar - Navigation sidebar component
+- SidebarItem - Individual sidebar navigation items
+- Skeleton - Loading skeleton component with animation
+- Table - Table container component
+- TableRow - Table row component
+- Cell - Table cell component with alignment and width options
+- Tabs - Tab navigation component
+- TabItem - Individual tab items
+- Codeblock - Code display component with syntax highlighting
+- InputImage - Image input component with drag-and-drop, multiple states, and comparison slider
+
+**Token System:**
+- Complete token architecture (global, semantic, number, typography, component, style tokens)
+- Token-first design approach (no hardcoded visual values)
+- Theme-ready component tokens for future light/dark mode support
+- CSS variable-based styling
+
+**Documentation:**
+- Full documentation site with interactive examples
+- Component API documentation
+- Usage examples and best practices
+
+### Notes
+
+- **Pre-1.0 Release**: This is an early release. APIs may change in future versions.
+- **Token-First Architecture**: All visual styling comes from design tokens exported from Figma.
+- **React 19+ Required**: This package requires React 19 or higher.
+- **TypeScript Support**: Full TypeScript definitions included.
+
+### Known Limitations
+
+- Test coverage is in progress (components are functional, tests are being refined)
+- Some components may have incomplete interaction callbacks
+- Documentation for advanced use cases is being expanded

package/dist/assets/index.css

@@ -0,0 +1 @@
+@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.skeleton-pulse{animation:skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(prefers-reduced-motion:reduce){.skeleton-pulse{animation:none}}.gds-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);padding:var(--btn-padding-v) var(--btn-padding-h);min-height:var(--btn-min-height);border-radius:var(--btn-radius);border:var(--btn-stroke-width) solid var(--btn-stroke);background-color:var(--btn-background);color:var(--btn-text);font-family:var(--coreText-family-primary);font-size:var(--btn-font-size);font-weight:var(--font-weight-medium);line-height:var(--btn-line-height);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;text-decoration:none}.gds-button-icon-only{min-width:var(--btn-min-width)}.gds-button:hover:not(:disabled){background-color:var(--btn-background-hover);border-color:var(--btn-stroke-hover)}.gds-button:active:not(:disabled){background-color:var(--btn-background-pressed)}.gds-button:disabled{background-color:var(--btn-background-disabled);border-color:var(--btn-stroke-disabled);color:var(--btn-text-disabled);cursor:not-allowed;opacity:.6}.gds-button:disabled .gds-button-icon{color:var(--btn-icon-disabled)}.gds-button:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-button-text{white-space:nowrap}.gds-button-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--btn-icon)}.gds-button-link{background-color:transparent;border-color:transparent;padding-left:0;padding-right:0;text-decoration:underline}.gds-button-link:hover:not(:disabled){background-color:transparent;border-color:transparent;text-decoration:none}.gds-button-ghost{background-color:transparent;border-color:transparent}.gds-button-ghost:hover:not(:disabled){border-color:transparent}.gds-button-ghost:active:not(:disabled){border-color:transparent}.gds-button-ghost:disabled{border-color:transparent}@media(prefers-reduced-motion:reduce){.gds-button{transition:none}}.gds-cell{box-sizing:border-box;padding:var(--table-cell-paddingVertical) var(--table-cell-paddingHorizontal);vertical-align:top;font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--font-lineHeight-sm)}.gds-cell-header{color:var(--coreText-text-secondary-default)}.gds-cell-body{color:var(--coreText-text-primary-default)}.gds-cell-align-left{text-align:left}.gds-cell-align-center{text-align:center}.gds-cell-align-right{text-align:right}.gds-cell-width-xs{width:var(--table-cell-width-xs)}.gds-cell-width-sm{width:var(--table-cell-width-sm)}.gds-cell-width-md{width:var(--table-cell-width-md)}.gds-cell-width-lg{width:var(--table-cell-width-lg)}.gds-cell-width-xl{width:var(--table-cell-width-xl)}.gds-cell-width-fill{width:auto}.gds-table-row{box-sizing:border-box;transition:background-color .2s ease}.gds-table-row-divider td,.gds-table-row-divider th{border-bottom:var(--table-row-medium-strokeWidth) solid var(--table-row-stroke-divider)}.gds-table-row-interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.gds-table-row-interactive:hover:not(.gds-table-row-disabled):not(.gds-table-row-selected){background-color:var(--table-row-background-hover)}.gds-table-row-interactive:active:not(.gds-table-row-disabled):not(.gds-table-row-selected){background-color:var(--table-row-background-pressed)}.gds-table-row-interactive:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:-2px}.gds-table-row-selected{background-color:var(--table-row-background-active)}.gds-table-row-disabled{background-color:var(--table-row-background-disabled);cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.gds-table-row{transition:none}}.gds-table{width:100%;background-color:var(--table-background-default);border:var(--table-medium-strokeWidth) solid var(--table-stroke-default);border-radius:var(--radius-200);overflow:hidden;box-sizing:border-box;border-collapse:separate;border-spacing:0;table-layout:auto}.gds-sidebar-item{display:flex;align-items:center;gap:var(--size-8);padding:var(--sidebar-item-medium-paddingVertical) var(--sidebar-item-medium-paddingHorizontal);border-radius:var(--sidebar-item-medium-radius);font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--font-lineHeight-sm);color:var(--sidebar-item-text-default);transition:all .2s ease;box-sizing:border-box;position:relative;width:100%}.gds-sidebar-item-interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.gds-sidebar-item-interactive:hover:not(.gds-sidebar-item-active){background-color:var(--sidebar-item-background-hover)}.gds-sidebar-item-interactive:active:not(.gds-sidebar-item-active){background-color:var(--sidebar-item-background-pressed)}.gds-sidebar-item-interactive:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-sidebar-item-active{background-color:var(--sidebar-item-background-active);color:var(--sidebar-item-text-active);font-weight:var(--font-weight-medium)}.gds-sidebar-item-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.gds-sidebar-item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.gds-sidebar-item{transition:none}}.gds-sidebar{display:flex;align-items:stretch;position:relative;background-color:var(--sidebar-background-default);box-sizing:border-box}.gds-sidebar-content{display:flex;flex-direction:column;align-items:flex-start;min-width:var(--sidebar-medium-minWidth);width:var(--sidebar-medium-minWidth);padding-top:var(--sidebar-medium-paddingTop);padding-bottom:var(--sidebar-medium-paddingBottom);padding-left:var(--sidebar-medium-paddingHorizontal);padding-right:var(--sidebar-medium-paddingHorizontal);flex-shrink:0;box-sizing:border-box}.gds-sidebar-divider{width:1px;align-self:stretch;flex-shrink:0;background-color:var(--divider-background-default)}.gds-divider{display:flex;position:relative;box-sizing:border-box}.gds-divider-horizontal{flex-direction:column;align-items:flex-start;width:100%}.gds-divider-horizontal .gds-divider-line{width:100%;height:1px;background-color:var(--divider-background-default);flex-shrink:0}.gds-divider-vertical{align-items:center;align-self:stretch;height:100%}.gds-divider-vertical .gds-divider-line{width:1px;height:100%;background-color:var(--divider-background-default);flex-shrink:0}.gds-codeblock{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--codeblock-medium-gap);padding:var(--codeblock-medium-paddingVertical) var(--codeblock-medium-paddingHorizontal);background-color:var(--codeblock-background-default);border:var(--codeblock-medium-strokeWidth) solid var(--codeblock-stroke-default);border-radius:var(--codeblock-medium-radius);overflow:clip;box-sizing:border-box;width:100%}.gds-codeblock-content{margin:0;padding:0;width:100%;overflow-x:auto;font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--font-lineHeight-sm);color:var(--codeblock-text-default);white-space:pre;flex-shrink:0}.gds-codeblock-content code{font-family:inherit;font-size:inherit;background:none;padding:0;border:none}.gds-codeblock-copy-button{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;gap:var(--button-extraSmall-cta-gap);min-height:24px;padding:var(--button-extraSmall-cta-paddingVertical) var(--button-extraSmall-cta-paddingHorizontal);border-radius:var(--button-extraSmall-cta-radius);border:none;background-color:transparent;color:var(--button-ghost-text-default);cursor:pointer;transition:background-color .2s ease;box-sizing:border-box;font-family:var(--coreText-family-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--font-lineHeight-xs)}.gds-codeblock-copy-button:hover{background-color:var(--button-ghost-background-hover)}.gds-codeblock-copy-button:active{background-color:var(--button-ghost-background-pressed)}.gds-codeblock-copy-button:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-codeblock-copy-text{flex-shrink:0}@media(prefers-reduced-motion:reduce){.gds-codeblock-copy-button{transition:none}}.gds-input-image{position:relative;width:284px;max-height:var(--image-medium-maxHeight-default);border-radius:var(--image-medium-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.gds-input-image-default{background:var(--input-background-default);border-color:var(--input-stroke-default);border-style:dashed;gap:var(--image-medium-gap);padding:var(--image-medium-paddingVertical-default) var(--image-medium-paddingHorizontal-default);height:var(--image-medium-maxHeight-default)}.gds-input-image-default .gds-input-image-label{color:var(--input-text-default)}.gds-input-image-default .gds-input-image-separator{color:var(--input-text-active);font-size:12px;line-height:var(--font-lineHeight-xs);text-overflow:ellipsis;overflow:hidden}.gds-input-image-hover{background:var(--input-background-hover);border-color:var(--input-stroke-default);border-style:dashed;gap:var(--image-medium-gap);padding:var(--image-medium-paddingVertical-default) var(--image-medium-paddingHorizontal-default);height:var(--image-medium-maxHeight-default)}.gds-input-image-hover .gds-input-image-label{color:var(--input-text-default)}.gds-input-image-hover .gds-input-image-separator{color:var(--input-text-active);font-size:12px;line-height:var(--font-lineHeight-xs);text-overflow:ellipsis;overflow:hidden}.gds-input-image-filled{background:transparent;border-color:var(--input-stroke-default);border-style:solid;gap:0;padding:0;height:var(--image-medium-maxHeight-default)}.gds-input-image-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--image-medium-radius);pointer-events:none;max-width:none}.gds-input-image-remove-button{position:absolute;top:var(--image-medium-paddingVertical-filled);right:var(--image-medium-paddingHorizontal-filled);z-index:1}.gds-input-image-loading{background:var(--image-background-loading);border-color:var(--input-stroke-default);border-style:dashed;height:var(--image-medium-maxHeight-default)}.gds-input-image-generating{background:transparent;border-color:var(--input-stroke-default);border-style:solid;gap:0;height:var(--image-medium-maxHeight-generated);max-height:var(--image-medium-maxHeight-generated);overflow:hidden}.gds-input-image-blur-container{flex:1 0 0;width:100%;min-height:1px;min-width:1px;position:relative;filter:blur(20px)}.gds-input-image-blur-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;max-width:none}.gds-input-image-generated{background:transparent;border-color:var(--input-stroke-default);border-style:solid;height:var(--image-medium-maxHeight-generated);max-height:var(--image-medium-maxHeight-generated);align-items:center;overflow:hidden}.gds-input-image-result{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--image-medium-radius);pointer-events:none;max-width:none}.gds-input-image-comparison-slider{position:absolute;display:flex;width:32px;height:100%;top:0;left:50%;transform:translate(-50%);align-items:center;justify-content:center;cursor:ew-resize;z-index:2}.gds-input-image-slider-line{position:absolute;width:1px;height:100%;background:var(--color-background-neutral-default);box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026;pointer-events:none}.gds-input-image-slider-button{position:relative;z-index:1;pointer-events:auto}.gds-input-image-disabled{background:var(--input-background-disabled);border-color:var(--input-stroke-default);border-style:solid;gap:var(--image-medium-gap);padding:var(--image-medium-paddingVertical-default) var(--image-medium-paddingHorizontal-default);height:var(--image-medium-maxHeight-default)}.gds-input-image-disabled .gds-input-image-label{color:var(--input-text-disabled)}.gds-input-image-disabled .gds-input-image-separator{color:var(--input-text-active);font-size:12px;line-height:var(--font-lineHeight-xs);text-overflow:ellipsis;overflow:hidden}.gds-input-image-button{flex-shrink:0}.gds-tab-item{display:flex;align-items:center;justify-content:center;padding-top:var(--tab-item-medium-paddingTop);padding-bottom:var(--tab-item-medium-paddingBottom);padding-left:var(--tab-item-medium-paddingHorizontal);padding-right:var(--tab-item-medium-paddingHorizontal);border:none;border-bottom:var(--tab-item-medium-strokeWidth) solid;background:none;cursor:pointer;transition:all .2s ease;box-sizing:border-box;position:relative;font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);line-height:var(--font-lineHeight-sm)}.gds-tab-item-unselected{border-bottom-color:var(--tab-item-stroke-unselected);color:var(--tab-item-text-unselected);font-weight:var(--font-weight-regular)}.gds-tab-item-unselected:hover:not(.gds-tab-item-disabled){color:var(--tab-item-text-selected)}.gds-tab-item-selected{border-bottom-color:var(--tab-item-stroke-selected);color:var(--tab-item-text-selected);font-weight:var(--font-weight-medium)}.gds-tab-item-disabled{opacity:.5;cursor:not-allowed}.gds-tab-item:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-tab-item-text{flex-shrink:0;white-space:nowrap}@media(prefers-reduced-motion:reduce){.gds-tab-item{transition:none}}.gds-tabs{display:flex;align-items:flex-start;position:relative;box-sizing:border-box}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,20 @@
+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 declare function Button({ variant, size, iconLeft, iconRight, disabled, children, className, type, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,SAAc,EACd,IAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAmDb;AAED,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.js

@@ -0,0 +1,60 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+/* empty css           */
+function h({
+  variant: t = "primary",
+  size: n = "medium",
+  iconLeft: d,
+  iconRight: u,
+  disabled: r = !1,
+  children: a,
+  className: l = "",
+  type: $ = "button",
+  ...c
+}) {
+  const e = (d || u) && !a, g = {
+    "--btn-background": `var(--button-${t}-background-default)`,
+    "--btn-background-hover": `var(--button-${t}-background-hover, var(--button-${t}-background-default))`,
+    "--btn-background-pressed": `var(--button-${t}-background-pressed, var(--button-${t}-background-default))`,
+    "--btn-background-disabled": `var(--button-${t}-background-disabled, var(--button-${t}-background-default))`,
+    "--btn-text": `var(--button-${t}-text-default)`,
+    "--btn-text-disabled": `var(--button-${t}-text-disabled, var(--button-${t}-text-default))`,
+    "--btn-icon": `var(--button-${t}-icon-default)`,
+    "--btn-icon-disabled": `var(--button-${t}-icon-disabled, var(--button-${t}-icon-default))`,
+    "--btn-stroke": `var(--button-${t}-stroke-default, transparent)`,
+    "--btn-stroke-hover": `var(--button-${t}-stroke-hover, var(--button-${t}-stroke-default, transparent))`,
+    "--btn-stroke-disabled": `var(--button-${t}-stroke-disabled, var(--button-${t}-stroke-default, transparent))`
+  }, o = e ? "icon" : "cta", b = n === "extraSmall" ? "extraSmall" : n, m = {
+    "--btn-gap": `var(--button-${b}-${o}-gap)`,
+    "--btn-padding-v": `var(--button-${b}-${o}-paddingVertical)`,
+    "--btn-padding-h": `var(--button-${b}-${o}-paddingHorizontal)`,
+    "--btn-min-height": `var(--button-${b}-${o}-minHeight)`,
+    "--btn-radius": `var(--button-${b}-${o}-radius)`,
+    "--btn-stroke-width": `var(--button-${b}-${o}-strokeWidth)`,
+    "--btn-min-width": e ? `var(--button-${b}-${o}-minWidth)` : "auto",
+    "--btn-font-size": `var(--font-size-${n === "large" ? "md" : n === "medium" ? "sm" : "xs"})`,
+    "--btn-line-height": `var(--font-lineHeight-${n === "large" ? "md" : n === "medium" ? "sm" : "xs"})`
+  };
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: $,
+      disabled: r,
+      className: `gds-button gds-button-${t} gds-button-${n} ${e ? "gds-button-icon-only" : ""} ${l}`.trim(),
+      style: { ...g, ...m },
+      "data-component": "Button",
+      "data-variant": t,
+      "data-size": n,
+      ...c,
+      children: [
+        d && /* @__PURE__ */ s("span", { className: "gds-button-icon gds-button-icon-left", children: d }),
+        a && /* @__PURE__ */ s("span", { className: "gds-button-text", children: a }),
+        u && /* @__PURE__ */ s("span", { className: "gds-button-icon gds-button-icon-right", children: u })
+      ]
+    }
+  );
+}
+export {
+  h as Button,
+  h as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from \"./Button.types\";\r\nimport \"./Button.css\";\r\n\r\n/**\r\n * Button - Interactive button component for the goo-ds design system\r\n *\r\n * Provides consistent button styles with multiple variants, sizes, and states.\r\n * Supports icons, disabled state, and all standard button interactions.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Button>Click me</Button>\r\n * <Button variant=\"secondary\" size=\"small\">Small button</Button>\r\n * <Button variant=\"destructive\" disabled>Disabled</Button>\r\n * <Button iconLeft={<PlusIcon />}>With icon</Button>\r\n * ```\r\n */\r\nexport function Button({\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  iconLeft,\r\n  iconRight,\r\n  disabled = false,\r\n  children,\r\n  className = \"\",\r\n  type = \"button\",\r\n  ...props\r\n}: ButtonProps) {\r\n  const hasIcons = iconLeft || iconRight;\r\n  const isIconOnly = hasIcons && !children;\r\n\r\n  // Build CSS custom properties for the button variant\r\n  const buttonVars = {\r\n    \"--btn-background\": `var(--button-${variant}-background-default)`,\r\n    \"--btn-background-hover\": `var(--button-${variant}-background-hover, var(--button-${variant}-background-default))`,\r\n    \"--btn-background-pressed\": `var(--button-${variant}-background-pressed, var(--button-${variant}-background-default))`,\r\n    \"--btn-background-disabled\": `var(--button-${variant}-background-disabled, var(--button-${variant}-background-default))`,\r\n    \"--btn-text\": `var(--button-${variant}-text-default)`,\r\n    \"--btn-text-disabled\": `var(--button-${variant}-text-disabled, var(--button-${variant}-text-default))`,\r\n    \"--btn-icon\": `var(--button-${variant}-icon-default)`,\r\n    \"--btn-icon-disabled\": `var(--button-${variant}-icon-disabled, var(--button-${variant}-icon-default))`,\r\n    \"--btn-stroke\": `var(--button-${variant}-stroke-default, transparent)`,\r\n    \"--btn-stroke-hover\": `var(--button-${variant}-stroke-hover, var(--button-${variant}-stroke-default, transparent))`,\r\n    \"--btn-stroke-disabled\": `var(--button-${variant}-stroke-disabled, var(--button-${variant}-stroke-default, transparent))`,\r\n  } as React.CSSProperties;\r\n\r\n  // Size-dependent layout tokens\r\n  const buttonType = isIconOnly ? \"icon\" : \"cta\";\r\n  const sizeKey = size === \"extraSmall\" ? \"extraSmall\" : size;\r\n\r\n  const layoutVars = {\r\n    \"--btn-gap\": `var(--button-${sizeKey}-${buttonType}-gap)`,\r\n    \"--btn-padding-v\": `var(--button-${sizeKey}-${buttonType}-paddingVertical)`,\r\n    \"--btn-padding-h\": `var(--button-${sizeKey}-${buttonType}-paddingHorizontal)`,\r\n    \"--btn-min-height\": `var(--button-${sizeKey}-${buttonType}-minHeight)`,\r\n    \"--btn-radius\": `var(--button-${sizeKey}-${buttonType}-radius)`,\r\n    \"--btn-stroke-width\": `var(--button-${sizeKey}-${buttonType}-strokeWidth)`,\r\n    \"--btn-min-width\": isIconOnly ? `var(--button-${sizeKey}-${buttonType}-minWidth)` : \"auto\",\r\n    \"--btn-font-size\": `var(--font-size-${size === \"large\" ? \"md\" : size === \"medium\" ? \"sm\" : \"xs\"})`,\r\n    \"--btn-line-height\": `var(--font-lineHeight-${size === \"large\" ? \"md\" : size === \"medium\" ? \"sm\" : \"xs\"})`,\r\n  } as React.CSSProperties;\r\n\r\n  return (\r\n    <button\r\n      type={type}\r\n      disabled={disabled}\r\n      className={`gds-button gds-button-${variant} gds-button-${size} ${isIconOnly ? \"gds-button-icon-only\" : \"\"} ${className}`.trim()}\r\n      style={{ ...buttonVars, ...layoutVars }}\r\n      data-component=\"Button\"\r\n      data-variant={variant}\r\n      data-size={size}\r\n      {...props}\r\n    >\r\n      {iconLeft && <span className=\"gds-button-icon gds-button-icon-left\">{iconLeft}</span>}\r\n      {children && <span className=\"gds-button-text\">{children}</span>}\r\n      {iconRight && <span className=\"gds-button-icon gds-button-icon-right\">{iconRight}</span>}\r\n    </button>\r\n  );\r\n}\r\n\r\nexport default Button;\r\n"],"names":["Button","variant","size","iconLeft","iconRight","disabled","children","className","type","props","isIconOnly","buttonVars","buttonType","sizeKey","layoutVars","jsxs","jsx"],"mappings":";;AAkBO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AAEd,QAAMC,KADWP,KAAYC,MACE,CAACE,GAG1BK,IAAa;AAAA,IACjB,oBAAoB,gBAAgBV,CAAO;AAAA,IAC3C,0BAA0B,gBAAgBA,CAAO,mCAAmCA,CAAO;AAAA,IAC3F,4BAA4B,gBAAgBA,CAAO,qCAAqCA,CAAO;AAAA,IAC/F,6BAA6B,gBAAgBA,CAAO,sCAAsCA,CAAO;AAAA,IACjG,cAAc,gBAAgBA,CAAO;AAAA,IACrC,uBAAuB,gBAAgBA,CAAO,gCAAgCA,CAAO;AAAA,IACrF,cAAc,gBAAgBA,CAAO;AAAA,IACrC,uBAAuB,gBAAgBA,CAAO,gCAAgCA,CAAO;AAAA,IACrF,gBAAgB,gBAAgBA,CAAO;AAAA,IACvC,sBAAsB,gBAAgBA,CAAO,+BAA+BA,CAAO;AAAA,IACnF,yBAAyB,gBAAgBA,CAAO,kCAAkCA,CAAO;AAAA,EAAA,GAIrFW,IAAaF,IAAa,SAAS,OACnCG,IAAUX,MAAS,eAAe,eAAeA,GAEjDY,IAAa;AAAA,IACjB,aAAa,gBAAgBD,CAAO,IAAID,CAAU;AAAA,IAClD,mBAAmB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACxD,mBAAmB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACxD,oBAAoB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACzD,gBAAgB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACrD,sBAAsB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IAC3D,mBAAmBF,IAAa,gBAAgBG,CAAO,IAAID,CAAU,eAAe;AAAA,IACpF,mBAAmB,mBAAmBV,MAAS,UAAU,OAAOA,MAAS,WAAW,OAAO,IAAI;AAAA,IAC/F,qBAAqB,yBAAyBA,MAAS,UAAU,OAAOA,MAAS,WAAW,OAAO,IAAI;AAAA,EAAA;AAGzG,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,UAAAH;AAAA,MACA,WAAW,yBAAyBJ,CAAO,eAAeC,CAAI,IAAIQ,IAAa,yBAAyB,EAAE,IAAIH,CAAS,GAAG,KAAA;AAAA,MAC1H,OAAO,EAAE,GAAGI,GAAY,GAAGG,EAAA;AAAA,MAC3B,kBAAe;AAAA,MACf,gBAAcb;AAAA,MACd,aAAWC;AAAA,MACV,GAAGO;AAAA,MAEH,UAAA;AAAA,QAAAN,KAAY,gBAAAa,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAb,GAAS;AAAA,QAC7EG,KAAY,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAV,GAAS;AAAA,QACxDF,KAAa,gBAAAY,EAAC,QAAA,EAAK,WAAU,yCAAyC,UAAAZ,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF;"}

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,46 @@
+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";
+}
+//# sourceMappingURL=Button.types.d.ts.map

package/dist/components/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AAEH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC"}

package/{src/components/Button/index.ts → dist/components/Button/index.d.ts}

@@ -1,3 +1,4 @@
-export { Button } from "./Button";
-export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.types";
-export { default } from "./Button";
+export { Button } from "./Button";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.types";
+export { default } from "./Button";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Cell/Cell.d.ts

@@ -0,0 +1,19 @@
+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 declare function Cell({ type, alignment, width, children, className, ...props }: CellProps): import("react/jsx-runtime").JSX.Element;
+export default Cell;
+//# sourceMappingURL=Cell.d.ts.map

package/dist/components/Cell/Cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,YAAY,CAAC;AAEpB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAa,EACb,SAAkB,EAClB,KAAY,EACZ,QAAQ,EACR,SAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAeX;AAED,eAAe,IAAI,CAAC"}

package/dist/components/Cell/Cell.js

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+/* empty css         */
+function m({
+  type: a = "body",
+  alignment: l = "left",
+  width: t = "md",
+  children: d,
+  className: e = "",
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    a === "header" ? "th" : "td",
+    {
+      className: `gds-cell gds-cell-${a} gds-cell-align-${l} gds-cell-width-${t} ${e}`.trim(),
+      "data-component": "Cell",
+      "data-type": a,
+      "data-alignment": l,
+      "data-width": t,
+      ...o,
+      children: d
+    }
+  );
+}
+export {
+  m as Cell,
+  m as default
+};
+//# sourceMappingURL=Cell.js.map

package/dist/components/Cell/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import type { CellProps } from \"./Cell.types\";\r\nimport \"./Cell.css\";\r\n\r\n/**\r\n * Cell - Table cell component for the goo-ds design system\r\n *\r\n * Provides consistent table cell layout with alignment and width presets.\r\n * Designed to be used within table structures.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Cell type=\"header\">Name</Cell>\r\n * <Cell>John Doe</Cell>\r\n * <Cell alignment=\"right\" width=\"sm\">$100</Cell>\r\n * ```\r\n */\r\nexport function Cell({\r\n  type = \"body\",\r\n  alignment = \"left\",\r\n  width = \"md\",\r\n  children,\r\n  className = \"\",\r\n  ...props\r\n}: CellProps) {\r\n  const Tag = type === \"header\" ? \"th\" : \"td\";\r\n  \r\n  return (\r\n    <Tag\r\n      className={`gds-cell gds-cell-${type} gds-cell-align-${alignment} gds-cell-width-${width} ${className}`.trim()}\r\n      data-component=\"Cell\"\r\n      data-type={type}\r\n      data-alignment={alignment}\r\n      data-width={width}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </Tag>\r\n  );\r\n}\r\n\r\nexport default Cell;\r\n"],"names":["Cell","type","alignment","width","children","className","props","jsx"],"mappings":";;AAiBO,SAASA,EAAK;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAc;AAGZ,SACE,gBAAAC;AAAA,IAHUN,MAAS,WAAW,OAAO;AAAA,IAGpC;AAAA,MACC,WAAW,qBAAqBA,CAAI,mBAAmBC,CAAS,mBAAmBC,CAAK,IAAIE,CAAS,GAAG,KAAA;AAAA,MACxG,kBAAe;AAAA,MACf,aAAWJ;AAAA,MACX,kBAAgBC;AAAA,MAChB,cAAYC;AAAA,MACX,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Cell/Cell.types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+/**
+ * Cell component props
+ * Provides table cell layout using design system tokens
+ */
+export type CellType = "header" | "body";
+export type CellAlignment = "left" | "center" | "right";
+export type CellWidth = "xs" | "sm" | "md" | "lg" | "xl" | "fill";
+export interface CellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The type of cell (header or body)
+     * @default "body"
+     */
+    type?: CellType;
+    /**
+     * Horizontal alignment of cell content
+     * @default "left"
+     */
+    alignment?: CellAlignment;
+    /**
+     * Width preset for the cell
+     * @default "md"
+     */
+    width?: CellWidth;
+    /**
+     * Cell content
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+//# sourceMappingURL=Cell.types.d.ts.map

package/dist/components/Cell/Cell.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.types.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AAEH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/{src/components/Cell/index.ts → dist/components/Cell/index.d.ts}

@@ -1,3 +1,4 @@
-export { Cell } from "./Cell";
-export type { CellProps, CellType, CellAlignment, CellWidth } from "./Cell.types";
-export { default } from "./Cell";
+export { Cell } from "./Cell";
+export type { CellProps, CellType, CellAlignment, CellWidth } from "./Cell.types";
+export { default } from "./Cell";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Cell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/Codeblock/Codeblock.d.ts

@@ -0,0 +1,25 @@
+import type { CodeblockProps } from "./Codeblock.types";
+import "./Codeblock.css";
+/**
+ * Codeblock - Code display component for the goo-ds design system
+ *
+ * Provides consistent code block display with copy functionality.
+ * Token-first per Constitution (no hardcoded values).
+ *
+ * @example
+ * ```tsx
+ * <Codeblock>
+ *   const greeting = "Hello, world!";
+ *   console.log(greeting);
+ * </Codeblock>
+ *
+ * <Codeblock showCopy={false}>
+ *   function example() {
+ *     return true;
+ *   }
+ * </Codeblock>
+ * ```
+ */
+export declare function Codeblock({ children, showCopy, copyLabel, copiedLabel, onCodeCopy, className, ...props }: CodeblockProps): import("react/jsx-runtime").JSX.Element;
+export default Codeblock;
+//# sourceMappingURL=Codeblock.d.ts.map

package/dist/components/Codeblock/Codeblock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Codeblock.d.ts","sourceRoot":"","sources":["../../../src/components/Codeblock/Codeblock.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAe,EACf,SAAkB,EAClB,WAAuB,EACvB,UAAU,EACV,SAAc,EACd,GAAG,KAAK,EACT,EAAE,cAAc,2CAmDhB;AAED,eAAe,SAAS,CAAC"}

package/dist/components/Codeblock/Codeblock.js

@@ -0,0 +1,51 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as b, useRef as k } from "react";
+/* empty css              */
+function C({
+  children: l,
+  showCopy: o = !0,
+  copyLabel: c = "Copy",
+  copiedLabel: r = "Copied!",
+  onCodeCopy: n,
+  className: i = "",
+  ...u
+}) {
+  const [s, a] = b(!1), t = k(null), p = async () => {
+    if (!t.current) return;
+    const d = t.current.textContent || "";
+    try {
+      await navigator.clipboard.writeText(d), a(!0), n && n(d), setTimeout(() => {
+        a(!1);
+      }, 2e3);
+    } catch (m) {
+      console.error("Failed to copy code:", m);
+    }
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: `gds-codeblock ${i}`.trim(),
+      "data-component": "Codeblock",
+      "data-show-copy": o,
+      ...u,
+      children: [
+        /* @__PURE__ */ e("pre", { ref: t, className: "gds-codeblock-content", children: /* @__PURE__ */ e("code", { children: l }) }),
+        o && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "gds-codeblock-copy-button",
+            onClick: p,
+            "aria-label": s ? r : c,
+            children: /* @__PURE__ */ e("span", { className: "gds-codeblock-copy-text", children: s ? r : c })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as Codeblock,
+  C as default
+};
+//# sourceMappingURL=Codeblock.js.map

package/dist/components/Codeblock/Codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Codeblock.js","sources":["../../../src/components/Codeblock/Codeblock.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState, useRef } from \"react\";\r\nimport type { CodeblockProps } from \"./Codeblock.types\";\r\nimport \"./Codeblock.css\";\r\n\r\n/**\r\n * Codeblock - Code display component for the goo-ds design system\r\n *\r\n * Provides consistent code block display with copy functionality.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Codeblock>\r\n *   const greeting = \"Hello, world!\";\r\n *   console.log(greeting);\r\n * </Codeblock>\r\n * \r\n * <Codeblock showCopy={false}>\r\n *   function example() {\r\n *     return true;\r\n *   }\r\n * </Codeblock>\r\n * ```\r\n */\r\nexport function Codeblock({\r\n  children,\r\n  showCopy = true,\r\n  copyLabel = \"Copy\",\r\n  copiedLabel = \"Copied!\",\r\n  onCodeCopy,\r\n  className = \"\",\r\n  ...props\r\n}: CodeblockProps) {\r\n  const [copied, setCopied] = useState(false);\r\n  const codeRef = useRef<HTMLPreElement>(null);\r\n\r\n  const handleCopy = async () => {\r\n    if (!codeRef.current) return;\r\n\r\n    const textContent = codeRef.current.textContent || \"\";\r\n\r\n    try {\r\n      await navigator.clipboard.writeText(textContent);\r\n      setCopied(true);\r\n      \r\n      if (onCodeCopy) {\r\n        onCodeCopy(textContent);\r\n      }\r\n\r\n      // Reset copied state after 2 seconds\r\n      setTimeout(() => {\r\n        setCopied(false);\r\n      }, 2000);\r\n    } catch (err) {\r\n      console.error(\"Failed to copy code:\", err);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`gds-codeblock ${className}`.trim()}\r\n      data-component=\"Codeblock\"\r\n      data-show-copy={showCopy}\r\n      {...props}\r\n    >\r\n      <pre ref={codeRef} className=\"gds-codeblock-content\">\r\n        <code>{children}</code>\r\n      </pre>\r\n      \r\n      {showCopy && (\r\n        <button\r\n          type=\"button\"\r\n          className=\"gds-codeblock-copy-button\"\r\n          onClick={handleCopy}\r\n          aria-label={copied ? copiedLabel : copyLabel}\r\n        >\r\n          <span className=\"gds-codeblock-copy-text\">\r\n            {copied ? copiedLabel : copyLabel}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Codeblock;\r\n"],"names":["Codeblock","children","showCopy","copyLabel","copiedLabel","onCodeCopy","className","props","copied","setCopied","useState","codeRef","useRef","handleCopy","textContent","err","jsxs","jsx"],"mappings":";;;AA0BO,SAASA,EAAU;AAAA,EACxB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAmB;AACjB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAUC,EAAuB,IAAI,GAErCC,IAAa,YAAY;AAC7B,QAAI,CAACF,EAAQ,QAAS;AAEtB,UAAMG,IAAcH,EAAQ,QAAQ,eAAe;AAEnD,QAAI;AACF,YAAM,UAAU,UAAU,UAAUG,CAAW,GAC/CL,EAAU,EAAI,GAEVJ,KACFA,EAAWS,CAAW,GAIxB,WAAW,MAAM;AACf,QAAAL,EAAU,EAAK;AAAA,MACjB,GAAG,GAAI;AAAA,IACT,SAASM,GAAK;AACZ,cAAQ,MAAM,wBAAwBA,CAAG;AAAA,IAC3C;AAAA,EACF;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBV,CAAS,GAAG,KAAA;AAAA,MACxC,kBAAe;AAAA,MACf,kBAAgBJ;AAAA,MACf,GAAGK;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKN,GAAS,WAAU,yBAC3B,UAAA,gBAAAM,EAAC,QAAA,EAAM,UAAAhB,GAAS,EAAA,CAClB;AAAA,QAECC,KACC,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAASJ;AAAA,YACT,cAAYL,IAASJ,IAAcD;AAAA,YAEnC,4BAAC,QAAA,EAAK,WAAU,2BACb,UAAAK,IAASJ,IAAcD,EAAA,CAC1B;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Codeblock/Codeblock.types.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+/**
+ * Codeblock component props
+ * Provides code display with copy functionality using design system tokens
+ */
+export interface CodeblockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Code content to display
+     */
+    children: ReactNode;
+    /**
+     * Whether to show the copy button
+     * @default true
+     */
+    showCopy?: boolean;
+    /**
+     * Custom copy button label
+     * @default "Copy"
+     */
+    copyLabel?: string;
+    /**
+     * Label shown after successful copy
+     * @default "Copied!"
+     */
+    copiedLabel?: string;
+    /**
+     * Callback when copy button is clicked
+     * Receives the text content of the codeblock
+     */
+    onCodeCopy?: (content: string) => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+//# sourceMappingURL=Codeblock.types.d.ts.map

package/dist/components/Codeblock/Codeblock.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Codeblock.types.d.ts","sourceRoot":"","sources":["../../../src/components/Codeblock/Codeblock.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AAEH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/{src/components/Codeblock/index.ts → dist/components/Codeblock/index.d.ts}

@@ -1,3 +1,4 @@
-export { Codeblock } from "./Codeblock";
-export type { CodeblockProps } from "./Codeblock.types";
-export { default } from "./Codeblock";
+export { Codeblock } from "./Codeblock";
+export type { CodeblockProps } from "./Codeblock.types";
+export { default } from "./Codeblock";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Codeblock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Codeblock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/CoreText/CoreText.d.ts

@@ -0,0 +1,17 @@
+import type { CoreTextProps } from "./CoreText.types";
+/**
+ * CoreText - Foundation typography component for the goo-ds design system
+ *
+ * Renders text with consistent typography styles defined in Figma.
+ * Styles are applied via CSS classes from style-tokens.css (token-first per Constitution).
+ *
+ * @example
+ * ```tsx
+ * <CoreText style="headline-lg-bold">Page Title</CoreText>
+ * <CoreText style="body-md-regular" align="center">Body text</CoreText>
+ * <CoreText style="link-md-medium" as="a" href="/page">Link text</CoreText>
+ * ```
+ */
+export declare function CoreText({ children, style, align, className, as: Component, }: CoreTextProps): import("react/jsx-runtime").JSX.Element;
+export default CoreText;
+//# sourceMappingURL=CoreText.d.ts.map

package/dist/components/CoreText/CoreText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreText.d.ts","sourceRoot":"","sources":["../../../src/components/CoreText/CoreText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAyB,EACzB,KAAc,EACd,SAAc,EACd,EAAE,EAAE,SAAe,GACpB,EAAE,aAAa,2CAmBf;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/CoreText/CoreText.js

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+function m({
+  children: e,
+  style: r = "body-md-regular",
+  align: t = "left",
+  className: a = "",
+  as: o = "p"
+}) {
+  const l = [r, t === "center" ? "text-center" : t === "right" ? "text-right" : "text-left", a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    o,
+    {
+      className: l,
+      style: {
+        color: "var(--coreText-text-primary-default)",
+        margin: 0
+      },
+      children: e
+    }
+  );
+}
+export {
+  m as CoreText,
+  m as default
+};
+//# sourceMappingURL=CoreText.js.map

package/dist/components/CoreText/CoreText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreText.js","sources":["../../../src/components/CoreText/CoreText.tsx"],"sourcesContent":["import type { CoreTextProps } from \"./CoreText.types\";\r\n\r\n/**\r\n * CoreText - Foundation typography component for the goo-ds design system\r\n *\r\n * Renders text with consistent typography styles defined in Figma.\r\n * Styles are applied via CSS classes from style-tokens.css (token-first per Constitution).\r\n *\r\n * @example\r\n * ```tsx\r\n * <CoreText style=\"headline-lg-bold\">Page Title</CoreText>\r\n * <CoreText style=\"body-md-regular\" align=\"center\">Body text</CoreText>\r\n * <CoreText style=\"link-md-medium\" as=\"a\" href=\"/page\">Link text</CoreText>\r\n * ```\r\n */\r\nexport function CoreText({\r\n  children,\r\n  style = \"body-md-regular\",\r\n  align = \"left\",\r\n  className = \"\",\r\n  as: Component = \"p\",\r\n}: CoreTextProps) {\r\n  // Alignment classes (structural utility per Constitution IV)\r\n  const alignmentClass =\r\n    align === \"center\" ? \"text-center\" : align === \"right\" ? \"text-right\" : \"text-left\";\r\n\r\n  // Combine style class from style-tokens.css with alignment and custom classes\r\n  const combinedClassName = [style, alignmentClass, className].filter(Boolean).join(\" \");\r\n\r\n  return (\r\n    <Component\r\n      className={combinedClassName}\r\n      style={{\r\n        color: \"var(--coreText-text-primary-default)\",\r\n        margin: 0,\r\n      }}\r\n    >\r\n      {children}\r\n    </Component>\r\n  );\r\n}\r\n\r\nexport default CoreText;\r\n"],"names":["CoreText","children","style","align","className","Component","combinedClassName","jsx"],"mappings":";AAeO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,IAAIC,IAAY;AAClB,GAAkB;AAMhB,QAAMC,IAAoB,CAACJ,GAHzBC,MAAU,WAAW,gBAAgBA,MAAU,UAAU,eAAe,aAGxBC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErF,SACE,gBAAAG;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/CoreText/CoreText.types.d.ts

@@ -0,0 +1,26 @@
+import type { ElementType, ReactNode } from "react";
+/**
+ * CoreText style variants matching Figma text styles
+ * These map directly to CSS classes in style-tokens.css
+ */
+export type CoreTextStyle = "headline-lg-bold" | "headline-md-bold" | "headline-sm-bold" | "headline-sm-medium" | "headline-sm-regular" | "headline-xs-bold" | "body-lg-bold" | "body-lg-medium" | "body-lg-regular" | "body-md-bold" | "body-md-medium" | "body-md-regular" | "body-sm-medium" | "body-sm-regular" | "body-xs-medium" | "body-xs-regular" | "label-lg-medium" | "label-lg-regular" | "label-md-medium" | "label-md-regular" | "link-md-medium" | "link-md-regular" | "link-sm-medium" | "link-sm-regular";
+/**
+ * Text alignment options matching Figma variants
+ */
+export type CoreTextAlign = "left" | "center" | "right";
+/**
+ * CoreText component props
+ */
+export interface CoreTextProps {
+    /** Text content to render */
+    children?: ReactNode;
+    /** Typography style variant (maps to CSS class from style-tokens.css) */
+    style?: CoreTextStyle;
+    /** Text alignment */
+    align?: CoreTextAlign;
+    /** Additional CSS class names */
+    className?: string;
+    /** Polymorphic element type (default: "p") */
+    as?: ElementType;
+}
+//# sourceMappingURL=CoreText.types.d.ts.map

package/dist/components/CoreText/CoreText.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreText.types.d.ts","sourceRoot":"","sources":["../../../src/components/CoreText/CoreText.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAErB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,qBAAqB,GACrB,kBAAkB,GAElB,cAAc,GACd,gBAAgB,GAChB,iBAAiB,GACjB,cAAc,GACd,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,iBAAiB,GAEjB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAElB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,iBAAiB,CAAC;AAEtB;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qBAAqB;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB"}

package/{src/components/CoreText/index.ts → dist/components/CoreText/index.d.ts}

@@ -1,2 +1,3 @@
-export { CoreText, default } from "./CoreText";
-export type { CoreTextProps, CoreTextStyle, CoreTextAlign } from "./CoreText.types";
+export { CoreText, default } from "./CoreText";
+export type { CoreTextProps, CoreTextStyle, CoreTextAlign } from "./CoreText.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CoreText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CoreText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}