@ponti-studios/ui 1.8.0 → 2.0.1

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BottomSheet } from "./bottom-sheet";
+
+const meta = {
+  title: "Overlays/BottomSheet",
+  component: BottomSheet,
+  tags: ["autodocs"],
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Example panel",
+    children: "Panel content",
+  },
+  render: () => (
+    <div className="bg-muted relative h-105 w-120 overflow-hidden rounded-xl border">
+      <BottomSheet
+        label="Example panel"
+        defaultExpanded
+        className="bg-card absolute inset-x-4 bottom-4 max-h-[70%] rounded-2xl border shadow-lg"
+        scrollClassName="p-4"
+      >
+        <p className="text-sm font-semibold">Drag the handle or press it to collapse.</p>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Non-modal persistent panel. Positioning and sizing are app-owned via className.
+        </p>
+      </BottomSheet>
+    </div>
+  ),
+};
+
+export const Collapsed: Story = {
+  args: {
+    label: "Example panel",
+    children: "Panel content",
+  },
+  render: () => (
+    <div className="bg-muted relative h-105 w-120 overflow-hidden rounded-xl border">
+      <BottomSheet
+        label="Example panel"
+        className="bg-card absolute inset-x-4 bottom-4 max-h-[70%] rounded-2xl border shadow-lg"
+        scrollClassName="p-4"
+      >
+        <p className="text-sm font-semibold">Starts collapsed to its 48px peek.</p>
+      </BottomSheet>
+    </div>
+  ),
+};

package/src/components/overlays/bottom-sheet.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+// Non-modal persistent bottom panel with drag-to-collapse/expand.
+// Positioning and sizing are app-owned via className (the kit only sets
+// structure + the translateY transform; Tailwind translate utilities compose
+// via the independent CSS `translate` property).
+//
+// Distinct from Sheet: Sheet is a modal dialog; BottomSheet is always
+// mounted chrome (maps, players, detail panels).
+
+const FLICK_VELOCITY = 0.4;
+const DRAG_THRESHOLD = 0.25;
+
+export type BottomSheetProps = {
+  children: React.ReactNode;
+  /** Controlled expanded state. */
+  expanded?: boolean;
+  /** Uncontrolled initial state. @default false */
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Visible stub height when collapsed. @default 48 */
+  peek?: number;
+  /** Accessible name for the panel region. @default "Details panel" */
+  label?: string;
+  /** Positioning/sizing (app-owned). */
+  className?: string;
+  /** Applied to the scrollable content wrapper alongside its defaults. */
+  scrollClassName?: string;
+  /** Applied to the drag handle button alongside its defaults. */
+  handleClassName?: string;
+};
+
+export function BottomSheet({
+  children,
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  peek = 48,
+  label = "Details panel",
+  className,
+  scrollClassName,
+  handleClassName,
+}: BottomSheetProps) {
+  const sheetRef = React.useRef<HTMLElement>(null);
+  const [translateY, setTranslateY] = React.useState(0);
+  const [dragOffset, setDragOffset] = React.useState(0);
+  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+  const isDragging = React.useRef(false);
+  const didDrag = React.useRef(false);
+  const dragRef = React.useRef<{ startY: number; startTime: number } | null>(null);
+  const reduceMotion = React.useRef(
+    typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  );
+
+  const expanded = controlledExpanded ?? internalExpanded;
+
+  const getHeight = React.useCallback(() => sheetRef.current?.offsetHeight ?? 400, []);
+  const closedY = React.useCallback(() => Math.max(0, getHeight() - peek), [getHeight, peek]);
+
+  const setExpanded = React.useCallback(
+    (next: boolean) => {
+      onExpandedChange?.(next);
+      if (controlledExpanded === undefined) setInternalExpanded(next);
+    },
+    [controlledExpanded, onExpandedChange],
+  );
+
+  const snapTo = React.useCallback((targetY: number) => {
+    setTranslateY(targetY);
+    setDragOffset(0);
+  }, []);
+
+  // Sync visuals with expanded state (and settle closed on mount).
+  React.useEffect(() => {
+    snapTo(expanded ? 0 : closedY());
+  }, [expanded, closedY, snapTo]);
+
+  const open = React.useCallback(() => setExpanded(true), [setExpanded]);
+  const close = React.useCallback(() => setExpanded(false), [setExpanded]);
+
+  const onPointerDown = React.useCallback((e: React.PointerEvent) => {
+    isDragging.current = true;
+    didDrag.current = false;
+    dragRef.current = { startY: e.clientY, startTime: Date.now() };
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }, []);
+
+  const onPointerMove = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging.current || !dragRef.current) return;
+      const delta = e.clientY - dragRef.current.startY;
+      if (Math.abs(delta) > 4) didDrag.current = true;
+      setDragOffset(Math.max(-translateY, delta));
+    },
+    [translateY],
+  );
+
+  const endDrag = React.useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging.current || !dragRef.current) return;
+      isDragging.current = false;
+
+      const delta = e.clientY - dragRef.current.startY;
+      const elapsed = Date.now() - dragRef.current.startTime;
+      const velocity = elapsed > 0 ? delta / elapsed : 0;
+      dragRef.current = null;
+      setDragOffset(0);
+
+      if (didDrag.current) {
+        const height = getHeight();
+        const newY = Math.max(0, translateY + delta);
+        const fraction = height > 0 ? newY / height : 0;
+
+        if (velocity > FLICK_VELOCITY) close();
+        else if (velocity < -FLICK_VELOCITY) open();
+        else if (fraction > DRAG_THRESHOLD) close();
+        else open();
+      }
+    },
+    [translateY, getHeight, open, close],
+  );
+
+  const onHandleClick = React.useCallback(() => {
+    if (didDrag.current) return;
+    if (expanded) close();
+    else open();
+  }, [expanded, open, close]);
+
+  const currentY = Math.max(0, translateY + dragOffset);
+
+  return (
+    <section
+      ref={sheetRef}
+      data-slot="bottom-sheet"
+      aria-label={label}
+      className={cn("flex touch-none flex-col overflow-hidden", className)}
+      style={{
+        transform: `translateY(${currentY}px)`,
+        transition: isDragging.current
+          ? "none"
+          : reduceMotion.current
+            ? "none"
+            : "transform 0.35s cubic-bezier(0.32, 0.72, 0, 1)",
+      }}
+    >
+      <button
+        type="button"
+        data-slot="bottom-sheet-handle"
+        aria-expanded={expanded}
+        aria-label={expanded ? "Collapse panel" : "Expand panel"}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onClick={onHandleClick}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") close();
+        }}
+        className={cn(
+          "flex w-full shrink-0 cursor-grab touch-none justify-center py-3.5 active:cursor-grabbing",
+          handleClassName,
+        )}
+      >
+        <span aria-hidden="true" className="bg-border h-1 w-9 rounded-full" />
+      </button>
+      <div
+        data-slot="bottom-sheet-scroll"
+        className={cn("flex-1 overflow-y-auto", scrollClassName)}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/components/overlays/command.tsx

@@ -169,7 +169,7 @@ function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProp
     <CommandPrimitive.Item
       data-slot="command-item"
       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-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-hidden select-none",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         className,
       )}

package/src/components/overlays/dropdown-menu.tsx

@@ -38,11 +38,15 @@ function DropdownMenuContent({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Popup> & { sideOffset?: number }) {
   return (
     <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Positioner sideOffset={sideOffset}>
+      <DropdownMenuPrimitive.Backdrop className="ui-mobile-sheet-backdrop" />
+      <DropdownMenuPrimitive.Positioner
+        className="ui-mobile-sheet-positioner"
+        sideOffset={sideOffset}
+      >
         <DropdownMenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none ui-mobile-sheet-popup",
             className,
           )}
           {...props}

package/src/components/overlays/index.ts

@@ -40,6 +40,8 @@ export {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover";
+export { BottomSheet, type BottomSheetProps } from "./bottom-sheet";
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip";
 export {
   Sheet,
   SheetClose,

package/src/components/overlays/popover.tsx

@@ -1,10 +1,13 @@
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { XIcon } from "lucide-react";
 import * as React from "react";
 
+import { useIsMobile } from "../../hooks/use-mobile";
 import { cn } from "../../lib/utils";
 
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+function Popover({ modal, ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  const isMobile = useIsMobile();
+  return <PopoverPrimitive.Root data-slot="popover" modal={modal ?? isMobile} {...props} />;
 }
 
 function PopoverTrigger({
@@ -41,7 +44,9 @@ function PopoverContent({
 }) {
   return (
     <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Backdrop className="ui-mobile-sheet-backdrop" />
       <PopoverPrimitive.Positioner
+        className="ui-mobile-sheet-positioner"
         align={align}
         side={side}
         sideOffset={sideOffset}
@@ -50,12 +55,16 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 z-50 w-72 origin-(--transform-origin) rounded-md border p-4 outline-hidden",
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 w-72 origin-(--transform-origin) rounded-md border p-4 outline-hidden ui-mobile-sheet-popup ui-mobile-popover-popup",
             className,
           )}
           {...props}
         >
           {children}
+          <PopoverPrimitive.Close className="ui-mobile-sheet-close">
+            <XIcon aria-hidden="true" />
+            <span className="sr-only">Close</span>
+          </PopoverPrimitive.Close>
         </PopoverPrimitive.Popup>
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,41 @@
+"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/index.ts

@@ -1,6 +1,8 @@
 export { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar";
 export { Badge, badgeVariants } from "./badge";
 export { Button, buttonVariants } from "./button";
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from "./segmented-control";
+export { Separator } from "./separator";
 export {
   Card,
   CardAction,

package/src/components/primitives/segmented-control.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { SegmentedControl } from "./segmented-control";
+
+const meta = {
+  title: "Primitives/SegmentedControl",
+  component: SegmentedControl,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  args: {
+    label: "Layers",
+    options: [
+      { value: "cameras", label: "Cameras" },
+      { value: "places", label: "Places" },
+    ],
+  },
+  render: () => (
+    <SegmentedControl
+      label="Layers"
+      defaultValue={["cameras"]}
+      options={[
+        { value: "cameras", label: "Cameras" },
+        { value: "places", label: "Places" },
+      ]}
+    />
+  ),
+};
+
+export const Multiple: Story = {
+  args: {
+    label: "Layers",
+    options: [
+      { value: "cameras", label: "Cameras" },
+      { value: "places", label: "Places" },
+    ],
+  },
+  render: () => (
+    <SegmentedControl
+      label="Layers"
+      multiple
+      defaultValue={["cameras", "places"]}
+      options={[
+        { value: "cameras", label: "Cameras" },
+        { value: "places", label: "Places" },
+        { value: "trains", label: "Trains" },
+      ]}
+    />
+  ),
+};

package/src/components/primitives/segmented-control.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ToggleGroup as SegmentedPrimitive } from "@base-ui/react/toggle-group";
+import { Toggle as SegmentedItemPrimitive } from "@base-ui/react/toggle";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export type SegmentedOption = {
+  value: string;
+  label: React.ReactNode;
+  ariaLabel?: string;
+};
+
+export type SegmentedControlProps = {
+  options: SegmentedOption[];
+  /** Selected values. Single mode: pass at most one. */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** @default false — single-select. True allows several pressed. */
+  multiple?: boolean;
+  /** Accessible name for the group. Falls back to joining option labels. */
+  label?: string;
+  className?: string;
+  itemClassName?: string;
+};
+
+// Pill-group single/multi toggle. Shape + pressed states are kit-owned;
+// elevation and placement are app-owned via className.
+export function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  label,
+  className,
+  itemClassName,
+}: SegmentedControlProps) {
+  return (
+    <SegmentedPrimitive
+      data-slot="segmented-control"
+      aria-label={label ?? options.map((o) => o.ariaLabel ?? o.value).join(", ")}
+      multiple={multiple}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      className={cn(
+        "border-border bg-card inline-flex items-center gap-0.5 rounded-full border p-0.5",
+        className,
+      )}
+    >
+      {options.map((option) => (
+        <SegmentedItemPrimitive
+          key={option.value}
+          data-slot="segmented-control-item"
+          value={option.value}
+          aria-label={option.ariaLabel ?? (typeof option.label === "string" ? option.label : option.value)}
+          className={cn(
+            "text-muted-foreground hover:text-foreground rounded-full px-4 py-1.5 text-[11px] font-semibold tracking-wider whitespace-nowrap uppercase transition-colors",
+            "data-pressed:bg-foreground data-pressed:text-background",
+            "focus-visible:outline-ring focus-visible:outline-2 focus-visible:outline-offset-2",
+            "data-disabled:pointer-events-none data-disabled:opacity-50",
+            itemClassName,
+          )}
+        >
+          {option.label}
+        </SegmentedItemPrimitive>
+      ))}
+    </SegmentedPrimitive>
+  );
+}

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Separator } from "./separator";
+
+const meta = {
+  title: "Primitives/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {},
+  render: () => (
+    <div className="w-64">
+      <p className="text-sm">Above</p>
+      <Separator className="my-2" />
+      <p className="text-sm">Below</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  args: { orientation: "vertical" },
+  render: () => (
+    <div className="flex h-8 items-center gap-2">
+      <p className="text-sm">Left</p>
+      <Separator orientation="vertical" />
+      <p className="text-sm">Right</p>
+    </div>
+  ),
+};

package/src/components/primitives/separator.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive>) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/index.ts

@@ -1,3 +1,5 @@
+import "../dist/styles.css";
+
 export { CHART_COLORS, CHART_CSS_VARS } from "./constants/chart-colors";
 export type { SortDirection, SortField, SortOption } from "./hooks/sort.types";
 export { useApiClient } from "./hooks/use-api-client";