@ponti-studios/ui 0.1.2 → 0.3.0

package/src/components/overlays/sheet.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import * as React from "react";
 
@@ -8,48 +8,66 @@ import { cn } from "../../lib/utils";
 
 const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger;
+function SheetTrigger({ asChild, children, ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger> & { asChild?: boolean }) {
+  return (
+    <SheetPrimitive.Trigger
+      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...props}
+    >
+      {!asChild && children}
+    </SheetPrimitive.Trigger>
+  );
+}
 
-const SheetClose = SheetPrimitive.Close;
+function SheetClose({ asChild, children, ...props }: React.ComponentProps<typeof SheetPrimitive.Close> & { asChild?: boolean }) {
+  return (
+    <SheetPrimitive.Close
+      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...props}
+    >
+      {!asChild && children}
+    </SheetPrimitive.Close>
+  );
+}
 
 const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+  React.ComponentRef<typeof SheetPrimitive.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Backdrop>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
+  <SheetPrimitive.Backdrop
     className={cn(
-      "overlay-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 transition-opacity",
+      "bg-black/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 transition-opacity",
       className,
     )}
     {...props}
     ref={ref}
   />
 ));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+SheetOverlay.displayName = "SheetOverlay";
 
 const sheetClassName =
-  "sheet-responsive sheet-edge-responsive bg-canvas text-primary border-subtle fixed inset-x-0 bottom-0 z-50 flex max-h-[90dvh] min-h-[30dvh] flex-col gap-6 rounded-t-xl border border-r-0 border-b-0 border-l-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";
+  "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";
 
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {}
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {}
 
 const SheetContent = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Content>,
+  React.ComponentRef<typeof SheetPrimitive.Popup>,
   SheetContentProps
 >(({ className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetClassName, className)} {...props}>
-      <SheetPrimitive.Close className="sheet-glass-control text-secondary hover:bg-inset/70 hover:text-primary focus-visible:outline-ring absolute top-3 right-3 inline-flex size-11 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">
+    <SheetPrimitive.Popup ref={ref} className={cn(sheetClassName, className)} {...props}>
+      <SheetPrimitive.Close className="text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-11 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>
       </SheetPrimitive.Close>
       {children}
-    </SheetPrimitive.Content>
+    </SheetPrimitive.Popup>
   </SheetPortal>
 ));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+SheetContent.displayName = "SheetContent";
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />
@@ -68,7 +86,7 @@ const SheetTitle = React.forwardRef<
   React.ComponentRef<typeof SheetPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title ref={ref} className={cn("heading-2 text-primary", className)} {...props} />
+  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold tracking-tight", className)} {...props} />
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
@@ -78,7 +96,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("body-2 text-secondary max-w-prose", className)}
+    className={cn("max-w-prose text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/components/primitives/avatar.tsx

@@ -1,4 +1,4 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import type { ClassValue } from "clsx";
 import * as React from "react";
 
@@ -84,7 +84,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-inset text-secondary absolute inset-0 flex items-center justify-center rounded-full",
+        "bg-muted text-muted-foreground absolute inset-0 flex items-center justify-center rounded-full",
         fallbackText[size],
         className,
       )}
@@ -119,7 +119,7 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "bg-inset text-secondary ring-background relative flex shrink-0 items-center justify-center rounded-full text-sm ring-2",
+        "bg-muted text-muted-foreground ring-background relative flex shrink-0 items-center justify-center rounded-full text-sm ring-2",
         avatarSize[size],
         groupCountSvg[size],
         className,

package/src/components/primitives/badge.tsx

@@ -1,4 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
@@ -9,12 +8,12 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-accent text-on-accent [a&]:[a&]: [a&]: [a&]:",
-        secondary: "bg-panel text-primary [a&]:[a&]: [a&]: [a&]:",
-        destructive: "bg-destructive text-on-destructive [a&]:[a&]: [a&]: [a&]:",
-        outline: "border-default text-primary [a&]:[a&]: [a&]: [a&]:",
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        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-accent",
         ghost: "[a&]:[a&]: [a&]: [a&]:",
-        link: "text-primary underline-offset-4 [a&]:[a&]:hover:underline [a&]: [a&]: [a&]:",
+        link: "text-foreground underline-offset-4 [a&]:hover:underline",
       },
     },
     defaultVariants: {
@@ -26,13 +25,10 @@ const badgeVariants = cva(
 function Badge({
   className,
   variant = "default",
-  asChild = false,
   ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
   return (
-    <Comp
+    <span
       data-slot="badge"
       data-variant={variant}
       className={cn(badgeVariants({ variant }), className)}

package/src/components/primitives/button.tsx

@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Button as BaseButton } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
@@ -6,21 +6,21 @@ import { cn } from "../../lib/utils";
 import { Spinner } from "../feedback/spinner";
 
 const buttonVariants = cva(
-  "inline-flex min-h-11 !cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border px-3 py-1.5 text-sm font-medium leading-5 transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:!cursor-default [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex min-h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent px-4 py-2 text-sm 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: {
         default:
-          "border-transparent bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-pressed disabled:border-subtle disabled:bg-panel disabled:text-disabled",
+          "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "border-transparent bg-destructive text-on-destructive hover:bg-destructive-hover active:bg-destructive-pressed disabled:border-subtle disabled:bg-panel disabled:text-disabled",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border-default bg-transparent text-primary hover:bg-surface-hover active:bg-surface-pressed disabled:border-subtle disabled:text-disabled",
+          "border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "border-default bg-panel text-primary hover:bg-surface-hover active:bg-surface-pressed disabled:border-subtle disabled:bg-panel disabled:text-disabled",
+          "border-input bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "border-transparent bg-transparent text-secondary hover:bg-surface-hover hover:text-primary active:bg-surface-pressed disabled:text-disabled",
-        link: "border-transparent bg-transparent px-0 text-accent hover:text-accent-hover disabled:text-disabled underline-offset-4 hover:underline",
+          "border-transparent bg-transparent hover:bg-accent hover:text-accent-foreground",
+        link: "border-transparent bg-transparent px-0 text-primary underline-offset-4 hover:underline",
       },
       size: {
         sm: "min-h-11 px-2.5 text-sm",
@@ -60,9 +60,38 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const Comp = asChild ? Slot : "button";
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<{ children?: React.ReactNode }>;
+      const renderedChild = React.cloneElement(child, {
+        children: isLoading ? (
+          <>
+            <span className="opacity-0" aria-hidden="true">{child.props.children}</span>
+            <span className="absolute inset-0 inline-flex items-center justify-center">
+              <Spinner size="sm" aria-hidden="true" />
+            </span>
+            <span className="sr-only">{loadingLabel}</span>
+          </>
+        ) : (
+          child.props.children
+        ),
+      });
+
+      return (
+        <BaseButton
+          {...props}
+          render={renderedChild}
+          nativeButton={false}
+          className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
+          disabled={disabled || isLoading}
+          aria-busy={isLoading}
+          aria-label={isLoading ? loadingLabel : ariaLabel}
+          ref={ref}
+        />
+      );
+    }
     return (
-      <Comp
+      <button
+        {...props}
         className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
         style={{
           ...props.style,
@@ -73,11 +102,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled || isLoading}
         aria-busy={isLoading}
         aria-label={isLoading ? loadingLabel : ariaLabel}
-        {...props}
       >
         {isLoading ? (
           <>
-            <span className="opacity-0">{children}</span>
+            <span className="opacity-0" aria-hidden="true">{children}</span>
             <span className="absolute inset-0 inline-flex items-center justify-center">
               <Spinner size="sm" aria-hidden="true" />
             </span>
@@ -86,7 +114,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ) : (
           children
         )}
-      </Comp>
+      </button>
     );
   },
 );

package/src/components/primitives/card.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story = {
         <CardDescription>A short description of the card's content.</CardDescription>
       </CardHeader>
       <CardContent>
-        <p className="body-2 text-secondary">
+        <p className="text-sm text-muted-foreground">
           Card body content goes here. It can be any React node.
         </p>
       </CardContent>
@@ -47,7 +47,7 @@ export const Minimal: Story = {
   render: () => (
     <Card className="w-80">
       <CardContent>
-        <p className="body-2 text-secondary">Minimal card with only content.</p>
+        <p className="text-sm text-muted-foreground">Minimal card with only content.</p>
       </CardContent>
     </Card>
   ),

package/src/components/primitives/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-panel text-primary border-default flex flex-col rounded-md border",
+        "bg-card text-card-foreground flex flex-col rounded-xl border",
         className,
       )}
       {...props}
@@ -36,7 +36,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("body-4 text-secondary", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/primitives/index.ts

@@ -11,3 +11,5 @@ export {
   CardTitle,
 } from "./card";
 export { Label } from "./label";
+export { StatusBadge } from "./status-badge";
+export type { StatusBadgeConfig, StatusBadgeProps } from "./status-badge";

package/src/components/primitives/label.stories.tsx

@@ -38,7 +38,7 @@ export const Disabled: Story = {
           (locked)
         </Label>
       </div>
-      <p className="text-secondary text-xs">
+      <p className="text-muted-foreground text-xs">
         The <code className="font-mono">peer-disabled</code> variant mutes the label when its paired
         input is disabled.
       </p>

package/src/components/primitives/label.tsx

@@ -1,21 +1,20 @@
 "use client";
 
-import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
-  React.ComponentRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+  <label ref={ref} className={cn(labelVariants(), className)} {...props} />
 ));
-Label.displayName = LabelPrimitive.Root.displayName;
+Label.displayName = "Label";
 
 export { Label };

package/src/components/primitives/status-badge.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CheckCircle, Clock, XCircle } from "lucide-react";
+
+import { StatusBadge, type StatusBadgeConfig } from "./status-badge";
+
+type ConnectionStatus = "active" | "error" | "pending" | "revoked";
+
+const connectionStatusConfig: Record<ConnectionStatus, StatusBadgeConfig> = {
+  active: { label: "Active", variant: "default", icon: <CheckCircle className="mr-1 size-3" /> },
+  error: { label: "Error", variant: "destructive", icon: <XCircle className="mr-1 size-3" /> },
+  pending: { label: "Pending", variant: "secondary", icon: <Clock className="mr-1 size-3" /> },
+  revoked: { label: "Revoked", variant: "outline" },
+};
+
+const meta = {
+  title: "Primitives/StatusBadge",
+  component: StatusBadge<ConnectionStatus>,
+  tags: ["autodocs"],
+} satisfies Meta<typeof StatusBadge<ConnectionStatus>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    status: "active",
+    config: connectionStatusConfig,
+  },
+};
+
+export const AllStatuses: Story = {
+  args: {
+    status: "active",
+    config: connectionStatusConfig,
+  },
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <StatusBadge status="active" config={connectionStatusConfig} />
+      <StatusBadge status="error" config={connectionStatusConfig} />
+      <StatusBadge status="pending" config={connectionStatusConfig} />
+      <StatusBadge status="revoked" config={connectionStatusConfig} />
+    </div>
+  ),
+};
+
+export const WithFallback: Story = {
+  args: {
+    status: null,
+    config: connectionStatusConfig,
+    fallback: { label: "Unknown", variant: "outline" },
+  },
+};

package/src/components/primitives/status-badge.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+
+import { Badge, type badgeVariants } from "./badge";
+import type { VariantProps } from "class-variance-authority";
+
+export interface StatusBadgeConfig {
+  label: string;
+  variant?: VariantProps<typeof badgeVariants>["variant"];
+  className?: string;
+  icon?: ReactNode;
+}
+
+export interface StatusBadgeProps<T extends string> {
+  status: T | null | undefined;
+  config: Record<T, StatusBadgeConfig>;
+  fallback?: StatusBadgeConfig;
+}
+
+/** Renders a `Badge` from a status → { label, variant, icon } config map. */
+export function StatusBadge<T extends string>({ status, config, fallback }: StatusBadgeProps<T>) {
+  const entry = (status != null ? config[status] : undefined) ?? fallback;
+
+  if (!entry) {
+    return null;
+  }
+
+  return (
+    <Badge variant={entry.variant ?? "outline"} className={entry.className}>
+      {entry.icon}
+      {entry.label}
+    </Badge>
+  );
+}

package/src/constants/chart-colors.ts

@@ -15,15 +15,15 @@ export const CHART_COLORS = {
   neutral: "var(--color-chart-neutral)",
 
   background: "var(--color-surface-canvas)",
-  grid: "var(--color-border-subtle)",
+  grid: "var(--color-border)",
 
-  axis: "var(--color-text-tertiary)",
-  label: "var(--color-text-secondary)",
+  axis: "var(--color-muted-foreground)",
+  label: "var(--color-muted-foreground)",
 
   tooltip: {
     background: "var(--color-surface-panel)",
-    text: "var(--color-text-primary)",
-    border: "var(--color-border-default)",
+    text: "var(--color-foreground)",
+    border: "var(--color-border)",
   },
 } as const;
 

package/src/hooks/index.ts

@@ -3,4 +3,5 @@ export { useDebouncedValue } from "./use-debounced-value";
 export { useFilterState } from "./use-filter-state";
 export { useMediaQuery } from "./use-media-query";
 export { useIsMobile } from "./use-mobile";
+export { useSort } from "./use-sort";
 export type { SortField, SortDirection, SortOption } from "./sort.types";

package/src/hooks/use-sort.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import type { SortOption } from "./sort.types";
+
+interface UseSortOptions {
+  initialSortOptions?: SortOption[];
+}
+
+export function useSort(options: UseSortOptions = {}) {
+  const [sortOptions, setSortOptions] = useState<SortOption[]>(options.initialSortOptions ?? []);
+
+  return {
+    sortOptions,
+    addSortOption: (opt: SortOption) => setSortOptions((prev) => [...prev, opt]),
+    updateSortOption: (index: number, opt: SortOption) =>
+      setSortOptions((prev) => prev.map((o, i) => (i === index ? opt : o))),
+    removeSortOption: (index: number) =>
+      setSortOptions((prev) => prev.filter((_, i) => i !== index)),
+  };
+}

package/src/index.ts

@@ -10,16 +10,35 @@ export { copyToClipboard } from "./lib/clipboard";
 export { createMemoryStorage } from "./lib/create-memory-storage";
 export { cn } from "./lib/utils";
 export {
-  COLOR_MODE_ATTRIBUTE,
-  COLOR_SYSTEM_ATTRIBUTE,
+  animations,
   colors,
-  colorSystems,
+  colorThemes,
   colorTokenNames,
-} from "./tokens/colors";
-export type { ColorMode, ColorSystem, ColorToken } from "./tokens/colors";
-export { durations, easingWeb, translateDistances } from "./tokens/motion";
-export { radii } from "./tokens/radii";
-export type { RadiusToken } from "./tokens/radii";
-export { shadowsNative, shadowsWeb } from "./tokens/shadows";
-export { contentWidths, spacing } from "./tokens/spacing";
-export type { ContentWidthToken, SpacingToken } from "./tokens/spacing";
+  containers,
+  easing,
+  fontFamilies,
+  fontFamiliesNative,
+  fontWeights,
+  leading,
+  radii,
+  shadows,
+  spacing,
+  textLineHeights,
+  textSizes,
+  tracking,
+  transitionDurations,
+  breakpoints,
+  zIndices,
+} from "./tokens/index";
+export type {
+  ColorMode,
+  ColorTheme,
+  ColorToken,
+  FontWeightToken,
+  LeadingToken,
+  RadiusToken,
+  ShadowToken,
+  SpacingToken,
+  TextSizeToken,
+  TrackingToken,
+} from "./tokens/index";