@ponti-studios/ui 0.1.2 → 0.3.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.1.2",
+  "version": "0.3.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": [
@@ -72,48 +73,41 @@
   },
   "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",
     "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",
+    "framer-motion": "^12.42.2",
+    "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": "^4.3.3",
+    "@types/node": "^26.1.1",
     "@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": "0.59.0",
+    "oxlint": "^1.74.0",
+    "playwright": "^1.61.1",
     "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": "^4.3.3",
     "typescript": "6.0.3",
-    "vite": "^8.1.0"
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -123,6 +117,10 @@
     "build": "vite build",
     "dev": "vite",
     "storybook": "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",
+    "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"

package/src/animations.css

@@ -1,437 +1,19 @@
-@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 {
-  from {
-    opacity: 0;
-    transform: translateX(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes motion-exit-left {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-}
-
-@keyframes motion-enter-right {
-  from {
-    opacity: 0;
-    transform: translateX(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes motion-exit-right {
-  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 {
-  from {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transform-origin: top;
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    opacity: 1;
-    transform: scaleY(1);
-    transform-origin: top;
-  }
-  to {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-}
-
-.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;
-}
-.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;
-}
-
-/*
- * 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;
-}
-[data-state="closed"].data-\[state\=closed\]\:animate-out {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-
-[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;
-}
-
-[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;
-}
-[data-state="closed"].data-\[state\=closed\]\:zoom-out-95 {
-  animation: motion-exit 120ms cubic-bezier(0.4, 0, 1, 1) both;
-}
-
-/*
- * 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;
-}
+@keyframes accordion-down { from { height: 0; } to { height: var(--accordion-content-height); } }
+@keyframes accordion-up { from { height: var(--accordion-content-height); } to { height: 0; } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes zoom-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+@keyframes zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
+
+.animate-in { animation: fade-in 150ms ease-out, zoom-in 150ms ease-out; }
+.animate-out { animation: fade-out 120ms ease-in, zoom-out 120ms ease-in; }
+.fade-in-0 { animation-name: fade-in; }
+.fade-out-0 { animation-name: fade-out; }
+.zoom-in-95 { animation-name: zoom-in; }
+.zoom-out-95 { animation-name: zoom-out; }
+.data-open\:animate-in[data-open], .data-open\:animate-in[data-state="open"] { animation: fade-in 150ms ease-out, zoom-in 150ms ease-out; }
+.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(*) {
-    animation: none !important;
-  }
+  .animate-in, .animate-out, [data-open], [data-closed] { animation: none !important; }
 }

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

@@ -1,11 +1,14 @@
-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, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root> & {
+  type?: "single" | "multiple";
+  collapsible?: boolean;
+}) {
+  return <AccordionPrimitive.Root data-slot="accordion" multiple={type === "multiple"} {...props} className="w-full" />;
 }
 
 function AccordionItem({
@@ -16,7 +19,7 @@ function AccordionItem({
     <AccordionPrimitive.Item
       data-slot="accordion-item"
       className={cn(
-        "border-default bg-canvas mb-2 overflow-hidden rounded-md border last:mb-0",
+        "mb-2 overflow-hidden rounded-md border last:mb-0",
         className,
       )}
       {...props}
@@ -50,15 +53,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.tsx

@@ -23,14 +23,14 @@ export function FilterChip({ label, onRemove, onClick, className }: FilterChipPr
   return (
     <span
       className={cn(
-        "border-subtle bg-panel text-primary inline-flex items-center rounded-full border text-sm font-medium",
+        "border-border bg-secondary text-secondary-foreground inline-flex items-center rounded-full border text-sm font-medium",
         className,
       )}
     >
       {labelContent}
       <button
         type="button"
-        className="text-secondary hover:text-primary mr-1 flex size-10 items-center justify-center rounded-full"
+        className="text-muted-foreground hover:text-foreground mr-1 flex size-10 items-center justify-center rounded-full"
         onClick={onRemove}
         aria-label={`Remove filter: ${typeof label === "string" ? label : "selected filter"}`}
       >

package/src/components/data-display/index.ts

@@ -1,6 +1,11 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
 export { FilterChip } from "./filter-chip";
 export type { FilterChipProps } from "./filter-chip";
+export { MetricCard } from "./metric-card";
+export { SortControls } from "./sort-controls";
+export type { SortControlsProps } from "./sort-controls";
+export { SortRow } from "./sort-row";
+export type { SortRowProps } from "./sort-row";
 export {
   Table,
   TableBody,

package/src/components/data-display/metric-card.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { MetricCard } from "./metric-card";
+
+const meta = {
+  title: "DataDisplay/MetricCard",
+  component: MetricCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MetricCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Net worth",
+    value: "$48,210",
+  },
+};
+
+export const WithChange: Story = {
+  args: {
+    label: "Monthly spend",
+    value: "$3,120",
+    change: "+4.2% vs last month",
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    label: "Runway",
+    value: undefined,
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    label: "Net worth",
+    value: "$48,210",
+  },
+  render: () => (
+    <div className="grid w-[520px] grid-cols-3 gap-3">
+      <MetricCard label="Net worth" value="$48,210" change="+2.1%" />
+      <MetricCard label="Income" value="$6,400" />
+      <MetricCard label="Expenses" value="$3,120" change="-1.4%" />
+    </div>
+  ),
+};