@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/legacy-phone-input.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {cn} from "../../infrastructure/utilities/utils"
+import {useMemo, useId, useState, useEffect} from "react";
+import {countriesConstant, CountryInterface} from "../../infrastructure/data/countries";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./select";
+import {
+    InputGroup,
+    InputGroupInput,
+    InputGroupAddon
+} from "./input-group"
+import {Field, FieldDescription} from "./field";
+import {useElasticInteraction, chainHandlers} from "../../infrastructure/hooks/use-elastic-interaction"
+
+export type LegacyPhoneInputColoring = 'error' | 'success' | 'warning' | 'info' | 'disabled' | 'ghost';
+
+export interface LegacyPhoneInputProps extends Omit<React.ComponentProps<"div">, 'onChange'> {
+    label: string;
+    value?: string;
+    onChange?: (value: string, prefix: string, rawNumber: string) => void;
+    onCountryChange?: (country: CountryInterface) => void;
+    defaultCountryCode?: string;
+    input?: React.ComponentProps<"input">;
+    color?: LegacyPhoneInputColoring;
+    description?: React.ReactNode;
+}
+
+const coloringClassname: Record<LegacyPhoneInputColoring, string> = {
+    disabled: "bg-background/20 text-foreground-500 opacity-50",
+    info: "!bg-primary/20 !text-primary !border-primary",
+    success: "bg-green-500/20 text-green-500 !border-green-500",
+    warning: "bg-yellow-500/20 text-yellow-500 !border-yellow-500",
+    error: 'bg-red-800/20 text-red-800 !border-red-500',
+    ghost: 'bg-transparent text-foreground',
+}
+
+const LegacyPhoneInput = React.forwardRef<HTMLInputElement, LegacyPhoneInputProps>(
+    ({
+         label,
+        description,
+         className,
+         id,
+         input,
+         color,
+         value,
+         onChange,
+         onCountryChange,
+         defaultCountryCode: defaultCountryCodeProp,
+         ...props
+     }, ref) => {
+        const reactId = useId();
+        const _id = useMemo(() => id || label?.toLowerCase().replace(/ /g, '-') || reactId, [id, label, reactId]);
+
+        // Sort countries alphabetically
+        const sortedCountries = useMemo(() => {
+            return [...countriesConstant].sort((a, b) => a.name.localeCompare(b.name));
+        }, []);
+
+        // Detect user's country from browser locale, fallback to Côte d'Ivoire (+225)
+        const defaultCountryCode = useMemo(() => {
+            if (defaultCountryCodeProp) return defaultCountryCodeProp;
+
+            if (typeof window === 'undefined') return 'CI';
+
+            try {
+                const locale = navigator.language;
+                const parts = locale.split('-');
+                const region = parts[parts.length - 1].toUpperCase();
+                if (region.length === 2 && countriesConstant.some(c => c.code === region)) {
+                    return region;
+                }
+            } catch {}
+
+            return 'CI';
+        }, [defaultCountryCodeProp]);
+
+        // Find initial country
+        const initialCountry = useMemo(() => {
+            return sortedCountries.find(c => c.code === defaultCountryCode) || sortedCountries[0];
+        }, [defaultCountryCode, sortedCountries]);
+
+        const [selectedCountry, setSelectedCountry] = useState<CountryInterface>(initialCountry);
+        const [phoneNumber, setPhoneNumber] = useState("");
+
+        // Synchronize with external value
+        useEffect(() => {
+            if (value !== undefined && value !== `${selectedCountry.dialCode}${phoneNumber}`) {
+                // If value is provided externally, try to extract country and number
+                const matchingCountry = sortedCountries
+                    .filter(c => value.startsWith(c.dialCode))
+                    // Sort by dialCode length descending to match longest prefix first (e.g. +1 242 vs +1)
+                    .sort((a, b) => b.dialCode.length - a.dialCode.length)[0];
+
+                if (matchingCountry) {
+                    setSelectedCountry(matchingCountry);
+                    setPhoneNumber(value.slice(matchingCountry.dialCode.length).trim());
+                } else {
+                    // Fallback if no country matches prefix
+                    setPhoneNumber(value);
+                }
+            }
+        }, [value, sortedCountries, selectedCountry.dialCode, phoneNumber]);
+
+        const handleCountryChange = (countryCode: string) => {
+            const country = sortedCountries.find(c => c.code === countryCode);
+            if (country) {
+                setSelectedCountry(country);
+                onCountryChange?.(country);
+                onChange?.(`${country.dialCode}${phoneNumber}`, country.dialCode, phoneNumber);
+            }
+        };
+
+        const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            const newPhone = e.target.value.replace(/[^\d\s-()]/g, "");
+            setPhoneNumber(newPhone);
+            onChange?.(`${selectedCountry.dialCode}${newPhone}`, selectedCountry.dialCode, newPhone);
+        };
+
+        const {
+            type = "tel",
+            placeholder,
+            required,
+            className: inputClassName,
+            ...inputProps
+        } = input || {};
+
+        const elastic = useElasticInteraction({pressScale: 0.99, focusScale: 1.015});
+
+        return (
+            <Field>
+                <InputGroup
+                    {...props}
+                    suppressHydrationWarning
+                    className={cn(
+                        "h-auto flex-col items-stretch rounded-md bg-background px-4 py-2.5",
+                        coloringClassname[color || 'ghost'] || '',
+                        className
+                    )}
+                    onPointerDown={chainHandlers(elastic.onPointerDown, props.onPointerDown)}
+                    onPointerUp={chainHandlers(elastic.onPointerUp, props.onPointerUp)}
+                    onPointerCancel={chainHandlers(elastic.onPointerCancel, props.onPointerCancel)}
+                    onPointerLeave={chainHandlers(elastic.onPointerLeave, props.onPointerLeave)}
+                    onFocus={chainHandlers(elastic.onFocus, props.onFocus)}
+                    onBlur={chainHandlers(elastic.onBlur, props.onBlur)}
+                >
+                    <InputGroupAddon
+                        align="block-start"
+                        className="px-0 py-0 text-[10px] uppercase font-bold tracking-wider text-muted-foreground select-none"
+                    >
+                        {label}
+                        {required && <span className="text-destructive">*</span>}
+                    </InputGroupAddon>
+                    <div className="flex items-center gap-2 mt-0.5">
+                        <InputGroupAddon align="inline-start" className="px-0">
+                            <Select value={selectedCountry.dialCode} onValueChange={handleCountryChange}>
+                                <SelectTrigger
+                                    className="h-auto p-0 pr-1 border-none bg-transparent! shadow-none! focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 w-fit min-w-0 data-[placeholder]:text-foreground">
+                                    <SelectValue>
+                                        <div className="flex items-center gap-1.5 text-sm font-medium">
+                                            <span className="text-base">{selectedCountry.flag}</span>
+                                            <span className="text-muted-foreground">{selectedCountry.dialCode}</span>
+                                        </div>
+                                    </SelectValue>
+                                </SelectTrigger>
+                                <SelectContent className="max-h-80 w-64">
+                                    {sortedCountries.map((country) => (
+                                        <SelectItem key={`${country.code}-${country.dialCode}`} value={country.dialCode} className="cursor-pointer">
+                                            <div className="flex items-center gap-2 w-full">
+                                                <span className="text-base">{country.flag}</span>
+                                                <span className="truncate flex-1">{country.name}</span>
+                                                <span
+                                                    className="text-muted-foreground text-xs">{country.dialCode}</span>
+                                            </div>
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </InputGroupAddon>
+
+                        <div className="w-px h-4 bg-border/50 mx-1"/>
+
+                        <InputGroupInput
+                            ref={ref}
+                            id={_id}
+                            type={type}
+                            placeholder={placeholder}
+                            required={required}
+                            value={phoneNumber}
+                            onChange={handlePhoneChange}
+                            className={cn(
+                                "text-sm placeholder:text-muted-foreground/30",
+                                inputClassName,
+                            )}
+                            {...inputProps}
+                        />
+                    </div>
+                </InputGroup>
+                {description && <FieldDescription className="mt-1">{description}</FieldDescription>}
+            </Field>
+        )
+    }
+)
+
+LegacyPhoneInput.displayName = "LegacyPhoneInput"
+
+export {LegacyPhoneInput}

package/src/presentation/ui/legacy-select-input.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import {cn} from "../../infrastructure/utilities/utils"
+import {useMemo, useId} from "react";
+import {
+    InputGroup,
+    InputGroupAddon
+} from "./input-group"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./select"
+import type {LegacyInputColoring} from "./legacy-input"
+import {Field, FieldDescription} from "./field";
+import {useElasticInteraction, chainHandlers} from "../../infrastructure/hooks/use-elastic-interaction"
+
+export interface LegacySelectInputProps extends React.ComponentProps<"div"> {
+    label?: string;
+    icon?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    options: { value: string; label: string }[];
+    color?: LegacyInputColoring;
+    required?: boolean;
+    description?: React.ReactNode;
+}
+
+const coloringClassname: Record<LegacyInputColoring, string> = {
+    disabled: "bg-background/20 text-foreground-500 opacity-50",
+    info: "!bg-primary/20 !text-primary !border-primary",
+    success: "bg-green-500/20 text-green-500 !border-green-500",
+    warning: "bg-yellow-500/20 text-yellow-500 !border-yellow-500",
+    error: 'bg-red-800/20 text-red-800 !border-red-500',
+    ghost: 'bg-transparent text-foreground',
+}
+
+const LegacySelectInput = React.forwardRef<HTMLDivElement, LegacySelectInputProps>(
+    ({
+         label,
+         description,
+         icon,
+         className,
+         id,
+         color,
+         placeholder,
+         value,
+         onValueChange,
+         options,
+         required,
+         ...props
+     }, ref) => {
+        const reactId = useId();
+        const _id = useMemo(() => id || label?.toLowerCase().replace(/ /g, '-') || reactId, [id, label, reactId]);
+
+        const elastic = useElasticInteraction({pressScale: 0.99, focusScale: 1.015});
+
+        return (
+            <Field>
+                <InputGroup
+                    {...props}
+                    suppressHydrationWarning
+                    className={cn(
+                        "h-auto flex-col items-stretch rounded-md bg-background px-4 py-2.5",
+                        coloringClassname[color || 'ghost'] || '',
+                        className
+                    )}
+                    onPointerDown={chainHandlers(elastic.onPointerDown, props.onPointerDown)}
+                    onPointerUp={chainHandlers(elastic.onPointerUp, props.onPointerUp)}
+                    onPointerCancel={chainHandlers(elastic.onPointerCancel, props.onPointerCancel)}
+                    onPointerLeave={chainHandlers(elastic.onPointerLeave, props.onPointerLeave)}
+                    onFocus={chainHandlers(elastic.onFocus, props.onFocus)}
+                    onBlur={chainHandlers(elastic.onBlur, props.onBlur)}
+                >
+                    <InputGroupAddon
+                        align="block-start"
+                        className="px-0 py-0 text-[10px] uppercase font-bold tracking-wider text-muted-foreground select-none"
+                    >
+                        {label}
+                        {required && <span className="text-destructive">*</span>}
+                    </InputGroupAddon>
+                    <div className="flex items-center justify-between gap-2 mt-0.5">
+                        <Select value={value || ''} onValueChange={onValueChange}>
+                            <SelectTrigger
+                                className="h-auto p-0 border-none bg-transparent! shadow-none! focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 w-full min-w-0 data-[placeholder]:text-muted-foreground/30 [&_[data-slot=select-value]]:text-sm [&_[data-slot=select-value]]:font-normal">
+                                <SelectValue placeholder={placeholder}/>
+                            </SelectTrigger>
+                            <SelectContent>
+                                {options.map((opt) => (
+                                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        {icon && <InputGroupAddon
+                            align="inline-end"
+                            className="text-muted-foreground select-none px-0"
+                        >
+                            {icon}
+                        </InputGroupAddon>}
+                    </div>
+                </InputGroup>
+                {description && <FieldDescription className="mt-1">{description}</FieldDescription>}
+            </Field>
+        )
+    }
+)
+
+LegacySelectInput.displayName = "LegacySelectInput"
+
+export {LegacySelectInput}

package/src/presentation/ui/legacy-text-area.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+import {cn} from "../../infrastructure/utilities/utils"
+import {useMemo, useId} from "react";
+import {
+    InputGroup,
+    InputGroupTextarea,
+    InputGroupAddon
+} from "./input-group"
+import {FieldDescription, Field} from "./field"
+import {useElasticInteraction, chainHandlers} from "../../infrastructure/hooks/use-elastic-interaction"
+
+export type LegacyTextAreaColoring = 'error' | 'success' | 'warning' | 'info' | 'disabled' | 'ghost';
+
+export interface LegacyTextAreaProps extends React.ComponentProps<"textarea"> {
+    label?: string;
+    icon?: React.ReactNode;
+    color?: LegacyTextAreaColoring;
+    description?: React.ReactNode;
+    textarea?: React.ComponentProps<"textarea">;
+}
+
+const coloringClassname: Record<LegacyTextAreaColoring, string> = {
+    disabled: "bg-background/20 text-foreground-500 opacity-50",
+    info: "!bg-primary/20 !text-primary !border-primary",
+    success: "bg-green-500/20 text-green-500 !border-green-500",
+    warning: "bg-yellow-500/20 text-yellow-500 !border-yellow-500",
+    error: 'bg-red-800/20 text-red-800 !border-red-500',
+    ghost: 'bg-transparent text-foreground',
+}
+
+
+const LegacyTextArea = React.forwardRef<HTMLTextAreaElement, LegacyTextAreaProps>(
+    ({label, icon, className, color, description, textarea, ...textareaProps}, ref) => {
+        const reactId = useId();
+        const id = (textareaProps.id || textarea?.id) || undefined;
+        const _id = useMemo(() => id || label?.toLowerCase().replace(/ /g, '-') || reactId, [id, label, reactId]);
+
+        const inputProps = {
+            ...(textarea || {}),
+            ...textareaProps,
+        };
+
+        const {
+            placeholder,
+            required,
+            value,
+            onChange,
+            rows,
+            className: textareaClassName,
+            ...restProps
+        } = inputProps;
+
+        const elastic = useElasticInteraction({pressScale: 0.99, focusScale: 1.015});
+
+        return (
+            <Field>
+                <InputGroup
+                    className={cn(
+                        "h-auto flex-col items-stretch rounded-md bg-background px-4 py-2.5",
+                        coloringClassname[color || 'ghost'] || '',
+                        className
+                    )}
+                    suppressHydrationWarning
+                    onPointerDown={chainHandlers(elastic.onPointerDown)}
+                    onPointerUp={chainHandlers(elastic.onPointerUp)}
+                    onPointerCancel={chainHandlers(elastic.onPointerCancel)}
+                    onPointerLeave={chainHandlers(elastic.onPointerLeave)}
+                    onFocus={chainHandlers(elastic.onFocus)}
+                    onBlur={chainHandlers(elastic.onBlur)}
+                >
+                    <InputGroupAddon
+                        align="block-start"
+                        className="px-0 py-0 text-[10px] uppercase font-bold tracking-wider text-muted-foreground select-none"
+                    >
+                        {label}
+                        {required && <span className="text-destructive">*</span>}
+                    </InputGroupAddon>
+                    <div className="flex items-start justify-between gap-2 mt-0.5">
+                        <InputGroupTextarea
+                            ref={ref}
+                            id={_id}
+                            placeholder={placeholder}
+                            required={required}
+                            value={value}
+                            onChange={onChange}
+                            rows={rows}
+                            className={cn(
+                                "text-sm placeholder:text-muted-foreground/30 ",
+                                textareaClassName,
+                            )}
+                            {...restProps}
+                        />
+                        {icon && <InputGroupAddon
+                            align="inline-end"
+                            className="pt-2.5 text-muted-foreground select-none px-0"
+                        >
+                            {icon}
+                        </InputGroupAddon>}
+                    </div>
+                </InputGroup>
+                {description && <FieldDescription className="mt-1">{description}</FieldDescription>}
+            </Field>
+        )
+    }
+)
+
+LegacyTextArea.displayName = "LegacyTextArea"
+
+export {LegacyTextArea}

package/src/presentation/ui/list-items.tsx

@@ -0,0 +1,59 @@
+import React, {Fragment, ReactNode} from "react";
+import {
+    ItemGroup,
+    Item,
+    ItemHeader,
+    ItemTitle,
+    ItemDescription,
+    ItemContent,
+    ItemFooter, ItemSeparator
+} from "./item";
+
+export type ListItemType = Record<string, ReactNode>
+
+export interface ListItemsProps extends React.ComponentProps<"div"> {
+    items: ListItemType;
+    header?: ReactNode;
+    footer?: ReactNode;
+}
+
+export interface ListItemProps extends React.ComponentProps<"div"> {
+    label: string;
+    children: ReactNode
+}
+
+export function ListItems({items, header, footer, ...props}: ListItemsProps) {
+    const itemsArray = Object.entries(items)
+
+    return (
+        <ItemGroup {...props}>
+            {header && (<ItemHeader className={"px-3 text-muted-foreground"}>
+                {header}
+            </ItemHeader>)}
+            <ItemContent>
+                <div className="">
+                    {itemsArray.map(([label, value], index) => {
+                        return (
+                            <Fragment key={`list-items-${index}`}>
+                                <ListItem label={label}>{value}</ListItem>
+                                {index < itemsArray.length - 1 && (<ItemSeparator/>)}
+                            </Fragment>
+                        )
+                    })}
+                </div>
+            </ItemContent>
+            {footer && (<ItemFooter className={"px-3 text-muted-foreground"}>
+                {footer}
+            </ItemFooter>)}
+        </ItemGroup>
+    )
+}
+
+export function ListItem({label, children, ...props}: ListItemProps) {
+    return (
+        <Item {...props} className="py-1!">
+            <ItemContent  className="py-0!">{label}</ItemContent>
+            <ItemDescription  className="py-0!">{children}</ItemDescription>
+        </Item>
+    )
+}

package/src/presentation/ui/marker.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+const markerVariants = cva(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator:
+          "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2",
+      },
+    },
+  }
+)
+
+function Marker({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof markerVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="marker"
+      data-variant={variant}
+      className={cn(markerVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-icon"
+      aria-hidden="true"
+      className={cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-content"
+      className={cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Marker, MarkerIcon, MarkerContent, markerVariants }

package/src/presentation/ui/media-player/index.tsx

@@ -0,0 +1,12 @@
+export {MediaPlayer, type MediaPlayerProps} from "./media-player";
+export {usePlayer, MediaPlayerProvider, type MediaPlayerVariant} from "./media-player.context";
+export {useMediaPlayer, DEFAULT_PLAYBACK_RATES, VOICE_NOTE_PLAYBACK_RATES, type MediaPlayerController, type UseMediaPlayerOptions} from "./use-media-player.hook";
+export {
+    PlayerScrubber,
+    PlayerVolumeControl,
+    ButtonGhost,
+    LiveBadge,
+    TimeDisplay,
+    formatMediaTime,
+} from "./player-controls";
+export * from "./players";

package/src/presentation/ui/media-player/media-player.context.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react";
+
+import type {MediaPlayerController} from "./use-media-player.hook";
+
+export type MediaPlayerVariant = "voice-note" | "audio" | "video";
+
+export interface MediaPlayerContextValue {
+    /** Contrôleur issu de useMediaPlayer (état + actions). */
+    controller: MediaPlayerController;
+    /** Apparence courante du lecteur. */
+    variant: MediaPlayerVariant;
+    /** Classe utilitaire d'accent appliquée aux remplissages et poignées. */
+    accentClassName?: string;
+    /** Libellé accessible (titre du média). */
+    label?: string;
+}
+
+const MediaPlayerContext = React.createContext<MediaPlayerContextValue | null>(null);
+
+/**
+ Accès au contrôleur du lecteur courant — permet de composer ses propres
+ commandes par-dessus `<MediaPlayer>` via la prop children.
+ */
+export function usePlayer(): MediaPlayerContextValue {
+    const context = React.useContext(MediaPlayerContext);
+    if (!context) {
+        throw new Error("usePlayer doit être utilisé à l'intérieur de <MediaPlayer>");
+    }
+    return context;
+}
+
+export function MediaPlayerProvider({value, children}: {value: MediaPlayerContextValue; children: React.ReactNode}) {
+    return <MediaPlayerContext.Provider value={value}>{children}</MediaPlayerContext.Provider>;
+}