@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/kpi-card.tsx

@@ -0,0 +1,203 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+export type KpiCardVariant =
+    | "default"
+    | "primary"
+    | "secondary"
+    | "outline"
+    | "error"
+    | "warning"
+    | "success"
+    | "info";
+
+interface KpiVariantToken {
+    color: string
+    bg: string
+    fg: string
+    chip: string
+}
+
+const variantTokens: Record<KpiCardVariant, KpiVariantToken> = {
+    default: {color: "var(--muted-foreground)", bg: "var(--card)", fg: "var(--foreground)", chip: "text-muted-foreground bg-muted"},
+    primary: {color: "var(--primary)", bg: "var(--primary)", fg: "var(--primary-foreground)", chip: "text-primary bg-primary/10"},
+    secondary: {color: "var(--secondary)", bg: "var(--secondary)", fg: "var(--secondary-foreground)", chip: "text-secondary-foreground bg-secondary/20"},
+    outline: {color: "var(--border)", bg: "var(--card)", fg: "var(--foreground)", chip: "text-muted-foreground bg-muted"},
+    error: {color: "var(--destructive)", bg: "var(--destructive)", fg: "var(--destructive-foreground)", chip: "text-destructive bg-destructive/10"},
+    warning: {color: "var(--warning)", bg: "var(--warning)", fg: "var(--warning-foreground)", chip: "text-warning bg-warning/10"},
+    success: {color: "var(--success)", bg: "var(--success)", fg: "var(--success-foreground)", chip: "text-success bg-success/10"},
+    info: {color: "var(--info)", bg: "var(--info)", fg: "var(--info-foreground)", chip: "text-info bg-info/10"},
+}
+
+interface KpiCardContextValue {
+    variant: KpiCardVariant
+    prominent: boolean
+    token: KpiVariantToken
+}
+
+const KpiCardContext = React.createContext<KpiCardContextValue | null>(null)
+
+function useKpiCard(): KpiCardContextValue {
+    const ctx = React.useContext(KpiCardContext)
+    if (!ctx) throw new Error("KpiCard.* components must be used within <KpiCard>.")
+    return ctx
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard                                                                    */
+/* -------------------------------------------------------------------------- */
+
+interface KpiCardProps extends React.ComponentProps<"div"> {
+    variant?: KpiCardVariant
+    prominent?: boolean
+}
+
+function KpiCardComponent({variant = "default", prominent = false, className, ...props}: KpiCardProps) {
+    const token = variantTokens[variant]
+
+    return (
+        <KpiCardContext.Provider value={{variant, prominent, token}}>
+            <div
+                data-slot="kpi-card"
+                data-variant={variant}
+                data-prominent={prominent || undefined}
+                className={cn(
+                    "relative flex flex-col gap-2.5 overflow-hidden rounded-2xl border border-border bg-card p-4 pl-5 transition-colors",
+                    prominent && "border-transparent shadow-md",
+                    className
+                )}
+                style={prominent ? {background: token.bg, color: token.fg} : undefined}
+                {...props}
+            >
+                {/*<span*/}
+                {/*    aria-hidden*/}
+                {/*    className="absolute inset-y-0 left-0 w-1"*/}
+                {/*    style={{background: prominent ? `color-mix(in oklab, ${token.fg} 30%, transparent)` : token.color}}*/}
+                {/*/>*/}
+                {props.children}
+            </div>
+        </KpiCardContext.Provider>
+    )
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard.Header                                                             */
+/* -------------------------------------------------------------------------- */
+
+function KpiCardHeader({className, ...props}: React.ComponentProps<"div">) {
+    const {prominent} = useKpiCard()
+
+    return (
+        <div
+            data-slot="kpi-card-header"
+            className={cn("flex items-center gap-2", !prominent && "text-muted-foreground", className)}
+            {...props}
+        />
+    )
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard.Icon                                                               */
+/* -------------------------------------------------------------------------- */
+
+function KpiCardIcon({asChild = false, className, ...props}: React.ComponentProps<"span"> & {asChild?: boolean}) {
+    const {prominent, token} = useKpiCard()
+    const Comp = asChild ? Slot.Root : "span"
+
+    return (
+        <Comp
+            data-slot="kpi-card-icon"
+            className={cn(
+                "flex size-7 shrink-0 items-center justify-center rounded-lg",
+                !prominent && token.chip,
+                className
+            )}
+            style={prominent ? {background: `color-mix(in oklab, ${token.fg} 20%, transparent)`, color: token.fg} : undefined}
+            {...props}
+        />
+    )
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard.Title                                                              */
+/* -------------------------------------------------------------------------- */
+
+function KpiCardTitle({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="kpi-card-title"
+            className={cn("min-w-0 flex-1 truncate text-sm font-medium", className)}
+            {...props}
+        />
+    )
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard.Value                                                              */
+/* -------------------------------------------------------------------------- */
+
+function KpiCardValue({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="kpi-card-value"
+            className={cn("text-3xl font-bold leading-tight tabular-nums", className)}
+            {...props}
+        />
+    )
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard.Badge                                                              */
+/* -------------------------------------------------------------------------- */
+
+function KpiCardBadge({className, ...props}: React.ComponentProps<"span">) {
+    const {prominent, token} = useKpiCard()
+
+    return (
+        <span
+            data-slot="kpi-card-badge"
+            className={cn("inline-flex w-fit items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium", className)}
+            style={prominent
+                ? {background: `color-mix(in oklab, ${token.fg} 15%, transparent)`}
+                : {background: `color-mix(in oklab, ${token.color} 10%, transparent)`, color: token.color}}
+            {...props}
+        />
+    )
+}
+
+/* -------------------------------------------------------------------------- */
+/* KpiCard.Content                                                            */
+/* -------------------------------------------------------------------------- */
+
+function KpiCardContent({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="kpi-card-content"
+            className={cn("flex flex-col gap-1.5", className)}
+            {...props}
+        />
+    )
+}
+
+const KpiCard = Object.assign(KpiCardComponent, {
+    Header: KpiCardHeader,
+    Icon: KpiCardIcon,
+    Title: KpiCardTitle,
+    Value: KpiCardValue,
+    Badge: KpiCardBadge,
+    Content: KpiCardContent,
+})
+
+export {
+    KpiCard,
+    KpiCardHeader,
+    KpiCardIcon,
+    KpiCardTitle,
+    KpiCardValue,
+    KpiCardBadge,
+    KpiCardContent,
+}
+
+export type {KpiCardProps}

package/src/presentation/ui/label-selector.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function LabelSelectorRoot({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="label-selector-root"
+      className={cn(
+        "flex items-center justify-between gap-4 py-3 bg-muted dark:bg-muted/60 p-3 pl-5 rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+interface LabelSelectorLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string
+}
+
+function LabelSelectorLabel({ className, value, ...props }: LabelSelectorLabelProps) {
+  return (
+    <div data-slot="label-selector-label" className={cn("text-base font-normal leading-none", className)} {...props}>
+      {value}
+    </div>
+  )
+}
+
+function LabelSelectorContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div data-slot="label-selector-content" className={cn("flex items-center gap-2", className)} {...props} />
+}
+
+const labelSelectorItemVariants = cva(
+  "group relative shrink-0 cursor-pointer outline-none transition-all flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-2 border-muted-foreground/20 bg-background hover:border-muted-foreground/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        outline:
+          "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:text-foreground",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground",
+        solid:
+          "bg-muted text-muted-foreground hover:bg-muted/80 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      },
+      size: {
+        sm: "min-w-[2rem] h-8 px-3 text-xs",
+        default: "min-w-[2.5rem] h-10 px-4 text-sm",
+        lg: "min-w-[3rem] h-12 px-5 text-base",
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: "lg",
+    },
+  },
+)
+
+interface LabelSelectorItemProps
+  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof labelSelectorItemVariants> {
+  value: string
+  label?: string
+}
+
+function LabelSelectorItem({ className, value, label, variant, size, rounded, ...props }: LabelSelectorItemProps) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="label-selector-item"
+      value={value}
+      className={cn(labelSelectorItemVariants({ variant, size, rounded, className }))}
+      {...props}
+    >
+      <span className="font-medium">{label || value}</span>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export const LabelSelector = {
+  Root: LabelSelectorRoot,
+  Label: LabelSelectorLabel,
+  Content: LabelSelectorContent,
+  Item: LabelSelectorItem,
+}
+
+export { labelSelectorItemVariants }

package/src/presentation/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "../../infrastructure/utilities/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/presentation/ui/legacy-birth-date-input.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import {useMemo} from "react";
+import {LegacyInput, type LegacyInputProps} from "./legacy-input";
+import {CalendarIcon} from "lucide-react";
+
+export interface LegacyBirthDateInputProps extends Omit<LegacyInputProps, 'input'> {
+    minAge?: number;
+    input?: Omit<React.ComponentProps<"input">, 'type' | 'max'>;
+}
+
+const LegacyBirthDateInput = React.forwardRef<HTMLInputElement, LegacyBirthDateInputProps>(
+    ({minAge = 18, input, ...props}, ref) => {
+        const maxDate = useMemo(() => {
+            const date = new Date();
+            date.setFullYear(date.getFullYear() - minAge);
+            return date.toISOString().split('T')[0];
+        }, [minAge]);
+
+        props = props || {};
+        props.id = props.id || 'birthDate';
+        props.label = props.label || 'Date de naissance';
+        props.description = props.description || `Utilisée pour vérifier l'éligibilité et la sécurité du compte. L'âge minimum requit de ${minAge} an${minAge > 1 ? 's' : ''}`;
+        props.icon = props.icon || (<CalendarIcon className="size-4 text-muted-foreground/60"/>);
+
+        return (
+            <LegacyInput
+                ref={ref}
+                input={{
+                    ...input,
+                    type: "date",
+                    max: maxDate,
+                }}
+                {...props}
+            />
+        )
+    }
+);
+
+LegacyBirthDateInput.displayName = "LegacyBirthDateInput";
+
+export {LegacyBirthDateInput};

package/src/presentation/ui/legacy-color-picker/index.tsx

@@ -0,0 +1,42 @@
+export {
+  LegacyColorPicker,
+  type LegacyColorPickerProps,
+} from "./legacy-color-picker"
+export {
+  colorPickerTriggerVariants,
+  LegacyColorPickerTrigger,
+  LegacyColorPickerOpenButton,
+  type LegacyColorPickerTriggerProps,
+  type LegacyColorPickerOpenButtonProps,
+} from "./legacy-color-picker.trigger"
+export { LegacyColorPickerContent } from "./legacy-color-picker.content"
+export {
+  LegacyColorPickerSwatch,
+  LegacyColorPickerSwatchGroup,
+  type LegacyColorPickerSwatchProps,
+} from "./legacy-color-picker.swatches"
+export {
+  LegacyColorPickerHexInput,
+  type LegacyColorPickerHexInputProps,
+} from "./legacy-color-picker.hex-input"
+export {
+  LegacyColorPickerProvider,
+  useLegacyColorPickerContext,
+  type LegacyColorPickerContextValue,
+} from "./legacy-color-picker.context"
+export { LegacyColorPickerPicker } from "./legacy-color-picker.picker"
+export { LegacyColorPickerRecent } from "./legacy-color-picker.recent"
+export { LegacyColorPickerQuickList } from "./legacy-color-picker.quick-list"
+export { DEFAULT_COLOR_PICKER_PRESETS } from "./legacy-color-picker.presets"
+export {
+  DEFAULT_COLOR,
+  normalizeHex,
+  hexToRgba,
+  rgbaToHex,
+  rgbaToCss,
+  rgbToHsv,
+  hsvToRgb,
+  type RgbaColor,
+  type HsvColor,
+} from "./legacy-color-picker.utils"
+export type { LegacyColorPickerSize } from "./legacy-color-picker.types"

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.content.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import { PopoverContent } from "../popover"
+import { LegacyColorPickerHexInput } from "./legacy-color-picker.hex-input"
+import { LegacyColorPickerPicker } from "./legacy-color-picker.picker"
+import { LegacyColorPickerRecent } from "./legacy-color-picker.recent"
+import { LegacyColorPickerSwatchGroup } from "./legacy-color-picker.swatches"
+
+export function LegacyColorPickerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverContent>) {
+  return (
+    <PopoverContent
+      data-slot="color-picker-content"
+      align="center"
+      sideOffset={6}
+      className={cn("w-fit min-w-56 gap-3 p-3", className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <LegacyColorPickerPicker />
+          <div className="h-px bg-border" />
+          <LegacyColorPickerSwatchGroup />
+          <LegacyColorPickerRecent />
+          <div className="h-px bg-border" />
+          <LegacyColorPickerHexInput />
+        </>
+      )}
+    </PopoverContent>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.context.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+
+import type { LegacyColorPickerSize } from "./legacy-color-picker.types"
+
+export interface LegacyColorPickerContextValue {
+  value: string
+  onValueChange: (value: string) => void
+  onCommit: (value: string) => void
+  size: LegacyColorPickerSize
+  disabled: boolean
+  presets: string[]
+  recentColors: string[]
+  quickListCount: number
+}
+
+const LegacyColorPickerContext = React.createContext<LegacyColorPickerContextValue | null>(null)
+
+export function useLegacyColorPickerContext(): LegacyColorPickerContextValue {
+  const context = React.useContext(LegacyColorPickerContext)
+  if (!context) {
+    throw new Error(
+      "Les composants LegacyColorPicker doivent être utilisés dans un <LegacyColorPicker>."
+    )
+  }
+  return context
+}
+
+export function LegacyColorPickerProvider({
+  value,
+  children,
+}: {
+  value: LegacyColorPickerContextValue
+  children: React.ReactNode
+}) {
+  return (
+    <LegacyColorPickerContext.Provider value={value}>
+      {children}
+    </LegacyColorPickerContext.Provider>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.hex-input.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group"
+import { useLegacyColorPickerContext } from "./legacy-color-picker.context"
+import { normalizeHex } from "./legacy-color-picker.utils"
+
+export interface LegacyColorPickerHexInputProps extends React.ComponentProps<"div"> {
+  disabled?: boolean
+  showPreview?: boolean
+}
+
+export function LegacyColorPickerHexInput({
+  className,
+  disabled = false,
+  showPreview = true,
+  ...props
+}: LegacyColorPickerHexInputProps) {
+  const { value, onValueChange, onCommit, disabled: contextDisabled } = useLegacyColorPickerContext()
+  const currentHex = value.replace(/^#/, "")
+  const [raw, setRaw] = React.useState(currentHex)
+  const [focused, setFocused] = React.useState(false)
+  const resolvedDisabled = disabled || contextDisabled
+
+  React.useEffect(() => {
+    if (!focused) {
+      setRaw(value.replace(/^#/, ""))
+    }
+  }, [value, focused])
+
+  const normalized = normalizeHex(raw)
+  const previewColor = normalized ?? value
+  const isInvalid = raw.trim().length > 0 && normalized === null
+
+  return (
+    <div
+      data-slot="color-picker-hex-input"
+      className={cn("flex items-center gap-2.5", className)}
+      {...props}
+    >
+      <InputGroup className="flex-1">
+        <InputGroupAddon align="inline-start">#</InputGroupAddon>
+        <InputGroupInput
+          data-slot="color-picker-hex-input-field"
+          value={raw}
+          onChange={(event) => {
+            const next = event.target.value.toUpperCase().replace(/[^0-9A-Fa-f]/g, "").slice(0, 8)
+            setRaw(next)
+            const normalizedNext = normalizeHex(next)
+            if (normalizedNext) {
+              onValueChange(normalizedNext)
+            }
+          }}
+          onFocus={(event) => {
+            setFocused(true)
+            event.currentTarget.select()
+          }}
+          onBlur={() => {
+            setFocused(false)
+            const normalized = normalizeHex(raw)
+            if (normalized) {
+              onCommit(normalized)
+            } else {
+              setRaw(value.replace(/^#/, ""))
+            }
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.currentTarget.blur()
+            }
+          }}
+          placeholder="RRGGBBAA"
+          maxLength={8}
+          spellCheck={false}
+          autoCapitalize="characters"
+          aria-label="Code hexadécimal de la couleur"
+          aria-invalid={isInvalid || undefined}
+          disabled={resolvedDisabled}
+          className="font-mono text-sm tracking-wide"
+        />
+      </InputGroup>
+      {showPreview && (
+        <span
+          data-slot="color-picker-hex-input-preview"
+          aria-hidden
+          className={cn(
+            "size-6 shrink-0 rounded-md ring-1 ring-inset ring-foreground/10 transition-opacity",
+            isInvalid && "opacity-40"
+          )}
+          style={{ backgroundColor: previewColor }}
+        />
+      )}
+    </div>
+  )
+}