@momentumworld/ui-react 0.17.0

package/src/components/ui/scroller.tsx

@@ -0,0 +1,38 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils/css";
+import type { AsChildProps } from "../../types/helpers";
+
+const scrollerClassName =
+  "absolute top-1/2 z-10 -translate-y-1/2 data-closed:opacity-0";
+
+const LeftScroller = ({
+  className,
+  asChild,
+  ...props
+}: AsChildProps<"button">) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      {...(asChild ? {} : { type: "button" })}
+      className={cn(scrollerClassName, "left-0", className)}
+      {...props}
+    />
+  );
+};
+
+const RightScroller = ({
+  className,
+  asChild,
+  ...props
+}: AsChildProps<"button">) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      {...(asChild ? {} : { type: "button" })}
+      className={cn(scrollerClassName, "right-0", className)}
+      {...props}
+    />
+  );
+};
+
+export { LeftScroller, RightScroller };

package/src/components/ui/section-header.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const sectionHeaderTitleVariants = cva(
+  "min-w-0 font-semibold text-foreground tracking-tight",
+  {
+    defaultVariants: { size: "default" },
+    variants: {
+      size: {
+        sm: "text-sm",
+        default: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+);
+
+const sectionHeaderDescriptionVariants = cva(
+  "text-muted-foreground leading-relaxed",
+  {
+    defaultVariants: { size: "default" },
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-sm",
+      },
+    },
+  },
+);
+
+interface SectionHeaderProps
+  extends Omit<React.ComponentProps<"div">, "title">,
+    VariantProps<typeof sectionHeaderTitleVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Right-aligned actions (buttons, counts, menus). */
+  actions?: React.ReactNode;
+  /** A leading node — e.g. a `<FeaturedIcon />` or a count badge. */
+  icon?: React.ReactNode;
+  /** Adds a bottom hairline + padding, so the header sits above a list/grid. */
+  border?: boolean;
+}
+
+/**
+ * A titled section heading: title + optional description on the left, optional
+ * actions on the right, with an optional leading icon. One altitude below the
+ * page-level `DashboardHeader` — use it to introduce a card body, a list, or a
+ * settings group.
+ */
+function SectionHeader({
+  className,
+  title,
+  description,
+  actions,
+  icon,
+  size,
+  border,
+  children,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-start justify-between gap-3",
+        border && "border-b pb-4",
+        className,
+      )}
+      data-slot="section-header"
+      {...props}
+    >
+      <div className="flex min-w-0 items-start gap-3">
+        {icon ? (
+          <div className="shrink-0" data-slot="section-header-icon">
+            {icon}
+          </div>
+        ) : null}
+        <div className="min-w-0 space-y-0.5">
+          {title ? (
+            <div
+              className={cn(sectionHeaderTitleVariants({ size }))}
+              data-slot="section-header-title"
+            >
+              {title}
+            </div>
+          ) : null}
+          {description ? (
+            <p
+              className={cn(sectionHeaderDescriptionVariants({ size }))}
+              data-slot="section-header-description"
+            >
+              {description}
+            </p>
+          ) : null}
+          {children}
+        </div>
+      </div>
+      {actions ? (
+        <div
+          className="flex shrink-0 items-center gap-2"
+          data-slot="section-header-actions"
+        >
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export {
+  SectionHeader,
+  sectionHeaderTitleVariants,
+  sectionHeaderDescriptionVariants,
+};

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

@@ -0,0 +1,83 @@
+"use client";
+
+import type * as React from "react";
+
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+import { cn } from "../../lib/utils/css";
+
+interface SegmentedControlOption<T extends string> {
+  value: T;
+  label: React.ReactNode;
+}
+
+interface SegmentedControlProps<T extends string> {
+  /** The currently-selected option value. */
+  value: T;
+  /** Called with the newly-selected value (never with an empty selection). */
+  onValueChange: (value: T) => void;
+  /** The mutually-exclusive options, left to right. */
+  options: SegmentedControlOption<T>[];
+  size?: "sm" | "default" | "lg";
+  variant?: "default" | "outline";
+  className?: string;
+}
+
+/**
+ * Per-size segment padding. The base toggle sizes are icon-button tight
+ * (~5px), which crowds text labels like "Past 3 months"; a segmented control
+ * reads as text tabs, so it wants room to breathe on both axes.
+ */
+const SEGMENT_SIZE: Record<NonNullable<SegmentedControlProps<string>["size"]>, string> = {
+  sm: "h-8 px-3.5 sm:h-7",
+  default: "h-9 px-4 sm:h-8",
+  lg: "h-10 px-5 sm:h-9",
+};
+
+/**
+ * A single-select segmented control — a compact row of mutually-exclusive
+ * options (e.g. a time-range switch: Past month / Past 3 months / Overall).
+ *
+ * A thin, typed wrapper over {@link ToggleGroup} that keeps exactly one option
+ * selected — the active segment can't be toggled off into an empty state — and
+ * hides Base UI's array-value plumbing. Pass `options`, `value`, and
+ * `onValueChange`; the value is a string union you control.
+ */
+function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  size = "sm",
+  variant = "outline",
+  className,
+}: SegmentedControlProps<T>) {
+  return (
+    <ToggleGroup
+      className={cn(className)}
+      data-slot="segmented-control"
+      value={[value]}
+      onValueChange={(groupValue) => {
+        const next = Array.isArray(groupValue) ? groupValue[0] : groupValue;
+        // Ignore the empty-array case so a segment always stays selected.
+        if (next != null) onValueChange(next as T);
+      }}
+      size={size}
+      variant={variant}
+    >
+      {options.map((option) => (
+        <ToggleGroupItem
+          key={option.value}
+          value={option.value}
+          className={SEGMENT_SIZE[size]}
+        >
+          {option.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+export {
+  SegmentedControl,
+  type SegmentedControlOption,
+  type SegmentedControlProps,
+};

package/src/components/ui/select.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import {
+  ChevronDownIcon,
+  ChevronsUpDownIcon,
+  ChevronUpIcon,
+} from "lucide-react";
+
+import { cn } from "../../lib/utils/css";
+
+const Select = SelectPrimitive.Root;
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default" | "lg";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-center gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
+        size === "sm" &&
+          "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+        size === "lg" && "min-h-10 sm:min-h-9",
+        className,
+      )}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon data-slot="select-icon">
+        <ChevronsUpDownIcon className="-me-1 size-4.5 opacity-80 sm:size-4" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      className={cn(
+        "flex-1 truncate data-placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="select-value"
+      {...props}
+    />
+  );
+}
+
+function SelectPopup({
+  className,
+  children,
+  sideOffset = 4,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props & {
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
+  alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"];
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="z-50 select-none"
+        data-slot="select-positioner"
+        sideOffset={sideOffset}
+      >
+        <SelectPrimitive.Popup
+          className="origin-(--transform-origin) text-foreground transition-[transform,scale,opacity] duration-150 ease-out data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0"
+          data-slot="select-popup"
+          {...props}
+        >
+          <SelectPrimitive.ScrollUpArrow
+            className="top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover"
+            data-slot="select-scroll-up-arrow"
+          >
+            <ChevronUpIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollUpArrow>
+          <div className="relative h-full rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]">
+            <SelectPrimitive.List
+              className={cn(
+                "max-h-(--available-height) min-w-(--anchor-width) overflow-y-auto p-1",
+                className,
+              )}
+              data-slot="select-list"
+            >
+              {children}
+            </SelectPrimitive.List>
+          </div>
+          <SelectPrimitive.ScrollDownArrow
+            className="bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover"
+            data-slot="select-scroll-down-arrow"
+          >
+            <ChevronDownIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollDownArrow>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <SelectPrimitive.ItemIndicator className="col-start-1">
+        {/** biome-ignore lint/a11y/noSvgWithoutTitle: Imported from library */}
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/1500/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText className="col-start-2 min-w-0">
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="select-separator"
+      {...props}
+    />
+  );
+}
+
+function SelectGroup(props: SelectPrimitive.Group.Props) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      className="px-2 py-1.5 font-medium text-muted-foreground text-xs"
+      data-slot="select-group-label"
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectPopup,
+  SelectPopup as SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectGroup,
+  SelectGroupLabel,
+};

package/src/components/ui/separator.tsx

@@ -0,0 +1,23 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+import { cn } from "../../lib/utils/css";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        className,
+      )}
+      data-slot="separator"
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/components/ui/sheet.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import { Button } from "./button";
+import { ScrollArea } from "./scroll-area";
+import { cn } from "../../lib/utils/css";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+function SheetTrigger(props: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose(props: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetBackdrop({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="sheet-backdrop"
+      {...props}
+    />
+  );
+}
+
+export const sheetViewportVariants = cva("fixed inset-0 z-50 grid", {
+  variants: {
+    side: {
+      bottom: "grid grid-rows-[1fr_auto] pt-12",
+      top: "grid grid-rows-[auto_1fr] pb-12",
+      left: "flex justify-start",
+      right: "flex justify-end",
+    },
+    variant: {
+      default: "",
+      inset: "sm:p-4",
+    },
+  },
+});
+
+function SheetViewport({
+  className,
+  side,
+  variant = "default",
+  ...props
+}: SheetPrimitive.Viewport.Props & {
+  side?: "right" | "left" | "top" | "bottom";
+  variant?: "default" | "inset";
+}) {
+  return (
+    <SheetPrimitive.Viewport
+      className={cn(sheetViewportVariants({ side, variant }), className)}
+      data-slot="sheet-viewport"
+      {...props}
+    />
+  );
+}
+
+export const sheetPopupVariants = cva(
+  "relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/6%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      side: {
+        bottom:
+          "row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8",
+        top: "data-ending-style:-translate-y-8 data-starting-style:-translate-y-8 border-b",
+        left: "data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 w-[calc(100%-(--spacing(12)))] max-w-md border-e",
+        right:
+          "col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8",
+      },
+      variant: {
+        default: "",
+        inset:
+          "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]",
+      },
+    },
+  },
+);
+
+function SheetPopup({
+  className,
+  children,
+  showCloseButton = true,
+  side = "right",
+  variant = "default",
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  side?: "right" | "left" | "top" | "bottom";
+  variant?: "default" | "inset";
+}) {
+  return (
+    <SheetPortal>
+      <SheetBackdrop />
+      <SheetViewport side={side} variant={variant}>
+        <SheetPrimitive.Popup
+          className={cn(sheetPopupVariants({ side, variant }), className)}
+          data-slot="sheet-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.Close
+              aria-label="Close"
+              className="absolute end-2 top-2"
+              render={<Button size="icon" variant="ghost" />}
+            >
+              <XIcon />
+            </SheetPrimitive.Close>
+          )}
+        </SheetPrimitive.Popup>
+      </SheetViewport>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4",
+        className,
+      )}
+      data-slot="sheet-header"
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end",
+        variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "bare" &&
+          "in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6",
+        className,
+      )}
+      data-slot="sheet-footer"
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      className={cn(
+        "font-heading font-semibold text-xl leading-none",
+        className,
+      )}
+      data-slot="sheet-title"
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="sheet-description"
+      {...props}
+    />
+  );
+}
+
+function SheetPanel({
+  className,
+  scrollFade = true,
+  ...props
+}: React.ComponentProps<"div"> & { scrollFade?: boolean }) {
+  return (
+    <ScrollArea scrollFade={scrollFade}>
+      <div
+        className={cn(
+          "p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1",
+          className,
+        )}
+        data-slot="sheet-panel"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetPortal,
+  SheetClose,
+  SheetBackdrop,
+  SheetViewport,
+  SheetBackdrop as SheetOverlay,
+  SheetPopup,
+  SheetPopup as SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetPanel,
+};