@oscarrf2/goo-ds 0.1.0

package/src/components/InputImage/InputImage.tsx

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

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

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

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

package/src/components/Sidebar/Sidebar.css

@@ -0,0 +1,35 @@
+/**
+ * Sidebar component styles
+ * Token-driven sidebar container styling for the goo-ds design system
+ */
+
+.gds-sidebar {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  background-color: var(--sidebar-background-default);
+  box-sizing: border-box;
+}
+
+/* Sidebar content area */
+.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;
+}
+
+/* Vertical divider on the right */
+.gds-sidebar-divider {
+  width: 1px;
+  align-self: stretch;
+  flex-shrink: 0;
+  background-color: var(--divider-background-default);
+}

package/src/components/Sidebar/Sidebar.tsx

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

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

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

package/src/components/SidebarItem/SidebarItem.css

@@ -0,0 +1,70 @@
+/**
+ * SidebarItem component styles
+ * Token-driven sidebar navigation item styling for the goo-ds design system
+ */
+
+.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 0.2s ease;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+}
+
+/* Interactive items */
+.gds-sidebar-item-interactive {
+  cursor: pointer;
+  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;
+}
+
+/* Active state */
+.gds-sidebar-item-active {
+  background-color: var(--sidebar-item-background-active);
+  color: var(--sidebar-item-text-active);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Icon styling */
+.gds-sidebar-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Text styling */
+.gds-sidebar-item-text {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .gds-sidebar-item {
+    transition: none;
+  }
+}

package/src/components/SidebarItem/SidebarItem.tsx

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

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

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

package/src/components/Skeleton/Skeleton.css

@@ -0,0 +1,25 @@
+/**
+ * Skeleton pulse animation
+ * Provides a smooth opacity pulse to indicate loading state
+ */
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.skeleton-pulse {
+  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-pulse {
+    animation: none;
+  }
+}