@ponti-studios/ui 1.6.0 → 1.8.0

package/src/components/forms/date-field.tsx

@@ -1,179 +0,0 @@
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { useId, useState } from "react";
-
-import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
-import { Button } from "../primitives/button";
-import { Calendar } from "./calendar";
-import { formatDateInput, parseDateInput } from "./date-utils";
-import { DatePicker, type DatePickerProps } from "./date-picker";
-
-export interface DateRangeValue {
-  from?: Date | string | null;
-  to?: Date | string | null;
-}
-
-interface DateFieldCommonProps {
-  id?: string;
-  label?: string;
-  showLabel?: boolean;
-  placeholder?: string;
-  dateFormat?: string;
-  disabled?: boolean;
-  containerClassName?: string;
-  popoverAlign?: DatePickerProps["popoverAlign"];
-  variant?: DatePickerProps["variant"];
-  captionLayout?: DatePickerProps["captionLayout"];
-}
-
-export interface SingleDateFieldProps extends DateFieldCommonProps {
-  mode?: "single";
-  name: string;
-  defaultValue?: Date | string | null;
-}
-
-export interface RangeDateFieldProps extends DateFieldCommonProps {
-  mode: "range";
-  startName: string;
-  endName: string;
-  defaultValue?: DateRangeValue;
-}
-
-export type DateFieldProps = SingleDateFieldProps | RangeDateFieldProps;
-
-const TRIGGER_CLASSES =
-  "border-border bg-background text-foreground placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal";
-
-function SingleDateField({
-  name,
-  defaultValue,
-  id,
-  label,
-  showLabel,
-  placeholder,
-  dateFormat,
-  disabled,
-  containerClassName,
-  popoverAlign,
-  variant,
-  captionLayout,
-}: SingleDateFieldProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const [value, setValue] = useState<Date | undefined>(() => parseDateInput(defaultValue));
-
-  return (
-    <div>
-      <DatePicker
-        id={inputId}
-        label={label}
-        showLabel={showLabel}
-        placeholder={placeholder}
-        dateFormat={dateFormat}
-        disabled={disabled}
-        containerClassName={containerClassName}
-        popoverAlign={popoverAlign}
-        variant={variant}
-        captionLayout={captionLayout}
-        value={value}
-        onSelect={setValue}
-      />
-      <input type="hidden" name={name} value={value ? formatDateInput(value) : ""} />
-    </div>
-  );
-}
-
-function RangeDateField({
-  startName,
-  endName,
-  defaultValue,
-  id,
-  label,
-  showLabel = true,
-  placeholder = "Pick a date range",
-  dateFormat = "MMM d, yyyy",
-  disabled = false,
-  containerClassName = "flex-1 min-w-0",
-  popoverAlign = "start",
-  variant = "outline",
-  captionLayout = "label",
-}: RangeDateFieldProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const [range, setRange] = useState<{ from?: Date; to?: Date }>(() => ({
-    from: parseDateInput(defaultValue?.from),
-    to: parseDateInput(defaultValue?.to),
-  }));
-
-  const fromLabel = range.from ? format(range.from, dateFormat) : null;
-  const toLabel = range.to ? format(range.to, dateFormat) : null;
-  const triggerLabel = fromLabel
-    ? toLabel
-      ? `${fromLabel} – ${toLabel}`
-      : `From ${fromLabel}`
-    : toLabel
-      ? `Until ${toLabel}`
-      : placeholder;
-
-  return (
-    <div className={containerClassName}>
-      {showLabel && label ? (
-        <label htmlFor={inputId} className="text-foreground mb-2 block text-sm font-medium">
-          {label}
-        </label>
-      ) : null}
-      <Popover>
-        <div className="flex w-full items-center">
-          <div className="border-border bg-background text-foreground flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
-            <CalendarIcon className="size-4" aria-hidden />
-          </div>
-          <PopoverTrigger asChild>
-            <Button id={inputId} variant={variant} disabled={disabled} className={TRIGGER_CLASSES}>
-              {triggerLabel}
-            </Button>
-          </PopoverTrigger>
-        </div>
-        <PopoverContent
-          className="bg-popover w-auto p-0"
-          align={popoverAlign}
-          aria-label={label ?? "Choose a date range"}
-        >
-          <Calendar
-            mode="range"
-            selected={range.from ? { from: range.from, to: range.to } : undefined}
-            defaultMonth={range.from ?? range.to}
-            resetOnSelect
-            onSelect={(next) => setRange({ from: next?.from, to: next?.to })}
-            captionLayout={captionLayout}
-          />
-        </PopoverContent>
-      </Popover>
-      <input type="hidden" name={startName} value={range.from ? formatDateInput(range.from) : ""} />
-      <input type="hidden" name={endName} value={range.to ? formatDateInput(range.to) : ""} />
-    </div>
-  );
-}
-
-/**
- * DateField — calendar picker backed by hidden inputs that submit "YYYY-MM-DD"
- * local date strings, so forms never receive UTC-shifted dates. Supports both
- * a single date (`name`) and a range (`startName` + `endName`).
- *
- * @example
- * <DateField name="startDate" defaultValue="2020-01-15" label="Start date" />
- * <DateField
- *   mode="range"
- *   startName="startDate"
- *   endName="endDate"
- *   defaultValue={{ from: "2020-01-15", to: "2020-06-30" }}
- *   label="Active period"
- * />
- */
-function DateField(props: DateFieldProps) {
-  if (props.mode === "range") {
-    return <RangeDateField {...props} />;
-  }
-  return <SingleDateField {...props} />;
-}
-
-export { DateField };

package/src/components/overlays/alert-dialog.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-
-const meta = {
-  title: "Overlays/AlertDialog",
-  component: AlertDialog,
-  tags: ["autodocs"],
-} satisfies Meta<typeof AlertDialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger className="rounded border px-4 py-2 text-sm">
-        Open Dialog
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};

package/src/components/overlays/alert-dialog.tsx

@@ -1,116 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "../primitives/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = ({
-  children,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
-  <AlertDialogPrimitive.Portal {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
-  </AlertDialogPrimitive.Portal>
-);
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Backdrop>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Backdrop>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Backdrop
-    ref={ref}
-    className={cn(
-      "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
-      className,
-    )}
-    {...props}
-  />
-));
-
-const AlertDialogContent = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Popup>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Popup>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Popup
-      ref={ref}
-      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 sm:data-open:slide-in-from-bottom-0 fixed bottom-0 z-50 grid w-full max-w-lg gap-6 rounded-t-xl border p-4 outline-none sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-
-function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />;
-}
-
-function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)}
-      {...props}
-    />
-  );
-}
-
-const AlertDialogTitle = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold tracking-tight", className)}
-    {...props}
-  />
-));
-
-const AlertDialogDescription = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground max-w-prose text-sm", className)}
-    {...props}
-  />
-));
-
-const AlertDialogAction = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Close>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Close ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-
-const AlertDialogCancel = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Close>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Close
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

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

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-
-import { Input } from "../forms/input";
-import { Label } from "../primitives/label";
-
-const meta: Meta<typeof Label> = {
-  title: "Primitives/Label",
-  component: Label,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Email address",
-  },
-};
-
-export const WithInput: Story = {
-  render: () => (
-    <div className="flex w-full max-w-sm flex-col gap-2">
-      <Label htmlFor="email">Email address</Label>
-      <Input id="email" type="email" placeholder="you@example.com" />
-    </div>
-  ),
-};

package/src/components/primitives/label.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
-  ({ className, ...props }, ref) => (
-    <label
-      htmlFor={props.htmlFor}
-      ref={ref}
-      className={cn(
-        "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Label.displayName = "Label";
-
-export { Label };

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

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

@@ -1,33 +0,0 @@
-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/lib/create-memory-storage.ts

@@ -1,24 +0,0 @@
-export function createMemoryStorage(): Storage {
-  const store = new Map<string, string>();
-
-  return {
-    get length() {
-      return store.size;
-    },
-    clear() {
-      store.clear();
-    },
-    getItem(key) {
-      return store.get(key) ?? null;
-    },
-    key(index) {
-      return Array.from(store.keys())[index] ?? null;
-    },
-    removeItem(key) {
-      store.delete(key);
-    },
-    setItem(key, value) {
-      store.set(key, value);
-    },
-  };
-}

package/src/native/card.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { Text, View, type TextProps, type ViewProps } from "react-native";
-
-import { cn } from "../lib/utils";
-
-function Card({ className, ...props }: ViewProps) {
-  return (
-    <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />
-  );
-}
-
-function CardHeader({ className, ...props }: ViewProps) {
-  return <View className={cn("gap-1", className)} {...props} />;
-}
-
-function CardTitle({ className, ...props }: TextProps) {
-  return <Text className={cn("text-card-foreground text-xl", className)} {...props} />;
-}
-
-function CardDescription({ className, ...props }: TextProps) {
-  return <Text className={cn("text-muted-foreground text-xs", className)} {...props} />;
-}
-
-function CardAction({ className, ...props }: ViewProps) {
-  return <View className={cn("self-start", className)} {...props} />;
-}
-
-function CardContent({ className, ...props }: ViewProps) {
-  return <View className={className} {...props} />;
-}
-
-function CardFooter({ className, ...props }: ViewProps) {
-  return <View className={cn("flex-row items-center", className)} {...props} />;
-}
-
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/native/icon-button.tsx

@@ -1,41 +0,0 @@
-import type { ReactNode } from "react";
-import { Pressable } from "react-native";
-import { useCSSVariable } from "uniwind";
-
-interface IconButtonProps {
-  accessibilityLabel?: string;
-  children: ReactNode;
-  disabled?: boolean;
-  onPress?: () => void;
-  testID?: string;
-  variant?: "bordered" | "plain";
-}
-
-export function IconButton({
-  accessibilityLabel,
-  children,
-  disabled = false,
-  onPress,
-  testID,
-  variant = "bordered",
-}: IconButtonProps) {
-  const [border] = useCSSVariable(["--color-border"]) as string[];
-
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      disabled={disabled}
-      onPress={onPress}
-      testID={testID}
-      className={`w-8 h-8 rounded-full border items-center justify-center ${variant === "plain" ? "border-0" : ""}`}
-      style={({ pressed }) => [
-        { borderColor: variant === "plain" ? "transparent" : border },
-        pressed && { opacity: 0.7 },
-        disabled && { opacity: 0.4 },
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
-}

package/src/native/index.ts

@@ -1,38 +0,0 @@
-/**
- * React Native entry point.
- *
- * Kept as its own subpath (`@ponti-studios/ui/native`) because it is the only
- * part of the package that imports `react-native`. Nothing here may import web
- * code, so web consumers never pull React Native into their graph and native
- * consumers never pull in react-dom.
- */
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "./card";
-export { IconButton } from "./icon-button";
-export { ListRow } from "./list-row";
-export { createMakeStyles, type NamedStyles } from "./make-styles";
-export { nativeShadows, type NativeShadowLayer } from "./shadows";
-export { TextField } from "./text-field";
-export { useColorMode, useThemeColors } from "./use-theme-colors";
-
-export {
-  borderRadius as nativeBorderRadius,
-  componentSize as nativeComponentSize,
-  fontFamily as nativeFontFamily,
-  screenMargin as nativeScreenMargin,
-  spacing as nativeSpacing,
-  streamItem as nativeStreamItem,
-  typography as nativeTypography,
-  type BorderRadiusToken,
-  type ComponentSizeToken,
-  type SpacingToken,
-  type TypographyVariant,
-} from "../styles/tokens/normalize-native";
-export { motion as nativeMotion } from "../styles/tokens";

package/src/native/list-row.tsx

@@ -1,67 +0,0 @@
-import type { ReactNode } from "react";
-import { Pressable, type StyleProp, Text, type TextStyle, View } from "react-native";
-import { useCSSVariable } from "uniwind";
-
-interface ListRowProps {
-  accessibilityLabel: string;
-  actionTestID?: string;
-  eyebrow?: string;
-  leading?: ReactNode;
-  onLongPress?: () => void;
-  onPress: () => void;
-  subtitle?: string | null;
-  testID?: string;
-  title: string;
-  titleStyle?: StyleProp<TextStyle>;
-  trailing?: ReactNode;
-}
-
-function ListRow({
-  accessibilityLabel,
-  actionTestID,
-  eyebrow,
-  leading,
-  onLongPress,
-  onPress,
-  subtitle,
-  testID,
-  title,
-  titleStyle,
-  trailing,
-}: ListRowProps) {
-  const [muted] = useCSSVariable(["--color-muted"]) as string[];
-
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      onLongPress={onLongPress}
-      onPress={onPress}
-      className="flex-row items-center gap-3 min-h-14 border-b border-border px-4 py-2"
-      style={({ pressed }) => pressed && { backgroundColor: muted }}
-      testID={testID ?? actionTestID}
-    >
-      {leading ? <View className="items-center justify-center w-6">{leading}</View> : null}
-      <View className="flex-1 gap-0.5 min-w-0">
-        {eyebrow ? (
-          <Text className="text-caption2 text-muted-foreground tracking-[0.2]">{eyebrow}</Text>
-        ) : null}
-        <Text numberOfLines={2} className="text-body text-foreground" style={titleStyle}>
-          {title}
-        </Text>
-        {subtitle ? (
-          <Text
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            className="text-caption1 text-muted-foreground"
-          >
-            {subtitle}
-          </Text>
-        ) : null}
-      </View>
-      {trailing ? <View className="items-center justify-center">{trailing}</View> : null}
-    </Pressable>
-  );
-}
-
-export { ListRow };