@oscarrf2/goo-ds 0.1.0

package/src/components/Codeblock/Codeblock.css

@@ -0,0 +1,90 @@
+/**
+ * Codeblock component styles
+ * Token-driven code display styling for the goo-ds design system
+ */
+
+.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%;
+}
+
+/* Code content area */
+.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;
+}
+
+/* Copy button */
+.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 0.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;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .gds-codeblock-copy-button {
+    transition: none;
+  }
+}

package/src/components/Codeblock/Codeblock.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState, useRef } from "react";
+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 function Codeblock({
+  children,
+  showCopy = true,
+  copyLabel = "Copy",
+  copiedLabel = "Copied!",
+  onCodeCopy,
+  className = "",
+  ...props
+}: CodeblockProps) {
+  const [copied, setCopied] = useState(false);
+  const codeRef = useRef<HTMLPreElement>(null);
+
+  const handleCopy = async () => {
+    if (!codeRef.current) return;
+
+    const textContent = codeRef.current.textContent || "";
+
+    try {
+      await navigator.clipboard.writeText(textContent);
+      setCopied(true);
+      
+      if (onCodeCopy) {
+        onCodeCopy(textContent);
+      }
+
+      // Reset copied state after 2 seconds
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (err) {
+      console.error("Failed to copy code:", err);
+    }
+  };
+
+  return (
+    <div
+      className={`gds-codeblock ${className}`.trim()}
+      data-component="Codeblock"
+      data-show-copy={showCopy}
+      {...props}
+    >
+      <pre ref={codeRef} className="gds-codeblock-content">
+        <code>{children}</code>
+      </pre>
+      
+      {showCopy && (
+        <button
+          type="button"
+          className="gds-codeblock-copy-button"
+          onClick={handleCopy}
+          aria-label={copied ? copiedLabel : copyLabel}
+        >
+          <span className="gds-codeblock-copy-text">
+            {copied ? copiedLabel : copyLabel}
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default Codeblock;

package/src/components/Codeblock/Codeblock.types.ts

@@ -0,0 +1,42 @@
+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;
+}

package/src/components/Codeblock/index.ts

@@ -0,0 +1,3 @@
+export { Codeblock } from "./Codeblock";
+export type { CodeblockProps } from "./Codeblock.types";
+export { default } from "./Codeblock";

package/src/components/CoreText/CoreText.tsx

@@ -0,0 +1,43 @@
+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 function CoreText({
+  children,
+  style = "body-md-regular",
+  align = "left",
+  className = "",
+  as: Component = "p",
+}: CoreTextProps) {
+  // Alignment classes (structural utility per Constitution IV)
+  const alignmentClass =
+    align === "center" ? "text-center" : align === "right" ? "text-right" : "text-left";
+
+  // Combine style class from style-tokens.css with alignment and custom classes
+  const combinedClassName = [style, alignmentClass, className].filter(Boolean).join(" ");
+
+  return (
+    <Component
+      className={combinedClassName}
+      style={{
+        color: "var(--coreText-text-primary-default)",
+        margin: 0,
+      }}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export default CoreText;

package/src/components/CoreText/CoreText.types.ts

@@ -0,0 +1,56 @@
+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 =
+  // Headlines (use secondary font: Geist)
+  | "headline-lg-bold"
+  | "headline-md-bold"
+  | "headline-sm-bold"
+  | "headline-sm-medium"
+  | "headline-sm-regular"
+  | "headline-xs-bold"
+  // Body (use primary font: Inter)
+  | "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"
+  // Labels (use primary font: Inter)
+  | "label-lg-medium"
+  | "label-lg-regular"
+  | "label-md-medium"
+  | "label-md-regular"
+  // Links (use primary font: Inter, with underline)
+  | "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;
+}

package/src/components/CoreText/index.ts

@@ -0,0 +1,2 @@
+export { CoreText, default } from "./CoreText";
+export type { CoreTextProps, CoreTextStyle, CoreTextAlign } from "./CoreText.types";

package/src/components/Divider/Divider.css

@@ -0,0 +1,38 @@
+/**
+ * Divider component styles
+ * Token-driven divider styling for the goo-ds design system
+ */
+
+.gds-divider {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* Horizontal orientation */
+.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;
+}
+
+/* Vertical orientation */
+.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;
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,35 @@
+import type { DividerProps } from "./Divider.types";
+import "./Divider.css";
+
+/**
+ * Divider - Divider component for the goo-ds design system
+ *
+ * Provides consistent visual separator in horizontal or vertical orientation.
+ * Token-first per Constitution (no hardcoded values).
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+export function Divider({
+  orientation = "horizontal",
+  className = "",
+  ...props
+}: DividerProps) {
+  return (
+    <div
+      className={`gds-divider gds-divider-${orientation} ${className}`.trim()}
+      role="separator"
+      aria-orientation={orientation}
+      data-component="Divider"
+      data-orientation={orientation}
+      {...props}
+    >
+      <div className="gds-divider-line" />
+    </div>
+  );
+}
+
+export default Divider;

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,19 @@
+/**
+ * Divider component props
+ * Provides visual separator using design system tokens
+ */
+
+export type DividerOrientation = "horizontal" | "vertical";
+
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Orientation of the divider
+   * @default "horizontal"
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}

package/src/components/Divider/index.ts

@@ -0,0 +1,3 @@
+export { Divider } from "./Divider";
+export type { DividerProps, DividerOrientation } from "./Divider.types";
+export { default } from "./Divider";

package/src/components/InputImage/InputImage.css

@@ -0,0 +1,212 @@
+/**
+ * InputImage component styles
+ * Token-first per Constitution (all values from design tokens)
+ */
+
+/* Base input image container */
+.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;
+}
+
+/* Default state */
+.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;
+}
+
+/* Hover state */
+.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;
+}
+
+/* Filled state */
+.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;
+}
+
+/* Loading state */
+.gds-input-image-loading {
+  background: var(--image-background-loading);
+  border-color: var(--input-stroke-default);
+  border-style: dashed;
+  height: var(--image-medium-maxHeight-default);
+}
+
+/* Generating state */
+.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;
+}
+
+/* Generated state */
+.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: translateX(-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:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+}
+
+.gds-input-image-slider-button {
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+/* Disabled state */
+.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;
+}
+
+/* Button spacing within InputImage */
+.gds-input-image-button {
+  flex-shrink: 0;
+}