@ponti-studios/ui 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -133,13 +133,15 @@
     "style-dictionary": "5.5.0",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
+    "uniwind": "^1.10.1",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "react-native": ">=0.74"
+    "react-native": ">=0.74",
+    "uniwind": ">=1.10.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -147,6 +149,9 @@
     },
     "react-native": {
       "optional": true
+    },
+    "uniwind": {
+      "optional": true
     }
   },
   "packageManager": "pnpm@11.10.0"

package/src/components/feedback/update-guard.tsx

@@ -196,7 +196,11 @@ function UpdateGuardClient({
     updateServiceWorker,
   } = useRegisterSW({ serviceWorkerPath });
 
-  const isOnline = useSyncExternalStore(subscribeOnline, getOnlineSnapshot, getOnlineServerSnapshot);
+  const isOnline = useSyncExternalStore(
+    subscribeOnline,
+    getOnlineSnapshot,
+    getOnlineServerSnapshot,
+  );
 
   const closePrompt = () => {
     setOfflineReady(false);

package/src/components/filters/active-filters-bar.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { fn } from "storybook/test";
 
-import { ActiveFiltersBar } from './active-filters-bar';
+import { ActiveFiltersBar } from "./active-filters-bar";
 
 const meta = {
-  title: 'Filters/ActiveFiltersBar',
+  title: "Filters/ActiveFiltersBar",
   component: ActiveFiltersBar,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
       <div className="w-[600px]">
@@ -23,36 +23,36 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     filters: [
-      { id: '1', label: 'Status: Active', onRemove: fn() },
-      { id: '2', label: 'Created after Jan 1', onRemove: fn() },
+      { id: "1", label: "Status: Active", onRemove: fn() },
+      { id: "2", label: "Created after Jan 1", onRemove: fn() },
     ],
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
+    const list = canvas.getByRole("list");
     await expect(list).toBeInTheDocument();
-    const items = within(list).getAllByRole('listitem');
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Created after Jan 1')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Created after Jan 1")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
 export const WithClearAll: Story = {
   args: {
     filters: [
-      { id: '1', label: 'Status: Active', onRemove: fn() },
-      { id: '2', label: 'Role: Engineer', onRemove: fn() },
+      { id: "1", label: "Status: Active", onRemove: fn() },
+      { id: "2", label: "Role: Engineer", onRemove: fn() },
     ],
     onClearAll: fn(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    const clearButton = canvas.getByRole('button', { name: 'Clear all' });
+    const clearButton = canvas.getByRole("button", { name: "Clear all" });
     await expect(clearButton).toBeInTheDocument();
     await userEvent.click(clearButton);
     await expect(args.onClearAll).toHaveBeenCalledTimes(1);
@@ -61,36 +61,34 @@ export const WithClearAll: Story = {
 
 export const WithSortOnly: Story = {
   args: {
-    filters: [
-      { id: '1', label: 'Date', onRemove: fn(), variant: 'sort', direction: 'desc' },
-    ],
+    filters: [{ id: "1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" }],
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(1);
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
 export const WithSortAndFilter: Story = {
   args: {
     filters: [
-      { id: 'filter-1', label: 'Status: Active', onRemove: fn(), variant: 'filter' },
-      { id: 'sort-1', label: 'Date', onRemove: fn(), variant: 'sort', direction: 'desc' },
+      { id: "filter-1", label: "Status: Active", onRemove: fn(), variant: "filter" },
+      { id: "sort-1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" },
     ],
     onClearAll: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
@@ -98,17 +96,17 @@ export const Empty: Story = {
   args: { filters: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.queryByRole('list')).toBeNull();
+    expect(canvas.queryByRole("list")).toBeNull();
   },
 };
 
 export const WithClassName: Story = {
   args: {
-    filters: [{ id: '1', label: 'Status: Active', onRemove: fn() }],
-    className: 'mt-4',
+    filters: [{ id: "1", label: "Status: Active", onRemove: fn() }],
+    className: "mt-4",
   },
   play: async ({ canvasElement }) => {
-    const container = canvasElement.querySelector('.mt-4');
+    const container = canvasElement.querySelector(".mt-4");
     await expect(container).not.toBeNull();
   },
 };

package/src/components/filters/filter-select.stories.tsx

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 
-import { FilterSelect } from './filter-select';
+import { FilterSelect } from "./filter-select";
 
 const meta = {
-  title: 'Filters/FilterSelect',
+  title: "Filters/FilterSelect",
   component: FilterSelect,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     options: [
-      { value: 'active', label: 'Active' },
-      { value: 'interview', label: 'Interview' },
-      { value: 'offer', label: 'Offer' },
-      { value: 'rejected', label: 'Rejected' },
-      { value: 'archived', label: 'Archived' },
+      { value: "active", label: "Active" },
+      { value: "interview", label: "Interview" },
+      { value: "offer", label: "Offer" },
+      { value: "rejected", label: "Rejected" },
+      { value: "archived", label: "Archived" },
     ],
-    placeholder: 'All statuses',
-    label: 'Status',
+    placeholder: "All statuses",
+    label: "Status",
     onChange: () => {},
   },
 } satisfies Meta<typeof FilterSelect>;
@@ -25,47 +25,47 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { value: '' },
+  args: { value: "" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
     await expect(trigger).toBeInTheDocument();
-    await expect(trigger).toHaveTextContent('All statuses');
+    await expect(trigger).toHaveTextContent("All statuses");
   },
 };
 
 export const WithValue: Story = {
-  args: { value: 'active' },
+  args: { value: "active" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
-    await expect(trigger).toHaveTextContent('Active');
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
+    await expect(trigger).toHaveTextContent("Active");
   },
 };
 
 export const Loading: Story = {
-  args: { value: '', isLoading: true, options: [] },
+  args: { value: "", isLoading: true, options: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
   },
 };
 
 export const Empty: Story = {
-  args: { value: '', options: [], emptyLabel: 'No statuses found' },
+  args: { value: "", options: [], emptyLabel: "No statuses found" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
   },
 };
 
 export const Disabled: Story = {
-  args: { value: 'active', disabled: true },
+  args: { value: "active", disabled: true },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
     await expect(trigger).toBeDisabled();
   },
 };

package/src/components/filters/filter-select.tsx

@@ -47,12 +47,7 @@ export function FilterSelect({
     <div className={cn("space-y-2 min-w-36 bg-background", className)}>
       <Label htmlFor={selectId}>{label}</Label>
       <Select value={value} onValueChange={onChange} items={items}>
-        <SelectTrigger
-          id={selectId}
-          disabled={disabled}
-          aria-label={label}
-          className="w-full"
-        >
+        <SelectTrigger id={selectId} disabled={disabled} aria-label={label} className="w-full">
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">

package/src/components/filters/filters.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 
-import { Input } from '../forms/input';
-import { Filters } from './filters';
+import { Input } from "../forms/input";
+import { Filters } from "./filters";
 
 const meta = {
-  title: 'Filters/Compound',
+  title: "Filters/Compound",
   component: Filters,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     children: null,
   },
@@ -17,9 +17,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const statusOptions = [
-  { value: 'active', label: 'Active' },
-  { value: 'interview', label: 'Interview' },
-  { value: 'offer', label: 'Offer' },
+  { value: "active", label: "Active" },
+  { value: "interview", label: "Interview" },
+  { value: "offer", label: "Offer" },
 ];
 
 export const Default: Story = {
@@ -38,15 +38,15 @@ export const Default: Story = {
         />
         <Filters.Select
           value=""
-          options={[{ value: 'engineer', label: 'Engineer' }]}
+          options={[{ value: "engineer", label: "Engineer" }]}
           onChange={() => {}}
           placeholder="All roles"
           label="Role"
         />
         <Filters.Active
           filters={[
-            { id: 'status', label: 'Status: Active', onRemove: () => {} },
-            { id: 'sort', label: 'Date', onRemove: () => {}, variant: 'sort', direction: 'desc' },
+            { id: "status", label: "Status: Active", onRemove: () => {} },
+            { id: "sort", label: "Date", onRemove: () => {}, variant: "sort", direction: "desc" },
           ]}
           onClearAll={() => {}}
         />
@@ -56,17 +56,17 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await expect(canvas.getByText('Search')).toBeInTheDocument();
-    await expect(canvas.getByRole('textbox', { name: 'Search applications' })).toBeInTheDocument();
+    await expect(canvas.getByText("Search")).toBeInTheDocument();
+    await expect(canvas.getByRole("textbox", { name: "Search applications" })).toBeInTheDocument();
 
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
 
-    await expect(canvas.getByText('Role')).toBeInTheDocument();
-    await expect(canvas.getByRole('combobox', { name: 'Role' })).toBeInTheDocument();
+    await expect(canvas.getByText("Role")).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Role" })).toBeInTheDocument();
 
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };

package/src/components/filters/filters.tsx

@@ -5,13 +5,7 @@ import { ActiveFiltersBar, type ActiveFiltersBarProps } from "./active-filters-b
 import { FilterSelect, type FilterSelectProps } from "./filter-select";
 import { Label } from "../primitives/label";
 
-export function FiltersSearch({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) {
+export function FiltersSearch({ label, children }: { label: string; children: ReactNode }) {
   const id = `filters-search-${label.toLowerCase().replace(/\s+/g, "-")}`;
   return (
     <div className="flex-1 space-y-2">

package/src/components/filters/search-filter-bar.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Input } from '../forms/input';
-import { FilterSelect } from './filter-select';
-import { SearchFilterBar } from './search-filter-bar';
+import { Input } from "../forms/input";
+import { FilterSelect } from "./filter-select";
+import { SearchFilterBar } from "./search-filter-bar";
 
 const meta = {
-  title: 'Filters/SearchFilterBar',
+  title: "Filters/SearchFilterBar",
   component: SearchFilterBar,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 } satisfies Meta<typeof SearchFilterBar>;
 
 export default meta;
@@ -20,16 +20,14 @@ export const Legacy: Story = {
   render: () => (
     <div className="w-[720px]">
       <SearchFilterBar
-        activeFilters={[
-          { id: 'status', label: 'Status: Active', onRemove: () => {} },
-        ]}
+        activeFilters={[{ id: "status", label: "Status: Active", onRemove: () => {} }]}
         onClearAll={() => {}}
         search={<Input placeholder="Search..." aria-label="Search" />}
         filters={[
           <FilterSelect
             key="status"
             value="active"
-            options={[{ value: 'active', label: 'Active' }]}
+            options={[{ value: "active", label: "Active" }]}
             onChange={() => {}}
             placeholder="All"
             label="Status"

package/src/components/filters/search-filter-bar.tsx

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
+import { type ReactNode } from "react";
 
-import { cn } from '../../lib/utils';
-import { ActiveFiltersBar, type ActiveFilter } from './active-filters-bar';
+import { cn } from "../../lib/utils";
+import { ActiveFiltersBar, type ActiveFilter } from "./active-filters-bar";
 
 export interface SearchFilterBarProps {
   activeFilters: ActiveFilter[];
@@ -22,10 +22,10 @@ export function SearchFilterBar({
   results,
   children,
   className,
-  filterItemClassName = 'sm:w-48',
+  filterItemClassName = "sm:w-48",
 }: SearchFilterBarProps) {
   return (
-    <div className={cn('flex flex-col gap-4', className)}>
+    <div className={cn("flex flex-col gap-4", className)}>
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
         {search ? <div className="flex-1">{search}</div> : null}
 
@@ -35,9 +35,7 @@ export function SearchFilterBar({
           </div>
         ))}
 
-        {results ? (
-          <div className="self-start lg:ml-auto lg:self-auto">{results}</div>
-        ) : null}
+        {results ? <div className="self-start lg:ml-auto lg:self-auto">{results}</div> : null}
 
         {children}
       </div>

package/src/components/navigation/app-navigation.stories.tsx

@@ -121,7 +121,11 @@ export const WithCustomRouterLink: Story = {
 
           <Navigation.Action>
             <Button size="md" asChild>
-              <a href="/get-started" data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
+              <a
+                href="/get-started"
+                data-router-link="stand-in"
+                onClick={(e) => e.preventDefault()}
+              >
                 Get started
               </a>
             </Button>

package/src/components/navigation/app-navigation.tsx

@@ -26,17 +26,26 @@ export interface NavigationRootProps {
  * shape) so `Navigation.Item`'s active state and `asChild` composition
  * behave identically in both places.
  */
-function NavigationRoot({ children, ariaLabel = "Primary navigation", className }: NavigationRootProps) {
+function NavigationRoot({
+  children,
+  ariaLabel = "Primary navigation",
+  className,
+}: NavigationRootProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const items = React.Children.toArray(children);
-  const brand = items.find((child) => React.isValidElement(child) && child.type === NavigationBrand);
+  const brand = items.find(
+    (child) => React.isValidElement(child) && child.type === NavigationBrand,
+  );
   const rest = items.filter((child) => child !== brand);
 
   return (
     <header className="bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
       <nav
-        className={cn("flex min-h-14 w-full max-w-7xl items-center justify-between gap-6", className)}
+        className={cn(
+          "flex min-h-14 w-full max-w-7xl items-center justify-between gap-6",
+          className,
+        )}
         aria-label={ariaLabel}
       >
         <div className="flex min-w-0 items-center">{brand}</div>
@@ -108,7 +117,13 @@ export type NavigationItemProps = NavigationItemOwnProps &
   Omit<ComponentPropsWithoutRef<"a">, keyof NavigationItemOwnProps>;
 
 /** A single nav link, wrapped in `<li>`. Auto-closes the mobile Sheet on click when rendered there. */
-function NavigationItem({ active = false, asChild = false, className, children, ...props }: NavigationItemProps) {
+function NavigationItem({
+  active = false,
+  asChild = false,
+  className,
+  children,
+  ...props
+}: NavigationItemProps) {
   const isMobile = React.useContext(MobileMenuContext);
   const itemClassName = cn(
     "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground",

package/src/components/overlays/sheet.tsx

@@ -49,18 +49,28 @@ const SheetOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Backdrop>
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Backdrop
-    className={cn(
-      "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
-      className,
-    )}
+    data-slot="sheet-overlay"
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
     ref={ref}
   />
 ));
 SheetOverlay.displayName = "SheetOverlay";
 
-const sheetClassName =
-  "bg-background text-foreground data-open:animate-in data-closed:animate-out fixed inset-x-0 bottom-0 z-50 flex max-h-[90dvh] min-h-[30dvh] flex-col gap-6 rounded-t-xl border border-b-0 border-l-0 border-r-0 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:inset-y-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:w-3/4 md:max-w-sm md:min-h-0 md:rounded-t-none md:rounded-l-xl md:border-t-0 md:border-r-0 md:border-b-0 md:border-l md:p-6 md:pb-6";
+const sheetClassName = [
+  // Appearance
+  "bg-background text-foreground rounded-xl border shadow-lg",
+  // Layout
+  "flex flex-col gap-6 p-4",
+  // Position: floats off every edge, anchored to the bottom on mobile
+  "fixed z-50 inset-x-2 bottom-[max(0.5rem,env(safe-area-inset-bottom))]",
+  // Size: mobile
+  "max-h-[calc(100dvh-2rem)] min-h-[30dvh]",
+  // Position: anchored to the right edge on desktop
+  "md:inset-y-2 md:right-2 md:left-auto md:bottom-auto",
+  // Size: desktop
+  "md:w-3/4 md:max-w-sm md:min-h-0",
+];
 
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {}
 
@@ -70,7 +80,12 @@ const SheetContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Popup ref={ref} className={cn(sheetClassName, className)} {...props}>
+    <SheetPrimitive.Popup
+      ref={ref}
+      data-slot="sheet-content"
+      className={cn(sheetClassName, className)}
+      {...props}
+    >
       <SheetPrimitive.Close className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4">
         <X className="size-4.5" />
         <span className="sr-only">Close</span>

package/src/hooks/use-derived-filter-state.ts

@@ -53,9 +53,7 @@ export function useDerivedFilterState<T extends Record<string, FilterConfig>>({
       .filter(([, v]) => v !== "")
       .map(([key, v]) => ({
         id: key,
-        label: fields[key]?.label
-          ? fields[key].label!(v)
-          : `${key}: ${v}`,
+        label: fields[key]?.label ? fields[key].label!(v) : `${key}: ${v}`,
         onRemove: () => setValue(key, ""),
       }));
   }, [values, fields, setValue]);

package/src/hooks/use-filter-state.ts

@@ -18,8 +18,7 @@ export function useFilterState<T extends Record<string, unknown>>(
   const setFilters = useCallback(
     (newFilters: T | ((prev: T) => T)) => {
       setFiltersState((prev) => {
-        const updatedFilters =
-          typeof newFilters === "function" ? newFilters(prev) : newFilters;
+        const updatedFilters = typeof newFilters === "function" ? newFilters(prev) : newFilters;
 
         if (debounceMs && debounceMs > 0) {
           if (debounceTimerRef.current) {

package/src/native/card.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Text, View, type TextProps, type ViewProps } from "react-native";
+
+import { cn } from "../lib/utils";
+
+function Card({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />
+  );
+}
+
+function CardHeader({ className, ...props }: ViewProps) {
+  return <View className={cn("gap-1", className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: TextProps) {
+  return <Text className={cn("text-card-foreground text-xl", className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: TextProps) {
+  return <Text className={cn("text-muted-foreground text-xs", className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: ViewProps) {
+  return <View className={cn("self-start", className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: ViewProps) {
+  return <View className={className} {...props} />;
+}
+
+function CardFooter({ className, ...props }: ViewProps) {
+  return <View className={cn("flex-row items-center", className)} {...props} />;
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };