@ponti-studios/ui 0.1.2

package/src/animations.css

@@ -0,0 +1,437 @@
+@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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+
+const meta = {
+  title: "DataDisplay/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  args: {
+    type: "single",
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match the other components.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First item</AccordionTrigger>
+        <AccordionContent>Content for the first item.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second item</AccordionTrigger>
+        <AccordionContent>Content for the second item.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third item</AccordionTrigger>
+        <AccordionContent>Content for the third item.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

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

@@ -0,0 +1,65 @@
+import * as AccordionPrimitive from "@radix-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 AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(
+        "border-default bg-canvas mb-2 overflow-hidden rounded-md border last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex w-full flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="pointer-events-none size-4 shrink-0 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      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>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,41 @@
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface FilterChipProps {
+  label: ReactNode;
+  onRemove: () => void;
+  onClick?: () => void;
+  className?: string;
+}
+
+/** An applied filter with an optional edit action and an explicit remove action. */
+export function FilterChip({ label, onRemove, onClick, className }: FilterChipProps) {
+  const labelContent = onClick ? (
+    <button type="button" className="min-h-11 px-3 text-left" onClick={onClick}>
+      {label}
+    </button>
+  ) : (
+    <span className="flex min-h-11 items-center px-3">{label}</span>
+  );
+
+  return (
+    <span
+      className={cn(
+        "border-subtle bg-panel text-primary 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"
+        onClick={onRemove}
+        aria-label={`Remove filter: ${typeof label === "string" ? label : "selected filter"}`}
+      >
+        <X className="size-4" aria-hidden />
+      </button>
+    </span>
+  );
+}

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

@@ -0,0 +1,13 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+export { FilterChip } from "./filter-chip";
+export type { FilterChipProps } from "./filter-chip";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";

package/src/components/data-display/table.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+];
+
+const meta = {
+  title: "DataDisplay/Table",
+  component: Table,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$1,200.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};