se-design 1.0.81 → 1.0.83-dev.1

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}
+{"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex,\n      isKeyboardFocused\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? `suggestion-item-highlighted${isKeyboardFocused ? ' suggestion-item-keyboard-highlight' : ''}` : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","isKeyboardFocused","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}

package/dist/index46.js

@@ -1,9 +1,9 @@
 import t, { useState as h, useRef as f, useCallback as g, useEffect as _ } from "react";
 /* empty css         */
-import C from "./index229.js";
+import C from "./index232.js";
 import { Icon as M } from "./index6.js";
-import { useStableId as v } from "./index83.js";
-import { getA11yNameAttributes as T } from "./index78.js";
+import { useStableId as v } from "./index205.js";
+import { getA11yNameAttributes as T } from "./index81.js";
 import "./index72.js";
 import { useCombobox as le } from "./index68.js";
 function c() {

package/dist/index49.js

@@ -31,7 +31,7 @@ import { Popover as $ } from "./index19.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */
-import { TabButton as j } from "./index232.js";
+import { TabButton as j } from "./index235.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */

package/dist/index51.js

@@ -2,7 +2,7 @@ import r, { useState as S } from "react";
 import { Button as z } from "./index4.js";
 import { Icon as _ } from "./index6.js";
 import { Dropdown as te } from "./index25.js";
-import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index241.js";
+import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index244.js";
 /* empty css         */
 function T() {
   return T = Object.assign ? Object.assign.bind() : function(p) {

package/dist/index52.js

@@ -1,7 +1,7 @@
 import t from "react";
 import { Icon as W } from "./index6.js";
-import { useStableId as j } from "./index83.js";
-import { getA11yNameAttributes as q } from "./index78.js";
+import { useStableId as j } from "./index205.js";
+import { getA11yNameAttributes as q } from "./index81.js";
 import "./index72.js";
 /* empty css         */
 function U({

package/dist/index53.js

@@ -1,5 +1,5 @@
 import e, { useEffect as d } from "react";
-import { delay as m } from "./index242.js";
+import { delay as m } from "./index245.js";
 import { Icon as i } from "./index6.js";
 const g = (r) => {
   const {

package/dist/index55.js

@@ -60,8 +60,8 @@ const n = ({
   structure: e,
   className: d = "",
   animationDuration: s = 3,
-  baseColor: m = "var(--color-gray-600)",
-  highlightColor: i = "var(--color-gray-500)",
+  baseColor: m = "var(--color-gray-700)",
+  highlightColor: i = "var(--color-gray-600)",
   width: r,
   height: a
 }) => {

package/dist/index55.js.map

@@ -1 +1 @@
-{"version":3,"file":"index55.js","sources":["../src/components/ShimmerLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface ShimmerElement {\n  type: 'text' | 'rect' | 'rect-sm' | 'circle' | 'avatar' | 'image' | 'button';\n  width: number | string;\n  height: number | string;\n  borderRadius?: number | string;\n  margin?: string;\n  className?: string;\n  children?: ShimmerElement[];\n}\n\nexport interface ShimmerContainer {\n  type: 'container';\n  direction?: 'row' | 'column';\n  gap?: number | string;\n  padding?: string;\n  margin?: string;\n  alignItems?: string;\n  flex?: number | string;\n  className?: string;\n  children: (ShimmerElement | ShimmerContainer)[];\n}\n\nexport type ShimmerStructure = (ShimmerElement | ShimmerContainer)[];\n\nexport interface ShimmerLoaderProps {\n  structure: ShimmerStructure;\n  className?: string;\n  animationDuration?: number;\n  baseColor?: string;\n  highlightColor?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nconst ShimmerElementComponent: FC<{\n  element: ShimmerElement;\n  animationDuration: number;\n  baseColor: string;\n  highlightColor: string;\n}> = ({ element, animationDuration, baseColor, highlightColor }) => {\n  const style: React.CSSProperties = {\n    width: typeof element.width === 'number' ? `${element.width}px` : element.width,\n    height: typeof element.height === 'number' ? `${element.height}px` : element.height,\n    borderRadius: element.borderRadius\n      ? typeof element.borderRadius === 'number'\n        ? `${element.borderRadius}px`\n        : element.borderRadius\n      : undefined,\n    margin: element.margin,\n    '--shimmer-duration': `${animationDuration}s`,\n    '--shimmer-base-color': baseColor,\n    '--shimmer-highlight-color': highlightColor\n  } as React.CSSProperties;\n\n  const shimmerClass = `se-design-shimmer-element se-design-shimmer-${element.type}`;\n\n  return (\n    <div className={shimmerClass} style={style}>\n      {element.children &&\n        element.children.map((child, index) => (\n          <ShimmerElementComponent\n            key={index}\n            element={child}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n    </div>\n  );\n};\n\nconst ShimmerContainerComponent: FC<{\n  container: ShimmerContainer;\n  animationDuration: number;\n  baseColor: string;\n  highlightColor: string;\n}> = ({ container, animationDuration, baseColor, highlightColor }) => {\n  const style: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: container.direction || 'column',\n    gap: typeof container.gap === 'number' ? `${container.gap}px` : container.gap,\n    padding: container.padding,\n    margin: container.margin,\n    alignItems: container.alignItems,\n    flex: container.flex\n  };\n\n  return (\n    <div className={`se-design-shimmer-container ${container.className || ''}`} style={style}>\n      {container.children.map((element, index) =>\n        element.type === 'container' ? (\n          <ShimmerContainerComponent\n            key={index}\n            container={element}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ) : (\n          <ShimmerElementComponent\n            key={index}\n            element={element}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )\n      )}\n    </div>\n  );\n};\n\nexport const ShimmerLoader: FC<ShimmerLoaderProps> = ({\n  structure,\n  className = '',\n  animationDuration = 3,\n  baseColor = 'var(--color-gray-600)',\n  highlightColor = 'var(--color-gray-500)',\n  width,\n  height\n}) => {\n  const containerStyle: React.CSSProperties = {\n    width: width ? (typeof width === 'number' ? `${width}px` : width) : '100%',\n    height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',\n    '--shimmer-duration': `${animationDuration}s`,\n    '--shimmer-base-color': baseColor,\n    '--shimmer-highlight-color': highlightColor\n  } as React.CSSProperties;\n\n  return (\n    <div className={`se-design-shimmer-loader ${className}`} style={containerStyle}>\n      {structure.map((item, index) => {\n        if (item.type === 'container') {\n          return (\n            <ShimmerContainerComponent\n              key={index}\n              container={item}\n              animationDuration={animationDuration}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          );\n        } else {\n          return (\n            <ShimmerElementComponent\n              key={index}\n              element={item}\n              animationDuration={animationDuration}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          );\n        }\n      })}\n    </div>\n  );\n};\n\nexport default ShimmerLoader;\n"],"names":["ShimmerElementComponent","element","animationDuration","baseColor","highlightColor","style","width","height","borderRadius","undefined","margin","shimmerClass","type","React","createElement","className","children","map","child","index","key","ShimmerContainerComponent","container","display","flexDirection","direction","gap","padding","alignItems","flex","ShimmerLoader","structure","containerStyle","item"],"mappings":"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"}
+{"version":3,"file":"index55.js","sources":["../src/components/ShimmerLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface ShimmerElement {\n  type: 'text' | 'rect' | 'rect-sm' | 'circle' | 'avatar' | 'image' | 'button';\n  width: number | string;\n  height: number | string;\n  borderRadius?: number | string;\n  margin?: string;\n  className?: string;\n  children?: ShimmerElement[];\n}\n\nexport interface ShimmerContainer {\n  type: 'container';\n  direction?: 'row' | 'column';\n  gap?: number | string;\n  padding?: string;\n  margin?: string;\n  alignItems?: string;\n  flex?: number | string;\n  className?: string;\n  children: (ShimmerElement | ShimmerContainer)[];\n}\n\nexport type ShimmerStructure = (ShimmerElement | ShimmerContainer)[];\n\nexport interface ShimmerLoaderProps {\n  structure: ShimmerStructure;\n  className?: string;\n  animationDuration?: number;\n  baseColor?: string;\n  highlightColor?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nconst ShimmerElementComponent: FC<{\n  element: ShimmerElement;\n  animationDuration: number;\n  baseColor: string;\n  highlightColor: string;\n}> = ({ element, animationDuration, baseColor, highlightColor }) => {\n  const style: React.CSSProperties = {\n    width: typeof element.width === 'number' ? `${element.width}px` : element.width,\n    height: typeof element.height === 'number' ? `${element.height}px` : element.height,\n    borderRadius: element.borderRadius\n      ? typeof element.borderRadius === 'number'\n        ? `${element.borderRadius}px`\n        : element.borderRadius\n      : undefined,\n    margin: element.margin,\n    '--shimmer-duration': `${animationDuration}s`,\n    '--shimmer-base-color': baseColor,\n    '--shimmer-highlight-color': highlightColor\n  } as React.CSSProperties;\n\n  const shimmerClass = `se-design-shimmer-element se-design-shimmer-${element.type}`;\n\n  return (\n    <div className={shimmerClass} style={style}>\n      {element.children &&\n        element.children.map((child, index) => (\n          <ShimmerElementComponent\n            key={index}\n            element={child}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n    </div>\n  );\n};\n\nconst ShimmerContainerComponent: FC<{\n  container: ShimmerContainer;\n  animationDuration: number;\n  baseColor: string;\n  highlightColor: string;\n}> = ({ container, animationDuration, baseColor, highlightColor }) => {\n  const style: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: container.direction || 'column',\n    gap: typeof container.gap === 'number' ? `${container.gap}px` : container.gap,\n    padding: container.padding,\n    margin: container.margin,\n    alignItems: container.alignItems,\n    flex: container.flex\n  };\n\n  return (\n    <div className={`se-design-shimmer-container ${container.className || ''}`} style={style}>\n      {container.children.map((element, index) =>\n        element.type === 'container' ? (\n          <ShimmerContainerComponent\n            key={index}\n            container={element}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ) : (\n          <ShimmerElementComponent\n            key={index}\n            element={element}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )\n      )}\n    </div>\n  );\n};\n\nexport const ShimmerLoader: FC<ShimmerLoaderProps> = ({\n  structure,\n  className = '',\n  animationDuration = 3,\n  baseColor = 'var(--color-gray-700)',\n  highlightColor = 'var(--color-gray-600)',\n  width,\n  height\n}) => {\n  const containerStyle: React.CSSProperties = {\n    width: width ? (typeof width === 'number' ? `${width}px` : width) : '100%',\n    height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',\n    '--shimmer-duration': `${animationDuration}s`,\n    '--shimmer-base-color': baseColor,\n    '--shimmer-highlight-color': highlightColor\n  } as React.CSSProperties;\n\n  return (\n    <div className={`se-design-shimmer-loader ${className}`} style={containerStyle}>\n      {structure.map((item, index) => {\n        if (item.type === 'container') {\n          return (\n            <ShimmerContainerComponent\n              key={index}\n              container={item}\n              animationDuration={animationDuration}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          );\n        } else {\n          return (\n            <ShimmerElementComponent\n              key={index}\n              element={item}\n              animationDuration={animationDuration}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          );\n        }\n      })}\n    </div>\n  );\n};\n\nexport default ShimmerLoader;\n"],"names":["ShimmerElementComponent","element","animationDuration","baseColor","highlightColor","style","width","height","borderRadius","undefined","margin","shimmerClass","type","React","createElement","className","children","map","child","index","key","ShimmerContainerComponent","container","display","flexDirection","direction","gap","padding","alignItems","flex","ShimmerLoader","structure","containerStyle","item"],"mappings":"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"}

package/dist/index57.js

@@ -1,5 +1,5 @@
 import p, { useState as A, useRef as O, useEffect as j } from "react";
-import { useStableId as W } from "./index83.js";
+import { useStableId as W } from "./index205.js";
 /* empty css         */
 const M = ({
   length: n = 6,