@ponti-studios/ui 0.1.2 → 0.4.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.1.2",
+  "version": "0.4.0",
   "private": false,
   "description": "Shared UI component library for ponti-studios labs",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ponti-studios/labs.git",
@@ -15,7 +15,8 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
@@ -70,61 +71,60 @@
     "./styles.css": "./src/styles.css",
     "./animations.css": "./src/animations.css"
   },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "storybook": "style-dictionary build --config style-dictionary.dark-storybook.json && storybook dev -p 6006",
+    "check:source": "node tokens/check-source.mjs",
+    "test:a11y": "vitest --run --config vitest.config.ts",
+    "tokens:build": "style-dictionary build --config style-dictionary.foundations.json && style-dictionary build --config style-dictionary.light.json && style-dictionary build --config style-dictionary.dark.json && style-dictionary build --config style-dictionary.dark-storybook.json",
+    "tokens:check": "pnpm run tokens:build && node tokens/check-foundations.mjs && git diff --exit-code -- src/tokens/generated",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint src --fix",
+    "format": "oxfmt src --write",
+    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck && pnpm run build"
+  },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@radix-ui/react-accordion": "^1.2.14",
-    "@radix-ui/react-alert-dialog": "^1.1.17",
-    "@radix-ui/react-avatar": "^1.2.2",
-    "@radix-ui/react-dialog": "^1.1.17",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.10",
-    "@radix-ui/react-popover": "^1.1.19",
-    "@radix-ui/react-progress": "^1.1.10",
-    "@radix-ui/react-radio-group": "^1.4.1",
-    "@radix-ui/react-select": "^2.3.1",
-    "@radix-ui/react-slider": "^1.4.1",
-    "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.15",
+    "@radix-ui/colors": "^3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.42.0",
-    "lucide-react": "^1.21.0",
-    "react-day-picker": "^9.11.1",
+    "lucide-react": "^1.24.0",
+    "react-day-picker": "^10.0.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-links": "^10.4.6",
-    "@storybook/addon-onboarding": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
-    "@tailwindcss/vite": "^4.3.1",
-    "@types/node": "^26.0.1",
+    "@storybook/addon-a11y": "10.5.3",
+    "@storybook/addon-docs": "^10.5.3",
+    "@storybook/addon-links": "^10.5.3",
+    "@storybook/addon-onboarding": "^10.5.3",
+    "@storybook/addon-themes": "10.5.3",
+    "@storybook/addon-vitest": "10.5.3",
+    "@storybook/react-vite": "^10.5.3",
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "catalog:",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
-    "oxfmt": "0.56.0",
-    "oxlint": "^1.71.0",
+    "@vitest/browser": "4.1.10",
+    "@vitest/browser-playwright": "4.1.10",
+    "oxfmt": "catalog:shared",
+    "oxlint": "catalog:shared",
+    "playwright": "catalog:",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "^10.4.6",
-    "tailwindcss": "^4.3.1",
+    "storybook": "^10.5.3",
+    "style-dictionary": "5.5.0",
+    "tailwindcss": "catalog:",
     "typescript": "6.0.3",
-    "vite": "^8.1.0"
+    "vite": "catalog:",
+    "vitest": "catalog:"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
   },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "storybook": "storybook dev -p 6006",
-    "typecheck": "tsc --noEmit",
-    "lint": "oxlint src --fix",
-    "format": "oxfmt src --write"
-  }
-}
+  "packageManager": "pnpm@10.30.3"
+}

package/src/animations.css

@@ -1,437 +1,96 @@
-@media (prefers-reduced-motion: reduce) {
-  .motion-anim-enter,
-  .motion-anim-exit,
-  .motion-anim-enter-top,
-  .motion-anim-enter-bottom,
-  .motion-anim-enter-left,
-  .motion-anim-enter-right,
-  .motion-anim-breezy,
-  .motion-anim-breezy-loop,
-  .motion-anim-breezy-progress,
-  .motion-anim-breezy-stagger > * {
-    animation: none !important;
-    opacity: 1 !important;
-    transform: none !important;
-  }
-}
-
-@keyframes motion-enter {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes motion-exit {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-}
-
-@keyframes motion-enter-top {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes motion-exit-top {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-
-@keyframes motion-enter-bottom {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes motion-exit-bottom {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-}
-
-@keyframes motion-enter-left {
+@keyframes accordion-down {
   from {
-    opacity: 0;
-    transform: translateX(-6px);
+    height: 0;
   }
   to {
-    opacity: 1;
-    transform: translateX(0);
+    height: var(--accordion-content-height);
   }
 }
-
-@keyframes motion-exit-left {
+@keyframes accordion-up {
   from {
-    opacity: 1;
-    transform: translateX(0);
+    height: var(--accordion-content-height);
   }
   to {
-    opacity: 0;
-    transform: translateX(-4px);
+    height: 0;
   }
 }
-
-@keyframes motion-enter-right {
+@keyframes fade-in {
   from {
     opacity: 0;
-    transform: translateX(6px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
   }
 }
-
-@keyframes motion-exit-right {
+@keyframes fade-out {
   from {
     opacity: 1;
-    transform: translateX(0);
   }
   to {
     opacity: 0;
-    transform: translateX(4px);
-  }
-}
-
-/*
- * Sheet/drawer slide — full off-canvas travel (not the 4-6px "nudge" used by
- * the motion-enter/exit-* keyframes above, which are meant for small popovers).
- * Gated on the real [data-state] attribute so open/closed never race — see
- * the note above the data-state fade/zoom rules for why that matters here.
- */
-@keyframes sheet-slide-in-from-right {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes sheet-slide-out-to-right {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-@keyframes sheet-slide-in-from-bottom {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes sheet-slide-out-to-bottom {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-.sheet-responsive[data-state="open"] {
-  animation: sheet-slide-in-from-bottom 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-.sheet-responsive[data-state="closed"] {
-  animation: sheet-slide-out-to-bottom 280ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-
-@media (min-width: 768px) {
-  .sheet-responsive[data-state="open"] {
-    animation-name: sheet-slide-in-from-right;
-  }
-
-  .sheet-responsive[data-state="closed"] {
-    animation-name: sheet-slide-out-to-right;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sheet-responsive {
-    animation: none !important;
-    transform: none !important;
-  }
-}
-
-@keyframes motion-breezy-wave {
-  0% {
-    transform: translateY(0);
-    opacity: 0.9;
-  }
-  40% {
-    transform: translateY(-4px);
-    opacity: 1;
-  }
-  70% {
-    transform: translateY(2px);
-    opacity: 0.92;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 0.9;
   }
 }
-
-@keyframes motion-breezy-stream {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-.motion-anim-enter {
-  animation: motion-enter 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.motion-anim-exit {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-.motion-anim-enter-top {
-  animation: motion-enter-top 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.motion-anim-exit-top {
-  animation: motion-exit-top 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-.motion-anim-enter-bottom {
-  animation: motion-enter-bottom 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.motion-anim-exit-bottom {
-  animation: motion-exit-bottom 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-.motion-anim-enter-left {
-  animation: motion-enter-left 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.motion-anim-exit-left {
-  animation: motion-exit-left 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-.motion-anim-enter-right {
-  animation: motion-enter-right 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.motion-anim-exit-right {
-  animation: motion-exit-right 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-
-.motion-anim-breezy {
-  animation: motion-breezy-wave 320ms cubic-bezier(0.32, 0.72, 0.28, 1) forwards;
-}
-.motion-anim-breezy-loop {
-  animation: motion-breezy-wave 1.8s cubic-bezier(0.32, 0.72, 0.28, 1) infinite;
-}
-.motion-anim-breezy-progress {
-  animation: motion-breezy-stream 1.8s linear infinite;
-}
-
-.motion-anim-breezy-stagger > * {
-  animation: motion-breezy-wave 1.8s cubic-bezier(0.32, 0.72, 0.28, 1) infinite;
-}
-.motion-anim-breezy-stagger > *:nth-child(1) {
-  animation-delay: 0ms;
-}
-.motion-anim-breezy-stagger > *:nth-child(2) {
-  animation-delay: 120ms;
-}
-.motion-anim-breezy-stagger > *:nth-child(3) {
-  animation-delay: 240ms;
-}
-.motion-anim-breezy-stagger > *:nth-child(4) {
-  animation-delay: 360ms;
-}
-.motion-anim-breezy-stagger > *:nth-child(5) {
-  animation-delay: 480ms;
-}
-
-@keyframes accordion-down {
+@keyframes zoom-in {
   from {
     opacity: 0;
-    transform: scaleY(0.8);
-    transform-origin: top;
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
-    transform: scaleY(1);
+    transform: scale(1);
   }
 }
-
-@keyframes accordion-up {
+@keyframes zoom-out {
   from {
     opacity: 1;
-    transform: scaleY(1);
-    transform-origin: top;
+    transform: scale(1);
   }
   to {
     opacity: 0;
-    transform: scaleY(0.8);
+    transform: scale(0.95);
   }
 }
 
-.animate-accordion-down,
-[data-state="open"].animate-accordion-down {
-  animation: accordion-down 400ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
-}
-
-.animate-accordion-up,
-[data-state="closed"].animate-accordion-up {
-  animation: accordion-up 300ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
-}
-
 .animate-in {
-  animation: motion-enter 150ms cubic-bezier(0, 0, 0.2, 1) both;
+  animation:
+    fade-in 150ms ease-out,
+    zoom-in 150ms ease-out;
 }
 .animate-out {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-.fade-in {
-  animation: motion-enter 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.fade-out {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
+  animation:
+    fade-out 120ms ease-in,
+    zoom-out 120ms ease-in;
 }
-
-/*
- * These utility classes exist alongside their opposite (open + closed, or
- * visible + hidden) on the same element at all times — only the `data-state`
- * attribute value actually changes between renders. Each selector below must
- * be qualified with the matching `[data-state="..."]` attribute so only the
- * currently-active variant applies; without it, cascade order alone decides
- * the winner (whichever rule is declared last), regardless of real state.
- */
-[data-state="open"].data-\[state\=open\]\:animate-in {
-  animation: motion-enter 150ms cubic-bezier(0, 0, 0.2, 1) both;
+.fade-in-0 {
+  animation-name: fade-in;
 }
-[data-state="closed"].data-\[state\=closed\]\:animate-out {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
+.fade-out-0 {
+  animation-name: fade-out;
 }
-
-[data-state="open"].data-\[state\=open\]\:fade-in-0,
-[data-state="open"].data-\[state\=open\]\:fade-in-90,
-[data-state="visible"].data-\[state\=visible\]\:fade-in {
-  animation: motion-enter 150ms cubic-bezier(0, 0, 0.2, 1) both;
+.zoom-in-95 {
+  animation-name: zoom-in;
 }
-
-[data-state="closed"].data-\[state\=closed\]\:fade-out-0,
-[data-state="hidden"].data-\[state\=hidden\]\:fade-out {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-
-[data-state="open"].data-\[state\=open\]\:zoom-in-90,
-[data-state="open"].data-\[state\=open\]\:zoom-in-95 {
-  animation: motion-enter 150ms cubic-bezier(0, 0, 0.2, 1) both;
+.zoom-out-95 {
+  animation-name: zoom-out;
 }
-[data-state="closed"].data-\[state\=closed\]\:zoom-out-95 {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
+.data-open\:animate-in[data-open],
+.data-open\:animate-in[data-state="open"] {
+  animation:
+    fade-in 150ms ease-out,
+    zoom-in 150ms ease-out;
 }
-
-/*
- * Same issue as the data-state pairs above: Popover/Tooltip/DropdownMenu
- * content applies all four data-[side=...] classes simultaneously (only the
- * real `data-side` attribute changes at runtime), so each selector must be
- * qualified with the matching [data-side="..."] attribute — otherwise
- * cascade order alone picks a winner regardless of actual placement.
- */
-[data-side="bottom"].data-\[side\=bottom\]\:slide-in-from-top-2 {
-  animation: motion-enter-top 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-[data-side="top"].data-\[side\=top\]\:slide-in-from-bottom-2 {
-  animation: motion-enter-bottom 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-[data-side="left"].data-\[side\=left\]\:slide-in-from-right-2 {
-  animation: motion-enter-right 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-[data-side="right"].data-\[side\=right\]\:slide-in-from-left-2 {
-  animation: motion-enter-left 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-
-.slide-in-from-bottom-10,
-.slide-in-from-bottom-0 {
-  animation: motion-enter-bottom 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.slide-in-from-left-52 {
-  animation: motion-enter-left 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.slide-in-from-right-52 {
-  animation: motion-enter-right 150ms cubic-bezier(0, 0, 0.2, 1) both;
-}
-.slide-out-to-left-52 {
-  animation: motion-exit-left 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-.slide-out-to-right-52 {
-  animation: motion-exit-right 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-
-.note-picker-panel {
-  transition:
-    opacity 150ms cubic-bezier(0, 0, 0.2, 1),
-    transform 150ms cubic-bezier(0, 0, 0.2, 1),
-    overlay 150ms allow-discrete,
-    display 150ms allow-discrete;
-}
-
-.note-picker-panel[open] {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-
-@starting-style {
-  .note-picker-panel[open] {
-    opacity: 0;
-    transform: translateY(8px) scale(0.98);
-  }
-}
-
-/*
- * View Transitions: opt-in only.
- * The browser's default root crossfade animates every diffed pixel of the
- * whole page using mix-blend-mode: plus-lighter, which visibly flashes white
- * on any element whose color changes during the transition (e.g. a nav item
- * going from inactive to active). Disabling the root group's animation makes
- * transitions opt-in — only elements with an explicit view-transition-name
- * (set inline via style.viewTransitionName) animate; everything else swaps
- * instantly with no crossfade artifact.
- */
-::view-transition-group(root) {
-  animation-duration: 0s;
+.data-closed\:animate-out[data-closed],
+.data-closed\:animate-out[data-state="closed"] {
+  animation:
+    fade-out 120ms ease-in,
+    zoom-out 120ms ease-in;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(*),
-  ::view-transition-old(*),
-  ::view-transition-new(*) {
+  .animate-in,
+  .animate-out,
+  [data-open],
+  [data-closed] {
     animation: none !important;
   }
 }

package/src/components/data-display/accordion.tsx

@@ -1,11 +1,26 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} className="w-full" />;
+function Accordion({
+  type,
+  collapsible: _collapsible,
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root> & {
+  type?: "single" | "multiple";
+  collapsible?: boolean;
+}) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      multiple={type === "multiple"}
+      {...props}
+      className={cn("w-full", className)}
+    />
+  );
 }
 
 function AccordionItem({
@@ -15,10 +30,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn(
-        "border-default bg-canvas mb-2 overflow-hidden rounded-md border last:mb-0",
-        className,
-      )}
+      className={cn("mb-2 overflow-hidden rounded-md border last:mb-0", className)}
       {...props}
     />
   );
@@ -50,15 +62,15 @@ function AccordionContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Panel>) {
   return (
-    <AccordionPrimitive.Content
+    <AccordionPrimitive.Panel
       data-slot="accordion-content"
       className="animate-accordion-down overflow-hidden text-sm"
       {...props}
     >
       <div className={cn("px-4 pt-2 pb-3", className)}>{children}</div>
-    </AccordionPrimitive.Content>
+    </AccordionPrimitive.Panel>
   );
 }
 

package/src/components/data-display/filter-chip.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FilterChip } from "./filter-chip";
+
+const meta = {
+  title: "DataDisplay/FilterChip",
+  component: FilterChip,
+  tags: ["autodocs"],
+  args: {
+    onRemove: () => {},
+  },
+} satisfies Meta<typeof FilterChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: "Status: Active" },
+};
+
+export const Editable: Story = {
+  args: { label: "Status: Active", onClick: () => {} },
+};
+
+export const LongLabel: Story = {
+  args: { label: "Created between Jan 1, 2026 and Jul 24, 2026" },
+};
+
+export const Group: Story = {
+  args: { label: "Filters" },
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <FilterChip label="Status: Active" onRemove={() => {}} onClick={() => {}} />
+      <FilterChip label="Team: Design" onRemove={() => {}} onClick={() => {}} />
+      <FilterChip label="Archived" onRemove={() => {}} />
+    </div>
+  ),
+};