@oscarrf2/goo-ds 0.1.0 → 0.1.1

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/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/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/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/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/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;

package/src/components/TableRow/TableRow.types.ts

@@ -1,41 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * TableRow component props
- * Provides table row layout using design system tokens
- */
-
-export interface TableRowProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Whether to show a divider border at the bottom
-   * @default true
-   */
-  divider?: boolean;
-
-  /**
-   * Whether the row is selected
-   * @default false
-   */
-  selected?: boolean;
-
-  /**
-   * Whether the row is disabled
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Row content (typically Cell components)
-   */
-  children?: ReactNode;
-
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-
-  /**
-   * Click handler for interactive rows
-   */
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-}

package/src/compositions/index.ts

@@ -1,3 +0,0 @@
-// Composition exports
-// Add composition exports here as they are implemented
-export {};

package/src/index.ts

@@ -1,4 +0,0 @@
-// Main library entry point
-// Must NOT import CSS here (no side effects)
-export * from "./components";
-export * from "./compositions";