@ship-it-ui/ui 0.0.1

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@ship-it-ui/ui",
+  "version": "0.0.1",
+  "description": "React component library for the Ship-It design system. Tailwind v4 + Radix UI primitives, themed via @ship-it-ui/tokens.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ship-it-ops/ship-it-design.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles/globals.css": "./src/styles/globals.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.1.0",
+    "@fontsource-variable/geist-mono": "^5.1.0",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitest/coverage-v8": "^2.1.3",
+    "axe-core": "^4.10.2",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^4.0.0-beta.3",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3",
+    "vitest-axe": "^0.1.0",
+    "@ship-it-ui/eslint-config": "0.0.1",
+    "@ship-it-ui/icons": "0.0.1",
+    "@ship-it-ui/tokens": "0.0.1",
+    "@ship-it-ui/tsconfig": "0.0.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  }
+}

package/src/styles/animations.css

@@ -0,0 +1,123 @@
+/*
+ * Keyframes used across @ship-it-ui/ui components.
+ *
+ * Imported by globals.css so consumers get all animations with one stylesheet.
+ * All durations are gated by the `prefers-reduced-motion` block in tokens.css —
+ * components don't need to handle that themselves.
+ */
+
+@keyframes ship-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ship-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes ship-indeterminate {
+  0% {
+    margin-left: -40%;
+  }
+  100% {
+    margin-left: 100%;
+  }
+}
+
+@keyframes ship-skeleton {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes ship-pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+  }
+  70% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+@keyframes ship-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ship-dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes ship-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ship-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ship-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ship-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes ship-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,144 @@
+/**
+ * Global stylesheet for @ship-it-ui/ui consumers.
+ *
+ * Pulls in Geist (self-hosted), design tokens (CSS variables), keyframe animations,
+ * and bridges every token into Tailwind v4 via the `@theme inline` directive — so
+ * utility classes like `bg-bg`, `text-text`, `p-4`, `rounded-md`, `font-sans`,
+ * `text-h2`, `tracking-tight`, `shadow-lg` resolve to the same values that
+ * handwritten CSS using `var(--*)` would resolve to.
+ *
+ * Apps consuming this library should import this file once at app entry:
+ *
+ *   import '@ship-it-ui/ui/styles/globals.css';
+ */
+
+/* Self-hosted Geist via @fontsource-variable. */
+@import '@fontsource-variable/geist';
+@import '@fontsource-variable/geist-mono';
+
+@import 'tailwindcss';
+@import '@ship-it-ui/tokens/styles/tokens.css';
+@import './animations.css';
+
+/*
+ * Tailwind v4 auto-source-detection runs from the consuming app's project
+ * root (e.g. `apps/docs/`), which means it misses the workspace package
+ * source files. These explicit @source directives scan every TS/TSX/MDX file
+ * across `@ship-it-ui/ui`, `@ship-it-ui/shipit`, and the docs Storybook so that
+ * utility classes used in components actually get compiled.
+ *
+ * Paths are resolved relative to this CSS file:
+ *   ../**          = packages/ui/src/**
+ *   ../../../shipit/src/**     = packages/shipit/src/**
+ *   ../../../../apps/docs/**   = apps/docs/**
+ */
+@source '../**/*.{ts,tsx,mdx}';
+@source '../../../shipit/src/**/*.{ts,tsx,mdx}';
+@source '../../../../apps/docs/**/*.{ts,tsx,mdx}';
+
+/*
+ * `@theme inline` tells Tailwind to read these variables for utility-class
+ * generation (so `bg-accent`, `text-text`, `rounded-md` etc. work) but NOT to
+ * redefine them in :root — tokens.css owns the actual values.
+ */
+@theme inline {
+  /* Color — semantic tokens become Tailwind color utilities. */
+  --color-bg: var(--color-bg);
+  --color-panel: var(--color-panel);
+  --color-panel-2: var(--color-panel-2);
+  --color-border: var(--color-border);
+  --color-border-strong: var(--color-border-strong);
+  --color-text: var(--color-text);
+  --color-text-muted: var(--color-text-muted);
+  --color-text-dim: var(--color-text-dim);
+  --color-accent: var(--color-accent);
+  --color-accent-text: var(--color-accent-text);
+  --color-accent-dim: var(--color-accent-dim);
+  --color-accent-glow: var(--color-accent-glow);
+  --color-ok: var(--color-ok);
+  --color-warn: var(--color-warn);
+  --color-err: var(--color-err);
+  --color-purple: var(--color-purple);
+  --color-pink: var(--color-pink);
+
+  /* Foreground for components that sit on top of an accent surface
+   * (primary buttons, solid badges). Always near-black, regardless of theme. */
+  --color-on-accent: #0a0a0b;
+
+  /* Typography — families. */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+
+  /* Typography — sizes (named, not numeric, so utilities stay semantic). */
+  --text-eyebrow: var(--font-size-eyebrow);
+  --text-mono: var(--font-size-mono);
+  --text-body: var(--font-size-body);
+  --text-body-lg: var(--font-size-body-lg);
+  --text-h4: var(--font-size-h4);
+  --text-h3: var(--font-size-h3);
+  --text-h2: var(--font-size-h2);
+  --text-h1: var(--font-size-h1);
+  --text-display: var(--font-size-display);
+
+  /* Typography — weights. */
+  --font-weight-light: var(--font-weight-light);
+  --font-weight-regular: var(--font-weight-regular);
+  --font-weight-medium: var(--font-weight-medium);
+  --font-weight-semibold: var(--font-weight-semibold);
+  --font-weight-bold: var(--font-weight-bold);
+
+  /* Typography — tracking. */
+  --tracking-xtight: var(--tracking-xtight);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-xwide: var(--tracking-xwide);
+
+  /* Spacing (4pt scale, irregular ramp — handoff skips 7). */
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-8: var(--space-8);
+
+  /* Radius. */
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-base: var(--radius-base);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-full: var(--radius-full);
+
+  /* Shadow. */
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-lg: var(--shadow-lg);
+}
+
+@layer base {
+  html {
+    font-family: var(--font-family-sans);
+    color: var(--color-text);
+    background: var(--color-bg);
+    font-feature-settings: 'cv11', 'ss01';
+  }
+
+  body {
+    margin: 0;
+  }
+
+  /* Tabular numerals everywhere there's tick motion or comparison —
+   * matches the handoff's voice rule for `1,204 repos`, `02 / 08`. */
+  .ship-mono,
+  .font-mono {
+    font-variant-numeric: tabular-nums;
+  }
+
+  *:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}