@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/slide-to-confirm.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {ChevronsRightIcon} from "lucide-react";
+import {cn} from "../../infrastructure/utilities/utils";
+import {Activity} from "../components/activity";
+
+interface SlideToConfirmProps {
+    label: string;
+    onConfirm: () => void | Promise<void>;
+    disabled?: boolean;
+    isLoading?: boolean;
+    className?: string;
+}
+
+export function SlideToConfirm({label, onConfirm, disabled, isLoading, className}: SlideToConfirmProps) {
+    const trackRef = useRef<HTMLDivElement>(null);
+    const knobRef = useRef<HTMLDivElement>(null);
+    const draggingRef = useRef(false);
+    const startXRef = useRef(0);
+    const maxRef = useRef(0);
+    const [dragX, setDragX] = useState(0);
+    const [dragging, setDragging] = useState(false);
+
+    const locked = !!disabled || !!isLoading;
+
+    useEffect(() => {
+        if (!isLoading && !draggingRef.current) {
+            setDragX(0);
+        }
+    }, [isLoading]);
+
+    const trigger = useCallback(() => {
+        if (locked) return;
+        const max = trackRef.current && knobRef.current
+            ? Math.max(0, trackRef.current.clientWidth - knobRef.current.offsetWidth - 8)
+            : 0;
+        setDragX(max);
+        try {
+            void Promise.resolve(onConfirm());
+        } catch {
+            // ignore
+        }
+    }, [locked, onConfirm]);
+
+    const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (locked || !trackRef.current || !knobRef.current) return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        draggingRef.current = true;
+        setDragging(true);
+        startXRef.current = e.clientX;
+        maxRef.current = Math.max(0, trackRef.current.clientWidth - knobRef.current.offsetWidth - 8);
+        setDragX((prev) => Math.min(prev, maxRef.current));
+    };
+
+    const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!draggingRef.current) return;
+        const dx = Math.min(Math.max(e.clientX - startXRef.current, 0), maxRef.current);
+        setDragX(dx);
+    };
+
+    const handlePointerUp = () => {
+        if (!draggingRef.current) return;
+        draggingRef.current = false;
+        setDragging(false);
+        const progress = maxRef.current > 0 ? dragX / maxRef.current : 0;
+        if (progress >= 0.85) {
+            const max = maxRef.current;
+            setDragX(max);
+            try {
+                void Promise.resolve(onConfirm());
+            } catch {
+                // ignore
+            }
+            if (!isLoading) setDragX(0);
+        } else {
+            setDragX(0);
+        }
+    };
+
+    const progress = maxRef.current > 0 ? Math.min(dragX / maxRef.current, 1) : (dragX > 0 ? 1 : 0);
+
+    return (
+        <div
+            ref={trackRef}
+            role="button"
+            tabIndex={locked ? -1 : 0}
+            aria-label={label}
+            aria-disabled={locked}
+            className={cn(
+                "relative h-12 w-full rounded-xl bg-primary text-primary-foreground overflow-hidden select-none touch-none outline-none",
+                "focus-visible:ring-3 focus-visible:ring-ring/50",
+                locked ? "opacity-60" : "cursor-grab active:cursor-grabbing",
+                className
+            )}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerUp}
+            onKeyDown={(e) => {
+                if ((e.key === 'Enter' || e.key === ' ') && !locked) {
+                    e.preventDefault();
+                    trigger();
+                }
+            }}
+        >
+            <div
+                className="absolute inset-y-0 left-0 bg-primary-foreground/20"
+                style={{width: `calc(${progress * 100}% )`}}
+            />
+            <span
+                className="absolute inset-0 flex items-center justify-center px-10 text-sm font-bold tracking-wide pointer-events-none transition-opacity duration-150"
+                style={{opacity: isLoading ? 1 : Math.max(0, 1 - progress * 1.6)}}
+            >
+                {isLoading ? <Activity.Loader size={18}/> : label}
+            </span>
+            <div
+                ref={knobRef}
+                className={cn(
+                    "absolute top-1 left-1 bottom-1 aspect-square h-10 rounded-lg bg-primary-foreground text-primary grid place-items-center shadow-sm",
+                    !dragging && "transition-transform duration-200 ease-out"
+                )}
+                style={{transform: `translateX(${dragX}px)`}}
+            >
+                <ChevronsRightIcon className="size-5"/>
+            </div>
+        </div>
+    );
+}

package/src/presentation/ui/slider.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/presentation/ui/sonner.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react"
+import { Activity } from "../components/activity"
+import {useThemePreferColorSchemeStore} from "../theme/theme.store";
+import {PreferColorSchemeEnum} from "../theme/theme.enum";
+
+const Toaster = ({ position = "top-center", ...props }: ToasterProps) => {
+  const { colorScheme } = useThemePreferColorSchemeStore()
+  const theme = colorScheme ?? PreferColorSchemeEnum.Light
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      position={position}
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Activity.Loader size={16} />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+          error: "!bg-destructive !text-destructive-foreground !border-destructive",
+          success: "!bg-emerald-500 !text-white",
+          warning: "!bg-amber-500 !text-white",
+          info: "!bg-sky-500 !text-white",
+          loading: "!bg-muted !text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/presentation/ui/switch.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/presentation/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/presentation/ui/tabs.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[4px] text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-5! py-4! text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/presentation/ui/text-gradient.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+import { cn } from "../../infrastructure/utilities/utils"
+
+type CSSVariableStyle = React.CSSProperties & {
+  "--spread"?: string
+}
+
+interface TextGradientProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode
+  /**
+   * The spread distance for the gradient effect in pixels
+   * @default 22
+   */
+  spread?: number
+  /**
+   * The background color for the gradient highlight
+   * Can be a CSS variable or any valid CSS color
+   * @default "hsl(var(--background))"
+   */
+  highlightColor?: string
+  /**
+   * The base text color (shows through the gradient)
+   * Can be a CSS variable or any valid CSS color
+   * @default "hsl(var(--muted-foreground))"
+   */
+  baseColor?: string
+  /**
+   * Animation duration in seconds
+   * @default 3
+   */
+  duration?: number
+}
+
+const TextGradient = React.forwardRef<HTMLSpanElement, TextGradientProps>(
+  (
+    {
+      children,
+      className,
+      spread = 22,
+      highlightColor = "var(--background)",
+      baseColor = "var(--muted-foreground)",
+      duration = 2,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const inlineStyle: CSSVariableStyle = {
+      "--spread": `${spread}px`,
+      ...style,
+      backgroundImage: `linear-gradient(90deg, transparent calc(50% - var(--spread)), ${highlightColor} 50%, transparent calc(50% + var(--spread))), linear-gradient(${baseColor}, ${baseColor})`,
+      backgroundSize: "250% 100%, 100% 100%",
+      animation: `text-gradient-shift ${duration}s linear infinite`,
+    }
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "relative inline-block bg-clip-text text-transparent",
+          "[background-repeat:no-repeat,padding-box]",
+          className,
+        )}
+        style={inlineStyle}
+        {...props}
+      >
+        <style>
+          {`
+            @keyframes text-gradient-shift {
+              from { background-position: 100% center; }
+              to { background-position: 0% center; }
+            }
+          `}
+        </style>
+        {children}
+      </span>
+    )
+  },
+)
+
+TextGradient.displayName = "TextGradient"
+
+export { TextGradient }
+export default TextGradient

package/src/presentation/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }