npm - @2urgseui/core - Versions diffs - 0.1.0 - Mend

@2urgseui/core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.MD ADDED Viewed

@@ -0,0 +1,221 @@
+# @2urgse/ui
+Shared UI component library for 2URGSE products.
+Built on Radix UI primitives, styled with Tailwind CSS, and driven by a first-class design token system.
+---
+## Installation
+```bash
+npm install /path/to/build/2urgse-ui-0.1.0.tgz
+# or once published:
+npm install @2urgse/ui
+```
+### Peer dependencies
+```bash
+npm install react react-dom lucide-react
+```
+---
+## Tailwind setup
+The library ships a Tailwind **preset** that wires in all design tokens — colors,
+typography, spacing, shadows, border radii, motion, and breakpoints.
+Your project's Tailwind config must extend it; **configs do not merge automatically**.
+### 1. Reference the preset
+```ts
+// tailwind.config.ts (consuming project)
+import { type Config } from "tailwindcss";
+import uiPreset from "@2urgse/ui/tailwind";
+export default {
+  presets: [uiPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    // Scan library dist so component classes are never purged
+    "./node_modules/@2urgse/ui/dist/**/*.{js,cjs}",
+  ],
+} satisfies Config;
+```
+### 2. Inject CSS variables
+The preset registers a Tailwind plugin that emits `:root` / `.dark` CSS custom
+properties from the token color schemes. Include a global CSS file in your app
+entry point to activate them:
+```css
+/* globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+Dark mode is toggled via the `class` strategy — add `dark` to `<html>`:
+```ts
+// e.g. next-themes, or manually
+document.documentElement.classList.toggle("dark");
+```
+---
+## Usage
+```tsx
+import {
+  AppShell,
+  Button,
+  Heading,
+  Caption,
+  Icon,
+  Sidebar,
+  // ...
+} from "@2urgse/ui";
+```
+### Design tokens (JavaScript/TypeScript)
+```ts
+import {
+  colors,
+  spacing,
+  typography,
+  breakpoints,
+  boxShadow,
+  borderRadius,
+  transitionDuration,
+  transitionTimingFunction,
+} from "@2urgse/ui/tokens";
+// Use in JS logic, useMediaQuery, charting libs, etc.
+const primaryColor = colors.brand[600]; // "#379e23"
+const tabletWidth  = breakpoints.tablet; // "768px"
+```
+---
+## Components
+### Layout
+| Component | Description |
+|---|---|
+| `AppShell` | Full-screen shell with glassmorphic sidebar and topbar |
+### Primitives
+| Component | Variants / Notes |
+|---|---|
+| `Button` | `default` `destructive` `outline` `secondary` `ghost` `link` `glass` |
+| `Heading` | `level` 1–6, `display` font, `size`, `weight`, `tone` |
+| `Caption` | `figcaption` / `small` / `span` / `p`, optional leading `icon` |
+| `Text` | `p` / `span` / `label` / `div`, `size`, `weight`, `tone` |
+| `Icon` | Wraps any Lucide icon by `name` |
+| `Badge` | Status and label badges |
+| `Avatar` | User / entity avatar with fallback |
+| `Card` | Surface card with header, content, footer slots |
+| `Input` | Text input |
+| `Textarea` | Multi-line input |
+| `Select` | Dropdown select |
+| `Checkbox` | Checkbox with label |
+| `Switch` | Toggle switch |
+| `RadioGroup` | Radio button group |
+| `Slider` | Range slider |
+| `Progress` | Progress bar |
+| `Tabs` | Tab navigation |
+| `Accordion` | Collapsible sections |
+| `Collapsible` | Single collapsible panel |
+| `Dialog` | Modal dialog |
+| `Sheet` | Side-anchored sheet |
+| `Drawer` | Bottom/side drawer (Vaul) |
+| `AlertDialog` | Confirmation dialog |
+| `Popover` | Floating popover |
+| `DropdownMenu` | Dropdown menu |
+| `Tooltip` | Hover tooltip |
+| `Breadcrumb` | Navigation breadcrumb |
+| `Pagination` | Page navigation |
+| `Table` | Data table |
+| `ScrollArea` | Custom scrollbar container |
+| `Separator` | Horizontal / vertical divider |
+| `Skeleton` | Loading placeholder |
+| `Alert` | Inline alert / banner |
+| `Calendar` | Date picker calendar |
+| `InputOtp` | OTP code input |
+| `Label` | Form label |
+| `AspectRatio` | Aspect-ratio container |
+| `RichTextArea` | Tiptap-based rich text editor |
+| `Sidebar` | Full sidebar system with provider, menu, groups |
+---
+## Design tokens
+All tokens live in `source/tokens/` and are the single source of truth for both
+the Tailwind config and any JavaScript runtime usage.
+| Token file | Exports | Example |
+|---|---|---|
+| `colors.ts` | `colors` | `colors.brand[600]`, `colors.schemes.light.background` |
+| `spacing.ts` | `spacing` | `spacing[4]` → `"16px"` |
+| `typography.ts` | `typography` | `typography.fontFamily.sans` |
+| `breakpoints.ts` | `breakpoints` | `breakpoints.tablet` → `"768px"` |
+| `radii.ts` | `borderRadius` | `borderRadius.lg` → `"0.5rem"` |
+| `shadows.ts` | `boxShadow` | `boxShadow.md` |
+| `motion.ts` | `transitionDuration`, `transitionTimingFunction` | `transitionDuration.slow` → `"300ms"` |
+### Breakpoints
+| Name | Value | Use case |
+|---|---|---|
+| `mobile` / `xs` | 375px | Handheld |
+| `sm` | 640px | Large phone |
+| `tablet` / `md` | 768px | Tablet portrait |
+| `lg` | 1024px | Laptop |
+| `desktop` / `xl` | 1280px | Standard PC |
+| `2xl` | 1536px | Wide desktop |
+| `wide` / `3xl` | 1920px | Large display |
+---
+## Local development
+```bash
+# Build library (watch mode)
+npm run dev
+# Build once
+npm run build
+# Pack tarball to ./build for local installation
+npm run pack:build
+# Run tests
+npm run test
+# Lint
+npm run lint
+# Storybook
+npm run storybook
+# Playground app
+npm run playground
+```
+---
+## Versioning
+Follows [Semantic Versioning](https://semver.org):
+- `patch` — bug fixes, no API change
+- `minor` — new components or props (backward compatible)
+- `major` — breaking API or token changes

package/dist/chunk-VGPGVDCW.js ADDED Viewed

@@ -0,0 +1,317 @@
+// source/tokens/breakpoints.ts
+var breakpoints = {
+  // ── Semantic ──────────────────────────────────────────────────────────
+  mobile: "375px",
+  tablet: "768px",
+  desktop: "1280px",
+  wide: "1920px",
+  // ── Numeric shorthands (mirrors Tailwind defaults for familiarity) ────
+  xs: "375px",
+  // handheld
+  sm: "640px",
+  // large phone / small tablet
+  md: "768px",
+  // tablet
+  lg: "1024px",
+  // laptop
+  xl: "1280px",
+  // desktop
+  "2xl": "1536px",
+  // wide desktop
+  "3xl": "1920px"
+  // large display
+};
+// source/tokens/colors.ts
+var brand = {
+  50: "#f6faf0",
+  100: "#eef7e4",
+  200: "#d4ebbe",
+  300: "#bae09d",
+  400: "#7dc75d",
+  500: "#43b02b",
+  600: "#379e23",
+  700: "#2a8518",
+  800: "#1c690f",
+  900: "#124f09",
+  950: "#093304"
+};
+var neutral = {
+  0: "#ffffff",
+  50: "#f9fafb",
+  100: "#f3f4f6",
+  200: "#e5e7eb",
+  300: "#d1d5db",
+  400: "#9ca3af",
+  500: "#6b7280",
+  600: "#4b5563",
+  700: "#374151",
+  800: "#1f2937",
+  900: "#111827",
+  950: "#030712"
+};
+var success = {
+  50: "#f0fdf4",
+  100: "#dcfce7",
+  200: "#bbf7d0",
+  300: "#86efac",
+  400: "#4ade80",
+  500: "#22c55e",
+  600: "#16a34a",
+  700: "#15803d",
+  800: "#166534",
+  900: "#14532d"
+};
+var warning = {
+  50: "#fffbeb",
+  100: "#fef3c7",
+  200: "#fde68a",
+  300: "#fcd34d",
+  400: "#fbbf24",
+  500: "#f59e0b",
+  600: "#d97706",
+  700: "#b45309",
+  800: "#92400e",
+  900: "#78350f"
+};
+var error = {
+  50: "#fef2f2",
+  100: "#fee2e2",
+  200: "#fecaca",
+  300: "#fca5a5",
+  400: "#f87171",
+  500: "#ef4444",
+  600: "#dc2626",
+  700: "#b91c1c",
+  800: "#991b1b",
+  900: "#7f1d1d"
+};
+var info = {
+  50: "#eff6ff",
+  100: "#dbeafe",
+  200: "#bfdbfe",
+  300: "#93c5fd",
+  400: "#60a5fa",
+  500: "#3b82f6",
+  600: "#2563eb",
+  700: "#1d4ed8",
+  800: "#1e40af",
+  900: "#1e3a8a"
+};
+var accent = {
+  50: "#faf5ff",
+  100: "#f3e8ff",
+  200: "#e9d5ff",
+  300: "#d8b4fe",
+  400: "#c084fc",
+  500: "#a855f7",
+  600: "#9333ea",
+  700: "#7c3aed",
+  800: "#6b21a8",
+  900: "#581c87"
+};
+var colors = {
+  brand,
+  neutral,
+  success,
+  warning,
+  error,
+  info,
+  accent,
+  /** Resolved semantic aliases for light-UI usage (concrete colors, not path strings) */
+  semantic: {
+    primary: brand[600],
+    primaryHover: brand[700],
+    primaryForeground: neutral[0],
+    secondary: neutral[100],
+    secondaryHover: neutral[200],
+    secondaryForeground: neutral[900],
+    success: success[600],
+    successForeground: success[50],
+    warning: warning[600],
+    warningForeground: warning[50],
+    error: error[600],
+    errorForeground: error[50],
+    info: info[600],
+    infoForeground: info[50]
+  },
+  /**
+   * High-level color schemes for `class` dark mode (e.g. `html.light` / `html.dark` or `data-theme`).
+   * Use these to drive backgrounds, text, and surfaces instead of raw neutral steps.
+   */
+  schemes: {
+    light: {
+      background: neutral[0],
+      foreground: neutral[900],
+      card: neutral[0],
+      cardForeground: neutral[900],
+      popover: neutral[0],
+      popoverForeground: neutral[900],
+      primary: brand[600],
+      primaryForeground: neutral[0],
+      secondary: neutral[100],
+      secondaryForeground: neutral[900],
+      muted: neutral[100],
+      mutedForeground: neutral[600],
+      accent: neutral[100],
+      accentForeground: neutral[900],
+      destructive: error[600],
+      destructiveForeground: neutral[0],
+      success: success[600],
+      successForeground: success[50],
+      warning: warning[600],
+      warningForeground: warning[900],
+      error: error[600],
+      errorForeground: error[50],
+      info: info[600],
+      infoForeground: info[50],
+      border: neutral[200],
+      input: neutral[200],
+      ring: brand[500]
+    },
+    dark: {
+      background: neutral[950],
+      foreground: neutral[50],
+      card: neutral[900],
+      cardForeground: neutral[50],
+      popover: neutral[900],
+      popoverForeground: neutral[50],
+      primary: brand[500],
+      primaryForeground: neutral[950],
+      secondary: neutral[800],
+      secondaryForeground: neutral[50],
+      muted: neutral[800],
+      mutedForeground: neutral[400],
+      accent: neutral[800],
+      accentForeground: neutral[50],
+      destructive: error[500],
+      destructiveForeground: neutral[0],
+      success: success[500],
+      successForeground: neutral[950],
+      warning: warning[500],
+      warningForeground: neutral[950],
+      error: error[500],
+      errorForeground: neutral[950],
+      info: info[500],
+      infoForeground: neutral[950],
+      border: neutral[800],
+      input: neutral[800],
+      ring: brand[400]
+    }
+  }
+};
+// source/tokens/motion.ts
+var transitionDuration = {
+  instant: "0ms",
+  fast: "100ms",
+  base: "150ms",
+  slow: "300ms",
+  slower: "500ms"
+};
+var transitionTimingFunction = {
+  ease: "cubic-bezier(0.4, 0, 0.2, 1)",
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+};
+// source/tokens/radii.ts
+var borderRadius = {
+  none: "0",
+  sm: "0.125rem",
+  // 2px
+  base: "0.25rem",
+  // 4px
+  md: "0.375rem",
+  // 6px
+  lg: "0.5rem",
+  // 8px
+  xl: "0.75rem",
+  // 12px
+  "2xl": "1rem",
+  // 16px
+  "3xl": "1.5rem",
+  // 24px
+  full: "9999px"
+};
+// source/tokens/shadows.ts
+var boxShadow = {
+  none: "none",
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
+};
+// source/tokens/spacing.ts
+var spacing = {
+  px: "1px",
+  0: "0px",
+  0.5: "2px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  3.5: "14px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  12: "48px",
+  14: "56px",
+  16: "64px",
+  20: "80px",
+  24: "96px",
+  32: "128px",
+  40: "160px",
+  48: "192px",
+  64: "256px"
+};
+// source/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    sans: ["Inter Variable", "Inter", "system-ui", "sans-serif"],
+    mono: ["JetBrains Mono", "Fira Code", "monospace"],
+    display: ["Cal Sans", "Inter Variable", "sans-serif"]
+  },
+  fontSize: {
+    "2xs": ["0.625rem", { lineHeight: "0.875rem" }],
+    xs: ["0.75rem", { lineHeight: "1rem" }],
+    sm: ["0.875rem", { lineHeight: "1.25rem" }],
+    base: ["1rem", { lineHeight: "1.5rem" }],
+    lg: ["1.125rem", { lineHeight: "1.75rem" }],
+    xl: ["1.25rem", { lineHeight: "1.75rem" }],
+    "2xl": ["1.5rem", { lineHeight: "2rem" }],
+    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+    "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+    "5xl": ["3rem", { lineHeight: "1" }]
+  },
+  fontWeight: {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  }
+};
+export {
+  breakpoints,
+  colors,
+  transitionDuration,
+  transitionTimingFunction,
+  borderRadius,
+  boxShadow,
+  spacing,
+  typography
+};