@oscarrf2/goo-ds 0.1.0

package/src/components/Skeleton/Skeleton.tsx

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

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

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

package/src/components/Spacer/Spacer.tsx

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

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

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

package/src/components/TabItem/TabItem.css

@@ -0,0 +1,67 @@
+/**
+ * TabItem component styles
+ * Token-driven tab item styling for the goo-ds design system
+ */
+
+.gds-tab-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: var(--tab-item-medium-paddingTop);
+  padding-bottom: var(--tab-item-medium-paddingBottom);
+  padding-left: var(--tab-item-medium-paddingHorizontal);
+  padding-right: var(--tab-item-medium-paddingHorizontal);
+  border: none;
+  border-bottom: var(--tab-item-medium-strokeWidth) solid;
+  background: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  position: relative;
+  font-family: var(--coreText-family-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-lineHeight-sm);
+}
+
+/* Unselected state */
+.gds-tab-item-unselected {
+  border-bottom-color: var(--tab-item-stroke-unselected);
+  color: var(--tab-item-text-unselected);
+  font-weight: var(--font-weight-regular);
+}
+
+.gds-tab-item-unselected:hover:not(.gds-tab-item-disabled) {
+  color: var(--tab-item-text-selected);
+}
+
+/* Selected state */
+.gds-tab-item-selected {
+  border-bottom-color: var(--tab-item-stroke-selected);
+  color: var(--tab-item-text-selected);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Disabled state */
+.gds-tab-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Focus state */
+.gds-tab-item:focus-visible {
+  outline: 2px solid var(--color-stroke-focus);
+  outline-offset: 2px;
+}
+
+/* Text styling */
+.gds-tab-item-text {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .gds-tab-item {
+    transition: none;
+  }
+}

package/src/components/TabItem/TabItem.tsx

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

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

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

package/src/components/Table/Table.css

@@ -0,0 +1,16 @@
+/**
+ * Table component styles
+ * Token-driven table container styling for the goo-ds design system
+ */
+
+.gds-table {
+  width: 100%;
+  background-color: var(--table-background-default);
+  border: var(--table-medium-strokeWidth) solid var(--table-stroke-default);
+  border-radius: var(--radius-200);
+  overflow: hidden;
+  box-sizing: border-box;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: auto;
+}

package/src/components/Table/Table.tsx

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

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

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

package/src/components/TableRow/TableRow.css

@@ -0,0 +1,53 @@
+/**
+ * TableRow component styles
+ * Token-driven table row styling for the goo-ds design system
+ */
+
+.gds-table-row {
+  box-sizing: border-box;
+  transition: background-color 0.2s ease;
+}
+
+/* Divider border - applied to cells when border-collapse is separate */
+.gds-table-row-divider td,
+.gds-table-row-divider th {
+  border-bottom: var(--table-row-medium-strokeWidth) solid var(--table-row-stroke-divider);
+}
+
+/* Interactive rows */
+.gds-table-row-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.gds-table-row-interactive:hover:not(.gds-table-row-disabled):not(.gds-table-row-selected) {
+  background-color: var(--table-row-background-hover);
+}
+
+.gds-table-row-interactive:active:not(.gds-table-row-disabled):not(.gds-table-row-selected) {
+  background-color: var(--table-row-background-pressed);
+}
+
+.gds-table-row-interactive:focus-visible {
+  outline: 2px solid var(--color-stroke-focus);
+  outline-offset: -2px;
+}
+
+/* Selected state */
+.gds-table-row-selected {
+  background-color: var(--table-row-background-active);
+}
+
+/* Disabled state */
+.gds-table-row-disabled {
+  background-color: var(--table-row-background-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .gds-table-row {
+    transition: none;
+  }
+}

package/src/components/TableRow/TableRow.tsx

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

@@ -0,0 +1,41 @@
+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/components/TableRow/index.ts

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

package/src/components/Tabs/Tabs.css

@@ -0,0 +1,11 @@
+/**
+ * Tabs component styles
+ * Token-driven tab container styling for the goo-ds design system
+ */
+
+.gds-tabs {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  box-sizing: border-box;
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,37 @@
+import type { TabsProps } from "./Tabs.types";
+import "./Tabs.css";
+
+/**
+ * Tabs - Tab navigation container component for the goo-ds design system
+ *
+ * Provides consistent tab navigation container.
+ * Designed to contain TabItem components.
+ * Token-first per Constitution (no hardcoded values).
+ *
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabItem selected>Overview</TabItem>
+ *   <TabItem>Details</TabItem>
+ *   <TabItem>Settings</TabItem>
+ * </Tabs>
+ * ```
+ */
+export function Tabs({
+  children,
+  className = "",
+  ...props
+}: TabsProps) {
+  return (
+    <div
+      className={`gds-tabs ${className}`.trim()}
+      role="tablist"
+      data-component="Tabs"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Tabs;

package/src/components/Tabs/Tabs.types.ts

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

package/src/components/Tabs/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,15 @@
+// Component exports
+export * from "./CoreText";
+export * from "./Spacer";
+export * from "./Skeleton";
+export * from "./Button";
+export * from "./Cell";
+export * from "./TableRow";
+export * from "./Table";
+export * from "./SidebarItem";
+export * from "./Sidebar";
+export * from "./Divider";
+export * from "./Codeblock";
+export * from "./InputImage";
+export * from "./TabItem";
+export * from "./Tabs";