@ponti-studios/ui 1.2.0 → 1.3.0

package/src/components/overlays/command.tsx

@@ -2,6 +2,7 @@ import { Combobox as CommandPrimitive } from "@base-ui/react/combobox";
 import { SearchIcon } from "lucide-react";
 import * as React from "react";
 
+import { cn } from "../../lib/utils";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
 
 function Command({
@@ -14,7 +15,10 @@ function Command({
   return (
     <div
       data-slot="command"
-      className={`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md ${className ?? ""}`}
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
     >
       <CommandPrimitive.Root {...props}>{children}</CommandPrimitive.Root>
     </div>
@@ -63,7 +67,11 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         aria-label={ariaLabel}
-        className={`placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 ${className ?? ""}`}
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
         onChange={(event) => {
           onChange?.(event);
           onValueChange?.(event.currentTarget.value);
@@ -74,14 +82,18 @@ function CommandInput({
   );
 }
 
-function CommandList({ children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
   if (typeof children === "function") {
     return (
       <CommandPrimitive.List
         data-slot="command-list"
         aria-label="Command results"
         tabIndex={0}
-        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
         {...props}
       >
         {children}
@@ -103,7 +115,7 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
         data-slot="command-list"
         aria-label="Command results"
         tabIndex={0}
-        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
         {...props}
       >
         {listChildren}
@@ -113,11 +125,14 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
   );
 }
 
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn("py-6 text-center text-sm", className)}
       {...props}
     />
   );
@@ -132,7 +147,7 @@ function CommandGroup({
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
-      className={`text-foreground overflow-hidden p-1 ${className ?? ""}`}
+      className={cn("text-foreground overflow-hidden p-1", className)}
       {...props}
     >
       {heading ? (
@@ -153,7 +168,11 @@ function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProp
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
-      className={`data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 ${className ?? ""}`}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
       onClick={(event) => {
         onClick?.(event);
         onSelect?.();
@@ -168,24 +187,30 @@ function CommandSeparator({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="command-separator"
       aria-hidden="true"
-      className={`bg-border -mx-1 h-px ${className ?? ""}`}
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
   );
 }
 
-function CommandShortcut(props: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className="text-muted-foreground ml-auto text-xs tracking-widest"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   );
 }
 
-function CommandListLoading(props: React.ComponentProps<"div">) {
-  return <div data-slot="command-list-loading" className="py-6 text-center text-sm" {...props} />;
+function CommandListLoading({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="command-list-loading"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  );
 }
 
 export {

package/src/components/overlays/popover.stories.tsx

@@ -25,12 +25,24 @@ export const Default: Story = {
         </div>
         <div className="grid gap-4 pt-4">
           <div className="grid grid-cols-3 items-center gap-4">
-            <label className="text-sm">Width</label>
-            <input className="col-span-2 h-8 rounded border px-2 text-sm" defaultValue="100%" />
+            <label htmlFor="popover-width" className="text-sm">
+              Width
+            </label>
+            <input
+              id="popover-width"
+              className="col-span-2 h-8 rounded border px-2 text-sm"
+              defaultValue="100%"
+            />
           </div>
           <div className="grid grid-cols-3 items-center gap-4">
-            <label className="text-sm">Height</label>
-            <input className="col-span-2 h-8 rounded border px-2 text-sm" defaultValue="25px" />
+            <label htmlFor="popover-height" className="text-sm">
+              Height
+            </label>
+            <input
+              id="popover-height"
+              className="col-span-2 h-8 rounded border px-2 text-sm"
+              defaultValue="25px"
+            />
           </div>
         </div>
       </PopoverContent>

package/src/components/primitives/badge.tsx

@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90",
         outline: "border-border text-foreground [a&]:hover:bg-muted",
-        ghost: "[a&]:[a&]: [a&]: [a&]:",
+        ghost: "bg-transparent text-foreground [a&]:hover:bg-muted",
         link: "text-foreground underline-offset-4 [a&]:hover:underline",
         /** Quiet metadata marker for real reference IDs (case/appointment/feed
          * numbers) — never for decorative sequence markers. */

package/src/components/primitives/button.tsx

@@ -6,7 +6,12 @@ import { cn } from "../../lib/utils";
 import { Spinner } from "../feedback/spinner";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
   {
     variants: {
       variant: {

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

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
-
-import { Input } from "../forms/input";
-import { Filters } from "./filters";
-
-const meta = {
-  title: "Filters/Compound",
-  component: Filters,
-  tags: ["autodocs"],
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Filters>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const statusOptions = [
-  { value: "active", label: "Active" },
-  { value: "interview", label: "Interview" },
-  { value: "offer", label: "Offer" },
-];
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-[720px]">
-      <Filters>
-        <Filters.Search label="Search">
-          <Input placeholder="Search applications..." aria-label="Search applications" />
-        </Filters.Search>
-        <Filters.Select
-          value="active"
-          options={statusOptions}
-          onChange={() => {}}
-          placeholder="All statuses"
-          label="Status"
-        />
-        <Filters.Select
-          value=""
-          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" },
-          ]}
-          onClearAll={() => {}}
-        />
-      </Filters>
-    </div>
-  ),
-  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("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("Status: Active")).toBeInTheDocument();
-    await expect(canvas.getByText("Date")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
-  },
-};

package/src/components/filters/filters.tsx

@@ -1,72 +0,0 @@
-import { Children, isValidElement, type ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { ActiveFiltersBar, type ActiveFiltersBarProps } from "./active-filters-bar";
-import { FilterSelect, type FilterSelectProps } from "./filter-select";
-import { Label } from "../primitives/label";
-
-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">
-      <Label htmlFor={id}>{label}</Label>
-      {children}
-    </div>
-  );
-}
-FiltersSearch.slot = "search";
-
-export function FiltersSelect(props: FilterSelectProps) {
-  return <FilterSelect {...props} label={props.label ?? props.placeholder} />;
-}
-FiltersSelect.slot = "select";
-
-export function FiltersActive(props: ActiveFiltersBarProps) {
-  return <ActiveFiltersBar {...props} />;
-}
-FiltersActive.slot = "active";
-
-export interface FiltersProps {
-  children: ReactNode;
-  className?: string;
-}
-
-function FiltersRoot({ children, className }: FiltersProps) {
-  const search: ReactNode[] = [];
-  const selects: ReactNode[] = [];
-  const active: ReactNode[] = [];
-
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    const slot = (child.type as any)?.slot;
-    if (slot === "search") search.push(child);
-    else if (slot === "select") selects.push(child);
-    else if (slot === "active") active.push(child);
-  });
-
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-start">
-        {search}
-        {selects.map((s, i) => (
-          <div key={i} className="sm:w-48">
-            {s}
-          </div>
-        ))}
-      </div>
-      {active}
-    </div>
-  );
-}
-
-type FiltersComponent = typeof FiltersRoot & {
-  Search: typeof FiltersSearch;
-  Select: typeof FiltersSelect;
-  Active: typeof FiltersActive;
-};
-
-export const Filters: FiltersComponent = Object.assign(FiltersRoot, {
-  Search: FiltersSearch,
-  Select: FiltersSelect,
-  Active: FiltersActive,
-});

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Input } from "../forms/input";
-import { FilterSelect } from "./filter-select";
-import { SearchFilterBar } from "./search-filter-bar";
-
-const meta = {
-  title: "Filters/SearchFilterBar",
-  component: SearchFilterBar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof SearchFilterBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Legacy: Story = {
-  args: {
-    activeFilters: [],
-  },
-  render: () => (
-    <div className="w-[720px]">
-      <SearchFilterBar
-        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" }]}
-            onChange={() => {}}
-            placeholder="All"
-            label="Status"
-          />,
-        ]}
-      />
-    </div>
-  ),
-};

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

@@ -1,46 +0,0 @@
-import { type ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { ActiveFiltersBar, type ActiveFilter } from "./active-filters-bar";
-
-export interface SearchFilterBarProps {
-  activeFilters: ActiveFilter[];
-  onClearAll?: () => void;
-  search?: ReactNode;
-  filters?: ReactNode[];
-  results?: ReactNode;
-  children?: ReactNode;
-  className?: string;
-  filterItemClassName?: string;
-}
-
-export function SearchFilterBar({
-  activeFilters,
-  onClearAll,
-  search,
-  filters,
-  results,
-  children,
-  className,
-  filterItemClassName = "sm:w-48",
-}: SearchFilterBarProps) {
-  return (
-    <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}
-
-        {filters?.map((filter, index) => (
-          <div key={index} className={filterItemClassName}>
-            {filter}
-          </div>
-        ))}
-
-        {results ? <div className="self-start lg:ml-auto lg:self-auto">{results}</div> : null}
-
-        {children}
-      </div>
-
-      <ActiveFiltersBar filters={activeFilters} onClearAll={onClearAll} />
-    </div>
-  );
-}