@ponti-studios/ui 0.3.0 → 0.4.1

package/README.md

@@ -25,3 +25,17 @@ pnpm config set --location=user //registry.npmjs.org/:_authToken "$NODE_AUTH_TOK
 ```
 
 CI consumers should use a secret-backed npm token with read access.
+
+### Ships TypeScript source, not a bundle
+
+This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). This is deliberate: Tailwind v4 class detection for consumers of `./styles.css` or `./tokens.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
+
+```css
+@source "../../../node_modules/@ponti-studios/ui/src";
+```
+
+Bundling the package would break that detection, since Tailwind can't scan generated/minified output for class names. `pnpm run build` only type-checks; it does not emit JS.
+
+### `./native` subpath
+
+`@ponti-studios/ui/native` is the only part of the package that imports `react-native`. Web consumers never pull it in; native consumers get `createMakeStyles`, `nativeShadows`, `useColorMode`, and `useThemeColors`. `react-native` is an optional peer dependency — only declare it in your own `package.json` if you actually import from this subpath.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "private": false,
   "description": "Shared UI component library for ponti-studios labs",
   "license": "MIT",
@@ -14,13 +14,13 @@
     "access": "public"
   },
   "files": [
-    "dist",
     "src",
     "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
     "./src/styles.css",
+    "./src/tokens.css",
     "./src/animations.css"
   ],
   "exports": {
@@ -64,19 +64,41 @@
       "types": "./src/tokens/index.ts",
       "import": "./src/tokens/index.ts"
     },
+    "./tokens/css-vars": {
+      "types": "./src/tokens/css-vars.ts",
+      "import": "./src/tokens/css-vars.ts"
+    },
+    "./native": {
+      "types": "./src/native/index.ts",
+      "import": "./src/native/index.ts"
+    },
     "./hooks": {
       "types": "./src/hooks/index.ts",
       "import": "./src/hooks/index.ts"
     },
     "./styles.css": "./src/styles.css",
+    "./tokens.css": "./src/tokens.css",
     "./animations.css": "./src/animations.css"
   },
+  "scripts": {
+    "build": "tsc --noEmit",
+    "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"
+  },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
+    "@radix-ui/colors": "^3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.42.2",
     "lucide-react": "^1.24.0",
     "react-day-picker": "^10.0.1",
     "tailwind-merge": "^3.6.0"
@@ -90,39 +112,38 @@
     "@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",
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "catalog:",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/browser": "4.1.10",
     "@vitest/browser-playwright": "4.1.10",
-    "oxfmt": "0.59.0",
-    "oxlint": "^1.74.0",
-    "playwright": "^1.61.1",
+    "oxfmt": "catalog:shared",
+    "oxlint": "catalog:shared",
+    "playwright": "catalog:",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-native": "0.86.0",
     "storybook": "^10.5.3",
     "style-dictionary": "5.5.0",
-    "tailwindcss": "^4.3.3",
+    "tailwindcss": "catalog:",
     "typescript": "6.0.3",
-    "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "vite": "catalog:",
+    "vitest": "catalog:"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.74"
   },
-  "scripts": {
-    "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"
+  "packageManager": "pnpm@10.30.3",
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   }
-}
+}

package/src/animations.css

@@ -1,19 +1,96 @@
-@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); } }
+@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; }
+.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) {
-  .animate-in, .animate-out, [data-open], [data-closed] { animation: none !important; }
+  .animate-in,
+  .animate-out,
+  [data-open],
+  [data-closed] {
+    animation: none !important;
+  }
 }

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

@@ -4,11 +4,23 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-function Accordion({ type, collapsible: _collapsible, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root> & {
+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="w-full" />;
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      multiple={type === "multiple"}
+      {...props}
+      className={cn("w-full", className)}
+    />
+  );
 }
 
 function AccordionItem({
@@ -18,10 +30,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn(
-        "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}
     />
   );

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>
+  ),
+};

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

@@ -13,15 +13,21 @@ export interface FilterChipProps {
 /** 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}>
+    <button
+      type="button"
+      className="focus-visible:ring-ring min-h-9 rounded-full px-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+      onClick={onClick}
+    >
       {label}
     </button>
   ) : (
-    <span className="flex min-h-11 items-center px-3">{label}</span>
+    <span className="flex min-h-9 items-center px-3">{label}</span>
   );
 
   return (
     <span
+      role="group"
+      aria-label={typeof label === "string" ? `${label} filter` : "filter"}
       className={cn(
         "border-border bg-secondary text-secondary-foreground inline-flex items-center rounded-full border text-sm font-medium",
         className,
@@ -30,7 +36,7 @@ export function FilterChip({ label, onRemove, onClick, className }: FilterChipPr
       {labelContent}
       <button
         type="button"
-        className="text-muted-foreground hover:text-foreground mr-1 flex size-10 items-center justify-center rounded-full"
+        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring mr-1 flex size-9 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
         onClick={onRemove}
         aria-label={`Remove filter: ${typeof label === "string" ? label : "selected filter"}`}
       >

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

@@ -60,7 +60,7 @@ export function SortControls({
               <DropdownMenuItem
                 key={sort.field}
                 onSelect={(e) => e.preventDefault()}
-                className={`p-0 focus:bg-transparent ${index === focusedSortIndex ? "bg-accent" : ""}`}
+                className={`p-0 focus:bg-transparent ${index === focusedSortIndex ? "bg-muted" : ""}`}
               >
                 <SortRow
                   sortOption={sort}

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

@@ -37,11 +37,7 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn("data-[state=selected]:bg-muted border-b", className)}
-      {...props}
-    />
+    <tr ref={ref} className={cn("data-[state=selected]:bg-muted border-b", className)} {...props} />
   ),
 );
 TableRow.displayName = "TableRow";
@@ -53,7 +49,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-9 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "text-muted-foreground h-9 px-3 text-left align-middle text-xs font-medium [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -77,7 +73,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 

package/src/components/feedback/empty-state.tsx

@@ -37,9 +37,9 @@ export function EmptyState({
     <section
       className={cn(
         "rounded-lg px-5 py-8",
-        variant === "default" && "border bg-card",
-        variant === "dashed" && "border bg-card border-dashed",
-        variant === "search" && "border bg-muted border-dashed",
+        variant === "default" && "bg-card border",
+        variant === "dashed" && "bg-card border border-dashed",
+        variant === "search" && "bg-muted border border-dashed",
         variant === "quiet" && "bg-surface",
         centered
           ? cn(
@@ -51,13 +51,23 @@ export function EmptyState({
       )}
     >
       {icon ? (
-        <div className="text-muted-foreground mb-3 flex size-11 items-center justify-center" aria-hidden>
+        <div
+          className="text-muted-foreground mb-3 flex size-11 items-center justify-center"
+          aria-hidden
+        >
           {icon}
         </div>
       ) : null}
       <div className={cn("space-y-2", centered && "max-w-[34ch]")}>
-        <h2 className={cn("text-foreground font-semibold tracking-tight", large ? "text-lg" : "text-base")}>{title}</h2>
-        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+        <h2
+          className={cn(
+            "text-foreground font-semibold tracking-tight",
+            large ? "text-lg" : "text-base",
+          )}
+        >
+          {title}
+        </h2>
+        {description ? <p className="text-muted-foreground text-sm">{description}</p> : null}
       </div>
       {children ? <div className="mt-3">{children}</div> : null}
       {action ? <div className="mt-4">{action}</div> : null}

package/src/components/feedback/file-upload-status-badge.tsx

@@ -8,7 +8,7 @@ const STATUS_CONFIG: Record<FileUploadStatusValue, { bg: string; text: string; l
   uploading: { bg: "bg-muted", text: "text-foreground", label: "Uploading" },
   processing: { bg: "bg-muted", text: "text-foreground", label: "Processing" },
   queued: { bg: "bg-secondary", text: "text-secondary-foreground", label: "Queued" },
-  done: { bg: "bg-accent", text: "text-accent-foreground", label: "Complete" },
+  done: { bg: "bg-muted", text: "text-muted-foreground", label: "Complete" },
   error: { bg: "bg-destructive/10", text: "text-destructive", label: "Error" },
 };
 

package/src/components/feedback/progress.tsx

@@ -14,13 +14,13 @@ function Progress({
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn("bg-accent/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+      className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
       value={value}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className={cn("bg-accent h-full w-full flex-1 transition-all", indicatorClassName)}
+        className={cn("bg-primary h-full w-full flex-1 transition-all", indicatorClassName)}
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
       />
     </ProgressPrimitive.Root>

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

@@ -240,7 +240,7 @@ function UpdateGuardClient({
                 {copy?.refreshButton ?? "Refresh"}
               </button>
             ) : null}
-          <button type="button" onClick={closePrompt} className="text-muted-foreground text-sm">
+            <button type="button" onClick={closePrompt} className="text-muted-foreground text-sm">
               {copy?.closeButton ?? "Close"}
             </button>
           </div>

package/src/components/forms/calendar.tsx

@@ -24,7 +24,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
           "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         month_grid: "w-full border-collapse",
         weekdays: "flex",
-        weekday: "flex size-8 items-center justify-center text-[0.8rem] font-normal text-muted-foreground",
+        weekday:
+          "flex size-8 items-center justify-center text-[0.8rem] font-normal text-muted-foreground",
         week: "mt-1 flex w-full",
         day: "relative size-8 p-0 text-center text-lg focus-within:z-20",
         day_button:
@@ -34,9 +35,11 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         today: "[&>button]:bg-primary [&>button]:text-primary-foreground",
         outside: "text-muted-foreground [&>button]:text-muted-foreground",
         disabled: "text-muted-foreground opacity-50",
-        range_start: "rounded-l-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
+        range_start:
+          "rounded-l-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
         range_middle: "bg-primary [&>button]:rounded-none [&>button]:text-primary-foreground",
-        range_end: "rounded-r-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
+        range_end:
+          "rounded-r-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
         hidden: "invisible",
         ...classNames,
       }}

package/src/components/forms/field.tsx

@@ -29,7 +29,7 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
         <label
           htmlFor={id}
           className={cn(
-            "text-sm text-foreground font-medium",
+            "text-foreground text-sm font-medium",
             required && "after:text-destructive after:ml-0.5 after:content-['*']",
           )}
         >
@@ -50,11 +50,11 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
         : children}
 
       {error ? (
-        <p id={errorId} role="alert" className="text-sm text-destructive">
+        <p id={errorId} role="alert" className="text-destructive text-sm">
           {error}
         </p>
       ) : helpText ? (
-        <p id={descId} className="text-sm text-muted-foreground">
+        <p id={descId} className="text-muted-foreground text-sm">
           {helpText}
         </p>
       ) : null}

package/src/components/forms/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background focus-visible:ring-ring h-9 w-full min-w-0 rounded-md border border-input px-3 py-1 text-base transition-colors file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background focus-visible:ring-ring border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-colors file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
         className,
       )}

package/src/components/forms/passkey-management.tsx

@@ -69,10 +69,10 @@ export function PasskeyManagement({
     <section aria-labelledby="passkey-heading" className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
-          <h2 id="passkey-heading" className="text-sm font-medium text-foreground">
+          <h2 id="passkey-heading" className="text-foreground text-sm font-medium">
             Passkeys
           </h2>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
             Sign in without a password using biometrics or a security key.
           </p>
         </div>

package/src/components/forms/radio-group.tsx

@@ -23,7 +23,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary bg-background text-foreground focus-visible:border-ring focus-visible:bg-accent/25 focus-visible:ring-ring aspect-square h-6 w-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-primary bg-background text-foreground focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring aspect-square h-6 w-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/src/components/forms/select.tsx

@@ -4,7 +4,10 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-type SelectProps = Omit<React.ComponentProps<typeof SelectPrimitive.Root<string>>, "onValueChange" | "value" | "defaultValue"> & {
+type SelectProps = Omit<
+  React.ComponentProps<typeof SelectPrimitive.Root<string>>,
+  "onValueChange" | "value" | "defaultValue"
+> & {
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
@@ -41,7 +44,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive border-input flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -92,12 +95,16 @@ function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select
   );
 }
 
-function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
         className,
       )}
       {...props}