@clip-how/ui 0.1.6

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 (29) hide show
  1. package/README.md +171 -0
  2. package/components/accordion.tsx +64 -0
  3. package/components/alert-dialog.tsx +179 -0
  4. package/components/avatar.tsx +96 -0
  5. package/components/badge.tsx +46 -0
  6. package/components/button.tsx +62 -0
  7. package/components/card.tsx +75 -0
  8. package/components/checkbox.tsx +29 -0
  9. package/components/dialog.tsx +144 -0
  10. package/components/dropdown-menu.tsx +228 -0
  11. package/components/input.tsx +21 -0
  12. package/components/label.tsx +21 -0
  13. package/components/pill-tabs.tsx +66 -0
  14. package/components/progress.tsx +28 -0
  15. package/components/radio-group.tsx +45 -0
  16. package/components/scroll-area.tsx +56 -0
  17. package/components/select.tsx +175 -0
  18. package/components/separator.tsx +28 -0
  19. package/components/sheet.tsx +134 -0
  20. package/components/skeleton.tsx +13 -0
  21. package/components/sonner.tsx +40 -0
  22. package/components/switch.tsx +28 -0
  23. package/components/table.tsx +92 -0
  24. package/components/tabs.tsx +81 -0
  25. package/components/textarea.tsx +18 -0
  26. package/components/tooltip.tsx +53 -0
  27. package/lib/utils.ts +12 -0
  28. package/package.json +85 -0
  29. package/tokens.css +91 -0
package/package.json ADDED
@@ -0,0 +1,85 @@
1
+ {
2
+ "name": "@clip-how/ui",
3
+ "version": "0.1.6",
4
+ "description": "ClipHow design tokens + UI primitives (shadcn-based). Shared across the main app, the marketing website, and any future ClipHow surface.",
5
+ "license": "UNLICENSED",
6
+ "type": "module",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/Clip-How/cliphow-design-system.git"
10
+ },
11
+ "publishConfig": {
12
+ "registry": "https://registry.npmjs.org",
13
+ "access": "public"
14
+ },
15
+ "sideEffects": [
16
+ "*.css"
17
+ ],
18
+ "files": [
19
+ "components",
20
+ "lib",
21
+ "tokens.css",
22
+ "README.md"
23
+ ],
24
+ "exports": {
25
+ "./tokens.css": "./tokens.css",
26
+ "./components/*": {
27
+ "types": "./components/*.tsx",
28
+ "default": "./components/*.tsx"
29
+ },
30
+ "./lib/*": {
31
+ "types": "./lib/*.ts",
32
+ "default": "./lib/*.ts"
33
+ }
34
+ },
35
+ "peerDependencies": {
36
+ "@radix-ui/react-accordion": "*",
37
+ "@radix-ui/react-alert-dialog": "*",
38
+ "@radix-ui/react-avatar": "*",
39
+ "@radix-ui/react-checkbox": "*",
40
+ "@radix-ui/react-dialog": "*",
41
+ "@radix-ui/react-dropdown-menu": "*",
42
+ "@radix-ui/react-label": "*",
43
+ "@radix-ui/react-progress": "*",
44
+ "@radix-ui/react-radio-group": "*",
45
+ "@radix-ui/react-scroll-area": "*",
46
+ "@radix-ui/react-select": "*",
47
+ "@radix-ui/react-separator": "*",
48
+ "@radix-ui/react-slot": "*",
49
+ "@radix-ui/react-switch": "*",
50
+ "@radix-ui/react-tabs": "*",
51
+ "@radix-ui/react-tooltip": "*",
52
+ "class-variance-authority": "*",
53
+ "clsx": "*",
54
+ "lucide-react": "*",
55
+ "next": ">=15",
56
+ "next-themes": "*",
57
+ "react": ">=19",
58
+ "react-dom": ">=19",
59
+ "sonner": "*",
60
+ "tailwind-merge": "*"
61
+ },
62
+ "peerDependenciesMeta": {
63
+ "next-themes": {
64
+ "optional": true
65
+ },
66
+ "sonner": {
67
+ "optional": true
68
+ }
69
+ },
70
+ "devDependencies": {
71
+ "@types/react": "^19.2.16",
72
+ "@types/react-dom": "^19.2.3",
73
+ "class-variance-authority": "^0.7.1",
74
+ "clsx": "^2.1.1",
75
+ "lucide-react": "^1.17.0",
76
+ "next": "^16.2.7",
77
+ "next-themes": "^0.4.6",
78
+ "radix-ui": "^1.4.3",
79
+ "react": "^19.2.7",
80
+ "react-dom": "^19.2.7",
81
+ "sonner": "^2.0.7",
82
+ "tailwind-merge": "^3.6.0",
83
+ "typescript": "^6.0.3"
84
+ }
85
+ }
package/tokens.css ADDED
@@ -0,0 +1,91 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * ClipHow design tokens — source of truth for the global system.
3
+ *
4
+ * This file is the contract between Figma and the codebase. Every token
5
+ * here corresponds to a Figma variable. See docs/design-system.md for the
6
+ * mapping and the Figma → code workflow.
7
+ *
8
+ * Per-org whitelabel overrides are NOT defined here. They are emitted at
9
+ * runtime by <OrgThemeStyle /> in the dashboard layout, scoped to a small
10
+ * allowlist (primary, accent). Anything you add here is the global default.
11
+ * ───────────────────────────────────────────────────────────────────────── */
12
+
13
+ :root {
14
+ --font-size: 16px;
15
+ --radius: 0.625rem;
16
+ --background: #fafaf8;
17
+ --foreground: #24252d;
18
+ --card: #f5f3ee;
19
+ --card-foreground: #24252d;
20
+ --popover: #fdfcfb;
21
+ --popover-foreground: #24252d;
22
+ --primary: #c4e8a0;
23
+ --primary-foreground: #202123;
24
+ --secondary: #f3f1ed;
25
+ --secondary-foreground: #030213;
26
+ --muted: #f0ede8;
27
+ --muted-foreground: #7c746f;
28
+ --accent: #e9e5df;
29
+ --accent-foreground: #030213;
30
+ --destructive: #d4183d;
31
+ --destructive-foreground: #ffffff;
32
+ --border: rgba(50, 47, 47, 0.08);
33
+ --input: rgba(189, 196, 198, 0.5);
34
+ --input-background: rgba(225, 229, 230, 0.35);
35
+ --switch-background: #cbced4;
36
+ --font-weight-medium: 500;
37
+ --font-weight-normal: 400;
38
+ --ring: oklch(0.708 0 0);
39
+ --chart-1: #c4e8a0;
40
+ --chart-2: #56958e;
41
+ --chart-3: #c56a00;
42
+ --chart-4: #3884b0;
43
+ --chart-5: #838b8e;
44
+ --sidebar: #fafaf8;
45
+ --sidebar-foreground: #24252d;
46
+ --sidebar-primary: #030213;
47
+ --sidebar-primary-foreground: #fdfcfb;
48
+ --sidebar-accent: rgba(225, 229, 230, 0.5);
49
+ --sidebar-accent-foreground: #24252d;
50
+ --sidebar-border: rgba(189, 196, 198, 0.5);
51
+ --sidebar-ring: oklch(0.708 0 0);
52
+ --success: #c4e8a0;
53
+ --warning: #c56a00;
54
+ }
55
+
56
+ .dark {
57
+ --background: oklch(0.145 0 0);
58
+ --foreground: oklch(0.985 0 0);
59
+ --card: oklch(0.145 0 0);
60
+ --card-foreground: oklch(0.985 0 0);
61
+ --popover: oklch(0.145 0 0);
62
+ --popover-foreground: oklch(0.985 0 0);
63
+ --primary: oklch(0.985 0 0);
64
+ --primary-foreground: oklch(0.205 0 0);
65
+ --secondary: oklch(0.269 0 0);
66
+ --secondary-foreground: oklch(0.985 0 0);
67
+ --muted: oklch(0.269 0 0);
68
+ --muted-foreground: oklch(0.708 0 0);
69
+ --accent: oklch(0.269 0 0);
70
+ --accent-foreground: oklch(0.985 0 0);
71
+ --destructive: oklch(0.396 0.141 25.723);
72
+ --destructive-foreground: oklch(0.637 0.237 25.331);
73
+ --border: oklch(0.269 0 0);
74
+ --input: oklch(0.269 0 0);
75
+ --ring: oklch(0.439 0 0);
76
+ --font-weight-medium: 500;
77
+ --font-weight-normal: 400;
78
+ --chart-1: oklch(0.488 0.243 264.376);
79
+ --chart-2: oklch(0.696 0.17 162.48);
80
+ --chart-3: oklch(0.769 0.188 70.08);
81
+ --chart-4: oklch(0.627 0.265 303.9);
82
+ --chart-5: oklch(0.645 0.246 16.439);
83
+ --sidebar: oklch(0.205 0 0);
84
+ --sidebar-foreground: oklch(0.985 0 0);
85
+ --sidebar-primary: oklch(0.488 0.243 264.376);
86
+ --sidebar-primary-foreground: oklch(0.985 0 0);
87
+ --sidebar-accent: oklch(0.269 0 0);
88
+ --sidebar-accent-foreground: oklch(0.985 0 0);
89
+ --sidebar-border: oklch(0.269 0 0);
90
+ --sidebar-ring: oklch(0.439 0 0);
91
+ }