@ponti-studios/ui 2.0.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -12,74 +12,91 @@
     "create-ponti-project": "./scripts/create-project.mjs"
   },
   "files": [
-    "src",
-    "dist/styles.css",
+    "dist",
+    "src/styles/animations.css",
     "scripts/create-project.mjs",
     "templates/web-vite",
-    "THIRD_PARTY_NOTICES.md"
+    "THIRD_PARTY_NOTICES.md",
+    "!dist/styles-build.js",
+    "!dist/package-index.d.ts",
+    "!dist/storybook/**",
+    "!dist/styles/build.d.ts"
   ],
   "type": "module",
   "sideEffects": [
+    "./dist/index.js",
     "./dist/styles.css",
     "./src/styles/animations.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./primitives": {
-      "types": "./src/components/primitives/index.ts",
-      "import": "./src/components/primitives/index.ts"
+      "types": "./dist/components/primitives/index.d.ts",
+      "import": "./dist/components/primitives/index.js"
     },
     "./forms": {
-      "types": "./src/components/forms/index.ts",
-      "import": "./src/components/forms/index.ts"
+      "types": "./dist/components/forms/index.d.ts",
+      "import": "./dist/components/forms/index.js"
     },
     "./feedback": {
-      "types": "./src/components/feedback/index.ts",
-      "import": "./src/components/feedback/index.ts"
+      "types": "./dist/components/feedback/index.d.ts",
+      "import": "./dist/components/feedback/index.js"
     },
     "./filters": {
-      "types": "./src/components/filters/index.ts",
-      "import": "./src/components/filters/index.ts"
+      "types": "./dist/components/filters/index.d.ts",
+      "import": "./dist/components/filters/index.js"
     },
     "./overlays": {
-      "types": "./src/components/overlays/index.ts",
-      "import": "./src/components/overlays/index.ts"
+      "types": "./dist/components/overlays/index.d.ts",
+      "import": "./dist/components/overlays/index.js"
     },
     "./navigation": {
-      "types": "./src/components/navigation/index.ts",
-      "import": "./src/components/navigation/index.ts"
+      "types": "./dist/components/navigation/index.d.ts",
+      "import": "./dist/components/navigation/index.js"
     },
     "./data-display": {
-      "types": "./src/components/data-display/index.ts",
-      "import": "./src/components/data-display/index.ts"
+      "types": "./dist/components/data-display/index.d.ts",
+      "import": "./dist/components/data-display/index.js"
     },
     "./layout": {
-      "types": "./src/components/layout/index.ts",
-      "import": "./src/components/layout/index.ts"
+      "types": "./dist/components/layout/index.d.ts",
+      "import": "./dist/components/layout/index.js"
     },
     "./utilities": {
-      "types": "./src/lib/index.ts",
-      "import": "./src/lib/index.ts"
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
     },
     "./tokens": {
-      "types": "./src/styles/tokens/index.ts",
-      "import": "./src/styles/tokens/index.ts"
+      "types": "./dist/styles/tokens/index.d.ts",
+      "import": "./dist/styles/tokens/index.js"
     },
     "./tokens/css-vars": {
-      "types": "./src/styles/tokens/css-vars.ts",
-      "import": "./src/styles/tokens/css-vars.ts"
+      "types": "./dist/styles/tokens/css-vars.d.ts",
+      "import": "./dist/styles/tokens/css-vars.js"
     },
     "./native": {
-      "types": "./src/native/index.ts",
-      "react-native": "./src/native/index.ts",
-      "import": "./src/native/index.ts"
+      "types": "./dist/native/index.d.ts",
+      "react-native": "./dist/native/index.js",
+      "import": "./dist/native/index.js"
     },
     "./hooks": {
-      "types": "./src/hooks/index.ts",
-      "import": "./src/hooks/index.ts"
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "import": "./dist/auth/index.js"
+    },
+    "./integrations/service-worker": {
+      "types": "./dist/integrations/service-worker.d.ts",
+      "import": "./dist/integrations/service-worker.js"
+    },
+    "./translations": {
+      "types": "./dist/translations/ui-provider.d.ts",
+      "import": "./dist/translations/ui-provider.js"
     },
     "./styles.css": "./dist/styles.css",
     "./animations.css": "./src/styles/animations.css"

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

@@ -1,57 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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({
-  type,
-  collapsible = true,
-  className,
-  onValueChange,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root> & {
-  type?: "single" | "multiple";
-  collapsible?: boolean;
-}) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      multiple={type === "multiple"}
-      onValueChange={(value, details) => {
-        if (type !== "multiple" && !collapsible && value.length === 0) {
-          details.cancel();
-          return;
-        }
-
-        onValueChange?.(value, details);
-      }}
-      {...props}
-      className={cn("w-full", className)}
-    />
-  );
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("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(
-          "text-muted-foreground 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.Panel>) {
-  return (
-    <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.Panel>
-  );
-}
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -1,48 +0,0 @@
-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>
-  ),
-};

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

@@ -1,20 +0,0 @@
-import type { ComponentProps, ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-
-interface MetricCardProps extends ComponentProps<"div"> {
-  label: string;
-  value: ReactNode;
-  change?: ReactNode;
-}
-
-/** Label/value/change stat tile. */
-export function MetricCard({ label, value, change, className, ...props }: MetricCardProps) {
-  return (
-    <div className={cn("ui-flat-card", className)} {...props}>
-      <p className="ui-data-label mb-2">{label}</p>
-      <p className="ui-data-value">{value ?? "—"}</p>
-      {change != null ? <p className="text-muted-foreground mt-1.5 text-xs">{change}</p> : null}
-    </div>
-  );
-}

package/src/components/data-display/sort-controls.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import type { SortOption } from "../../hooks/sort.types";
-import { SortControls } from "./sort-controls";
-
-const meta = {
-  title: "DataDisplay/SortControls",
-  component: SortControls,
-  tags: ["autodocs"],
-} satisfies Meta<typeof SortControls>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sortableFields = ["amount", "date", "description", "category"];
-
-function SortControlsPreview() {
-  const [sortOptions, setSortOptions] = useState<SortOption[]>([
-    { field: "date", direction: "desc" },
-  ]);
-
-  return (
-    <SortControls
-      sortOptions={sortOptions}
-      sortableFields={sortableFields}
-      addSortOption={(option) => setSortOptions((prev) => [...prev, option])}
-      updateSortOption={(index, option) =>
-        setSortOptions((prev) => prev.map((o, i) => (i === index ? option : o)))
-      }
-      removeSortOption={(index) => setSortOptions((prev) => prev.filter((_, i) => i !== index))}
-    />
-  );
-}
-
-export const Default: Story = {
-  args: {
-    sortOptions: [],
-    sortableFields,
-    addSortOption: () => {},
-    updateSortOption: () => {},
-    removeSortOption: () => {},
-  },
-  render: () => <SortControlsPreview />,
-};

package/src/components/data-display/sort-controls.tsx

@@ -1,96 +0,0 @@
-import { ListOrdered, PlusCircle } from "lucide-react";
-
-import type { SortField, SortOption } from "../../hooks/sort.types";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../overlays/dropdown-menu";
-import { Button } from "../primitives/button";
-import { SortRow } from "./sort-row";
-
-export interface SortControlsProps {
-  sortOptions: SortOption[];
-  sortableFields: SortField[];
-  addSortOption: (option: SortOption) => void;
-  updateSortOption: (index: number, option: SortOption) => void;
-  removeSortOption: (index: number) => void;
-  open?: boolean | undefined;
-  onOpenChange?: ((open: boolean) => void) | undefined;
-  focusedSortIndex?: (number | null) | undefined;
-}
-
-/** Multi-field sort builder, driven by the `SortOption`/`SortField` shared types. */
-export function SortControls({
-  sortOptions,
-  sortableFields,
-  addSortOption,
-  updateSortOption,
-  removeSortOption,
-  open,
-  onOpenChange,
-  focusedSortIndex,
-}: SortControlsProps) {
-  const availableFieldsToAdd = sortableFields.filter(
-    (field) => !sortOptions.some((option) => option.field === field),
-  );
-
-  return (
-    <DropdownMenu {...(open !== undefined && { open })} {...(onOpenChange && { onOpenChange })}>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">
-          <ListOrdered className="mr-2 size-4" />
-          Sort
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-80 space-y-2 p-2">
-        <DropdownMenuGroup className="space-y-1">
-          <DropdownMenuLabel>Define Sort Order</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-
-          {sortOptions.map((sort, index) => {
-            const usedFields = sortOptions
-              .filter((_, i) => i !== index)
-              .map((option) => option.field);
-            return (
-              <div
-                key={sort.field}
-                className={`rounded-sm ${index === focusedSortIndex ? "bg-muted" : ""}`}
-              >
-                <SortRow
-                  sortOption={sort}
-                  index={index}
-                  sortableFields={sortableFields}
-                  usedFields={usedFields}
-                  updateSortOption={updateSortOption}
-                  removeSortOption={removeSortOption}
-                />
-              </div>
-            );
-          })}
-        </DropdownMenuGroup>
-        {availableFieldsToAdd.length > 0 && (
-          <>
-            <DropdownMenuSeparator />
-            <button
-              type="button"
-              onClick={() => {
-                const firstAvailable = availableFieldsToAdd[0];
-                if (firstAvailable) {
-                  addSortOption({ field: firstAvailable, direction: "desc" });
-                }
-              }}
-              className="hover:bg-muted focus-visible:ring-ring mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:ring-2 focus-visible:ring-offset-2"
-            >
-              <PlusCircle className="mr-2 size-4" />
-              Add Sort Criterion
-            </button>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/data-display/sort-row.tsx

@@ -1,88 +0,0 @@
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, X } from "lucide-react";
-
-import type { SortField, SortOption } from "../../hooks/sort.types";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../overlays/dropdown-menu";
-import { Button } from "../primitives/button";
-
-export interface SortRowProps {
-  sortOption: SortOption;
-  index: number;
-  sortableFields: SortField[];
-  usedFields: SortField[];
-  updateSortOption: (index: number, option: SortOption) => void;
-  removeSortOption: (index: number) => void;
-}
-
-function fieldLabel(field: SortField) {
-  return field.charAt(0).toUpperCase() + field.slice(1);
-}
-
-export function SortRow({
-  sortOption,
-  index,
-  sortableFields,
-  usedFields,
-  updateSortOption,
-  removeSortOption,
-}: SortRowProps) {
-  const availableFieldsForCurrentSelect = sortableFields.filter(
-    (field) => !usedFields.includes(field) || field === sortOption.field,
-  );
-
-  return (
-    <div className="flex w-full items-center gap-1">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            className="hover:bg-muted focus-visible:ring-ring flex-1 rounded-md px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-          >
-            {fieldLabel(sortOption.field)}
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          {availableFieldsForCurrentSelect.map((field) => (
-            <DropdownMenuItem
-              key={field}
-              onClick={() => updateSortOption(index, { ...sortOption, field })}
-            >
-              {fieldLabel(field)}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="size-8 p-0"
-        aria-label={sortOption.direction === "asc" ? "Sorted ascending" : "Sorted descending"}
-        onClick={() =>
-          updateSortOption(index, {
-            ...sortOption,
-            direction: sortOption.direction === "asc" ? "desc" : "asc",
-          })
-        }
-      >
-        {sortOption.direction === "asc" ? (
-          <ArrowUpWideNarrow className="size-4" />
-        ) : (
-          <ArrowDownWideNarrow className="size-4" />
-        )}
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={() => removeSortOption(index)}
-        className="size-8 p-0"
-        aria-label="Remove sort criterion"
-      >
-        <X className="text-muted-foreground size-4" />
-      </Button>
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-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>
-  ),
-};