@popgrids/ui 0.0.6 → 0.0.8

package/dist/theme.css

@@ -6,87 +6,77 @@
 @import "@fontsource/poppins/700.css";
 @import "@fontsource/poppins/800.css";
 
+@plugin "@tailwindcss/typography";
+
 @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));
+  --background: oklch(1 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 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.48 0.007 255.43);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.1101 0.0763 264.05 / 10.2%);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.5367 0.2286 262.17);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --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 {
-  --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));
+  --background: oklch(0.15 0.03 255.43);
+  --foreground: oklch(0.66 0.006 255.43);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.15 0.03 255.43);
+  --popover-foreground: oklch(0.66 0.006 255.43);
+  --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.66 0.006 255.43);
+  --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.5367 0.2286 262.17);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --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);
 }
 
 @theme inline {
@@ -173,6 +163,17 @@
     cubic-bezier(0, 0, 0.2, 1) infinite;
   --animate-glowing-border: glowing-border 3s linear infinite;
 
+  /* Blur */
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 16px;
+  --blur-lg: 24px;
+  --blur-xl: 40px;
+  --blur-2xl: 60px;
+
+  /* Breakpoints */
+  --breakpoint-2xl: 87.5rem;
+
   /* Color: Brand */
   --color-brand-midnight-900: oklch(0.15 0.03 255.43);
   --color-brand-midnight-800: oklch(0.19 0.05 255.43);
@@ -271,6 +272,59 @@
   --color-success-900: oklch(0.26 0.16 145.43);
   --color-success-950: oklch(0.17 0.13 145.43);
 
+  /* Container widths */
+  --container-3xs: 16rem;
+  --container-2xs: 20rem;
+  --container-xs: 24rem;
+  --container-sm: 30rem;
+  --container-md: 36rem;
+  --container-lg: 40rem;
+  --container-xl: 48rem;
+  --container-2xl: 64rem;
+  --container-3xl: 80rem;
+  --container-4xl: 90rem;
+  --container-5xl: 100rem;
+  --container-6xl: 120rem;
+  --container-7xl: 140rem;
+
+  /* Drop-Shadow */
+  --drop-shadow-xl: 0px 20px 24px rgba(16, 24, 40, 0.1);
+  --drop-shadow-2xl: 0px 24px 48px rgba(16, 24, 40, 0.18);
+  --drop-shadow-3xl: 0px 32px 48px rgba(16, 24, 40, 0.14);
+  --drop-shadow-4xl: 0px 24px 20px rgba(16, 24, 40, 0.28);
+  --drop-shadow-forest-3xl: 0px 32px 24px rgba(0, 80, 70, 0.45);
+
+  /* Durations */
+  --transition-duration-bouncy: 1s;
+  --transition-duration-card-highlight: 0.6s;
+  --transition-duration-gentle: 0.833s;
+  --transition-duration-menu: 0.4s;
+  --transition-duration-pop-hover: 0.6s;
+  --transition-duration-pop-text: 0.3s;
+  --transition-duration-quick: 0.833s;
+  --transition-duration-slow: 1.167s;
+
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Easing */
+  /* prettier-ignore */
+  --ease-bouncy: linear(0, 0.011, 0.045 1.3%, 0.184 2.7%, 0.911 7.4%, 1.153 9.4%, 1.301 11.2%, 1.342, 1.362 13%, 1.363, 1.355 14.4%, 1.306 16%, 1.028 21%, 0.939 23%, 0.89 24.7%, 0.876, 0.868 26.4%, 0.869, 0.882 29%, 0.907 30.5%, 1.014 35.9%, 1.038, 1.048 39.8% 41.1%, 1.043 42.5%, 0.995 49.3%, 0.987, 0.983 53.2%, 0.984 55.9%, 1.002 62.7%, 1.006 66.4%, 0.998 79.7%, 1);
+  /* prettier-ignore */
+  --ease-card-highlight: linear(0, 0.008, 0.031 1.8%, 0.127 3.9%, 0.671 11.8%, 0.881 15.5%, 0.959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, 0.999 45.4%, 0.99 49.6%, 0.989 55.3%, 1.001 74.9%, 1);
+  /* prettier-ignore */
+  --ease-gentle: linear(0, 0.007, 0.026, 0.059 4.5%, 0.106 6.3%, 0.209 9.5%, 0.558 19.3%, 0.658, 0.742, 0.812, 0.87, 0.918, 0.957, 0.986 41.6%, 1.007 45.3%, 1.021 49.4%, 1.027 54% 60.9%, 1.007 83.2%, 1);
+  /* prettier-ignore */
+  --ease-menu: linear(0, 0.0034 0.81%, 0.0278 2.42%, 0.097 4.84%, 0.5361 15.32%, 0.655 18.55%, 0.7314, 0.7964 23.39%, 0.8662, 0.9185, 0.9561, 0.9818, 0.9984, 1.0083 42.74%, 1.014 46.77%, 1.0145 53.22%, 1.0053 68.55%, 1.0019 77.42%, 0.9998 100%);
+  /* prettier-ignore */
+  --ease-pop-hover: linear(0, 0.008, 0.031 1.8%, 0.127 3.9%, 0.671 11.8%, 0.881 15.5%, 0.959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, 0.999 45.4%, 0.99 49.6%, 0.989 55.3%, 1.001 74.9%, 1);
+  /* prettier-ignore */
+  --ease-pop-text: linear(0, 0.0051 0.99%, 0.0261, 0.0607 3.61%, 0.1192 5.26%, 0.2531 8.21%, 0.6509 16.1%, 0.7652 18.73%, 0.8512, 0.9232 23.33%, 0.9881 25.96%, 1.0305 28.26%, 1.0642 30.88%, 1.0782 32.53%, 1.089, 1.094 36.47%, 1.0942, 1.0896 41.07%, 1.0804 43.7%, 1.0354 53.23%, 1.0181 57.5%, 1.0061 61.44%, 0.9974 65.71%, 0.9925 70.31%, 0.991 75.9%, 0.9996 99.88%);
+  /* prettier-ignore */
+  --ease-quick: linear(0, 0.008, 0.031 1.8%, 0.127 3.9%, 0.671 11.8%, 0.881 15.5%, 0.959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, 0.999 45.4%, 0.99 49.6%, 0.989 55.3%, 1.001 74.9%, 1);
+  /* prettier-ignore */
+  --ease-slow: linear(0, 0.005, 0.02 2%, 0.081 4.5%, 0.469 15.2%, 0.567, 0.65, 0.722 24.4%, 0.784, 0.835 31.1%, 0.878 34.9%, 0.914 39.1%, 0.942 43.8%, 0.964 49.1%, 0.979 55.4%, 0.989 62.4%, 0.995 71.1%, 1);
+
   /* Brand Font Settings */
   --font--feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1;
   --font--variation-settings: "opsz" 14;
@@ -279,8 +333,32 @@
   --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);
+  /* Radius */
+  --radius-none: 0; /* 0px */
+  --radius-xxs: 0.125rem; /* 2px */
+  --radius-xs: 0.25rem; /* 4px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.25rem; /* 20px */
+  --radius-4xl: 1.5rem; /* 24px */
+
+  /* Shadows */
+  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
+    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+  --shadow-3xl: 0px 32px 48px rgba(16, 24, 40, 0.14);
+  --shadow-4xl: 0px 24px 20px rgba(16, 24, 40, 0.28);
+  --shadow-forest-3xl: 0px 32px 24px rgba(0, 80, 70, 0.45);
 
   /* Font Sizes */
   /* Regular Text */
@@ -440,10 +518,32 @@
   }
 }
 
+@utility mask {
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+@utility mask-squircle {
+  mask-image: url("data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e");
+}
+
 @utility scrollbar-stable {
   scrollbar-gutter: stable;
 }
 
+@layer utilities {
+  .prose {
+    --tw-prose-body: var(--foreground);
+    --tw-prose-bullets: var(--foreground);
+    --tw-prose-headings: var(--foreground);
+
+    &::marker {
+      color: var(--foreground);
+    }
+  }
+}
+
 /* 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,21 +1,35 @@
 {
   "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"
+    "tailwind-merge": "^3.4.0"
   },
-  "description": "A modern, production-ready React UI component library based on shadcn/ui principles, built with Base UI primitives and optimized for tree-shaking.",
+  "description": "A modern, production-ready React UI component library based on shadcn/ui principles, built with Radix UI primitives and optimized for tree-shaking.",
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@size-limit/preset-small-lib": "^12.0.0",
+    "@size-limit/time": "^12.0.0",
     "@types/node": "^25.0.3",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^18.2.0 || ^19.0.0",
+    "@types/react-dom": "^18.2.0 || ^19.0.0",
+    "@untitledui/icons": "^0.0.19",
+    "fast-glob": "^3.3.3",
+    "prettier": "^3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "shadcn": "^3.6.2",
+    "size-limit": "^12.0.0",
     "tailwindcss": "^4.0.0",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3"
@@ -31,6 +45,31 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs"
+    },
+    "./content-block": {
+      "types": "./dist/content-block.d.ts",
+      "import": "./dist/content-block.js",
+      "require": "./dist/content-block.cjs"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/dropdown-menu.d.ts",
+      "import": "./dist/dropdown-menu.js",
+      "require": "./dist/dropdown-menu.cjs"
+    },
+    "./footer": {
+      "types": "./dist/footer.d.ts",
+      "import": "./dist/footer.js",
+      "require": "./dist/footer.cjs"
+    },
+    "./section-flourish": {
+      "types": "./dist/section-flourish.d.ts",
+      "import": "./dist/section-flourish.js",
+      "require": "./dist/section-flourish.cjs"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [
@@ -43,7 +82,7 @@
     "tailwind",
     "tailwindcss",
     "shadcn",
-    "base-ui",
+    "radix-ui",
     "tree-shakeable",
     "typescript"
   ],
@@ -52,12 +91,25 @@
   "module": "./dist/index.js",
   "name": "@popgrids/ui",
   "peerDependencies": {
-    "@base-ui/react": "^1.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "shadcn": "^3.6.2",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@untitledui/icons": "^0.0.19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
     "tailwindcss": "^4.0.0"
   },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": false
+    }
+  },
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -67,10 +119,18 @@
     "url": "git+https://github.com/popgrids/popgrids-ui.git"
   },
   "sideEffects": false,
+  "size-limit": [
+    {
+      "limit": "20 KB",
+      "path": "dist/index.js",
+      "running": false
+    }
+  ],
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "size": "size-limit"
   }
 }