@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-
-import { Button } from "../primitives/button";
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./sheet";
-
-const meta: Meta<typeof Sheet> = {
-  title: "Overlays/Sheet",
-  component: Sheet,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const SheetDemo = () => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open sheet</Button>
-    </SheetTrigger>
-    <SheetContent>
-      <SheetHeader>
-        <SheetTitle>Edit profile</SheetTitle>
-        <SheetDescription>
-          Make changes to your profile here. Click save when you're done.
-        </SheetDescription>
-      </SheetHeader>
-      <div className="flex flex-col gap-4 py-6">
-        <div className="flex flex-col gap-2">
-          <span className="text-sm font-medium">Name</span>
-          <input
-            className="border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none"
-            placeholder="Jane Doe"
-          />
-        </div>
-        <div className="flex flex-col gap-2">
-          <span className="text-sm font-medium">Email</span>
-          <input
-            className="border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none"
-            placeholder="jane@example.com"
-            type="email"
-          />
-        </div>
-      </div>
-      <SheetFooter>
-        <SheetClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </SheetClose>
-        <SheetClose asChild>
-          <Button>Save changes</Button>
-        </SheetClose>
-      </SheetFooter>
-    </SheetContent>
-  </Sheet>
-);
-
-export const Default: Story = {
-  render: () => <SheetDemo />,
-};

package/src/components/overlays/sheet.tsx

@@ -1,155 +0,0 @@
-"use client";
-
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-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>
-  );
-}
-
-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.Backdrop>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Backdrop>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Backdrop
-    data-slot="sheet-overlay"
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = "SheetOverlay";
-
-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> {
-  /** Applied to the built-in close button, alongside its default styling. */
-  closeClassName?: string;
-}
-
-const SheetContent = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Popup>,
-  SheetContentProps
->(({ className, closeClassName, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Popup
-      ref={ref}
-      data-slot="sheet-content"
-      className={cn(sheetClassName, className)}
-      {...props}
-    >
-      <SheetPrimitive.Close
-        className={cn(
-          "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",
-          closeClassName,
-        )}
-      >
-        <X className="size-4.5" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Popup>
-  </SheetPortal>
-));
-SheetContent.displayName = "SheetContent";
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)}
-    {...props}
-  />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold tracking-tight", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground max-w-prose text-sm", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-};

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

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "../primitives/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-
-const meta = {
-  title: "Overlays/Tooltip",
-  component: TooltipContent,
-  tags: ["autodocs"],
-} satisfies Meta<typeof TooltipContent>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: "Save changes" },
-  render: (args) => (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <Button variant="outline" size="sm">
-            Hover me
-          </Button>
-        }
-      />
-      <TooltipContent {...args} />
-    </Tooltip>
-  ),
-};

package/src/components/overlays/tooltip.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipPortal = TooltipPrimitive.Portal;
-
-function TooltipContent({
-  className,
-  sideOffset = 4,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Popup> & { sideOffset?: number }) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Positioner sideOffset={sideOffset}>
-        <TooltipPrimitive.Popup
-          data-slot="tooltip-content"
-          className={cn(
-            "bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-2.5 py-1.5 text-xs text-balance",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-          <TooltipPrimitive.Arrow
-            data-slot="tooltip-arrow"
-            className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px]"
-          />
-        </TooltipPrimitive.Popup>
-      </TooltipPrimitive.Positioner>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };

package/src/components/primitives/avatar-placeholder.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
-  <title id="title">Portrait placeholder</title>
-  <desc id="desc">An illustrated portrait with warm coral and blue tones.</desc>
-  <rect width="256" height="256" fill="#dce8f2"/>
-  <circle cx="202" cy="54" r="34" fill="#ffb36b"/>
-  <path d="M0 214c36-34 74-47 112-39 37 8 63 34 79 81H0z" fill="#185a72"/>
-  <path d="M83 256c5-49 25-78 73-78 47 0 68 29 73 78z" fill="#ff704d"/>
-  <path d="M91 111c0-43 28-73 66-73s66 30 66 73c0 42-25 72-66 72s-66-30-66-72z" fill="#c97852"/>
-  <path d="M88 111c-2-46 25-79 70-79 42 0 68 29 68 72-14-16-31-26-51-30-23 27-52 39-87 37z" fill="#243746"/>
-  <circle cx="128" cy="116" r="5" fill="#243746"/>
-  <circle cx="176" cy="116" r="5" fill="#243746"/>
-  <path d="M137 145c8 6 17 6 25 0" fill="none" stroke="#243746" stroke-linecap="round" stroke-width="5"/>
-</svg>

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

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar";
-import avatarPlaceholder from "./avatar-placeholder.svg";
-
-const meta = {
-  title: "Primitives/Avatar",
-  component: Avatar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithImage: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src={avatarPlaceholder} alt="Illustrated portrait" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const WithFallback: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src="/broken-image.jpg" alt="Broken" />
-      <AvatarFallback>AB</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Avatar size="sm">
-        <AvatarFallback>SM</AvatarFallback>
-      </Avatar>
-      <Avatar size="default">
-        <AvatarFallback>MD</AvatarFallback>
-      </Avatar>
-      <Avatar size="lg">
-        <AvatarFallback>LG</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};
-
-export const WithBadge: Story = {
-  render: () => (
-    <Avatar statusBadge>
-      <AvatarFallback>JD</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Group: Story = {
-  render: () => (
-    <AvatarGroup>
-      <Avatar>
-        <AvatarFallback>AB</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarFallback>CD</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarFallback>EF</AvatarFallback>
-      </Avatar>
-      <AvatarGroupCount>+3</AvatarGroupCount>
-    </AvatarGroup>
-  ),
-};

package/src/components/primitives/avatar.tsx

@@ -1,136 +0,0 @@
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import type { ClassValue } from "clsx";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-type AvatarSize = "sm" | "default" | "lg";
-
-const AvatarContext = React.createContext<{ size: AvatarSize }>({ size: "default" });
-
-const avatarSize: Record<AvatarSize, ClassValue> = {
-  sm: "size-6",
-  default: "size-6",
-  lg: "size-10",
-};
-
-const badgeDotSize: Record<AvatarSize, ClassValue> = {
-  sm: "size-2",
-  default: "size-2.5",
-  lg: "size-3",
-};
-
-const fallbackText: Record<AvatarSize, ClassValue> = {
-  sm: "text-xs",
-  default: "text-sm",
-  lg: "text-sm",
-};
-
-const groupCountSvg: Record<AvatarSize, ClassValue> = {
-  sm: "[&>svg]:size-3",
-  default: "[&>svg]:size-4",
-  lg: "[&>svg]:size-5",
-};
-
-function Avatar({
-  className,
-  size = "default",
-  statusBadge = false,
-  children,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: AvatarSize;
-  statusBadge?: boolean;
-}) {
-  return (
-    <AvatarContext.Provider value={{ size }}>
-      <AvatarPrimitive.Root
-        data-slot="avatar"
-        className={cn(
-          "relative inline-flex shrink-0 rounded-full select-none",
-          avatarSize[size],
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {statusBadge ? (
-          <span
-            data-slot="avatar-badge"
-            className={cn(
-              "bg-primary ring-background absolute right-0 bottom-0 z-10 rounded-full ring-2",
-              badgeDotSize[size],
-            )}
-          />
-        ) : null}
-      </AvatarPrimitive.Root>
-    </AvatarContext.Provider>
-  );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("absolute inset-0 size-full rounded-full object-cover", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  const { size } = React.useContext(AvatarContext);
-
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted text-muted-foreground absolute inset-0 flex items-center justify-center rounded-full",
-        fallbackText[size],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarGroup({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: AvatarSize }) {
-  return (
-    <AvatarContext.Provider value={{ size }}>
-      <div
-        data-slot="avatar-group"
-        className={cn(
-          "*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
-          className,
-        )}
-        {...props}
-      />
-    </AvatarContext.Provider>
-  );
-}
-
-function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
-  const { size } = React.useContext(AvatarContext);
-
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "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,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { LucideAlertCircle, LucideDiamond, LucideNut } from "lucide-react";
-import { Badge } from "./badge";
-
-const meta = {
-  title: "Primitives/Badge",
-  component: Badge,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "secondary", "destructive", "outline"],
-    },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: "Badge" },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-3">
-      <Badge variant="default">
-        <LucideDiamond className="size-3" />
-        Default
-      </Badge>
-      <Badge variant="secondary">
-        <LucideNut className="size-3" />
-        Secondary
-      </Badge>
-      <Badge variant="destructive">
-        <LucideAlertCircle className="size-3" />
-        Destructive
-      </Badge>
-      <Badge variant="outline">Outline</Badge>
-    </div>
-  ),
-};

package/src/components/primitives/badge.tsx

@@ -1,43 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "state-settle inline-flex w-fit shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded border border-transparent px-1.5 py-px text-xs font-medium [&>svg]:size-3 [&>svg]:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-  {
-    variants: {
-      variant: {
-        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-muted",
-        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. */
-        ref: "ref-tag border-transparent bg-transparent px-0 py-0 font-normal",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
-  return (
-    <span
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };