@oscarrf2/goo-ds 0.1.0 → 0.1.2

package/src/components/Cell/Cell.types.ts

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

package/src/components/Cell/index.ts

@@ -1,3 +0,0 @@
-export { Cell } from "./Cell";
-export type { CellProps, CellType, CellAlignment, CellWidth } from "./Cell.types";
-export { default } from "./Cell";

package/src/components/Codeblock/Codeblock.tsx

@@ -1,88 +0,0 @@
-"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

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

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

package/src/components/CoreText/CoreText.tsx

@@ -1,43 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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

package/src/components/Divider/Divider.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,19 +0,0 @@
-/**
- * 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

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

package/src/components/InputImage/InputImage.tsx

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