@thebasenet/ui 0.1.0

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@thebasenet/ui",
+  "version": "0.1.0",
+  "description": "The Circular Net shared UI component library",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheBaseNet/tcn-ui.git"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./brand": {
+      "import": "./dist/brand/index.js",
+      "types": "./dist/brand/index.d.ts"
+    },
+    "./ui": {
+      "import": "./dist/ui/index.js",
+      "types": "./dist/ui/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/cn.js",
+      "types": "./dist/utils/cn.d.ts"
+    },
+    "./tokens": {
+      "import": "./dist/tokens/index.js",
+      "types": "./dist/tokens/index.d.ts"
+    },
+    "./styles/globals.css": "./styles/globals.css",
+    "./styles/theme.css": "./styles/theme.css",
+    "./styles/variables.css": "./styles/variables.css",
+    "./styles/animations.css": "./styles/animations.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsup --config tsup.config.mjs",
+    "dev": "tsup --config tsup.config.mjs --watch",
+    "typecheck": "tsc --noEmit",
+    "publish:pkg": "npm run build && npm publish"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "next": ">=14",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.555.0",
+    "framer-motion": "^12.23.24",
+    "sonner": "^2.0.5",
+    "vaul": "^1.1.2",
+    "react-hook-form": "^7.62.0",
+    "react-day-picker": "^9.7.0",
+    "next-themes": "^0.4.6",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "iconsax-react": "^0.0.8",
+    "@hugeicons/core-free-icons": "^1.0.16",
+    "@hugeicons/react": "^1.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.5.0",
+    "typescript": "^5"
+  }
+}

package/styles/animations.css

@@ -0,0 +1,63 @@
+/* =============================================================================
+   TCN Design System — Keyframe Animations
+   ============================================================================= */
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes zoomIn {
+  from { transform: scale(0.95); }
+  to { transform: scale(1); }
+}
+
+@keyframes zoomOut {
+  from { transform: scale(1); }
+  to { transform: scale(0.95); }
+}
+
+@keyframes zoom {
+  0% { opacity: 0; transform: scale(0.95); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slideFromTop {
+  from { transform: translateY(-0.5rem); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideFromRight {
+  from { transform: translateX(0.5rem); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideFromLeft {
+  from { transform: translateX(-0.5rem); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideFromBottom {
+  from { transform: translateY(0.5rem); }
+  to { transform: translateY(0); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}

package/styles/globals.css

@@ -0,0 +1,31 @@
+/* =============================================================================
+   TCN Design System — Global Styles Entry Point
+
+   Import this in your app's globals.css:
+
+     @import "tailwindcss";
+     @import "@thecircularnet/ui/styles/globals.css";
+
+   This pulls in:
+     1. All TCN CSS custom properties (variables)
+     2. The Tailwind v4 @theme block (TCN color palette + fonts + radius)
+     3. Keyframe animations
+     4. Base layer resets
+   ============================================================================= */
+
+@import "./variables.css";
+@import "./theme.css";
+@import "./animations.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/styles/theme.css

@@ -0,0 +1,97 @@
+/* =============================================================================
+   TCN Design System — Tailwind v4 Theme
+   Import this in your app's CSS after `@import "tailwindcss"` to register
+   the full TCN color palette, fonts, and radius tokens as Tailwind utilities.
+
+   Usage in your app's globals.css:
+     @import "tailwindcss";
+     @import "@thecircularnet/ui/styles/theme.css";
+   ============================================================================= */
+
+@theme inline {
+  /* ---- Primary (TCN Green) ---- */
+  --color-primary-50: #edf8e7;
+  --color-primary-100: #c8eab6;
+  --color-primary-200: #ade092;
+  --color-primary-300: #87d261;
+  --color-primary-400: #70c942;
+  --color-primary-500: #4cbc13;
+  --color-primary-600: #45ab11;
+  --color-primary-700: #36850d;
+  --color-primary-800: #2a670a;
+  --color-primary-900: #204f08;
+
+  /* ---- Secondary (Admin Blue) ---- */
+  --color-secondary-50: oklch(0.968 0.026 269.8);
+  --color-secondary-100: oklch(0.913 0.046 266.9);
+  --color-secondary-200: oklch(0.865 0.071 264.4);
+  --color-secondary-300: oklch(0.769 0.128 260.8);
+  --color-secondary-400: oklch(0.720 0.181 258.1);
+  --color-secondary-500: oklch(0.649 0.235 255.7);
+  --color-secondary-600: oklch(0.603 0.218 254.4);
+  --color-secondary-700: oklch(0.538 0.205 253.6);
+  --color-secondary-800: oklch(0.455 0.168 253.2);
+  --color-secondary-900: oklch(0.396 0.142 252.8);
+
+  /* ---- Neutral (Warm Grey) ---- */
+  --color-neutral-50: oklch(0.94 0.005 262);
+  --color-neutral-100: oklch(0.84 0.004 262);
+  --color-neutral-200: oklch(0.74 0.004 262);
+  --color-neutral-300: oklch(0.61 0.003 262);
+  --color-neutral-400: oklch(0.49 0.002 262);
+  --color-neutral-500: oklch(0.4 0.001 262);
+  --color-neutral-600: oklch(0.34 0.001 262);
+  --color-neutral-700: oklch(0.29 0.001 262);
+  --color-neutral-800: oklch(0.24 0.001 262);
+  --color-neutral-900: oklch(0.18 0.001 262);
+
+  /* ---- Accent (Near-white surface scale) ---- */
+  --color-accent-50: oklch(0.99 0.002 262);
+  --color-accent-100: oklch(0.975 0.002 262);
+  --color-accent-200: oklch(0.93 0.002 262);
+  --color-accent-300: oklch(0.9 0.002 262);
+  --color-accent-400: oklch(0.87 0.002 262);
+  --color-accent-500: oklch(0.84 0.002 262);
+  --color-accent-600: oklch(0.76 0.002 262);
+  --color-accent-700: oklch(0.66 0.002 262);
+  --color-accent-800: oklch(0.52 0.002 262);
+  --color-accent-900: oklch(0.4 0.002 262);
+
+  /* ---- Semantic (shadcn/radix) ---- */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ---- Fonts ---- */
+  --font-onest: var(--font-onest), sans-serif;
+  --font-golos: var(--font-golosText), sans-serif;
+
+  /* ---- Radius ---- */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}

package/styles/variables.css

@@ -0,0 +1,238 @@
+/* =============================================================================
+   TCN Design System — CSS Custom Properties
+   Converted from _variables.scss
+   ============================================================================= */
+
+:root {
+  overflow-wrap: break-word;
+  text-size-adjust: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* ---- Gray alpha (light mode) ---- */
+  --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
+  --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
+  --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
+  --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
+  --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
+  --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
+  --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
+  --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
+  --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
+  --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
+
+  /* ---- Gray (light mode) ---- */
+  --tt-gray-light-50: rgba(250, 250, 250, 1);
+  --tt-gray-light-100: rgba(244, 244, 245, 1);
+  --tt-gray-light-200: rgba(234, 234, 235, 1);
+  --tt-gray-light-300: rgba(213, 214, 215, 1);
+  --tt-gray-light-400: rgba(166, 167, 171, 1);
+  --tt-gray-light-500: rgba(125, 127, 130, 1);
+  --tt-gray-light-600: rgba(83, 86, 90, 1);
+  --tt-gray-light-700: rgba(64, 65, 69, 1);
+  --tt-gray-light-800: rgba(44, 45, 48, 1);
+  --tt-gray-light-900: rgba(34, 35, 37, 1);
+
+  /* ---- Gray alpha (dark mode) ---- */
+  --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
+  --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
+  --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
+  --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
+  --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
+  --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
+  --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
+  --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
+  --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
+  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
+
+  /* ---- Gray (dark mode) ---- */
+  --tt-gray-dark-50: rgba(25, 25, 26, 1);
+  --tt-gray-dark-100: rgba(32, 32, 34, 1);
+  --tt-gray-dark-200: rgba(45, 45, 47, 1);
+  --tt-gray-dark-300: rgba(70, 70, 73, 1);
+  --tt-gray-dark-400: rgba(99, 99, 105, 1);
+  --tt-gray-dark-500: rgba(124, 124, 131, 1);
+  --tt-gray-dark-600: rgba(163, 163, 168, 1);
+  --tt-gray-dark-700: rgba(192, 192, 195, 1);
+  --tt-gray-dark-800: rgba(224, 224, 225, 1);
+  --tt-gray-dark-900: rgba(245, 245, 245, 1);
+
+  /* ---- Shadows ---- */
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(17, 24, 39, 0.04),
+    0px 12px 24px 0px rgba(17, 24, 39, 0.04),
+    0px 6px 8px 0px rgba(17, 24, 39, 0.02),
+    0px 2px 3px 0px rgba(17, 24, 39, 0.02);
+
+  /* ---- Border radius ---- */
+  --tt-radius-xxs: 0.125rem;
+  --tt-radius-xs: 0.25rem;
+  --tt-radius-sm: 0.375rem;
+  --tt-radius-md: 0.5rem;
+  --tt-radius-lg: 0.75rem;
+  --tt-radius-xl: 1rem;
+
+  /* ---- Transitions ---- */
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
+  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+  /* ---- Contrast helpers ---- */
+  --tt-accent-contrast: 8%;
+  --tt-destructive-contrast: 8%;
+  --tt-foreground-contrast: 8%;
+
+  /* ---- Base colors ---- */
+  --white: rgba(255, 255, 255, 1);
+  --black: rgba(14, 14, 17, 1);
+  --transparent: rgba(255, 255, 255, 0);
+
+  /* ---- Global semantic colors (light mode) ---- */
+  --tt-bg-color: var(--white);
+  --tt-border-color: var(--tt-gray-light-a-200);
+  --tt-border-color-tint: var(--tt-gray-light-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-light-100);
+  --tt-scrollbar-color: var(--tt-gray-light-a-200);
+  --tt-card-bg-color: var(--white);
+  --tt-card-border-color: var(--tt-gray-light-a-100);
+
+  /* ---- Text colors ---- */
+  --tt-color-text-gray: hsl(45, 2%, 46%);
+  --tt-color-text-brown: hsl(19, 31%, 47%);
+  --tt-color-text-orange: hsl(30, 89%, 45%);
+  --tt-color-text-yellow: hsl(38, 62%, 49%);
+  --tt-color-text-green: hsl(148, 32%, 39%);
+  --tt-color-text-blue: hsl(202, 54%, 43%);
+  --tt-color-text-purple: hsl(274, 32%, 54%);
+  --tt-color-text-pink: hsl(328, 49%, 53%);
+  --tt-color-text-red: hsl(2, 62%, 55%);
+
+  /* ---- Highlight colors ---- */
+  --tt-color-highlight-yellow: #fef9c3;
+  --tt-color-highlight-green: #dcfce7;
+  --tt-color-highlight-blue: #e0f2fe;
+  --tt-color-highlight-purple: #f3e8ff;
+  --tt-color-highlight-red: #ffe4e6;
+  --tt-color-highlight-gray: rgb(248, 248, 247);
+  --tt-color-highlight-brown: rgb(244, 238, 238);
+  --tt-color-highlight-orange: rgb(251, 236, 221);
+  --tt-color-highlight-pink: rgb(252, 241, 246);
+
+  /* ---- Radix / shadcn base tokens ---- */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* ---- Dark mode overrides ---- */
+.dark {
+  --tt-bg-color: var(--black);
+  --tt-border-color: var(--tt-gray-dark-a-200);
+  --tt-border-color-tint: var(--tt-gray-dark-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
+  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
+  --tt-card-bg-color: var(--tt-gray-dark-50);
+  --tt-card-border-color: var(--tt-gray-dark-a-50);
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(0, 0, 0, 0.5),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.24),
+    0px 6px 8px 0px rgba(0, 0, 0, 0.22),
+    0px 2px 3px 0px rgba(0, 0, 0, 0.12);
+
+  /* Radix / shadcn dark overrides */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  /* Text colors - dark */
+  --tt-color-text-gray: hsl(0, 0%, 61%);
+  --tt-color-text-brown: hsl(18, 35%, 58%);
+  --tt-color-text-orange: hsl(25, 53%, 53%);
+  --tt-color-text-yellow: hsl(36, 54%, 55%);
+  --tt-color-text-green: hsl(145, 32%, 47%);
+  --tt-color-text-blue: hsl(202, 64%, 52%);
+  --tt-color-text-purple: hsl(270, 55%, 62%);
+  --tt-color-text-pink: hsl(329, 57%, 58%);
+  --tt-color-text-red: hsl(1, 69%, 60%);
+
+  /* Highlight colors - dark */
+  --tt-color-highlight-yellow: #6b6524;
+  --tt-color-highlight-green: #509568;
+  --tt-color-highlight-blue: #6e92aa;
+  --tt-color-highlight-purple: #583e74;
+  --tt-color-highlight-red: #743e42;
+  --tt-color-highlight-gray: rgb(47, 47, 47);
+  --tt-color-highlight-brown: rgb(74, 50, 40);
+  --tt-color-highlight-orange: rgb(92, 59, 35);
+  --tt-color-highlight-pink: rgb(78, 44, 60);
+}
+
+/* ---- Scrollbar utility ---- */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* ---- Autofill fix ---- */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s;
+}