@popgrids/ui 0.0.2 → 0.0.5

package/dist/theme.css

@@ -0,0 +1,449 @@
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/inter";
+@import "@fontsource/poppins/400.css";
+@import "@fontsource/poppins/500.css";
+@import "@fontsource/poppins/600.css";
+@import "@fontsource/poppins/700.css";
+@import "@fontsource/poppins/800.css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: var(--background, oklch(1 0 0));
+  --foreground: var(--foreground, oklch(0 0 0));
+  --card: var(--card, oklch(1 0 0));
+  --card-foreground: var(--card-foreground, oklch(0.145 0 0));
+  --popover: var(--popover, oklch(1 0 0));
+  --popover-foreground: var(--popover-foreground, oklch(0 0 0));
+  --primary: var(--primary, oklch(0.205 0 0));
+  --primary-foreground: var(--primary-foreground, oklch(0.985 0 0));
+  --secondary: var(--secondary, oklch(0.97 0 0));
+  --secondary-foreground: var(--secondary-foreground, oklch(0.205 0 0));
+  --muted: var(--muted, oklch(0.97 0 0));
+  --muted-foreground: var(--muted-foreground, oklch(0.48 0.007 255.43));
+  --accent: var(--accent, oklch(0.97 0 0));
+  --accent-foreground: var(--accent-foreground, oklch(0.205 0 0));
+  --destructive: var(--destructive, oklch(0.577 0.245 27.325));
+  --border: var(--border, oklch(0.1101 0.0763 264.05 / 10.2%));
+  --input: var(--input, oklch(0.922 0 0));
+  --ring: var(--ring, oklch(0.5367 0.2286 262.17));
+  --chart-1: var(--chart-1, oklch(0.646 0.222 41.116));
+  --chart-2: var(--chart-2, oklch(0.6 0.118 184.704));
+  --chart-3: var(--chart-3, oklch(0.398 0.07 227.392));
+  --chart-4: var(--chart-4, oklch(0.828 0.189 84.429));
+  --chart-5: var(--chart-5, oklch(0.769 0.188 70.08));
+  --sidebar: var(--sidebar, oklch(0.985 0 0));
+  --sidebar-foreground: var(--sidebar-foreground, oklch(0.145 0 0));
+  --sidebar-primary: var(--sidebar-primary, oklch(0.205 0 0));
+  --sidebar-primary-foreground: var(
+    --sidebar-primary-foreground,
+    oklch(0.985 0 0)
+  );
+  --sidebar-accent: var(--sidebar-accent, oklch(0.97 0 0));
+  --sidebar-accent-foreground: var(
+    --sidebar-accent-foreground,
+    oklch(0.205 0 0)
+  );
+  --sidebar-border: var(--sidebar-border, oklch(0.922 0 0));
+  --sidebar-ring: var(--sidebar-ring, oklch(0.708 0 0));
+}
+
+.dark {
+  --background: var(--background, oklch(0.15 0.03 255.43));
+  --foreground: var(--foreground, oklch(0.66 0.006 255.43));
+  --card: var(--card, oklch(0.205 0 0));
+  --card-foreground: var(--card-foreground, oklch(0.985 0 0));
+  --popover: var(--popover, oklch(0.15 0.03 255.43));
+  --popover-foreground: var(--popover-foreground, oklch(0.66 0.006 255.43));
+  --primary: var(--primary, oklch(0.922 0 0));
+  --primary-foreground: var(--primary-foreground, oklch(0.205 0 0));
+  --secondary: var(--secondary, oklch(0.269 0 0));
+  --secondary-foreground: var(--secondary-foreground, oklch(0.985 0 0));
+  --muted: var(--muted, oklch(0.269 0 0));
+  --muted-foreground: var(--muted-foreground, oklch(0.66 0.006 255.43));
+  --accent: var(--accent, oklch(0.269 0 0));
+  --accent-foreground: var(--accent-foreground, oklch(0.985 0 0));
+  --destructive: var(--destructive, oklch(0.704 0.191 22.216));
+  --border: var(--border, oklch(1 0 0 / 10%));
+  --input: var(--input, oklch(1 0 0 / 15%));
+  --ring: var(--ring, oklch(0.5367 0.2286 262.17));
+  --chart-1: var(--chart-1, oklch(0.488 0.243 264.376));
+  --chart-2: var(--chart-2, oklch(0.696 0.17 162.48));
+  --chart-3: var(--chart-3, oklch(0.769 0.188 70.08));
+  --chart-4: var(--chart-4, oklch(0.627 0.265 303.9));
+  --chart-5: var(--chart-5, oklch(0.645 0.246 16.439));
+  --sidebar: var(--sidebar, oklch(0.205 0 0));
+  --sidebar-foreground: var(--sidebar-foreground, oklch(0.985 0 0));
+  --sidebar-primary: var(--sidebar-primary, oklch(0.488 0.243 264.376));
+  --sidebar-primary-foreground: var(
+    --sidebar-primary-foreground,
+    oklch(0.985 0 0)
+  );
+  --sidebar-accent: var(--sidebar-accent, oklch(0.269 0 0));
+  --sidebar-accent-foreground: var(
+    --sidebar-accent-foreground,
+    oklch(0.985 0 0)
+  );
+  --sidebar-border: var(--sidebar-border, oklch(1 0 0 / 10%));
+  --sidebar-ring: var(--sidebar-ring, oklch(0.556 0 0));
+}
+
+@theme inline {
+  --font-sans: "Inter Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* ------------------------------------------------------------ */
+/* Brand theme settings */
+/* ------------------------------------------------------------ */
+
+:root {
+  --color-tint-700-reversed: var(--color-white-alpha-700);
+  --color-tint-800-default: var(--color-black-alpha-800);
+  --color-tint-900-default: var(--color-black-alpha-900);
+  --color-tint-950-reversed: var(--color-white-alpha-950);
+  --color-tint-950-default: var(--color-black-alpha-950);
+}
+
+.dark {
+  --color-tint-700-reversed: var(--color-black-alpha-700);
+  --color-tint-800-default: var(--color-white-alpha-800);
+  --color-tint-900-default: var(--color-white-alpha-900);
+  --color-tint-950-reversed: var(--color-black-alpha-950);
+  --color-tint-950-default: var(--color-white-alpha-950);
+}
+
+@theme inline {
+  /* Color: Tint */
+  --color-tint-700-reversed: var(--color-tint-700-reversed);
+  --color-tint-800-default: var(--color-tint-800-default);
+  --color-tint-900-default: var(--color-tint-900-default);
+  --color-tint-950-reversed: var(--color-tint-950-reversed);
+  --color-tint-950-default: var(--color-tint-950-default);
+}
+
+@theme {
+  --bg-image-checkerboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+
+  --animate-appear-then-fade: appear-then-fade 4s 300ms both;
+  --animate-fade-in: fade-in 150ms forwards;
+  --animate-fade-out: fade-out 150ms forwards;
+  --animate-shake: shake 150ms 2 linear;
+  --animate-smooth-bounce-in: smooth-bounce-in 800ms ease 1;
+  --animate-smooth-pulse: smooth-pulse 1200ms ease-in-out infinite;
+  --animate-notification-badge-ping: notification-badge-ping 1s
+    cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-glowing-border: glowing-border 3s linear infinite;
+
+  /* Color: Brand */
+  --color-brand-midnight-900: oklch(0.15 0.03 255.43);
+  --color-brand-midnight-800: oklch(0.19 0.05 255.43);
+  --color-brand-ocean-400: oklch(0.63 0.19 255.43);
+  --color-brand-ocean-100: oklch(0.91 0.05 255.43);
+  --color-brand-forest-900: oklch(0.31 0.12 165.43);
+  --color-brand-forest-700: oklch(0.45 0.15 165.43);
+  --color-brand-forest-100: oklch(0.97 0.04 165.43);
+  --color-brand-highlight-400: oklch(0.88 0.25 105.43);
+  --color-brand-pumpkin-500: oklch(0.62 0.18 45.43);
+  --color-brand-pumpkin-200: oklch(0.89 0.08 45.43);
+  --color-brand-lemon-300: oklch(0.91 0.12 85.43);
+  --color-brand-lemon-100: oklch(0.97 0.04 85.43);
+
+  /* Color: Black Alpha */
+  --color-black-alpha-25: rgb(0 0 32 / 0.98);
+  --color-black-alpha-50: rgb(0 0 32 / 0.96);
+  --color-black-alpha-100: rgb(0 0 32 / 0.94);
+  --color-black-alpha-200: rgb(0 0 32 / 0.92);
+  --color-black-alpha-300: rgb(0 0 32 / 0.8);
+  --color-black-alpha-400: rgb(0 0 32 / 0.56);
+  --color-black-alpha-500: rgb(0 0 32 / 0.5);
+  --color-black-alpha-600: rgb(0 0 32 / 0.35);
+  --color-black-alpha-700: rgb(0 0 32 / 0.16);
+  --color-black-alpha-800: rgb(0 0 32 / 0.08);
+  --color-black-alpha-900: rgb(0 0 32 / 0.04);
+  --color-black-alpha-950: rgb(0 0 32 / 0);
+
+  /* Color: White Alpha */
+  --color-white-alpha-25: rgb(255 255 255 / 0.98);
+  --color-white-alpha-50: rgb(255 255 255 / 0.96);
+  --color-white-alpha-100: rgb(255 255 255 / 0.94);
+  --color-white-alpha-200: rgb(255 255 255 / 0.92);
+  --color-white-alpha-300: rgb(255 255 255 / 0.8);
+  --color-white-alpha-400: rgb(255 255 255 / 0.56);
+  --color-white-alpha-500: rgb(255 255 255 / 0.5);
+  --color-white-alpha-600: rgb(255 255 255 / 0.35);
+  --color-white-alpha-700: rgb(255 255 255 / 0.16);
+  --color-white-alpha-800: rgb(255 255 255 / 0.08);
+  --color-white-alpha-900: rgb(255 255 255 / 0.04);
+  --color-white-alpha-950: rgb(255 255 255 / 0);
+
+  /* Color: Grayscale */
+  --color-grayscale-25: oklch(0.99 0.001 255.43);
+  --color-grayscale-50: oklch(0.98 0.002 255.43);
+  --color-grayscale-100: oklch(0.95 0.003 255.43);
+  --color-grayscale-200: oklch(0.91 0.004 255.43);
+  --color-grayscale-300: oklch(0.84 0.005 255.43);
+  --color-grayscale-400: oklch(0.66 0.006 255.43);
+  --color-grayscale-500: oklch(0.48 0.007 255.43);
+  --color-grayscale-600: oklch(0.36 0.008 255.43);
+  --color-grayscale-700: oklch(0.28 0.009 255.43);
+  --color-grayscale-800: oklch(0.19 0.01 255.43);
+  --color-grayscale-900: oklch(0.15 0.02 255.43);
+  --color-grayscale-950: oklch(0.11 0.02 255.43);
+
+  /* Color: Error */
+  --color-error-25: oklch(0.98 0.01 25.43);
+  --color-error-50: oklch(0.96 0.02 25.43);
+  --color-error-100: oklch(0.9394 0.0288 22.95);
+  --color-error-200: oklch(0.87 0.07 23.76);
+  --color-error-300: oklch(0.8014 0.1094 24.57);
+  --color-error-400: oklch(0.72 0.16 26.56);
+  --color-error-500: oklch(0.6371 0.2104 28.54);
+  --color-error-600: oklch(0.57 0.1963 29.03);
+  --color-error-700: oklch(0.5003 0.1821 29.51);
+  --color-error-800: oklch(0.42 0.16 29.51);
+  --color-error-900: oklch(0.35 0.14 29.51);
+  --color-error-950: oklch(0.22 0.11 29.51);
+
+  /* Color: Warning */
+  --color-warning-25: oklch(0.99 0.01 85.43);
+  --color-warning-50: oklch(0.98 0.02 85.43);
+  --color-warning-100: oklch(0.95 0.06 85.43);
+  --color-warning-200: oklch(0.89 0.12 85.43);
+  --color-warning-300: oklch(0.82 0.17 85.43);
+  --color-warning-400: oklch(0.74 0.2 85.43);
+  --color-warning-500: oklch(0.65 0.22 85.43);
+  --color-warning-600: oklch(0.55 0.23 85.43);
+  --color-warning-700: oklch(0.44 0.21 85.43);
+  --color-warning-800: oklch(0.35 0.19 85.43);
+  --color-warning-900: oklch(0.29 0.16 85.43);
+  --color-warning-950: oklch(0.18 0.13 85.43);
+
+  /* Color: Success */
+  --color-success-25: oklch(0.98 0.01 145.43);
+  --color-success-50: oklch(0.97 0.02 145.43);
+  --color-success-100: oklch(0.94 0.05 145.43);
+  --color-success-200: oklch(0.88 0.1 145.43);
+  --color-success-300: oklch(0.79 0.15 145.43);
+  --color-success-400: oklch(0.69 0.19 145.43);
+  --color-success-500: oklch(0.58 0.22 145.43);
+  --color-success-600: oklch(0.47 0.23 145.43);
+  --color-success-700: oklch(0.38 0.21 145.43);
+  --color-success-800: oklch(0.31 0.19 145.43);
+  --color-success-900: oklch(0.26 0.16 145.43);
+  --color-success-950: oklch(0.17 0.13 145.43);
+
+  /* Brand Font Settings */
+  --font--feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1;
+  --font--variation-settings: "opsz" 14;
+
+  --font-decor: "Poppins", sans-serif;
+  --font-decor--feature-settings: "cv08", "ss01" 1, "ss03" 1, "kern" 1, "liga" 1;
+  --font-decor--variation-settings: "opsz" 32;
+
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Font Sizes */
+  /* Regular Text */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.125rem;
+  --text-xs--letter-spacing: 0rem;
+
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-sm--letter-spacing: 0rem;
+
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-base--letter-spacing: 0rem;
+
+  --text-md: var(--text-base);
+  --text-md--line-height: var(--text-base--line-height);
+  --text-md--letter-spacing: var(--text-base--letter-spacing);
+
+  --text-widget-base: 0.8125rem;
+  --text-widget-base--line-height: 1.125rem;
+  --text-widget-base--letter-spacing: -0.08px;
+
+  --text-widget-md: var(--text-widget-base);
+  --text-widget-md--line-height: var(--text-widget-base--line-height);
+  --text-widget-md--letter-spacing: var(--text-widget-base--letter-spacing);
+
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-lg--letter-spacing: 0rem;
+
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.875rem;
+  --text-xl--letter-spacing: 0rem;
+
+  /* Decorative Text */
+  --text-decor-xxs: 1.25rem;
+  --text-decor-xxs--line-height: 1.375rem;
+  --text-decor-xxs--letter-spacing: -0.025rem;
+  --text-decor-xxs--font-weight: 700;
+
+  --text-decor-xs: 1.5rem;
+  --text-decor-xs--line-height: 1.5rem;
+  --text-decor-xs--letter-spacing: -0.03rem;
+  --text-decor-xs--font-weight: 800;
+
+  --text-decor-sm: 1.875rem;
+  --text-decor-sm--line-height: 1.875rem;
+  --text-decor-sm--letter-spacing: -0.075rem;
+  --text-decor-sm--font-weight: 800;
+
+  --text-decor-md: 2.25rem;
+  --text-decor-md--line-height: 2.25rem;
+  --text-decor-md--letter-spacing: -0.09rem;
+  --text-decor-md--font-weight: 800;
+
+  --text-decor-lg: 3rem;
+  --text-decor-lg--line-height: 3rem;
+  --text-decor-lg--letter-spacing: -0.18rem;
+  --text-decor-lg--font-weight: 800;
+
+  --text-decor-xl: 3.75rem;
+  --text-decor-xl--line-height: 3.75rem;
+  --text-decor-xl--letter-spacing: -0.225rem;
+  --text-decor-xl--font-weight: 700;
+
+  --text-decor-2xl: 4.375rem;
+  --text-decor-2xl--line-height: 4.375rem;
+  --text-decor-2xl--letter-spacing: -0.2625rem;
+  --text-decor-2xl--font-weight: 800;
+
+  @keyframes shake {
+    0% {
+      transform: translate(3px, 0);
+    }
+    50% {
+      transform: translate(-3px, 0);
+    }
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+
+  @keyframes appear-then-fade {
+    0%, 100%: {
+      opacity: 0;
+    }
+    5%, 80%: {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in {
+    0%: {
+      opacity: 0;
+    }
+    100%: {
+      opacity: 100;
+    }
+  }
+
+  @keyframes fade-out {
+    0%: {
+      opacity: 100;
+    }
+    100%: {
+      opacity: 0;
+    }
+  }
+
+  @keyframes smooth-bounce-in {
+    0%: {
+      transform: scale(0.3);
+      opacity: 0;
+    }
+    50%: {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+    70%: {
+      transform: scale(0.9);
+    }
+    100%: {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes smooth-pulse {
+    100%: {
+      transform: scale(1.8);
+      opacity: 0;
+    }
+  }
+
+  @keyframes notification-badge-ping {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    75%,
+    100% {
+      transform: scale(1.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes glowing-border {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+}
+
+@utility scrollbar-stable {
+  scrollbar-gutter: stable;
+}
+
+/* Instruct Tailwind to scan this library's files when this CSS is imported */
+/* The path is relative to this CSS file's location in node_modules */
+@source "./**/*.{js,cjs}";

package/package.json

@@ -1,52 +1,76 @@
 {
+  "author": "PopGrids",
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.0.0",
+    "@fontsource/poppins": "^5.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5"
+  },
+  "description": "A modern, production-ready React UI component library based on shadcn/ui principles, built with Base UI primitives and optimized for tree-shaking.",
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "shadcn": "^3.6.2",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwind",
+    "tailwindcss",
+    "shadcn",
+    "base-ui",
+    "tree-shakeable",
+    "typescript"
+  ],
+  "license": "UNLICENSED",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "name": "@popgrids/ui",
-  "version": "0.0.2",
+  "peerDependencies": {
+    "@base-ui/react": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "shadcn": "^3.6.2",
+    "tailwindcss": "^4.0.0"
+  },
   "private": false,
-  "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/popgrids/popgrids-turborepo.git"
+    "url": "git+https://github.com/popgrids/popgrids-ui.git"
   },
-  "author": "Popgrids",
+  "sideEffects": false,
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "version": "0.0.5",
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "clean": "rm -rf .turbo node_modules dist",
-    "lint": "eslint . --max-warnings 0",
-    "test": "web-test-runner src/**/*.test.ts --node-resolve",
-    "generate:component": "turbo gen ui:component",
-    "check-types": "tsc --noEmit"
-  },
-  "devDependencies": {
-    "@open-wc/testing": "^4.0.0",
-    "@popgrids/eslint-config": "*",
-    "@types/mocha": "^10.0.10",
-    "@web/dev-server-esbuild": "^0.4.4",
-    "@web/test-runner": "^0.18.0",
-    "eslint": "^9.21.0",
-    "tslib": "^2.8.1",
-    "tsup": "^8.4.0",
-    "typescript": "5.8.2"
-  },
-  "dependencies": {
-    "@popgrids/theme": "*",
-    "lit": "^3.2.1"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "files": [
-    "dist"
-  ]
-}
+    "build": "tsup"
+  }
+}