@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/reui/timeline.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import {
+  createContext,
+  HTMLAttributes,
+  TimeHTMLAttributes,
+  useCallback,
+  useContext,
+  useState,
+} from "react"
+import { Slot } from "radix-ui"
+import { Motion } from "../../infrastructure/library/motion"
+import { cn } from "../../infrastructure/utilities/utils"
+import { elasticEnter } from "../../infrastructure/library/motion-utils"
+
+// Types
+type TimelineContextValue = {
+  activeStep: number
+  setActiveStep: (step: number) => void
+}
+
+// Context
+const TimelineContext = createContext<TimelineContextValue | undefined>(
+  undefined
+)
+
+const useTimeline = () => {
+  const context = useContext(TimelineContext)
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline")
+  }
+  return context
+}
+
+// Components
+interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number
+  value?: number
+  onValueChange?: (value: number) => void
+  orientation?: "horizontal" | "vertical"
+}
+
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  children,
+  ...props
+}: TimelineProps) {
+  const [activeStep, setInternalStep] = useState(defaultValue)
+
+  const setActiveStep = useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step)
+      }
+      onValueChange?.(step)
+    },
+    [value, onValueChange]
+  )
+
+  const currentStep = value ?? activeStep
+
+  return (
+    <TimelineContext.Provider
+      value={{ activeStep: currentStep, setActiveStep }}
+    >
+      <div
+        className={cn(
+          "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+          className
+        )}
+        data-orientation={orientation}
+        data-slot="timeline"
+        {...props}
+      >
+        {children}
+      </div>
+    </TimelineContext.Provider>
+  )
+}
+
+// TimelineContent
+function TimelineContent({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="timeline-content"
+      {...props}
+    />
+  )
+}
+
+// TimelineDate
+// TimeHTMLAttributes (not the generic HTMLAttributes) so the <time>-specific `dateTime`
+// attribute is accepted — matches the base wrapper's useRender.ComponentProps<"time">.
+interface TimelineDateProps extends TimeHTMLAttributes<HTMLTimeElement> {
+  asChild?: boolean
+}
+
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}: TimelineDateProps) {
+  const Comp = asChild ? Slot.Root : "time"
+
+  return (
+    <Comp
+      className={cn(
+        "text-muted-foreground mb-1 block text-xs font-medium group-data-[orientation=vertical]/timeline:max-sm:h-4",
+        className
+      )}
+      data-slot="timeline-date"
+      {...props}
+    />
+  )
+}
+
+// TimelineHeader
+function TimelineHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn(className)} data-slot="timeline-header" {...props} />
+  )
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean
+}
+
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: TimelineIndicatorProps) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      aria-hidden="true"
+      className={cn(
+        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2",
+        className
+      )}
+      data-slot="timeline-indicator"
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+  const { activeStep } = useTimeline()
+
+  return (
+    <Motion
+      animation={elasticEnter()}
+      className={cn(
+        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-6",
+        className
+      )}
+      data-completed={step <= activeStep || undefined}
+      data-slot="timeline-item"
+      {...props}
+    />
+  )
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "bg-primary/10 absolute self-start group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+        className
+      )}
+      data-slot="timeline-separator"
+      {...props}
+    />
+  )
+}
+
+// TimelineTitle
+function TimelineTitle({
+  className,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-sm font-medium", className)}
+      data-slot="timeline-title"
+      {...props}
+    />
+  )
+}
+
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+}

package/src/presentation/sheets/index.tsx

@@ -0,0 +1,2 @@
+// @liorian/sdk/presentation/sheets — legacy sheet components.
+export * from "./legacy-sheet";

package/src/presentation/sheets/legacy-sheet.tsx

@@ -0,0 +1,37 @@
+import {Sheet, SheetContent, SheetTrigger} from "../ui/sheet";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface LegacySheetProps {
+    trigger?: React.ReactNode;
+    children?: React.ReactNode;
+    opened?: boolean;
+    onOpenChange?: (status: boolean) => void;
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+}
+
+export function LegacySheet({opened, children, onOpenChange, trigger, side, className}: LegacySheetProps) {
+
+    side = side ?? 'right';
+
+    return (
+        <Sheet open={opened} onOpenChange={onOpenChange}>
+            {trigger && (
+                <SheetTrigger className={cn('flex items-center w-full')} asChild>
+                    {trigger}
+                </SheetTrigger>
+            )}
+            <SheetContent
+                side={side ?? 'right'}
+                className={cn(
+                    'bg-background/95 backdrop-blur-4xl rounded-xl m-4',
+                    side === 'left' || side === 'right' ? 'w-[calc(100dvw-32px)]! sm:min-w-[80dvw]!  md:min-w-[60dvw]! lg:min-w-[35dvw]! h-full! max-h-[calc(100dvh-32px)]!' : '',
+                    side === 'top' || side === 'bottom' ? 'min-h-dvh md:min-h-[35dvh]! w-full! max-w-[calc(100dvw-32px)]!' : '',
+                    className,
+                )}
+            >
+                {children}
+            </SheetContent>
+        </Sheet>
+    )
+}

package/src/presentation/size.enum.ts

@@ -0,0 +1,19 @@
+export enum SizeEnum {
+    SM = 'max-w-sm',
+    MD = 'max-w-md',
+    LG = 'max-w-lg',
+    XL = 'max-w-xl',
+    XXL = 'max-w-[960px]',
+    FULL = 'max-w-[98dvw]',
+    AUTO = 'w-auto',
+}
+
+export enum SizeHeightEnum {
+    SM = 'h-sm',
+    MD = 'h-md',
+    LG = 'h-lg',
+    XL = 'h-xl',
+    XXL = 'h-[800px]',
+    FULL = 'h-[98dvh]',
+    AUTO = 'h-auto',
+}

package/src/presentation/system/index.tsx

@@ -0,0 +1,3 @@
+// @liorian/sdk/presentation/system — system UI (theme logo).
+export * from "./logo.theme";
+export * from "./types";

package/src/presentation/system/logo.theme.tsx

@@ -0,0 +1,21 @@
+import {Fragment} from "react";
+import {ThemeLogoProps} from "./types";
+import {cn} from "../../infrastructure/utilities/utils";
+import {LogoConfig} from "../../domain/config/logo.config";
+import {AppConfig} from "../../domain/config/app.config";
+
+
+export function ThemeLogo({size, className, color, onDark, variant}: ThemeLogoProps) {
+    const _size = size ? `w-${size}` : '';
+    const _variant = variant || 'banner';
+
+    return (
+        <Fragment>
+            <img src={LogoConfig[_variant][color || 'normal']}
+                 className={cn("dark:hidden block w-50 h-auto object-contain", _size, className)} alt={AppConfig.APP_NAME}/>
+            <img src={LogoConfig[_variant][onDark || 'white']}
+                 className={cn("dark:block hidden w-50 h-auto object-contain", _size, className)}
+                 alt={AppConfig.APP_NAME}/>
+        </Fragment>
+    )
+}

package/src/presentation/system/types.ts

@@ -0,0 +1,10 @@
+export type ThemeLogoColorVariant = 'normal' | 'white' | 'black';
+export type ThemeLogoVariant = 'icon' | 'banner' | 'square';
+
+export interface ThemeLogoProps {
+    size?: number;
+    variant?: ThemeLogoVariant;
+    color?: ThemeLogoColorVariant;
+    onDark?: ThemeLogoColorVariant;
+    className?: string;
+}

package/src/presentation/theme/index.tsx

@@ -0,0 +1,6 @@
+// @liorian/sdk/presentation/theme — color-scheme / theme switching.
+export * from "./prefer-color-scheme";
+export * from "./switch-color-scheme";
+export * from "./theme-switcher-button";
+export * from "./theme.enum";
+export * from "./theme.store";

package/src/presentation/theme/prefer-color-scheme.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import {useEffect} from "react";
+import {PreferColorSchemeEnum} from "./theme.enum";
+import {useThemePreferColorSchemeStore} from "./theme.store";
+
+export function ThemePreferColorSchemeProvider() {
+    const setColorScheme = useThemePreferColorSchemeStore((state) => state.setColorScheme);
+    const initialize = useThemePreferColorSchemeStore((state) => state.initialize);
+
+    useEffect(() => {
+        let disposed = false;
+        let mediaQuery: MediaQueryList | null = null;
+        let changed: ((event: MediaQueryListEvent) => void) | null = null;
+        let preferSystem = false;
+
+        initialize().then((cached) => {
+            if (disposed) return;
+
+            const state = useThemePreferColorSchemeStore.getState();
+            const hasRecord = cached.colorScheme !== undefined || cached.preferSystem !== undefined || state.colorScheme !== undefined;
+            preferSystem = cached.preferSystem ?? (hasRecord ? state.preferSystem : true);
+            const _colorScheme = cached.colorScheme ?? state.colorScheme ?? PreferColorSchemeEnum.Light;
+
+            mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+            const applySystem = (matches: boolean) =>
+                setColorScheme(matches ? PreferColorSchemeEnum.Dark : PreferColorSchemeEnum.Light);
+
+            if (preferSystem) {
+                applySystem(mediaQuery.matches);
+            } else {
+                setColorScheme(_colorScheme);
+            }
+
+            changed = (event: MediaQueryListEvent) => {
+                if (preferSystem) applySystem(event.matches);
+            };
+
+            mediaQuery.addEventListener("change", changed);
+        });
+
+        return () => {
+            disposed = true;
+            if (mediaQuery && changed) mediaQuery.removeEventListener("change", changed);
+        };
+    }, [initialize, setColorScheme]);
+
+    return null;
+}

package/src/presentation/theme/switch-color-scheme.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+
+import {FaIcon, FaTypeEnum} from "../icons/glyphIcons";
+import {Button} from "../ui/button";
+import {useThemePreferColorSchemeStore} from "./theme.store";
+
+export function SwitchColorScheme() {
+    const {toggleColorScheme} = useThemePreferColorSchemeStore()
+
+    return (
+        <Button variant={"ghost"} className={"px-3"} onClick={() => toggleColorScheme(true)}>
+            <FaIcon type={FaTypeEnum.Solid} name="eclipse"/>
+        </Button>
+    )
+}

package/src/presentation/theme/theme-switcher-button.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import {Button} from "../ui/button";
+import {MoonIcon, SunIcon} from "lucide-react";
+import {useThemePreferColorSchemeStore} from "./theme.store";
+import {PreferColorSchemeEnum} from "./theme.enum";
+
+
+export function ThemeSwitcherButton() {
+    const {colorScheme, toggleColorScheme} = useThemePreferColorSchemeStore()
+    return (
+        <Button
+            variant="ghost"
+            onClick={() => toggleColorScheme(true)}
+            className="w-8 h-8"
+        >
+            {colorScheme !== PreferColorSchemeEnum.Light ? <SunIcon/> : <MoonIcon/>}
+        </Button>
+    )
+}

package/src/presentation/theme/theme.enum.ts

@@ -0,0 +1,4 @@
+export enum PreferColorSchemeEnum {
+    Light = 'light',
+    Dark = 'dark',
+}

package/src/presentation/theme/theme.store.ts

@@ -0,0 +1,87 @@
+"use client";
+
+import { create } from "zustand";
+import { PreferColorSchemeEnum } from "./theme.enum";
+
+export interface ThemeCacheInterface {
+    colorScheme?: PreferColorSchemeEnum;
+    preferSystem?: boolean;
+}
+
+export interface ThemePreferColorSchemeStoreState {
+    colorScheme: PreferColorSchemeEnum | undefined;
+    preferSystem: boolean;
+    toggleColorScheme: (persist?: boolean) => void;
+    useSystem: (prefer: boolean) => void;
+    setColorScheme: (theme: PreferColorSchemeEnum) => void;
+    initialize: () => Promise<ThemeCacheInterface>;
+}
+
+const STORAGE_KEY = "@theme-prefers-color-scheme";
+
+const readCache = (): ThemeCacheInterface => {
+    if (typeof window === "undefined") return {};
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        return raw ? JSON.parse(raw) : {};
+    } catch {
+        return {};
+    }
+};
+
+const writeCache = (patch: Partial<ThemeCacheInterface>) => {
+    if (typeof window === "undefined") return;
+    try {
+        const current = readCache();
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...current, ...patch }));
+    } catch {
+        // ignore storage errors
+    }
+};
+
+const presetPreferColorSchemes = Object.values(PreferColorSchemeEnum);
+
+const getTargetElement = () => {
+    if (typeof document === "undefined") return undefined;
+    return presetPreferColorSchemes
+        .filter((scheme) => document.querySelector("body")?.classList.contains(scheme))
+        .pop() ? document.querySelector("body") : document.documentElement;
+};
+
+export const useThemePreferColorSchemeStore = create<ThemePreferColorSchemeStoreState>((set) => ({
+    colorScheme: undefined,
+    preferSystem: false,
+    useSystem: async (preferSystem: boolean) => {
+        writeCache({ preferSystem });
+        return set({ preferSystem });
+    },
+    toggleColorScheme: async (persist: boolean = true) => {
+        const body = getTargetElement();
+        if (body) {
+            const current = body.classList.contains(PreferColorSchemeEnum.Dark)
+                ? PreferColorSchemeEnum.Dark
+                : PreferColorSchemeEnum.Light;
+
+            const getColorScheme = current == PreferColorSchemeEnum.Light
+                ? PreferColorSchemeEnum.Dark
+                : PreferColorSchemeEnum.Light;
+
+            body.classList.remove(PreferColorSchemeEnum.Light, PreferColorSchemeEnum.Dark);
+            body.classList.add(getColorScheme);
+
+            if (persist) writeCache({ colorScheme: getColorScheme });
+
+            return set({ colorScheme: getColorScheme });
+        }
+    },
+    setColorScheme: async (colorScheme: PreferColorSchemeEnum) => {
+        const body = getTargetElement();
+        if (body) {
+            body.classList.remove(PreferColorSchemeEnum.Light, PreferColorSchemeEnum.Dark);
+            body.classList.add(colorScheme);
+        }
+        writeCache({ colorScheme });
+        return set({ colorScheme });
+    },
+    initialize: async () => readCache(),
+}));

package/src/presentation/themes/index.tsx

@@ -0,0 +1,2 @@
+// @liorian/sdk/presentation/themes — theme layout system (Katon & friends).
+export * from "./katon";