@fernir2/saas-kit-cli 0.1.4 → 0.1.6

package/packages/level2/fd-component-toolbox/dynamic-layout/FdDynamicLayoutDragAndDrop.jsx

@@ -1,78 +0,0 @@
-"use client";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
-import { Responsive, WidthProvider as widthProvider } from "react-grid-layout";
-import { cn } from "@fd-toolbox/lib/utils";
-import { generateLayout, onLayoutChange, setupRowHeightListener, } from "@fd-component-toolbox/dynamic-layout/FdDynamicLayoutDragAndDrop.funcs";
-/**
- * Based on [WidthProvider](https://www.npmjs.com/package/react-grid-layout)
- */
-export const ResponsiveReactGridLayout = widthProvider(Responsive);
-/**
- * A responsive grid layout component enabling dynamic drag-and-drop and resizing of elements
- *
- * @param props - {@link FdDynamicLayoutDragAndDropProps}
- *
- * @example
- * ```tsx
-    <FdDynamicLayoutDragAndDrop componentClassName="..." columns={15}>
-    ...
-    </FdDynamicLayoutDragAndDrop
- * ```
- */
-function FdDynamicLayoutDragAndDrop({ className, componentClassName, columns, containerPadding, containerMargin, children, }) {
-    const [layout, setLayout] = useState([]);
-    const [rowHeight, setRowHeight] = useState(60);
-    const margin = useMemo(() => containerMargin ?? [14, 14], [containerMargin]);
-    const effectiveColumns = useMemo(() => columns ?? 6, [columns]);
-    useLayoutEffect(() => {
-        generateLayout(effectiveColumns, setLayout, children);
-    }, [effectiveColumns, children]);
-    const onLayoutChangeCallback = useCallback((_, newLayouts) => {
-        onLayoutChange(newLayouts, setLayout);
-    }, []);
-    useEffect(() => {
-        setupRowHeightListener(effectiveColumns, setRowHeight, margin);
-    }, [effectiveColumns, margin]);
-    return (<div className="select-none" style={{ paddingBottom: rowHeight }}>
-            <ResponsiveReactGridLayout rowHeight={rowHeight} className={cn(
-        //https://github.com/react-grid-layout/react-grid-layout/blob/master/css/styles.css
-        //https://github.com/react-grid-layout/react-resizable/blob/master/css/styles.css
-        //combined and modified accordingly to hubspot
-        "relative " +
-            "[&_.react-grid-item]:transition-all" +
-            "[&_.cssTransforms]:transition-[transform,_width,_height]" +
-            "[&_img]:pointer-events-none" +
-            "[&_img]:select-none" +
-            "[&_.resizing]:transition-none" +
-            "[&_.resizing]:z-[1]" +
-            "[&_.resizing]:will-change-[width,_height]" +
-            "[&_.react-grid-item.react-draggable-dragging]:transition-none" +
-            "[&_.react-grid-item.react-draggable-dragging]:z-[3]" +
-            "[&_.react-grid-item.react-draggable-dragging]:will-change-transform" +
-            "[&_.dropping]:invisible" +
-            "[&_.react-grid-placeholder]:border-fd-accent" +
-            "[&_.react-grid-placeholder]:border" +
-            "[&_.react-grid-placeholder]:border-dashed" +
-            "[&_.react-grid-placeholder]:border-2" +
-            "[&_.react-grid-placeholder]:rounded" +
-            "[&_.react-grid-placeholder]:z-[2]" +
-            "[&_.react-grid-placeholder]:select-none" +
-            "[&_.placeholder-resizing]:transition-none" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:absolute" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:size-0.9" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:bottom-0" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:right-0" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:cursor-se-resize" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:after:content-[url(/handle.svg)]" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:after:absolute" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:after:size-0.9" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:after:right-2" +
-            "[&_.react-grid-item_>_.react-resizable-handle]:after:bottom-0" +
-            "[&_.react-resizable-hide_>_.react-resizable-handle]:hidden", className)} margin={margin} cols={{ xxs: effectiveColumns }} breakpoints={{ xxs: 0 }} containerPadding={containerPadding ?? [0, 0]} layouts={{ xxs: layout }} measureBeforeMount={false} useCSSTransforms={true} preventCollision={false} onLayoutChange={onLayoutChangeCallback}>
-                {layout.map((item) => (<div key={item.i} className={cn("cursor-grab overflow-hidden", componentClassName ?? "bg-background shadow")}>
-                        {item.element}
-                    </div>))}
-            </ResponsiveReactGridLayout>
-        </div>);
-}
-export default FdDynamicLayoutDragAndDrop;

package/packages/level2/fd-component-toolbox/fade-out-text/FdFadeOutText.jsx

@@ -1,52 +0,0 @@
-import { useRef, useMemo, useState, useEffect } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdTooltip, FdTooltipContent, FdTooltipProvider, FdTooltipTrigger, } from "@fd-component-toolbox/tooltip/FdTooltip";
-import { checkFadeoutVisibility } from "@fd-component-toolbox/fade-out-text/FdFadeOutText.funcs";
-/**
- * @param FdFadeOutTextProps {@link FdFadeOutTextProps}
- *
- * @example
- * ```tsx
- * function MyComponent({ isHovered }) {
- *   return (
- *     <FdFadeOutText
- *       bgColor="bg-transparent"
- *       isRightAlign={true}
- *       isHovered={isHovered}
- *       tooltipContent="This is the full content that appears in the tooltip"
- *       onTooltipClick={...}
- *     >
- *       This is a very long text that will be truncated with fade effect when it reaches the container width
- *     </FdFadeOutText>
- *   );
- * }
- * ```
- */
-export function FdFadeOutText({ children, className, isRightAlign, shouldHideTooltip, onTooltipClick, tooltipContent, ref, ...props }) {
-    const valueBlockRef = useRef(null);
-    const [fadeoutVisible, setFadeoutVisible] = useState();
-    const { isHovered, ...restProps } = props;
-    useEffect(() => {
-        checkFadeoutVisibility(setFadeoutVisible, valueBlockRef?.current ?? undefined);
-    }, [children]);
-    const textAlignmentClass = useMemo(() => {
-        return isRightAlign ? "flex-row-reverse" : "";
-    }, [isRightAlign]);
-    return (<div ref={ref} className="relative min-w-0 flex-1">
-            <FdTooltipProvider>
-                <FdTooltip>
-                    <FdTooltipTrigger asChild disabled={shouldHideTooltip} onClick={onTooltipClick}>
-                        <div ref={valueBlockRef} className={cn("flex w-full flex-row overflow-x-hidden text-nowrap", className, textAlignmentClass, fadeoutVisible
-            ? "[mask-image:linear-gradient(to_right,currentColor_87%,transparent_100%)]"
-            : "", isHovered ? "hovered" : "")} {...restProps}>
-                            {children}
-                        </div>
-                    </FdTooltipTrigger>
-                    <FdTooltipContent hidden={shouldHideTooltip} className={!fadeoutVisible ? "hidden" : ""}>
-                        {tooltipContent ?? children}
-                    </FdTooltipContent>
-                </FdTooltip>
-            </FdTooltipProvider>
-        </div>);
-}
-FdFadeOutText.displayName = "FdFadeOutText";

package/packages/level2/fd-component-toolbox/form/FdForm.jsx

@@ -1,146 +0,0 @@
-"use client";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { Controller, FormProvider, useFormContext, } from "react-hook-form";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdLabel } from "@fd-component-toolbox/label/FdLabel";
-import { createError } from "@fd-toolbox/errors/errors";
-/**
- * Main form component that serves as a wrapper for react-hook-form's FormProvider
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const form = useForm({...});
- *
- *   return (
- *     <FdForm {...form}>
- *       ...
- *     </FdForm>
- *   );
- * }
- * ```
- */
-const FdForm = FormProvider;
-/**
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-const FdFormFieldContext = React.createContext(null);
-/**
- * Component that wraps Controller and provides field name context to connect form elements with react-hook-form
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const form = useForm({...});
- *
- *     return (
- *         <FdFormField control={form.control} name="email" render={...}/>
- *     );
- * }
- * ```
- */
-function FdFormField({ ...props }) {
-    const contextValue = React.useMemo(() => ({ name: props.name }), [props.name]);
-    return (<FdFormFieldContext.Provider value={contextValue}>
-            <Controller {...props}/>
-        </FdFormFieldContext.Provider>);
-}
-/**
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-const useFormField = () => {
-    const fieldContext = React.useContext(FdFormFieldContext);
-    const itemContext = React.useContext(FdFormItemContext);
-    const { getFieldState, formState } = useFormContext();
-    if (!fieldContext) {
-        throw createError("useFormField should be used within <FormField>");
-    }
-    if (!itemContext) {
-        throw createError("useFormField should be used within <FormItem>");
-    }
-    const fieldState = getFieldState(fieldContext.name, formState);
-    const { id } = itemContext;
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    };
-};
-/**
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-export const FdFormItemContext = React.createContext(null);
-/**
- * UI container that generates and shares unique ID for label-input connections and accessibility
- *
- * {@link FdFormItem}
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-function FdFormItem({ className, ref, ...props }) {
-    const id = React.useId();
-    const contextValue = React.useMemo(() => ({ id }), [id]);
-    return (<FdFormItemContext.Provider value={contextValue}>
-            <div ref={ref} className={cn("space-y-2", className)} {...props}/>
-        </FdFormItemContext.Provider>);
-}
-FdFormItem.displayName = "FdFormItem";
-/**
- * Label component that automatically connects to form inputs using IDs from FdFormItem context
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-function FdFormLabel({ className, ref, ...props }) {
-    const { error, formItemId } = useFormField();
-    return (<FdLabel ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props}/>);
-}
-FdFormLabel.displayName = "FdFormLabel";
-/**
- * Control component that applies accessibility attributes to child elements using context IDs
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-function FdFormControl({ ref, ...props }) {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return (<Slot ref={ref} id={formItemId} aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`} aria-invalid={!!error} {...props}/>);
-}
-FdFormControl.displayName = "FdFormControl";
-/**
- * Description component that uses a shared ID from context
- *
- * {@link FdFormDescription}
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-function FdFormDescription({ className, ref, ...props }) {
-    const { formDescriptionId } = useFormField();
-    return (<p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props}/>);
-}
-FdFormDescription.displayName = "FdFormDescription";
-/**
- * Error message component that displays validation errors or custom messages
- *
- * {@link FdFormMessage}
- *
- * Based on {@link https://ui.shadcn.com/docs/components/form Form}
- */
-function FdFormMessage({ className, children, ref, ...props }) {
-    const { error, formMessageId } = useFormField();
-    const body = error?.message ?? children;
-    if (!body) {
-        return null;
-    }
-    return (<p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
-            {body}
-        </p>);
-}
-FdFormMessage.displayName = "FdFormMessage";
-export { useFormField, FdForm, FdFormItem, FdFormLabel, FdFormControl, FdFormDescription, FdFormMessage, FdFormField, };

package/packages/level2/fd-component-toolbox/icon/FdIcon.jsx

@@ -1,192 +0,0 @@
-import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CalendarIcon, CaretDownIcon, CaretSortIcon, CaretUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Cross1Icon, Cross2Icon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EyeNoneIcon, EyeOpenIcon, Link1Icon, MagnifyingGlassIcon, Pencil1Icon, PlusIcon, TrashIcon, GearIcon, GlobeIcon, ExitIcon, HamburgerMenuIcon, PersonIcon, BackpackIcon, EnvelopeClosedIcon, FileTextIcon, Pencil2Icon, MixerHorizontalIcon, BellIcon, DotFilledIcon, DotsVerticalIcon, SymbolIcon, EraserIcon, LinkBreak1Icon, QuestionMarkCircledIcon, CaretLeftIcon, ResetIcon, ChatBubbleIcon, Share1Icon, DashboardIcon, CounterClockwiseClockIcon, ListBulletIcon, EnterIcon, LayersIcon, MoonIcon, SunIcon, DesktopIcon, CubeIcon, ClockIcon, ImageIcon, CameraIcon, MixIcon, ArchiveIcon, UploadIcon, BookmarkIcon, BookmarkFilledIcon, GroupIcon, PlayIcon, } from "@radix-ui/react-icons";
-import { BrickWall, MessageSquareTextIcon } from "lucide-react";
-import FilterIcon from "@fd-component-toolbox/icon/custom-icons/FdFilterIcon";
-import { cn } from "@fd-toolbox/lib/utils";
-import FacebookLogo from "@fd-component-toolbox/logos/FacebookLogo";
-import MicrosoftLogo from "@fd-component-toolbox/logos/MicrosoftLogo";
-import GoogleLogo from "@fd-component-toolbox/logos/GoogleLogo";
-/**
- * {@link iconSizes}
- */
-export const iconSizes = {
-    extraSmall: "size-3",
-    small: "size-4",
-    medium: "size-5",
-    large: "size-6",
-    extralarge: "size-7",
-};
-/**
- * {@link iconNames}
- */
-export const iconNames = {
-    visibility: "visibility",
-    visibilityOff: "visibilityOff",
-    chevronRight: "chevronRight",
-    chevronLeft: "chevronLeft",
-    chevronDown: "chevronDown",
-    chevronUp: "chevronUp",
-    trash: "trash",
-    edit: "edit",
-    cross1: "cross1",
-    cross2: "cross2",
-    bell: "bell",
-    dotsHorizontal: "dotsHorizontal",
-    magnifyingGlass: "magnifyingGlass",
-    plus: "plus",
-    check: "check",
-    caretSort: "caretSort",
-    caretDown: "caretDown",
-    caretUp: "caretUp",
-    arrowLeft: "arrowLeft",
-    arrowRight: "arrowRight",
-    doubleArrowLeft: "doubleArrowLeft",
-    doubleArrowRight: "doubleArrowRight",
-    arrowDown: "arrowDown",
-    arrowUp: "arrowUp",
-    link: "link",
-    dragHandleDots2: "dragHandleDots2",
-    calendar: "calendar",
-    globe: "globe",
-    gear: "gear",
-    exit: "exit",
-    person: "person",
-    fileText: "fileText",
-    envelopeClosed: "envelopeClosed",
-    backpack: "backpack",
-    pencil2: "pencil2",
-    mixerHorizontal: "mixerHorizontal",
-    hamburgerMenu: "hamburgerMenu",
-    dotFilled: "dotFilled",
-    refresh: "refresh",
-    eraser: "eraser",
-    facebookLogo: "facebookLogo",
-    microsoftLogo: "microsoftLogo",
-    googleLogo: "googleLogo",
-    filter: "filter",
-    reset: "reset",
-    dotsVerticalIcon: "dotsVerticalIcon",
-    questionMarkCircledIcon: "questionMarkCircledIcon",
-    caretLeftIcon: "caretLeftIcon",
-    chatBubbleIcon: "chatBubbleIcon",
-    share1Icon: "share1Icon",
-    linkBreak1Icon: "linkBreak1Icon",
-    dashboard: "dashboard",
-    listBulletIcon: "listBulletIcon",
-    eyeNoneIcon: "eyeNoneIcon",
-    eyeOpenIcon: "eyeOpenIcon",
-    counterClockwiseClockIcon: "counterClockwiseClockIcon",
-    enter: "enter",
-    layers: "layers",
-    desktop: "desktop",
-    sun: "sun",
-    moon: "moon",
-    cube: "cubeIcon",
-    clock: "clock",
-    image: "image",
-    camera: "camera",
-    mix: "mix",
-    archive: "archive",
-    upload: "upload",
-    bookmark: "bookmark",
-    bookmarkFilled: "bookmarkFilled",
-    group: "group",
-    playIcon: "playIcon",
-    brickWall: "brickWall",
-    messageIcon: "messageIcon",
-};
-const iconMap = {
-    visibility: EyeOpenIcon,
-    visibilityOff: EyeNoneIcon,
-    chevronRight: ChevronRightIcon,
-    chevronLeft: ChevronLeftIcon,
-    chevronDown: ChevronDownIcon,
-    chevronUp: ChevronUpIcon,
-    trash: TrashIcon,
-    cross1: Cross1Icon,
-    cross2: Cross2Icon,
-    dotsHorizontal: DotsHorizontalIcon,
-    magnifyingGlass: MagnifyingGlassIcon,
-    plus: PlusIcon,
-    check: CheckIcon,
-    caretSort: CaretSortIcon,
-    caretDown: CaretDownIcon,
-    caretUp: CaretUpIcon,
-    arrowLeft: ArrowLeftIcon,
-    arrowRight: ArrowRightIcon,
-    doubleArrowLeft: DoubleArrowLeftIcon,
-    doubleArrowRight: DoubleArrowRightIcon,
-    arrowDown: ArrowDownIcon,
-    arrowUp: ArrowUpIcon,
-    link: Link1Icon,
-    dragHandleDots2: DragHandleDots2Icon,
-    edit: Pencil1Icon,
-    calendar: CalendarIcon,
-    gear: GearIcon,
-    globe: GlobeIcon,
-    exit: ExitIcon,
-    hamburgerMenu: HamburgerMenuIcon,
-    person: PersonIcon,
-    fileText: FileTextIcon,
-    envelopeClosed: EnvelopeClosedIcon,
-    backpack: BackpackIcon,
-    pencil2: Pencil2Icon,
-    mixerHorizontal: MixerHorizontalIcon,
-    bell: BellIcon,
-    dotFilled: DotFilledIcon,
-    refresh: SymbolIcon,
-    eraser: EraserIcon,
-    facebookLogo: FacebookLogo,
-    microsoftLogo: MicrosoftLogo,
-    googleLogo: GoogleLogo,
-    filter: FilterIcon,
-    reset: ResetIcon,
-    dotsVerticalIcon: DotsVerticalIcon,
-    questionMarkCircledIcon: QuestionMarkCircledIcon,
-    caretLeftIcon: CaretLeftIcon,
-    chatBubbleIcon: ChatBubbleIcon,
-    share1Icon: Share1Icon,
-    linkBreak1Icon: LinkBreak1Icon,
-    dashboard: DashboardIcon,
-    listBulletIcon: ListBulletIcon,
-    eyeNone: EyeNoneIcon,
-    EyeOpen: EyeOpenIcon,
-    counterClockwiseClockIcon: CounterClockwiseClockIcon,
-    enter: EnterIcon,
-    layers: LayersIcon,
-    desktop: DesktopIcon,
-    sun: SunIcon,
-    moon: MoonIcon,
-    cubeIcon: CubeIcon,
-    clock: ClockIcon,
-    image: ImageIcon,
-    camera: CameraIcon,
-    mix: MixIcon,
-    archive: ArchiveIcon,
-    upload: UploadIcon,
-    bookmark: BookmarkIcon,
-    bookmarkFilled: BookmarkFilledIcon,
-    group: GroupIcon,
-    playIcon: PlayIcon,
-    brickWall: BrickWall,
-    messageIcon: MessageSquareTextIcon,
-};
-export const defaultSidebarIconName = iconNames.mixerHorizontal;
-/**
- * Icon component that provides access to Radix UI icons with standardized sizing and styling options
- *
- * @param FdIconProps {@link FdIconProps}
- *
- * @example
- * ```tsx
-    <FdIcon name="chevronDown" size="size-5" color="text-primary" onClick={...}/>
- * ```
- */
-export function FdIcon({ name, size, color, className, id, onClick }) {
-    if (name in iconMap) {
-        const IconComponent = iconMap[name];
-        return (<IconComponent id={id ?? ""} className={cn("stroke-[1.2]", size ?? iconSizes.small, color ?? "text-muted-foreground", className ?? "")} onClick={onClick}/>);
-    }
-    else {
-        return null;
-    }
-}

package/packages/level2/fd-component-toolbox/icon/custom-icons/FdFilterIcon.jsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-function FilterIcon({ className, color, ref, ...props }) {
-    return (<svg ref={ref} width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 22 25" {...props}>
-            <g fill="none">
-                <path d="M0 0h24v24H0z"/>
-                <path color={color ?? "currentColor"} className="fill-current" fillRule="evenodd" clipRule="evenodd" d="M14 17a1 1 0 0 1 .117 1.993L14 19h-4a1 1 0 0 1-.117-1.993L10 17zm3-6a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2zm3-6a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2z"/>
-            </g>
-        </svg>);
-}
-FilterIcon.displayName = "FilterIcon";
-export default FilterIcon;

package/packages/level2/fd-component-toolbox/image/FdImage.jsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-/**
- * Wrapper component for Next.js Image
- *
- * @param FdImageProps {@link FdImageProps}
- *
- * @example
- * ```tsx
- * <FdImage src="/images/logo.png" width={200} height={100} alt="Company logo"/>
- * ```
- */
-export function FdImage(props) {
-    return <FdFrameworkImage {...props} alt={props.alt}/>;
-}

package/packages/level2/fd-component-toolbox/input/FdInput.jsx

@@ -1,94 +0,0 @@
-"use client";
-import React, { useCallback, useMemo, useRef, useState, useEffect } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon } from "@fd-component-toolbox/icon/FdIcon";
-import FdLabelAnimation from "@fd-component-toolbox/animation/FdLabelAnimation";
-import { useHover } from "@fd-toolbox/hooks/use-hover";
-import { cva } from "class-variance-authority";
-import { onInputBlur, onClearInput, onInputChange, onInputFocus, } from "@fd-component-toolbox/input/FdInput.funcs";
-import { elementSuffixes } from "@fd-toolbox/constants/element-suffixes";
-/**
- * Using {@link https://cva.style/docs/getting-started/variants class-variance-authority}
- */
-export const inputVariants = cva("relative flex h-8 w-full border-transparent transition", {
-    variants: {
-        variant: {
-            bordered: "rounded-md border border-input align-middle shadow-sm focus-within:border-ring",
-            float: "border-b border-border transition",
-        },
-    },
-    defaultVariants: {
-        variant: "float",
-    },
-});
-/**
- * Customizable input component with floating label, clear functionality, and support for additional action buttons
- *
- * @param FdInputProps {@link FdInputProps}
- *
- * @example
- * ```tsx
- *  <FdFormField render={({ field }) => (
- *          ...
- *          <FdInput {...field} type="text" label="Label" placeholder="Placeholder" showClearIcon={true}/>
- *          ...
- *      )}
- * />
- * ```
- */
-export function FdInput({ className, inputId, showClearIcon, value, onChange, onClear, onBlur, label, skipAnimationOnce, variant, children: icons, isDisableFocus, ref, ...props }) {
-    const isError = props["aria-invalid"] && props["aria-invalid"] !== "false";
-    const [isInFocus, setIsInFocus] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isInputHovered, hoverHandlers] = useHover();
-    const [inputValue, setInputValue] = useState("");
-    useEffect(() => {
-        if (value) {
-            setInputValue(value);
-        }
-        else {
-            setInputValue("");
-        }
-    }, [value]);
-    const isClearIconVisible = useMemo(() => value && (isHovered || isInFocus), [isHovered, value, isInFocus]);
-    const onChangeCallback = useCallback((e) => {
-        onInputChange(e, setInputValue, onChange);
-    }, [onChange]);
-    const onBlurCallback = useCallback((e) => {
-        onBlur?.(e.target.value);
-    }, [onBlur]);
-    const onClearCallback = useCallback(() => {
-        onClearInput(setInputValue, setIsInFocus, onChange, onClear);
-    }, [onChange, onClear]);
-    const onMouseEnter = useCallback(() => {
-        setIsHovered(true);
-    }, []);
-    const onMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-    const shouldLabelAnimate = useMemo(() => !!value || !!props.defaultValue || isInFocus, [value, props.defaultValue, isInFocus]);
-    const iconsBlockRef = useRef(null);
-    const handleFocus = useCallback(() => {
-        onInputFocus(setIsInFocus, isDisableFocus);
-    }, [isDisableFocus, setIsInFocus]);
-    const onInputBlurCallback = useCallback((e) => {
-        onInputBlur(e, setIsInFocus, onBlurCallback);
-    }, [onBlurCallback]);
-    return (<div className={cn(inputVariants({ variant }), (variant ?? "float") === "float" && (isInFocus || isHovered) && "border-fd-accent")} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            <input ref={ref} value={inputValue} onChange={onChangeCallback} className={cn("mt-1 flex w-full bg-background pl-2 pr-1 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed", className, isError && "border border-destructive focus-visible:outline-none")} {...props} id={inputId} tabIndex={isDisableFocus ? -1 : 0} onFocus={handleFocus} onBlur={onInputBlurCallback} {...hoverHandlers}/>
-
-            <div className="z-10 flex items-center justify-end bg-background">
-                {!props.disabled && showClearIcon && (<FdButton variant="icon" size="icon" type="button" onClick={onClearCallback} tabIndex={-1} className={cn("w-4 transition-[transform,opacity]", icons ? "mx-2 translate-y-0" : "absolute right-2 top-1/2 -translate-y-1/2", !isClearIconVisible
-                ? cn("pointer-events-none w-0 animate-fade-out", (variant ?? "float") === "float" && "-translate-y-0 opacity-0")
-                : "animate-fade-in")}>
-                        <FdIcon name="eraser" size="extraSmall"/>
-                    </FdButton>)}
-                {label && (<FdLabelAnimation className="max-w-fit" label={label} shouldAnimate={shouldLabelAnimate} isParentHovered={isInputHovered} isErrorStyle={isError} skipAnimationOnce={skipAnimationOnce} variant={variant ?? "float"}/>)}
-                {icons && (<div id={props.id + elementSuffixes.edit} ref={iconsBlockRef} className="z-10 flex h-2/3 items-center bg-background pr-2">
-                        {icons}
-                    </div>)}
-            </div>
-        </div>);
-}
-FdInput.displayName = "FdInput";

package/packages/level2/fd-component-toolbox/label/FdLabel.jsx

@@ -1,19 +0,0 @@
-"use client";
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * Using {@link https://cva.style/docs/getting-started/variants class-variance-authority}
- */
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-/**
- * Сustomizable label component
- *
- * Based on {@link https://ui.shadcn.com/docs/components/label Label}
- */
-function FdLabel({ className, ref, ...props }) {
-    return <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props}/>;
-}
-FdLabel.displayName = LabelPrimitive.Root.displayName;
-export { FdLabel };

package/packages/level2/fd-component-toolbox/link/FdLink.jsx

@@ -1,23 +0,0 @@
-import { FdFrameworkLink } from "@fd-component-toolbox/client/framework";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * Сustomizable Next.js Link component
- *
- * @param FdLinkProps {@link FdLinkProps}
- *
- * @example
- * ```tsx
- *  <FdLink href="https://example.com" openInNewTab={true} onClick={...}>
- *      External Link
- *  </FdLink>
- * ```
- */
-export function FdLink({ href, className, children, onClick, openInNewTab, id }) {
-    return (<FdFrameworkLink id={id} href={href} className={cn("outline-none focus-visible:ring-1 focus-visible:ring-primary", className)} onClick={onClick} {...(openInNewTab && {
-        target: "_blank",
-        rel: "noopener noreferrer",
-    })}>
-            {children}
-        </FdFrameworkLink>);
-}
-export default FdLink;

package/packages/level2/fd-component-toolbox/list/FdList.jsx

@@ -1,20 +0,0 @@
-"use client";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * List component that automatically adds scrolling when containing more than 8 items
- *
- * @param IFdListProps {@link IFdListProps}
- *
- * @example
- * ```tsx
- *  <FdList itemCount={10}>
- *  ...
- *  </FdList>
- * ```
- */
-export function FdList({ className, children, itemCount }) {
-    const shouldShowScroll = (itemCount ?? 0) > 8;
-    return (<ul className={cn("px-1", shouldShowScroll ? "max-h-96 overflow-y-scroll" : "max-h-full", className)}>
-            {children}
-        </ul>);
-}