@oscarrf2/goo-ds 0.1.0 → 0.1.2

package/src/components/InputImage/InputImage.types.ts

@@ -1,86 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * InputImage component props
- * Provides image upload input with drag-and-drop, multiple states, and comparison slider
- */
-
-export type InputImageState =
-  | "Default"
-  | "Hover"
-  | "Filled"
-  | "Generating"
-  | "Generated"
-  | "Loading"
-  | "Disabled";
-
-export interface InputImageProps {
-  /**
-   * The current state of the input
-   * @default "Default"
-   */
-  state?: InputImageState;
-
-  /**
-   * Whether to show the comparison slider in Generated state
-   * @default true
-   */
-  comparisonSlider?: boolean;
-
-  /**
-   * Position of the comparison slider (0-100 percentage)
-   * @default 50
-   */
-  sliderPosition?: number;
-
-  /**
-   * Callback when slider is being dragged
-   */
-  onSliderDrag?: (position: number) => void;
-
-  /**
-   * The image source URL for Filled, Generating, and Generated states
-   */
-  imageSrc?: string;
-
-  /**
-   * Alt text for the image
-   * @default ""
-   */
-  imageAlt?: string;
-
-  /**
-   * Callback when the upload button is clicked
-   */
-  onUploadClick?: () => void;
-
-  /**
-   * Callback when the remove/close button is clicked (in Filled state)
-   */
-  onRemoveClick?: () => void;
-
-  /**
-   * Callback when drag enter occurs
-   */
-  onDragEnter?: (e: React.DragEvent<HTMLDivElement>) => void;
-
-  /**
-   * Callback when drag leave occurs
-   */
-  onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
-
-  /**
-   * Callback when drop occurs
-   */
-  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * Custom children to replace default content (advanced use case)
-   */
-  children?: ReactNode;
-}

package/src/components/InputImage/index.ts

@@ -1,2 +0,0 @@
-export { InputImage } from "./InputImage";
-export type { InputImageProps, InputImageState } from "./InputImage.types";

package/src/components/Sidebar/Sidebar.tsx

@@ -1,42 +0,0 @@
-import type { SidebarProps } from "./Sidebar.types";
-import "./Sidebar.css";
-
-/**
- * Sidebar - Sidebar container component for the goo-ds design system
- *
- * Provides consistent sidebar layout with proper spacing and background.
- * Designed to contain SidebarItem components, titles, and other navigation elements.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <Sidebar>
- *   <CoreText style="headline-xs-bold">Navigation</CoreText>
- *   <Spacer size="16" />
- *   <SidebarItem icon={<HomeIcon />}>Home</SidebarItem>
- *   <SidebarItem icon={<SettingsIcon />}>Settings</SidebarItem>
- * </Sidebar>
- * ```
- */
-export function Sidebar({
-  children,
-  showDivider = true,
-  className = "",
-  ...props
-}: SidebarProps) {
-  return (
-    <div
-      className={`gds-sidebar ${className}`.trim()}
-      data-component="Sidebar"
-      data-show-divider={showDivider}
-      {...props}
-    >
-      <div className="gds-sidebar-content">
-        {children}
-      </div>
-      {showDivider && <div className="gds-sidebar-divider" aria-hidden="true" />}
-    </div>
-  );
-}
-
-export default Sidebar;

package/src/components/Sidebar/Sidebar.types.ts

@@ -1,24 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * Sidebar component props
- * Provides sidebar container using design system tokens
- */
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Sidebar content (typically title, SidebarItem components, etc.)
-   */
-  children?: ReactNode;
-
-  /**
-   * Whether to show the divider on the right edge
-   * @default true
-   */
-  showDivider?: boolean;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-}

package/src/components/Sidebar/index.ts

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

package/src/components/SidebarItem/SidebarItem.tsx

@@ -1,55 +0,0 @@
-import type { SidebarItemProps } from "./SidebarItem.types";
-import "./SidebarItem.css";
-
-/**
- * SidebarItem - Sidebar navigation item component for the goo-ds design system
- *
- * Provides consistent sidebar navigation item with interactive states.
- * Supports icons and active state indication.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <SidebarItem>Dashboard</SidebarItem>
- * <SidebarItem active icon={<HomeIcon />}>Home</SidebarItem>
- * <SidebarItem onClick={() => navigate('/settings')}>Settings</SidebarItem>
- * ```
- */
-export function SidebarItem({
-  active = false,
-  icon,
-  children,
-  className = "",
-  onClick,
-  href,
-  ...props
-}: SidebarItemProps) {
-  const isInteractive = Boolean(onClick || href);
-
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (onClick) {
-      onClick(event);
-    }
-    if (href && !onClick) {
-      window.location.href = href;
-    }
-  };
-
-  return (
-    <div
-      className={`gds-sidebar-item ${active ? "gds-sidebar-item-active" : ""} ${isInteractive ? "gds-sidebar-item-interactive" : ""} ${className}`.trim()}
-      onClick={isInteractive ? handleClick : undefined}
-      role={isInteractive ? "button" : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-      aria-current={active ? "page" : undefined}
-      data-component="SidebarItem"
-      data-active={active}
-      {...props}
-    >
-      {icon && <span className="gds-sidebar-item-icon">{icon}</span>}
-      <span className="gds-sidebar-item-text">{children}</span>
-    </div>
-  );
-}
-
-export default SidebarItem;

package/src/components/SidebarItem/SidebarItem.types.ts

@@ -1,39 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * SidebarItem component props
- * Provides sidebar navigation items using design system tokens
- */
-
-export interface SidebarItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Whether the item is currently active/selected
-   * @default false
-   */
-  active?: boolean;
-
-  /**
-   * Icon to display before the text
-   */
-  icon?: ReactNode;
-
-  /**
-   * Item content (text or other elements)
-   */
-  children?: ReactNode;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * Click handler for navigation
-   */
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-
-  /**
-   * href for link behavior (optional)
-   */
-  href?: string;
-}

package/src/components/SidebarItem/index.ts

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

package/src/components/Skeleton/Skeleton.tsx

@@ -1,41 +0,0 @@
-import type { SkeletonProps } from "./Skeleton.types";
-
-/**
- * Skeleton - Loading state placeholder component for the goo-ds design system
- *
- * Provides consistent loading state placeholders using design system tokens.
- * Includes a pulse animation to indicate loading state.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <Skeleton size="16" />
- * <Skeleton size="48" width="200px" />
- * <Skeleton size="64" animate={false} />
- * ```
- */
-export function Skeleton({
-  size = "16",
-  className = "",
-  width = "100%",
-  animate = true,
-  ...props
-}: SkeletonProps) {
-  return (
-    <div
-      className={`${animate ? "skeleton-pulse" : ""} ${className}`.trim()}
-      style={{
-        height: `var(--size-${size})`,
-        width: width,
-        backgroundColor: "var(--skeleton-background-default)",
-        borderRadius: "var(--radius-50)",
-        overflow: "clip",
-      }}
-      aria-hidden={props["aria-hidden"] !== false}
-      data-component="Skeleton"
-      data-size={size}
-    />
-  );
-}
-
-export default Skeleton;

package/src/components/Skeleton/Skeleton.types.ts

@@ -1,65 +0,0 @@
-/**
- * Skeleton component props
- * Provides loading state placeholders using design system tokens
- */
-
-export type SkeletonSize =
-  | "1"
-  | "2"
-  | "4"
-  | "6"
-  | "8"
-  | "12"
-  | "16"
-  | "20"
-  | "24"
-  | "28"
-  | "32"
-  | "36"
-  | "40"
-  | "44"
-  | "48"
-  | "56"
-  | "64"
-  | "80"
-  | "96"
-  | "112"
-  | "128"
-  | "144"
-  | "160"
-  | "176"
-  | "192"
-  | "208"
-  | "224"
-  | "240"
-  | "256";
-
-export interface SkeletonProps {
-  /**
-   * The height of the skeleton, corresponding to number tokens (--size-X)
-   * @default "16"
-   */
-  size?: SkeletonSize;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * Width of the skeleton (CSS value or percentage)
-   * @default "100%"
-   */
-  width?: string;
-
-  /**
-   * Whether to animate the skeleton with a pulse effect
-   * @default true
-   */
-  animate?: boolean;
-
-  /**
-   * ARIA label for accessibility (optional, for screen readers)
-   */
-  "aria-hidden"?: boolean;
-}

package/src/components/Skeleton/index.ts

@@ -1,5 +0,0 @@
-import "./Skeleton.css";
-
-export { Skeleton } from "./Skeleton";
-export type { SkeletonProps, SkeletonSize } from "./Skeleton.types";
-export { default } from "./Skeleton";

package/src/components/Spacer/Spacer.tsx

@@ -1,31 +0,0 @@
-import type { SpacerProps } from "./Spacer.types";
-
-/**
- * Spacer - Layout spacing component for the goo-ds design system
- *
- * Provides consistent vertical spacing using number tokens from Figma.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <Spacer size="16" />
- * <Spacer size="32" />
- * <Spacer size="64" />
- * ```
- */
-export function Spacer({ size = "16", className = "", ...props }: SpacerProps) {
-  return (
-    <div
-      className={className}
-      style={{
-        height: `var(--size-${size})`,
-        width: "100%",
-      }}
-      aria-hidden={props["aria-hidden"] !== false}
-      data-component="Spacer"
-      data-size={size}
-    />
-  );
-}
-
-export default Spacer;

package/src/components/Spacer/Spacer.types.ts

@@ -1,58 +0,0 @@
-/**
- * Spacer component props
- * Provides vertical spacing using design system number tokens
- */
-
-export type SpacerSize =
-  | "1"
-  | "2"
-  | "4"
-  | "6"
-  | "8"
-  | "12"
-  | "16"
-  | "20"
-  | "24"
-  | "28"
-  | "32"
-  | "36"
-  | "40"
-  | "44"
-  | "48"
-  | "56"
-  | "64"
-  | "80"
-  | "96"
-  | "112"
-  | "128"
-  | "144"
-  | "160"
-  | "176"
-  | "192"
-  | "208"
-  | "224"
-  | "240"
-  | "256"
-  | "288"
-  | "320"
-  | "384"
-  | "448"
-  | "512";
-
-export interface SpacerProps {
-  /**
-   * The size of the spacer, corresponding to number tokens (--size-X)
-   * @default "16"
-   */
-  size?: SpacerSize;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * ARIA label for accessibility (optional, for screen readers)
-   */
-  "aria-hidden"?: boolean;
-}

package/src/components/Spacer/index.ts

@@ -1,3 +0,0 @@
-export { Spacer } from "./Spacer";
-export type { SpacerProps, SpacerSize } from "./Spacer.types";
-export { default } from "./Spacer";

package/src/components/TabItem/TabItem.tsx

@@ -1,45 +0,0 @@
-import type { TabItemProps } from "./TabItem.types";
-import "./TabItem.css";
-
-/**
- * TabItem - Tab navigation item component for the goo-ds design system
- *
- * Provides consistent tab item with selected/unselected states.
- * Designed to be used within a Tabs container.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <TabItem selected>Overview</TabItem>
- * <TabItem onClick={() => handleTabChange('details')}>Details</TabItem>
- * <TabItem>Settings</TabItem>
- * ```
- */
-export function TabItem({
-  selected = false,
-  children,
-  className = "",
-  onClick,
-  disabled = false,
-  ...props
-}: TabItemProps) {
-  return (
-    <button
-      type="button"
-      className={`gds-tab-item ${selected ? "gds-tab-item-selected" : "gds-tab-item-unselected"} ${disabled ? "gds-tab-item-disabled" : ""} ${className}`.trim()}
-      onClick={onClick}
-      disabled={disabled}
-      role="tab"
-      aria-selected={selected}
-      aria-disabled={disabled}
-      tabIndex={selected ? 0 : -1}
-      data-component="TabItem"
-      data-selected={selected}
-      {...props}
-    >
-      <span className="gds-tab-item-text">{children}</span>
-    </button>
-  );
-}
-
-export default TabItem;

package/src/components/TabItem/TabItem.types.ts

@@ -1,35 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * TabItem component props
- * Provides tab navigation item using design system tokens
- */
-
-export interface TabItemProps extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Whether this tab is currently selected/active
-   * @default false
-   */
-  selected?: boolean;
-
-  /**
-   * Tab content (text or other elements)
-   */
-  children?: ReactNode;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * Click handler for tab selection
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * Whether the tab is disabled
-   * @default false
-   */
-  disabled?: boolean;
-}

package/src/components/TabItem/index.ts

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

package/src/components/Table/Table.tsx

@@ -1,39 +0,0 @@
-import type { TableProps } from "./Table.types";
-import "./Table.css";
-
-/**
- * Table - Table container component for the goo-ds design system
- *
- * Provides consistent table layout with background, border, and rounded corners.
- * Designed to contain TableRow components with Cell children.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <Table>
- *   <TableRow>
- *     <Cell type="header">Name</Cell>
- *     <Cell type="header">Email</Cell>
- *   </TableRow>
- *   <TableRow>
- *     <Cell>John Doe</Cell>
- *     <Cell>john@example.com</Cell>
- *   </TableRow>
- * </Table>
- * ```
- */
-export function Table({ children, className = "", ...props }: TableProps) {
-  return (
-    <table
-      className={`gds-table ${className}`.trim()}
-      data-component="Table"
-      {...props}
-    >
-      <tbody>
-        {children}
-      </tbody>
-    </table>
-  );
-}
-
-export default Table;

package/src/components/Table/Table.types.ts

@@ -1,18 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * Table component props
- * Provides table container using design system tokens
- */
-
-export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Table content (typically TableRow components)
-   */
-  children?: ReactNode;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-}

package/src/components/Table/index.ts

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

package/src/components/TableRow/TableRow.tsx

@@ -1,53 +0,0 @@
-import type { TableRowProps } from "./TableRow.types";
-import "./TableRow.css";
-
-/**
- * TableRow - Table row component for the goo-ds design system
- *
- * Provides consistent table row layout with interactive states and dividers.
- * Designed to contain Cell components.
- * Token-first per Constitution (no hardcoded values).
- *
- * @example
- * ```tsx
- * <TableRow>
- *   <Cell>Name</Cell>
- *   <Cell>Email</Cell>
- * </TableRow>
- * <TableRow selected>
- *   <Cell>John</Cell>
- *   <Cell>john@example.com</Cell>
- * </TableRow>
- * ```
- */
-export function TableRow({
-  divider = true,
-  selected = false,
-  disabled = false,
-  children,
-  className = "",
-  onClick,
-  ...props
-}: TableRowProps) {
-  const isInteractive = Boolean(onClick && !disabled);
-
-  return (
-    <tr
-      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()}
-      onClick={disabled ? undefined : onClick}
-      role={isInteractive ? "button" : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-      aria-disabled={disabled}
-      aria-selected={selected}
-      data-component="TableRow"
-      data-divider={divider}
-      data-selected={selected}
-      data-disabled={disabled}
-      {...props}
-    >
-      {children}
-    </tr>
-  );
-}
-
-export default TableRow;