@momentumworld/ui-react 0.17.0

package/src/components/ui/field.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+
+import { cn } from "../../lib/utils/css";
+
+function Field({ className, ...props }: FieldPrimitive.Root.Props) {
+  return (
+    <FieldPrimitive.Root
+      className={cn("flex flex-col items-start gap-2", className)}
+      data-slot="field"
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
+  return (
+    <FieldPrimitive.Label
+      className={cn(
+        "inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
+  return (
+    <FieldPrimitive.Item
+      className={cn("flex", className)}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}: FieldPrimitive.Description.Props) {
+  return (
+    <FieldPrimitive.Description
+      className={cn("text-muted-foreground text-xs", className)}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+function FieldError({ className, ...props }: FieldPrimitive.Error.Props) {
+  return (
+    <FieldPrimitive.Error
+      className={cn("text-destructive-foreground text-xs", className)}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const FieldControl = FieldPrimitive.Control;
+const FieldValidity = FieldPrimitive.Validity;
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldControl,
+  FieldItem,
+  FieldValidity,
+  FieldGroup,
+};

package/src/components/ui/fieldset.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset";
+
+import { cn } from "../../lib/utils/css";
+
+function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
+  return (
+    <FieldsetPrimitive.Root
+      className={cn("flex w-full max-w-64 flex-col gap-6", className)}
+      data-slot="fieldset"
+      {...props}
+    />
+  );
+}
+function FieldsetLegend({
+  className,
+  ...props
+}: FieldsetPrimitive.Legend.Props) {
+  return (
+    <FieldsetPrimitive.Legend
+      className={cn("font-semibold text-foreground", className)}
+      data-slot="fieldset-legend"
+      {...props}
+    />
+  );
+}
+
+export { Fieldset, FieldsetLegend };

package/src/components/ui/form.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Form as FormPrimitive } from "@base-ui/react/form";
+
+import { cn } from "../../lib/utils/css";
+
+function Form({ className, ...props }: FormPrimitive.Props) {
+  return (
+    <FormPrimitive
+      className={cn("flex w-full flex-col gap-4", className)}
+      data-slot="form"
+      {...props}
+    />
+  );
+}
+
+export { Form };

package/src/components/ui/frame.tsx

@@ -0,0 +1,82 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Frame({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col rounded-2xl bg-muted/72 p-1",
+        "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
+        className,
+      )}
+      data-slot="frame"
+      {...props}
+    />
+  );
+}
+
+function FramePanel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        className,
+      )}
+      data-slot="frame-panel"
+      {...props}
+    />
+  );
+}
+
+function FrameHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      className={cn("flex flex-col px-5 py-4", className)}
+      data-slot="frame-panel-header"
+      {...props}
+    />
+  );
+}
+
+function FrameTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-semibold text-sm", className)}
+      data-slot="frame-panel-title"
+      {...props}
+    />
+  );
+}
+
+function FrameDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="frame-panel-description"
+      {...props}
+    />
+  );
+}
+
+function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) {
+  return (
+    <footer
+      className={cn("px-5 py-4", className)}
+      data-slot="frame-panel-footer"
+      {...props}
+    />
+  );
+}
+
+export {
+  Frame,
+  FramePanel,
+  FrameHeader,
+  FrameTitle,
+  FrameDescription,
+  FrameFooter,
+};

package/src/components/ui/generic-empty.tsx

@@ -0,0 +1,142 @@
+import {
+  FileQuestionIcon,
+  ShieldAlertIcon,
+  ShieldXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import type React from "react";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "./empty";
+
+interface ErrorOrEmptyStateProps
+  extends Omit<React.ComponentProps<"div">, "title"> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  media?: React.ReactNode;
+  mediaVariant?: "icon" | "default";
+  compact?: boolean;
+}
+
+function ErrorOrEmptyState({
+  title,
+  description,
+  actions,
+  className,
+  media,
+  mediaVariant = "default",
+  compact,
+  ...props
+}: ErrorOrEmptyStateProps) {
+  return (
+    <Empty {...props}>
+      <EmptyHeader>
+        {!compact && <EmptyMedia variant={mediaVariant}>{media}</EmptyMedia>}
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>{actions}</EmptyContent>
+    </Empty>
+  );
+}
+
+type ErrorTemplateProps = Omit<
+  ErrorOrEmptyStateProps,
+  "image" | "title" | "description"
+> & {
+  mediaClassName?: string;
+};
+
+function NotFoundErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<FileQuestionIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Not found"
+      description="The requested resource was not found."
+      {...props}
+    />
+  );
+}
+
+function UnauthorizedErrorState({
+  mediaClassName,
+  ...props
+}: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldAlertIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Unauthorized"
+      description="You are not authorized to access this resource."
+      {...props}
+    />
+  );
+}
+
+function ForbiddenErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldXIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Forbidden"
+      description="You are not allowed to access this resource."
+      {...props}
+    />
+  );
+}
+
+function InternalServerErrorState({
+  mediaClassName,
+  ...props
+}: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldXIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Internal server error"
+      description="An error occurred while processing your request."
+      {...props}
+    />
+  );
+}
+
+function OfflineErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<ShieldXIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Offline"
+      description="Please check your internet connection and try again."
+      {...props}
+    />
+  );
+}
+
+function GeneralErrorState({ mediaClassName, ...props }: ErrorTemplateProps) {
+  return (
+    <ErrorOrEmptyState
+      media={<TriangleAlertIcon className={mediaClassName} />}
+      mediaVariant="icon"
+      title="Error"
+      description="An error occurred while processing your request."
+      {...props}
+    />
+  );
+}
+
+export {
+  ErrorOrEmptyState,
+  NotFoundErrorState,
+  UnauthorizedErrorState,
+  ForbiddenErrorState,
+  InternalServerErrorState,
+  OfflineErrorState,
+  GeneralErrorState,
+};

package/src/components/ui/group.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Separator } from "./separator";
+import { cn } from "../../lib/utils/css";
+
+const groupVariants = cva(
+  "flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=button]:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64 dark:*:[[data-slot=separator]:has(~[data-slot=button]:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64",
+  {
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+    variants: {
+      orientation: {
+        horizontal:
+          "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none",
+        vertical:
+          "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none",
+      },
+    },
+  },
+);
+
+function Group({
+  className,
+  orientation,
+  children,
+  ...props
+}: {
+  className?: string;
+  orientation?: VariantProps<typeof groupVariants>["orientation"];
+  children: React.ReactNode;
+} & React.ComponentProps<"div">) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: Imported from library
+    <div
+      className={cn(groupVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="group"
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function GroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "relative inline-flex items-center whitespace-nowrap gap-2 rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-muted-foreground text-base sm:text-sm shadow-xs/5 outline-none transition-shadow 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:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_svg]:-mx-0.5",
+      className,
+    ),
+    "data-slot": "group-text",
+  };
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(defaultProps, props),
+    render,
+  });
+}
+
+function GroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "[[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export {
+  Group,
+  Group as ButtonGroup,
+  GroupText,
+  GroupText as ButtonGroupText,
+  GroupSeparator,
+  GroupSeparator as ButtonGroupSeparator,
+  groupVariants,
+};

package/src/components/ui/help-tip.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { CircleHelp } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import {
+  Tooltip,
+  TooltipDescription,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTitle,
+  TooltipTrigger,
+} from "./tooltip";
+
+export interface HelpTipProps {
+  /** The help text shown in the tooltip. */
+  children?: React.ReactNode;
+  /** Optional bold heading rendered above the description text. */
+  title?: React.ReactNode;
+  /** Which side of the trigger the tooltip opens on. Default "top". */
+  side?: React.ComponentProps<typeof TooltipPopup>["side"];
+  /** Alignment of the tooltip along the trigger. Default "center". */
+  align?: React.ComponentProps<typeof TooltipPopup>["align"];
+  /** Accessible label for the icon button. Default "More information". */
+  label?: string;
+  /** Hover / focus open delay in ms. Default 150. */
+  delay?: number;
+  /** Icon size in px. Default 16. */
+  iconSize?: number;
+  /** Extra classes for the trigger button. */
+  className?: string;
+  /** Extra classes for the tooltip popup. */
+  popupClassName?: string;
+  /** Render the little arrow pointing at the icon. Default false. */
+  arrow?: boolean;
+}
+
+/**
+ * A small "?" help affordance: an unobtrusive circular icon that reveals
+ * supporting text in a tooltip on hover / focus. Use it next to a label,
+ * heading, or field when a short explanation would help but shouldn't take up
+ * permanent space.
+ *
+ * ```tsx
+ * <span className="flex items-center gap-1.5">
+ *   My Events
+ *   <HelpTip>Every event Country Club has surfaced for you…</HelpTip>
+ * </span>
+ * ```
+ */
+export function HelpTip({
+  children,
+  title,
+  side = "top",
+  align = "center",
+  label = "More information",
+  delay = 150,
+  iconSize = 16,
+  className,
+  popupClassName,
+  arrow = false,
+}: HelpTipProps) {
+  return (
+    <TooltipProvider delay={delay}>
+      <Tooltip>
+        <TooltipTrigger
+          aria-label={label}
+          className={cn(
+            "inline-flex shrink-0 cursor-help items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          <CircleHelp aria-hidden size={iconSize} />
+        </TooltipTrigger>
+        <TooltipPopup
+          align={align}
+          arrow={arrow}
+          className={cn("max-w-64 [--viewport-inline-padding:--spacing(3)]", popupClassName)}
+          side={side}
+        >
+          {title ? (
+            <div className="flex flex-col gap-0.5 py-0.5">
+              <TooltipTitle>{title}</TooltipTitle>
+              <TooltipDescription className="text-popover-foreground">{children}</TooltipDescription>
+            </div>
+          ) : (
+            <div className="py-0.5 leading-snug">{children}</div>
+          )}
+        </TooltipPopup>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}