@m3000/market 0.0.1

package/src/components/primitives/Tabs.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+export type TabsContextType = {
+  layout: "default" | "centered";
+  variant: "default" | "underline" | "segmented";
+};
+
+const TabsLayoutContext = React.createContext<TabsContextType>({
+  layout: "default",
+  variant: "default",
+});
+
+interface TabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
+  layout?: TabsContextType["layout"];
+  variant?: TabsContextType["variant"];
+}
+
+function Tabs({
+  className,
+  layout = "default",
+  variant = "default",
+  ...props
+}: TabsProps): React.ReactElement {
+  return (
+    <TabsLayoutContext value={{ layout, variant }}>
+      <TabsPrimitive.Root
+        className={cn("flex flex-col", className)}
+        {...props}
+      />
+    </TabsLayoutContext>
+  );
+}
+
+const tabsListVariants = cva("relative flex", {
+  variants: {
+    layout: {
+      default: "items-center gap-5",
+      centered: "justify-between px-1",
+    },
+    variant: {
+      default: "border-b border-b-border pb-4",
+      underline: "border-b border-b-border pb-4",
+      segmented:
+        "inline-flex items-center gap-1 rounded-lg border border-border bg-muted/30 p-1",
+    },
+  },
+  defaultVariants: {
+    layout: "default",
+    variant: "default",
+  },
+});
+
+function TabsList({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>): React.ReactElement {
+  const context = React.useContext(TabsLayoutContext);
+
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        tabsListVariants({
+          layout: context.layout,
+          variant: context.variant,
+        }),
+        context.variant === "segmented" &&
+          context.layout === "centered" &&
+          "justify-start px-1",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {context.variant === "underline" ? <TabsIndicator /> : null}
+    </TabsPrimitive.List>
+  );
+}
+
+function TabsIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Indicator>): React.ReactElement {
+  const context = React.useContext(TabsLayoutContext);
+  return (
+    <TabsPrimitive.Indicator
+      className={cn(
+        "absolute bottom-0 left-0 z-1 h-[3px] w-(--active-tab-width) translate-x-(--active-tab-left) bg-foreground transition-transform duration-200 ease-in-out",
+        {
+          "w-[calc(var(--active-tab-width)+4px)]":
+            context.layout === "centered",
+          "translate-x-[calc(var(--active-tab-left)-4px)]":
+            context.layout === "centered",
+        },
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabVariants = cva(
+  "relative rounded-xs font-sans text-sm leading-none whitespace-nowrap text-muted-foreground after:pointer-events-auto after:absolute after:z-0 after:rounded-xs after:bg-transparent after:content-[''] hover:text-foreground focus-visible:ring focus-visible:outline-none data-active:text-foreground",
+  {
+    variants: {
+      layout: {
+        default: "after:-inset-x-2.5 after:-inset-y-1.5",
+        centered: "w-full after:inset-x-0 after:-inset-y-1.5",
+      },
+      variant: {
+        default: "",
+        underline: "",
+        segmented:
+          "rounded-md border border-transparent px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors after:hidden hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-active:border-border data-active:bg-background data-active:text-foreground data-active:shadow-[0_1px_2px_0_rgb(0,0,0,0.04)] aria-selected:border-border aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-[0_1px_2px_0_rgb(0,0,0,0.04)]",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+      variant: "default",
+    },
+  },
+);
+
+function Tab({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Tab>): React.ReactElement {
+  const context = React.useContext(TabsLayoutContext);
+
+  return (
+    <TabsPrimitive.Tab
+      className={cn(
+        tabVariants({ layout: context.layout, variant: context.variant }),
+        context.variant === "segmented" &&
+          context.layout === "centered" &&
+          "w-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsPanel({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Panel>): React.ReactElement {
+  return (
+    <TabsPrimitive.Panel
+      className={cn("focus-visible:outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsIndicator, Tab, TabsPanel };

package/src/components/primitives/Tag.tsx

@@ -0,0 +1,48 @@
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+import { Text, type TextProps } from "./Text";
+
+type TagVariantsProps = {
+  type?: "informative" | "interactive";
+};
+
+const tagVariants = (props: TagVariantsProps) => {
+  const baseClasses =
+    "inline-flex rounded-xs border border-solid border-border bg-muted px-1 leading-none";
+  const typeClasses = {
+    informative: "",
+    interactive:
+      "underline hover:bg-accent-hover focus-visible:ring focus-visible:outline-none",
+  };
+  return `${baseClasses} ${typeClasses[props.type ?? "informative"]}`;
+};
+
+type BaseTagProps = Omit<TextProps, "render"> & TagVariantsProps;
+
+type TagInformativeProps = BaseTagProps & {
+  type?: "informative";
+} & Omit<React.ComponentProps<"span">, "color">;
+
+type TagButtonProps = BaseTagProps & {
+  type: "interactive";
+} & Omit<React.ComponentProps<"button">, "type">;
+
+export type TagProps = TagInformativeProps | TagButtonProps;
+export type TagElement = HTMLSpanElement | HTMLButtonElement;
+
+export function Tag({
+  className,
+  type = "informative",
+  children,
+  ...rest
+}: TagProps): React.ReactElement {
+  return (
+    <Text
+      render={type === "interactive" ? <button type="button" /> : <span />}
+      className={cn(tagVariants({ type }), className)}
+      {...rest}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/components/primitives/Text.tsx

@@ -0,0 +1,102 @@
+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 * as React from "react";
+import { cn } from "@/lib/cn";
+
+const textVariants = cva("font-sans", {
+  variants: {
+    size: {
+      "1": "text-xs leading-[18px]",
+      "2": "text-sm leading-[21px]",
+      "3": "text-base leading-6",
+      "4": "text-xl leading-7",
+      "5": "text-2xl leading-8",
+      "6": "text-[28px] leading-9",
+      "7": "text-[32px] leading-10",
+      "8": "text-[36px] leading-[44px]",
+      "9": "text-5xl leading-[56px]",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    color: {
+      primary: "text-foreground",
+      secondary: "text-muted-foreground",
+      tertiary: "text-muted-foreground",
+      disabled: "text-disabled-foreground",
+      current: "text-current",
+      success: "text-success",
+      error: "text-destructive",
+    },
+    tabularNums: {
+      true: "tabular-nums",
+    },
+  },
+  defaultVariants: {
+    size: "2",
+    weight: "regular",
+    color: "primary",
+  },
+}) as (props?: {
+  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+  weight?: "regular" | "medium" | "semibold";
+  align?: "left" | "center" | "right";
+  color?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "disabled"
+    | "current"
+    | "success"
+    | "error";
+  tabularNums?: true;
+  className?: string;
+}) => string;
+
+type TextVariants = typeof textVariants;
+
+export interface TextProps
+  extends VariantProps<TextVariants>,
+    Omit<useRender.ComponentProps<"span">, "color"> {}
+
+export type TextElement = React.ComponentRef<"span">;
+
+export function Text({
+  as,
+  className,
+  align,
+  size,
+  weight,
+  color,
+  tabularNums,
+  render,
+  ref,
+  ...props
+}: TextProps & { as?: React.ElementType }): React.ReactElement {
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: cn(
+      textVariants({ align, size, weight, color, tabularNums }),
+      className,
+    ),
+  };
+
+  const element = useRender({
+    defaultTagName: "span",
+    render: render ?? (as ? React.createElement(as) : undefined),
+    props: mergeProps<"span">(defaultProps, props),
+    ref: ref,
+  });
+
+  return element;
+}
+
+export { textVariants };
+export type { VariantProps };

package/src/components/primitives/countdown/Countdown.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Text } from "@/components/primitives";
+import { type UseCountdownResult, useCountdown } from "@/hooks";
+
+export interface CountdownProps {
+  /** Target date to count down to */
+  to: Date;
+  /** Show full format even when not expired (default: only show when expired) */
+  showWhenExpired?: boolean;
+  /** Stop counting up when countdown reaches zero (default: false - keeps counting up) */
+  stopOnExpired?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Custom renderer - receives full countdown state */
+  children?: (result: UseCountdownResult) => React.ReactNode;
+}
+
+export function Countdown({
+  to,
+  showWhenExpired = false,
+  stopOnExpired = false,
+  className,
+  children,
+}: CountdownProps): React.ReactElement | null {
+  const result = useCountdown(to, { stopOnExpired });
+
+  if (!showWhenExpired && result.remainingMs === null) {
+    return null;
+  }
+
+  const display = result.timeString ?? "00d:00h:00m:00s";
+
+  if (children) {
+    return <>{children(result)}</>;
+  }
+
+  return (
+    <Text className={className} tabularNums suppressHydrationWarning>
+      {display}
+    </Text>
+  );
+}

package/src/components/primitives/countdown/index.ts

@@ -0,0 +1,2 @@
+export type { CountdownProps } from "./Countdown";
+export { Countdown } from "./Countdown";

package/src/components/primitives/framed-image/FramedImage.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { motion } from "motion/react";
+import { cn } from "@/lib";
+import { MorphDialog } from "../MorphDialog";
+
+export interface FramedImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+export function FramedImage({
+  src,
+  alt,
+  className,
+}: FramedImageProps): React.ReactElement {
+  return (
+    <MorphDialog
+      className={cn(
+        "relative h-full min-h-0 w-full min-w-0 flex-1 rounded-md bg-accent",
+        className,
+      )}
+      triggerClassName="h-full w-full"
+      popupClassName="flex items-center justify-center"
+      popupAriaLabel={alt ?? "Expanded image preview"}
+      contentClosesDialog
+      trigger={
+        <div className="absolute inset-0 flex items-center justify-center p-5">
+          {/* biome-ignore lint/performance/noImgElement: shared UI stays framework-agnostic. */}
+          <motion.img
+            src={src}
+            alt={alt ?? ""}
+            className="h-full w-full cursor-pointer object-contain"
+            whileHover={{ scale: 1.02 }}
+          />
+        </div>
+      }
+      content={
+        <div className="flex items-center justify-center">
+          {/* biome-ignore lint/performance/noImgElement: shared UI stays framework-agnostic. */}
+          <img
+            src={src}
+            alt={alt ?? ""}
+            className="block max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+          />
+        </div>
+      }
+    />
+  );
+}

package/src/components/primitives/framed-image/index.ts

@@ -0,0 +1 @@
+export { FramedImage, type FramedImageProps } from "./FramedImage";

package/src/components/primitives/index.ts

@@ -0,0 +1,42 @@
+export type { ButtonElement, ButtonProps } from "./Button";
+export { Button, buttonVariants } from "./Button";
+export * from "./countdown";
+export { Drawer, type DrawerProps } from "./Drawer";
+export { Feedback } from "./Feedback";
+export * from "./framed-image";
+export { MorphDialog, type MorphDialogProps } from "./MorphDialog";
+export type {
+  FormatPriceOptions,
+  PriceProps,
+  PriceSymbolProps,
+  PriceValueProps,
+} from "./Price";
+export { formatPrice, Price } from "./Price";
+export { PriceInput } from "./PriceInput";
+export type {
+  ReceiptDiscountProps,
+  ReceiptFeeProps,
+  ReceiptFooterProps,
+  ReceiptHeaderProps,
+  ReceiptItemProps,
+  ReceiptPriceProps,
+  ReceiptProps,
+  ReceiptSeparatorProps,
+  ReceiptSubtotalProps,
+  ReceiptTaxProps,
+  ReceiptTotalProps,
+} from "./Receipt";
+export { Receipt } from "./Receipt";
+export * from "./ranked-list";
+export type { ScaleTickContext, ScaleValue, SnapMode } from "./Scale";
+export { Scale, useScale } from "./Scale";
+export { Separator } from "./Separator";
+export type { SkeletonElement, SkeletonProps } from "./Skeleton";
+export { Skeleton } from "./Skeleton";
+export { CursorGrowIcon, SteppedInput } from "./SteppedInput";
+export type { TabsContextType } from "./Tabs";
+export { Tab, Tabs, TabsIndicator, TabsList, TabsPanel } from "./Tabs";
+export type { TagElement, TagProps } from "./Tag";
+export { Tag } from "./Tag";
+export type { TextElement, TextProps } from "./Text";
+export { Text, textVariants } from "./Text";

package/src/components/primitives/ranked-list/RankedList.tsx

@@ -0,0 +1,9 @@
+export {
+  RankedList,
+  Ranking,
+  type GroupItemContextValue,
+  type RankedListProps,
+  type RankingProps,
+  type SlotContext,
+  type SlotProps,
+} from "./Ranking";