@fernir2/saas-kit 0.0.206 → 0.0.208

package/packages/level2/fd-component-toolbox/dropdown-menu/DropdownMenu.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { Menu as DropdownMenuPrimitive } from "@base-ui/react/menu";
+import { alignPositions } from "@base-repo/constants/tools-constants";
 interface DropdownMenuRadioItemProps {
     className: string;
     value: string;
@@ -48,15 +49,25 @@ declare const DropdownMenuPortal: React.ForwardRefExoticComponent<Omit<import("@
  *
  * @example
  * ```tsx
- *  function MyComponent() {
-        const [radioValue, setRadioValue] = React.useState("defaultValue")
+    function MyComponent() {
+        const [radioValue, setRadioValue] = useState("defaultValue");
 
         return (
-            <DropdownMenuRadioGroup value={radioValue} onValueChange={setRadioValue}>
-            ...
-            </DropdownMenuRadioGroup>
- *      );
- *  }
+            <DropdownMenu>
+                <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuRadioGroup value={radioValue} onValueChange={setRadioValue}>
+                        <DropdownMenuRadioItem className="px-2" value="defaultValue">
+                            Default
+                        </DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem className="px-2" value="compactValue">
+                            Compact
+                        </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+    }
  * ```
  */
 declare const DropdownMenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -90,15 +101,23 @@ declare namespace DropdownMenuSubContent {
  *
  * @example
  * ```tsx
- *  <DropdownMenuContent align="start" side="right" sideOffset={17} onMouseLeave={...}>
- *  ...
- *  <DropdownMenuContent/>
+    function MyComponent() {
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
+                <DropdownMenuContent align="start" onMouseLeave={...}>
+                    <DropdownMenuItem>Profile</DropdownMenuItem>
+                    <DropdownMenuItem>Sign out</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+    }
  *  ```
  */
 declare function DropdownMenuContent({ className, ref, children, align, }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Popup> & {
     ref?: React.Ref<React.ComponentRef<typeof DropdownMenuPrimitive.Popup>>;
     children?: React.ReactNode;
-    align?: "start" | "center" | "end";
+    align?: typeof alignPositions.start | typeof alignPositions.center | typeof alignPositions.end;
 }): React.JSX.Element;
 declare namespace DropdownMenuContent {
     var displayName: string;
@@ -110,9 +129,9 @@ declare namespace DropdownMenuContent {
  *
  * @example
  * ```tsx
- *  <DropdownMenuItem onSelect={...} onClick={...}>
- *  ...
- *  <DropdownMenuItem/>
+    <DropdownMenuItem onSelect={...} onClick={...}>
+        Profile
+    </DropdownMenuItem>
  *  ```
  */
 declare function DropdownMenuItem({ className, inset, children, ref, disabled, onSelect, onClick, }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
@@ -151,7 +170,11 @@ declare namespace DropdownMenuCheckboxItem {
  *
  * @example
  * ```tsx
-    <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+    <DropdownMenuRadioGroup value="top" onValueChange={...}>
+        <DropdownMenuRadioItem className="px-2" value="top">
+            Top
+        </DropdownMenuRadioItem>
+    </DropdownMenuRadioGroup>
  * ```
  */
 declare function DropdownMenuRadioItem({ className, children, value, ref }: DropdownMenuRadioItemProps): React.JSX.Element;

package/packages/level2/fd-component-toolbox/dynamic-layout/DynamicLayoutDragAndDrop.d.ts

@@ -30,9 +30,14 @@ export declare const ResponsiveReactGridLayout: import("react").ComponentClass<i
  *
  * @example
  * ```tsx
-    <DynamicLayoutDragAndDrop componentClassName="..." columns={15}>
-    ...
-    </DynamicLayoutDragAndDrop
+    <DynamicLayoutDragAndDrop
+        componentClassName="rounded-md border bg-background p-4"
+        columns={3}
+    >
+        <div>Sales chart</div>
+        <div>Recent activity</div>
+        <div>Tasks</div>
+    </DynamicLayoutDragAndDrop>
  * ```
  */
 export declare function DynamicLayoutDragAndDrop({ className, componentClassName, columns, containerPadding, containerMargin, children, }: DynamicLayoutDragAndDropProps): import("react").JSX.Element;

package/packages/level2/fd-component-toolbox/dynamic-layout/DynamicLayoutDragAndDrop.funcs.d.ts

@@ -1,7 +1,7 @@
 import { SetStateFunc, VoidFunc } from "../../../fd-toolbox/functions/getter-setter-functions";
 import { LayoutElement } from "./layout-element";
 import { Layouts } from "react-grid-layout";
-export declare const resizeEvent = "resize";
+export declare const childrenProperty = "children";
 export declare function generateLayout(columns: number, setLayout: VoidFunc<LayoutElement[]>, children?: unknown): void;
 export declare function onLayoutChange(newLayouts: Layouts, setLayout: SetStateFunc<LayoutElement[]>): void;
 export declare function setupRowHeightListener(columns: number, setRowHeight: VoidFunc<number>, containerMargin: [number, number]): () => void;

package/packages/level2/fd-component-toolbox/dynamic-layout/DynamicLayoutDragAndDrop.funcs.js

@@ -1,6 +1,7 @@
 'use strict';
 import { isObject } from '../../../fd-toolbox/types/ensure-type.js';
+import { eventListenerEvents } from '../../../fd-toolbox/constants/events.js';
 
-var __defProp=Object['defineProperty'],__name=(_0x31db0e,_0x34d7f7)=>__defProp(_0x31db0e,'name',{'value':_0x34d7f7,'configurable':!![]});const resizeEvent='resize';const childrenProperty='children',propsProperty='props';function generateLayout(_0x52c531,_0x2042a2,_0x3debf8){if(!_0x3debf8)return;let _0x22007f=Array['isArray'](_0x3debf8)?_0x3debf8:[_0x3debf8];_0x2042a2(_0x22007f['map']((_0xa3ad81,_0x217378)=>createLayoutElement(_0xa3ad81,_0x217378,_0x52c531)));}__name(generateLayout,'generateLayout');function onLayoutChange(_0x3ddb13,_0x1eea70){const _0x166889=_0x3ddb13['xxs'];_0x1eea70(_0x2a4bb7=>_0x2a4bb7['map']((_0xb0a8f1,_0x255f4b)=>({..._0x166889[_0x255f4b],'element':_0xb0a8f1['element']})));}__name(onLayoutChange,'onLayoutChange');function setupRowHeightListener(_0x99e99a,_0x84a31d,_0x4466d1){function _0x434cac(){const _0x5ae5fd=document['querySelector']('.react-grid-layout')?.['clientWidth'];if(_0x5ae5fd){const _0x10f574=(_0x5ae5fd-(_0x99e99a-(-0xe*0x9f+0x3a6*0x2+0x167*0x1))*_0x4466d1[-0x88e+-0x2*0x1e8+-0x1*-0xc5e])/_0x99e99a;_0x84a31d(_0x10f574);}}return __name(_0x434cac,'calculateRowHeight'),_0x434cac(),window['addEventListener'](resizeEvent,_0x434cac),()=>{window['removeEventListener'](resizeEvent,_0x434cac);};}__name(setupRowHeightListener,'setupRowHeightListener');function getProps(_0x5846ee){let _0x506f8b={};if(!_0x5846ee)return _0x506f8b;if(isObject(_0x5846ee)&&propsProperty in _0x5846ee&&isObject(_0x5846ee['props'])){const _0x52567c=_0x5846ee['props'];if(childrenProperty in _0x52567c&&isObject(_0x52567c['children'])){const _0x37d517=_0x52567c['children'];if(propsProperty in _0x37d517&&isObject(_0x37d517['props']))return _0x506f8b=_0x37d517['props'],_0x506f8b;}}return _0x506f8b;}__name(getProps,'getProps');function createLayoutElement(_0x5bc1c8,_0x1452ea,_0x2ac520){const _0x558256=getProps(_0x5bc1c8),_0x3737bf={'x':_0x558256['defaultX']??_0x1452ea%(0xdc6+0x1*0x165e+-0x7*0x529),'y':_0x558256['defaultY']??0x6*0x496+0x224b+0x3dcf*-0x1,'w':_0x558256['defaultWidth']??_0x558256['minWidth']??-0x74*0x3+-0x25ae+-0x5*-0x7cf,'h':_0x558256['defaultHeight']??_0x558256['minHeight']??0xb6f+0x1e49+-0x29b7,'i':_0x558256['id']??_0x1452ea['toString'](),'maxH':_0x558256['maxHeight']??Math['round'](_0x2ac520*(0x741*-0x3+0xd04+-0x1b*-0x53)/(0x1823+-0x1*0x599+0x99*-0x1f)),'minH':_0x558256['minHeight'],..._0x558256,'element':_0x5bc1c8};return _0x3737bf;}__name(createLayoutElement,'createLayoutElement');
+var __defProp=Object['defineProperty'],__name=(_0x1dd9c1,_0x55eaa2)=>__defProp(_0x1dd9c1,'name',{'value':_0x55eaa2,'configurable':!![]});const childrenProperty='children';const propsProperty='props';function generateLayout(_0x5a920b,_0x47096c,_0x1b8266){if(!_0x1b8266)return;let _0x1bd25a=Array['isArray'](_0x1b8266)?_0x1b8266:[_0x1b8266];_0x47096c(_0x1bd25a['map']((_0x1dc77c,_0x9fed95)=>createLayoutElement(_0x1dc77c,_0x9fed95,_0x5a920b)));}__name(generateLayout,'generateLayout');function onLayoutChange(_0x5cdb0b,_0x459326){const _0x188abb=_0x5cdb0b['xxs'];_0x459326(_0x11874a=>_0x11874a['map']((_0x2c736b,_0x4536c7)=>({..._0x188abb[_0x4536c7],'element':_0x2c736b['element']})));}__name(onLayoutChange,'onLayoutChange');function setupRowHeightListener(_0x3befc1,_0x3ab224,_0x411e6e){function _0x1d80bd(){const _0x5f110a=document['querySelector']('.react-grid-layout')?.['clientWidth'];if(_0x5f110a){const _0x575a6a=(_0x5f110a-(_0x3befc1-(0x2497+0xc*0x45+-0x27d2))*_0x411e6e[0x1f2d+-0x2ef*-0x1+-0x2*0x110e])/_0x3befc1;_0x3ab224(_0x575a6a);}}return __name(_0x1d80bd,'calculateRowHeight'),_0x1d80bd(),window['addEventListener'](eventListenerEvents['resize'],_0x1d80bd),()=>{window['removeEventListener'](eventListenerEvents['resize'],_0x1d80bd);};}__name(setupRowHeightListener,'setupRowHeightListener');function getProps(_0x1108da){let _0x2f63c8={};if(!_0x1108da)return _0x2f63c8;if(isObject(_0x1108da)&&propsProperty in _0x1108da&&isObject(_0x1108da['props'])){const _0x105d58=_0x1108da['props'];if(childrenProperty in _0x105d58&&isObject(_0x105d58['children'])){const _0x14ff80=_0x105d58['children'];if(propsProperty in _0x14ff80&&isObject(_0x14ff80['props']))return _0x2f63c8=_0x14ff80['props'],_0x2f63c8;}}return _0x2f63c8;}__name(getProps,'getProps');function createLayoutElement(_0x385db4,_0x501dd8,_0x1223ec){const _0x3041d9=getProps(_0x385db4),_0x3ed26d={'x':_0x3041d9['defaultX']??_0x501dd8%(0xa3f+0x2b+-0x3*0x377),'y':_0x3041d9['defaultY']??-0x24*0x101+-0xd*0x63+0x292b,'w':_0x3041d9['defaultWidth']??_0x3041d9['minWidth']??-0x21f+-0x11d9+0x13f9*0x1,'h':_0x3041d9['defaultHeight']??_0x3041d9['minHeight']??-0xfde+0x1c4b+-0x14*0x9f,'i':_0x3041d9['id']??_0x501dd8['toString'](),'maxH':_0x3041d9['maxHeight']??Math['round'](_0x1223ec*(-0x122a+0x4*-0x727+0x2ec8)/(-0x167*0x17+-0x200a+0x404e)),'minH':_0x3041d9['minHeight'],..._0x3041d9,'element':_0x385db4};return _0x3ed26d;}__name(createLayoutElement,'createLayoutElement');
 
-export { generateLayout, onLayoutChange, resizeEvent, setupRowHeightListener };
+export { childrenProperty, generateLayout, onLayoutChange, setupRowHeightListener };

package/packages/level2/fd-component-toolbox/fade-out-text/FadeOutText.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { VoidFuncNoParam } from "../../../fd-toolbox/functions/getter-setter-functions";
+export declare const flexRowReverseStyele = "flex-row-reverse";
 /**
  * Props of {@link FadeOutText}
  */
@@ -24,18 +25,17 @@ export interface FadeOutTextProps {
  *
  * @example
  * ```tsx
- * function MyComponent() {
- *   return (
- *     <FadeOutText
- *       bgColor="bg-transparent"
- *       rightAlign={true}
- *       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
- *     </FadeOutText>
- *   );
- * }
+    function MyComponent() {
+        return (
+            <FadeOutText
+                rightAlign={true}
+                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
+            </FadeOutText>
+        );
+    }
  * ```
  */
 export declare function FadeOutText({ children, className, id, rightAlign, shouldHideTooltip, onTooltipClick, tooltipContent, ref, }: FadeOutTextProps): import("react").JSX.Element;

package/packages/level2/fd-component-toolbox/fade-out-text/FadeOutText.funcs.js

@@ -1,4 +1,4 @@
 'use strict';
-var __defProp=Object['defineProperty'],__name=(_0x54406b,_0x4b2d2f)=>__defProp(_0x54406b,'name',{'value':_0x4b2d2f,'configurable':!![]});function checkFadeoutVisibility(_0x54c906,_0x3c0f3e){if(document['body']['getAttribute']('data-scroll-locked')==='2')return;_0x54c906(_0x3c0f3e?_0x3c0f3e['offsetWidth']<_0x3c0f3e['scrollWidth']:![]);}__name(checkFadeoutVisibility,'checkFadeoutVisibility');
+var __defProp=Object['defineProperty'],__name=(_0x2e29c8,_0x4118a1)=>__defProp(_0x2e29c8,'name',{'value':_0x4118a1,'configurable':!![]});function checkFadeoutVisibility(_0x972a98,_0x718c6){if(document['body']['getAttribute']('data-scroll-locked')==='2')return;_0x972a98(_0x718c6?_0x718c6['offsetWidth']<_0x718c6['scrollWidth']:![]);}__name(checkFadeoutVisibility,'checkFadeoutVisibility');
 
 export { checkFadeoutVisibility };

package/packages/level2/fd-component-toolbox/fade-out-text/FadeOutText.js

@@ -11,6 +11,7 @@ var __name = (target, value) => __defProp(target, "name", {
   value,
   configurable: true
 });
+const flexRowReverseStyele = "flex-row-reverse";
 function FadeOutText({
   children,
   className,
@@ -26,7 +27,7 @@ function FadeOutText({
   useEffect(() => {
     checkFadeoutVisibility(setFadeoutVisible, valueBlockRef?.current ?? void 0);
   }, [children, valueBlockRef]);
-  const textAlignmentClass = rightAlign ? "flex-row-reverse" : "";
+  const textAlignmentClass = rightAlign ? flexRowReverseStyele : "";
   return /* @__PURE__ */jsx("div", {
     ref,
     className: "relative min-w-0 flex-1",
@@ -47,4 +48,4 @@ function FadeOutText({
 __name(FadeOutText, "FadeOutText");
 FadeOutText.displayName = "FadeOutText";
 
-export { FadeOutText };
+export { FadeOutText, flexRowReverseStyele };

package/packages/level2/fd-component-toolbox/form/Form.d.ts

@@ -44,11 +44,11 @@ export declare const FormItemContext: React.Context<FormItemContextValue>;
  * @example
  * ```tsx
  * function MyComponent() {
- *   const form = useForm({...});
+ *   const form = useForm();
  *
  *   return (
  *     <Form {...form}>
- *       ...
+ *          <input {...form.register("email")} />
  *     </Form>
  *   );
  * }

package/packages/level2/fd-component-toolbox/image-radio-group/ImageRadioGroup.js

@@ -8,7 +8,7 @@ import { Icon, iconNames } from '../icon/Icon.js';
 import { useState } from 'react';
 import { cn } from '../../../fd-toolbox/lib/utils.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { tooltipSides } from '../tooltip/tooltip-constants.js';
+import { commonPositions } from '../../../base-repo/constants/tools-constants.js';
 import { Image } from '../image/Image.js';
 import { ImageRadioGroupDialog } from './ImageRadioGroupDialog.js';
 
@@ -100,7 +100,7 @@ function ImageRadioGroupItem({
             }), /* @__PURE__ */jsx(Tooltip, {
               content: text,
               delayDuration: 100,
-              side: tooltipSides.bottom,
+              side: commonPositions.bottom,
               children: /* @__PURE__ */jsx("div", {
                 children: /* @__PURE__ */jsx(Icon, {
                   name: iconNames.questionMarkCircledIcon,

package/packages/level2/fd-component-toolbox/input/Input.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 import { VoidFunc, VoidFuncNoParam } from "../../../fd-toolbox/functions/getter-setter-functions";
 import { VariantProps } from "class-variance-authority";
 import type { ChangeEventType, FocusEventType } from "../../../fd-toolbox/types/react-types";
+import { booleanStringValues } from "@base-repo/constants/type-string-values";
+import { accessibilityAttributeNames, componentVariantNames } from "../../../fd-toolbox/constants/html-constants";
 /**
  * Props of {@link Input}
  */
@@ -44,10 +46,10 @@ export interface InputProps extends VariantProps<typeof inputVariants> {
     children?: ReactNode;
     /** Disables focusing behavior. */
     disableFocus?: boolean;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling";
+    [accessibilityAttributeNames.ariaInvalid]?: boolean | typeof booleanStringValues.false | typeof booleanStringValues.true | "grammar" | "spelling";
     id?: string;
 }
-export type InputVariants = "bordered" | "float" | undefined;
+export type InputVariants = typeof componentVariantNames.bordered | typeof componentVariantNames.float | undefined;
 /**
  * Using {@link https:/cva.style/docs/getting-started/variants class-variance-authority}
  */
@@ -61,17 +63,34 @@ export declare const inputVariants: (props?: {
  *
  * @example
  * ```tsx
- *  <FormField render={({ field }) => (
- *          ...
- *          <Input {...field} type="text" label="Label" placeholder="Placeholder" showClearIcon={true}/>
- *          ...
- *      )}
- * />
+    function MyComponent() {
+        const form = useForm<FormValues>({
+            defaultValues: {
+                search: "",
+            },
+        });
+
+        return (
+            <FormField
+                control={form.control}
+                name="search"
+                render={({ field }) => (
+                    <Input
+                        {...field}
+                        type="text"
+                        label="Label"
+                        placeholder="Placeholder"
+                        showClearIcon={true}
+                    />
+                )}
+            />
+        );
+    }
  * ```
  */
-export declare function Input({ className, inputId, showClearIcon, value, onChange, onClear, onBlur, label, skipAnimationOnce, variant, children: icons, disableFocus, ref, defaultValue, disabled, "aria-invalid": ariaInvalid, readOnly, required, placeholder, onClick, style, onChangeCapture, min, max, maxLength, onFocus, type, id, }: InputProps & {
+export declare function Input({ className, inputId, showClearIcon, value, onChange, onClear, onBlur, label, skipAnimationOnce, variant, children: icons, disableFocus, ref, defaultValue, disabled, [accessibilityAttributeNames.ariaInvalid]: ariaInvalid, readOnly, required, placeholder, onClick, style, onChangeCapture, min, max, maxLength, onFocus, type, id, }: InputProps & {
     ref?: React.Ref<HTMLInputElement>;
 }): import("react").JSX.Element;
 export declare namespace Input {
-    var displayName: string;
+    var displayName: "Input";
 }

package/packages/level2/fd-component-toolbox/input/Input.funcs.js

@@ -1,4 +1,4 @@
 'use strict';
-var __defProp=Object['defineProperty'],__name=(_0x217199,_0x2c1f3b)=>__defProp(_0x217199,'name',{'value':_0x2c1f3b,'configurable':!![]});function AddClass(_0xeb4ecb){_0xeb4ecb(!![]);}__name(AddClass,'AddClass');function resetValue(_0x34cb0e){_0x34cb0e('');}__name(resetValue,'resetValue');function handleInputChange(_0x2d7b54,_0x152858){_0x152858(_0x2d7b54['target']['value']);}__name(handleInputChange,'handleInputChange');function onInputChange(_0x2bd39a,_0x129966,_0x5ec645){_0x129966(_0x2bd39a['target']['value']),_0x5ec645?.(_0x2bd39a['target']['value']);}__name(onInputChange,'onInputChange');function onClearInput(_0xf825d9,_0x4baf0f,_0x5e0ecc,_0x57186d){_0xf825d9(''),_0x4baf0f(![]),_0x5e0ecc?.(''),_0x57186d?.();}__name(onClearInput,'onClearInput');function onInputBlur(_0x19b334,_0x2d7121,_0x2eb7e2){_0x2d7121(![]),_0x2eb7e2?.(_0x19b334['target']['value'],_0x19b334);}__name(onInputBlur,'onInputBlur');function onInputFocus(_0x41dfd5,_0xfe0966,_0x53df40){!_0xfe0966&&_0x41dfd5(!![]),_0x53df40?.();}__name(onInputFocus,'onInputFocus');
+var __defProp=Object['defineProperty'],__name=(_0x4b808e,_0x21db2f)=>__defProp(_0x4b808e,'name',{'value':_0x21db2f,'configurable':!![]});function AddClass(_0x285009){_0x285009(!![]);}__name(AddClass,'AddClass');function resetValue(_0xf949e3){_0xf949e3('');}__name(resetValue,'resetValue');function handleInputChange(_0xb83414,_0x456e27){_0x456e27(_0xb83414['target']['value']);}__name(handleInputChange,'handleInputChange');function onInputChange(_0x3587de,_0x3f0a76,_0x319590){_0x3f0a76(_0x3587de['target']['value']),_0x319590?.(_0x3587de['target']['value']);}__name(onInputChange,'onInputChange');function onClearInput(_0x3da323,_0x3c0513,_0xc8921c,_0x4c7fe0){_0x3da323(''),_0x3c0513(![]),_0xc8921c?.(''),_0x4c7fe0?.();}__name(onClearInput,'onClearInput');function onInputBlur(_0x3697e3,_0x4b5701,_0x4745a4){_0x4b5701(![]),_0x4745a4?.(_0x3697e3['target']['value'],_0x3697e3);}__name(onInputBlur,'onInputBlur');function onInputFocus(_0xb96617,_0x1f304d,_0x6b2388){!_0x1f304d&&_0xb96617(!![]),_0x6b2388?.();}__name(onInputFocus,'onInputFocus');
 
 export { AddClass, handleInputChange, onClearInput, onInputBlur, onInputChange, onInputFocus, resetValue };

package/packages/level2/fd-component-toolbox/input/Input.js

@@ -10,6 +10,9 @@ import { cva } from 'class-variance-authority';
 import { onInputBlur, onInputFocus, onInputChange, onClearInput } from './Input.funcs.js';
 import { elementSuffixes } from '../../../fd-toolbox/constants/element-suffixes.js';
 import { useEmptyRef } from '../../../fd-toolbox/hooks/use-empty-ref.js';
+import { booleanStringValues } from '../../../base-repo/constants/type-string-values.js';
+import { componentVariantNames, accessibilityAttributeNames } from '../../../fd-toolbox/constants/html-constants.js';
+import { rootLayoutMetadata } from '../../../base-repo/app-constants/system-constants.js';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
@@ -24,7 +27,7 @@ const inputVariants = cva("border-transparent transition", {
     }
   },
   defaultVariants: {
-    variant: "float"
+    variant: componentVariantNames.float
   }
 });
 function Input({
@@ -43,7 +46,7 @@ function Input({
   ref,
   defaultValue,
   disabled,
-  "aria-invalid": ariaInvalid,
+  [accessibilityAttributeNames.ariaInvalid]: ariaInvalid,
   readOnly,
   required,
   placeholder,
@@ -57,7 +60,7 @@ function Input({
   type,
   id
 }) {
-  const error = !!ariaInvalid && ariaInvalid !== "false";
+  const error = !!ariaInvalid && ariaInvalid !== booleanStringValues.false;
   const [isInFocus, setIsInFocus] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const iconsBlockRef = useEmptyRef();
@@ -98,9 +101,9 @@ function Input({
       children: [!disabled && showClearIcon && value && (() => {
         const baseClasses = "w-4 transition-[transform,opacity]";
         const positionClasses = icons ? "mx-2 translate-y-0" : "absolute right-2 top-1/2 -translate-y-1/2";
-        const visibilityClasses = (variant ?? "float") === "float" && "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100";
+        const visibilityClasses = (variant ?? componentVariantNames.float) === componentVariantNames.float && "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100";
         return /* @__PURE__ */jsx(Button, {
-          variant: "icon",
+          variant: rootLayoutMetadata.icon,
           size: "icon",
           type: "button",
           onClick: () => onClearInput(setInputValue, setIsInFocus, onChange, onClear),
@@ -118,7 +121,7 @@ function Input({
         shouldAnimate: shouldLabelAnimate,
         errorStyle: error,
         skipAnimationOnce,
-        variant: variant ?? "float"
+        variant: variant ?? componentVariantNames.float
       }), icons && /* @__PURE__ */jsx("div", {
         id: id + elementSuffixes.edit,
         ref: iconsBlockRef,
@@ -129,6 +132,6 @@ function Input({
   });
 }
 __name(Input, "Input");
-Input.displayName = "Input";
+Input.displayName = elementSuffixes.input;
 
 export { Input, inputVariants };

package/packages/level2/fd-component-toolbox/label/Label.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type VariantProps } from "class-variance-authority";
+import { htmlTags } from "@base-repo/constants/html-element-names";
 /**
  * Using {@link https:/cva.style/docs/getting-started/variants class-variance-authority}
  */
@@ -9,10 +10,10 @@ declare const labelVariants: (props?: import("class-variance-authority/types").C
  *
  * Based on {@link https:/ui.shadcn.com/docs/components/label Label}
  */
-declare function Label({ className, ref, ...props }: React.ComponentPropsWithoutRef<"label"> & VariantProps<typeof labelVariants> & {
+declare function Label({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof htmlTags.label> & VariantProps<typeof labelVariants> & {
     ref?: React.Ref<HTMLLabelElement>;
 }): React.JSX.Element;
 declare namespace Label {
-    var displayName: string;
+    var displayName: "Label";
 }
 export { Label };

package/packages/level2/fd-component-toolbox/label/Label.js

@@ -3,13 +3,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../fd-toolbox/lib/utils.js';
+import { labelClassNames, labelDisplayNames } from './label-constants.js';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
   value,
   configurable: true
 });
-const labelVariants = cva("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const labelVariants = cva(labelClassNames.text);
 function Label({
   className,
   ref,
@@ -22,6 +23,6 @@ function Label({
   });
 }
 __name(Label, "Label");
-Label.displayName = "Label";
+Label.displayName = labelDisplayNames.label;
 
 export { Label };

package/packages/level2/fd-component-toolbox/label/label-constants.d.ts

@@ -0,0 +1,6 @@
+export declare const labelClassNames: {
+    readonly text: "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+};
+export declare const labelDisplayNames: {
+    readonly label: "Label";
+};

package/packages/level2/fd-component-toolbox/label/label-constants.js

@@ -0,0 +1,4 @@
+'use strict';
+const labelClassNames={'text':'text-sm\x20leading-none\x20font-medium\x20peer-disabled:cursor-not-allowed\x20peer-disabled:opacity-70'};const labelDisplayNames={'label':'Label'};
+
+export { labelClassNames, labelDisplayNames };

package/packages/level2/fd-component-toolbox/list/list-item/ListItem.funcs.js

@@ -1,4 +1,6 @@
 'use strict';
-var __defProp=Object['defineProperty'],__name=(_0x30139a,_0x1ebd51)=>__defProp(_0x30139a,'name',{'value':_0x1ebd51,'configurable':!![]});function setListItemTextOverflowing(_0x3d39ec,_0x37b36a,_0x254dfd,_0x16334f){_0x16334f&&_0x254dfd(_0x3d39ec>_0x37b36a);}__name(setListItemTextOverflowing,'setListItemTextOverflowing');function scrollListItemIntoView(_0x1192c7){_0x1192c7['scrollIntoView']({'behavior':'instant','block':'nearest'});}__name(scrollListItemIntoView,'scrollListItemIntoView');function onChangeContainer(_0x234723,_0x27225b){if(_0x234723&&_0x27225b)scrollListItemIntoView(_0x234723);}__name(onChangeContainer,'onChangeContainer');
+import { scrollAlignmentValues } from '../../../../fd-toolbox/constants/scroll-position-constants.js';
+
+var __defProp=Object['defineProperty'],__name=(_0x751b86,_0xfa8f1b)=>__defProp(_0x751b86,'name',{'value':_0xfa8f1b,'configurable':!![]});function setListItemTextOverflowing(_0x31c8c0,_0x14f3d5,_0x1c98f9,_0x37bd11){_0x37bd11&&_0x1c98f9(_0x31c8c0>_0x14f3d5);}__name(setListItemTextOverflowing,'setListItemTextOverflowing');function scrollListItemIntoView(_0x31f1b2){_0x31f1b2['scrollIntoView']({'behavior':'instant','block':scrollAlignmentValues['nearest']});}__name(scrollListItemIntoView,'scrollListItemIntoView');function onChangeContainer(_0x40c95b,_0x1f9468){if(_0x40c95b&&_0x1f9468)scrollListItemIntoView(_0x40c95b);}__name(onChangeContainer,'onChangeContainer');
 
 export { onChangeContainer, scrollListItemIntoView, setListItemTextOverflowing };

package/packages/level2/fd-component-toolbox/list/list-item/ListItem.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn } from '../../../../fd-toolbox/lib/utils.js';
 import { scrollListItemIntoView, setListItemTextOverflowing } from './ListItem.funcs.js';
 import { useState, useEffect } from 'react';
-import { tooltipSides } from '../../tooltip/tooltip-constants.js';
+import { commonPositions } from '../../../../base-repo/constants/tools-constants.js';
 import { Tooltip } from '../../tooltip/Tooltip.js';
 import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
 
@@ -34,7 +34,7 @@ function ListItem({
   return /* @__PURE__ */jsx(Tooltip, {
     className: "text-popover ml-2 max-w-60 rounded p-2 text-pretty shadow",
     disabled: !isTextOverflowing,
-    side: tooltipSides.right,
+    side: commonPositions.right,
     content: children,
     arrow: true,
     children: /* @__PURE__ */jsxs("li", {

package/packages/level2/fd-component-toolbox/markdown/Markdown.funcs.js

@@ -1,6 +1,6 @@
 'use strict';
 import { renderMarkdown } from '../../../fd-toolbox/html/markdown-renderer.js';
 
-var __defProp=Object['defineProperty'],__name=(_0x4a4d03,_0x26dd14)=>__defProp(_0x4a4d03,'name',{'value':_0x26dd14,'configurable':!![]});function renderPreview(_0x594990,_0x1dc66e){const _0x146350=renderMarkdown(_0x594990)['markdown']['replace'](/<\/?[^>]+(>|$)/g,'');_0x1dc66e(_0x146350);}__name(renderPreview,'renderPreview');function onValueChange(_0x142838,_0x1ce438,_0x304cde){_0x1ce438(_0x142838),_0x304cde?.(_0x142838);}__name(onValueChange,'onValueChange');function getPreviewContentId(_0x5d1ee2){return _0x5d1ee2+'Preview';}__name(getPreviewContentId,'getPreviewContentId');
+var __defProp=Object['defineProperty'],__name=(_0x423b6b,_0x38c8b9)=>__defProp(_0x423b6b,'name',{'value':_0x38c8b9,'configurable':!![]});function renderPreview(_0x143af6,_0x264ed7){const _0x787422=renderMarkdown(_0x143af6)['markdown']['replace'](/<\/?[^>]+(>|$)/g,'');_0x264ed7(_0x787422);}__name(renderPreview,'renderPreview');function onValueChange(_0x3b663a,_0x5eea27,_0x24e866){_0x5eea27(_0x3b663a),_0x24e866?.(_0x3b663a);}__name(onValueChange,'onValueChange');function getPreviewContentId(_0x55091a){return _0x55091a+'Preview';}__name(getPreviewContentId,'getPreviewContentId');
 
 export { getPreviewContentId, onValueChange, renderPreview };

package/packages/level2/fd-component-toolbox/markdown/Markdown.js

@@ -11,7 +11,8 @@ import { cva } from 'class-variance-authority';
 import { parseMarkdown } from './markdown-parser.js';
 import { markdownSuffixes } from '../../../fd-toolbox/constants/element-suffixes.js';
 import { onTextAreaBlur } from '../textarea/TextArea.funcs.js';
-import _0xf93c48 from 'lodash.debounce';
+import _0xf89671 from 'lodash.debounce';
+import { componentVariantNames } from '../../../fd-toolbox/constants/html-constants.js';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
@@ -26,7 +27,7 @@ const markdownVariants = cva("relative z-0 border-b", {
     }
   },
   defaultVariants: {
-    variant: "float"
+    variant: componentVariantNames.float
   }
 });
 function Markdown(t0) {
@@ -57,7 +58,7 @@ function Markdown(t0) {
   const [isInFocus, setIsInFocus] = useState(false);
   let t2;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = _0xf93c48(async val => {
+    t2 = _0xf89671(async val => {
       const result = await parseMarkdown(val);
       setPreviewContent(result);
     }, 500);
@@ -162,7 +163,7 @@ function Markdown(t0) {
           shouldAnimate: !!value || isInFocus,
           skipAnimationOnce,
           className: cn("top-4 left-0 max-w-full truncate px-0 transition-transform", variant === "bordered" ? (!!value || isInFocus) && "!-translate-y-6" : "top-2"),
-          variant: variant ?? "float"
+          variant: variant ?? componentVariantNames.float
         }), jsx("div", {
           className: "absolute top-2 right-0",
           onClick: t11,

package/packages/level2/fd-component-toolbox/markdown/markdown-parser.js

@@ -5,13 +5,15 @@ import { apiPathNames } from '../../../fd-toolbox/api/api-path-names.js';
 import { logStringError } from '../../../fd-toolbox/logging/loggers.js';
 import { isNullOrUndefined } from '../../../fd-toolbox/functions/value-checking-functions.js';
 import { apiErrorMessages } from '../../../fd-toolbox/constants/api-error-constants.js';
+import { htmlTags } from '../../../base-repo/constants/html-element-names.js';
+import { commonProperties } from '../../../base-repo/constants/common-strings.js';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
   value,
   configurable: true
 });
-const allowedTags = /* @__PURE__ */new Set(["p", "strong", "em", "del", "code", "h1", "h2", "h3", "h4", "h5", "h6", "li", "ol", "ul", "a", "blockquote", "pre", "code", "hr"]);
+const allowedTags = /* @__PURE__ */new Set(["p", "strong", "em", "del", "h1", "h2", htmlTags.h3, "h4", "h5", "h6", "li", "ol", "ul", htmlTags.a, "blockquote", "pre", commonProperties.code, "hr"]);
 async function markdownToHtml(markdown) {
   const response = await apiPost(apiPathNames.markdown, {
     markdown
@@ -51,7 +53,7 @@ function validateHtml(nodes) {
         key: result.length
       }));
     } else if (node instanceof HTMLElement) {
-      const dummy = document.createElement("div");
+      const dummy = document.createElement(htmlTags.div);
       dummy.appendChild(node);
       result.push(dummy.textContent);
     }

package/packages/level2/fd-component-toolbox/multiselect/Multiselect.d.ts

@@ -61,7 +61,7 @@ export type MultiselectInputProps = {
  *     const [selectedValues, setSelectedValues] = useState<string[]>([]);
  *
  *     return (
- *         <Multiselect
+ *         <MultiSelect
  *             values={selectedValues}
  *             onValuesChange={setSelectedValues}
  *             displayValues={new Map([["option1", "Option 1"], ["option2", "Option 2"]])}
@@ -70,7 +70,7 @@ export type MultiselectInputProps = {
  *             variant="float"
  *         >
  *             ...
- *         </Multiselect>
+ *         </MultiSelect>
  *     );
  * }
  * ```