se-design 1.0.75 → 1.0.76-dev1

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n  label: string;\n  value: string;\n  id: string | number;\n  [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: ChipType) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: ChipType[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n  automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null,\n    automationId = ''\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: ChipType) => {\n    setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip\n                  key={chip?.value}\n                  label={chip?.label}\n                  icon=\"close\"\n                  onIconClick={() => removeChip(chip)}\n                />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":"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"}
+{"version":3,"file":"index39.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' | 'textarea';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\ntype NativeTextareaProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\n\ntype CommonInputProps = {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  tag?: InputTag;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n  automationId?: string;\n  id?: string;\n  /**\n   * Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this input.\n   * Useful for external labels outside the Input component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this input (hints, helper text, etc.).\n   * Will be merged with internal error/counter IDs.\n   */\n  ariaDescribedBy?: string;\n};\n\n/**\n * Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);\n\nexport function Input({\n  value,\n  onChange,\n  onBlur,\n  onFocus,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle,\n  automationId = '',\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ...nativeProps\n}: InputProps) {\n  const Element: InputTag = tag || 'input';\n\n  const inputId = useStableId(id, 'se-input');\n  const errorId = `${inputId}-error`;\n  const countId = `${inputId}-count`;\n\n  const describedBy = mergeIds(\n    error && errorMessage ? errorId : undefined,\n    maxLength ? countId : undefined,\n    ariaDescribedBy\n  );\n\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy: describedBy\n  });\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    onFocus?.(e);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    const nextValue = e.target.value;\n    onChange(nextValue);\n  };\n\n  const inputPropsBase = {\n    ...(nativeProps as Record<string, unknown>),\n    id: inputId,\n    value,\n    onChange: handleChange,\n    onBlur,\n    onFocus: handleFocus,\n    disabled,\n    className: `${error ? 'input-container-error' : 'input-container-default'} ${\n      disabled ? 'input-container-disabled' : ''\n    }`,\n    maxLength: maxLength ?? undefined,\n    placeholder: placeholder,\n    style: inputStyle,\n    'aria-invalid': error ? 'true' : undefined,\n    ...accessibleNameProps\n  };\n\n  return (\n    <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n      {label && (\n        <label\n          className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          htmlFor={inputId}\n        >\n          {label}\n        </label>\n      )}\n      {React.createElement(Element, inputPropsBase)}\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n          {error && errorMessage && (\n            <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n              <span>{value?.length + '/' + maxLength}</span>\n            </div>\n          )}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;AACrF,YAAMC,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,IACpB;AAAA,IAOE3B,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,IACb;AAAA,IAcExB,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;AAGL,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EAAAA,GACrEJ,KACCwB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,EAAAA,GAERX,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,MACT4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EAAA,GACjGG,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,EAAA,GACjE7B,CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAA,GACpEC,gBAAAA,EAAAC,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}

package/dist/index4.js

@@ -1,46 +1,106 @@
-import e, { useRef as y } from "react";
-import { Button as C } from "./index3.js";
-const E = ({
-  onFileSelect: c,
-  accept: r,
-  multiple: f = !1,
-  buttonLabel: s,
-  buttonType: u = "primary",
-  buttonSize: m = "md",
-  disabled: t = !1,
-  className: p = "",
-  triggerElement: l,
-  automationId: d = ""
-}) => {
-  const n = y(null), a = () => {
-    n.current?.click();
-  }, k = (i) => {
-    const o = i.target.files;
-    o && (c(o), i.target.value = "");
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: p
-  }, /* @__PURE__ */ e.createElement("input", {
-    type: "file",
-    ref: n,
-    onChange: k,
-    accept: r,
-    multiple: f,
-    style: {
-      display: "none"
+import r, { forwardRef as I } from "react";
+import { getA11yNameAttributes as R } from "./index78.js";
+import { useAccessiblePress as z } from "./index67.js";
+import "./index72.js";
+import { Icon as p } from "./index6.js";
+/* empty css        */
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(e) {
+    for (var n = 1; n < arguments.length; n++) {
+      var s = arguments[n];
+      for (var t in s) ({}).hasOwnProperty.call(s, t) && (e[t] = s[t]);
     }
-  }), l ? /* @__PURE__ */ e.createElement("div", {
-    onClick: t ? void 0 : a
-  }, l) : /* @__PURE__ */ e.createElement(C, {
-    type: u,
-    size: m,
-    label: s,
-    onClick: a,
-    disabled: t,
-    "data-automation-id": d
-  }));
-};
+    return e;
+  }, c.apply(null, arguments);
+}
+const a = "focus-outline", D = {
+  primary: "primary-btn disabled-btn pointer-events-none cursor-not-allowed",
+  secondary: "secondary-btn disabled-btn pointer-events-none cursor-not-allowed",
+  ghost: "ghost-btn disabled-btn pointer-events-none cursor-not-allowed",
+  link: "link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed",
+  unstyled: "unstyled-btn disabled-btn pointer-events-none cursor-not-allowed",
+  sm: "py-1 px-3 small",
+  // padding: 4px, 12px
+  md: "py-2 px-3 medium",
+  // padding: 8px, 12px
+  lg: "py-3 px-4 large"
+  // padding: 12px, 16px
+}, b = {
+  primary: `primary-btn ${a}`,
+  secondary: `secondary-btn ${a}`,
+  ghost: `ghost-btn ${a}`,
+  link: `link-btn w-fit ${a}`,
+  unstyled: `unstyled-btn ${a}`,
+  sm: "py-1 px-3 small",
+  // padding: 4px, 12px
+  md: "py-2 px-3 medium",
+  // padding: 8px, 12px
+  lg: "py-3 px-4 large"
+  // padding: 12px, 16px
+}, U = {
+  blue: "theme-blue",
+  red: "theme-red",
+  yellow: "theme-yellow",
+  green: "theme-green",
+  ai: "theme-ai",
+  white: "theme-white"
+}, q = /* @__PURE__ */ I(({
+  type: e = "primary",
+  theme: n = "blue",
+  size: s = "md",
+  label: t = "",
+  iconPosition: u = "left",
+  disabled: y = !1,
+  loading: o = !1,
+  className: f = "",
+  iconProps: i = {
+    name: ""
+  },
+  automationId: g = "",
+  autoFocus: h = !1,
+  ariaLabel: w,
+  ariaLabelledBy: N,
+  ariaDescribedBy: v,
+  isPressed: x,
+  onClick: k,
+  onKeyboardActivate: C,
+  ...E
+}, $) => {
+  const m = e === "unstyled", {
+    pressProps: P,
+    isDisabled: d
+  } = z({
+    disabled: y,
+    loading: o,
+    isNative: !0,
+    // native <button> => hook does NOT add Enter/Space onKeyDown
+    pressed: x,
+    onClick: k,
+    onKeyboardActivate: C
+  }), j = !m && e !== "link" ? b[s] : "", A = m ? "" : U[n], B = d ? D[e] : b[e], l = i?.name ? {
+    ...i,
+    stroke: d ? "var(--color-gray-600)" : i.stroke
+  } : void 0, O = ["se-design-button", A, j, B, f, m ? "" : "rounded-[6px] inline-flex gap-1 items-center min-w-fit"].filter(Boolean).join(" "), _ = R({
+    ariaLabel: w,
+    ariaLabelledBy: N,
+    ariaDescribedBy: v
+  });
+  return /* @__PURE__ */ r.createElement("button", c({
+    ref: $,
+    type: "button",
+    className: O,
+    disabled: d,
+    autoFocus: h,
+    "data-automation-id": g
+  }, E, P, _), o && /* @__PURE__ */ r.createElement("div", {
+    "aria-hidden": "true",
+    className: "animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full"
+  }), !o && l?.name && u === "left" && /* @__PURE__ */ r.createElement(p, l), t && /* @__PURE__ */ r.createElement("span", {
+    className: "button-label [font-weight:inherit]"
+  }, t), !o && l?.name && u === "right" && /* @__PURE__ */ r.createElement(p, l));
+});
+q.displayName = "Button";
 export {
-  E as FilePicker
+  q as Button
 };
 //# sourceMappingURL=index4.js.map

package/dist/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/components/FilePicker/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface FilePickerProps {\n  /**\n   * Callback function when files are selected\n   */\n  onFileSelect: (files: FileList) => void;\n  /**\n   * Accepted file types (e.g., \".pdf,.doc,.docx\")\n   */\n  accept?: string;\n  /**\n   * Allow multiple file selection\n   */\n  multiple?: boolean;\n  /**\n   * Label for the button\n   */\n  buttonLabel: string;\n  /**\n   * Type of the button\n   */\n  buttonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n  /**\n   * Size of the button\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Custom trigger element (button, menu item, icon, etc.)\n   * If provided, buttonLabel, buttonType, and buttonSize will be ignored\n   */\n  triggerElement?: React.ReactNode;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n}\n\nexport const FilePicker: React.FC<FilePickerProps> = ({\n  onFileSelect,\n  accept,\n  multiple = false,\n  buttonLabel,\n  buttonType = 'primary',\n  buttonSize = 'md',\n  disabled = false,\n  className = '',\n  triggerElement,\n  automationId = '',\n}) => {\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleButtonClick = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files;\n    if (files) {\n      onFileSelect(files);\n      // Reset the input value to allow selecting the same file again\n      event.target.value = '';\n    }\n  };\n\n  return (\n    <div className={className}>\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        onChange={handleFileChange}\n        accept={accept}\n        multiple={multiple}\n        style={{ display: 'none' }}\n      />\n      {triggerElement ? (\n        <div onClick={disabled ? undefined : handleButtonClick}>\n          {triggerElement}\n        </div>\n      ) : (\n        <Button\n          type={buttonType}\n          size={buttonSize}\n          label={buttonLabel}\n          onClick={handleButtonClick}\n          disabled={disabled}\n          data-automation-id={automationId}\n        />\n      )}\n    </div>\n  );\n}; "],"names":["FilePicker","onFileSelect","accept","multiple","buttonLabel","buttonType","buttonSize","disabled","className","triggerElement","automationId","fileInputRef","useRef","handleButtonClick","current","click","handleFileChange","event","files","target","value","React","createElement","type","ref","onChange","style","display","onClick","undefined","Button","size","label"],"mappings":";;AA+CO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,cAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,aAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,YAAAA,IAAa;AAAA,EACbC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,gBAAAA;AAAAA,EACAC,cAAAA,IAAe;AACjB,MAAM;AACEC,QAAAA,IAAeC,EAAyB,IAAI,GAE5CC,IAAoBA,MAAM;AAC9BF,IAAAA,EAAaG,SAASC;EAAM,GAGxBC,IAAmBA,CAACC,MAA+C;AACjEC,UAAAA,IAAQD,EAAME,OAAOD;AAC3B,IAAIA,MACFjB,EAAaiB,CAAK,GAElBD,EAAME,OAAOC,QAAQ;AAAA,EACvB;AAIAC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKd,WAAAA;AAAAA,EAAAA,GACHc,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEC,MAAK;AAAA,IACLC,KAAKb;AAAAA,IACLc,UAAUT;AAAAA,IACVd,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAuB,OAAO;AAAA,MAAEC,SAAS;AAAA,IAAO;AAAA,EAC1B,CAAA,GACAlB,IACCY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,SAASrB,IAAWsB,SAAYhB;AAAAA,EAClCJ,GAAAA,CACE,IAELY,gBAAAA,EAAAC,cAACQ,GAAM;AAAA,IACLP,MAAMlB;AAAAA,IACN0B,MAAMzB;AAAAA,IACN0B,OAAO5B;AAAAA,IACPwB,SAASf;AAAAA,IACTN,UAAAA;AAAAA,IACA,sBAAoBG;AAAAA,EACrB,CAAA,CAEA;AAET;"}
+{"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}

package/dist/index40.js

@@ -1,37 +1,87 @@
-import e from "react";
+import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
+import { Icon as g } from "./index6.js";
+import { LabelChip as F } from "./index11.js";
+import { debounce as L } from "./index215.js";
 /* empty css         */
-const r = {
-  progressBarCtn: "flex items-center gap-2",
-  progressBar: "flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden",
-  progressBarProgress: "h-full rounded-[12px]",
-  stepsCount: "steps-count"
-}, p = ({
-  totalTasks: s = 0,
-  completedTasks: o = 0,
-  progressBarCtnClassName: n = "",
-  needPercentageCompleted: c = !0,
-  progressBarColor: t
-}) => {
-  const a = s > 0 ? o / s * 100 : 0;
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+function z(p) {
+  const {
+    disabled: v = !1,
+    placeholder: I = "Search",
+    debounceDuration: h = 500,
+    onInputChange: c = () => {
+    },
+    onSearchClear: N = () => {
+    },
+    onChipRemove: S = () => {
+    },
+    updateSearchString: o = "",
+    collapsible: f = !1,
+    width: k = "200px",
+    chips: s = [],
+    showSearchIcon: w = !0,
+    renderFilterComponent: b = null,
+    automationId: R = ""
+  } = p, [n, l] = d(""), [t, C] = d(!p?.collapsible), [i, E] = d(s || []), m = $(null);
+  r(() => {
+    t && m.current && setTimeout(() => m?.current?.focus(), 0);
+  }, [t]), r(() => {
+    o !== n && l(o);
+  }, [o]), r(() => {
+    E(s);
+  }, [s]);
+  const u = D(() => L(c, h), [c, h]);
+  r(() => () => {
+    u.cancel();
+  }, [u]);
+  const y = (e) => {
+    l(e), u(e);
+  }, B = () => {
+    l(""), c(""), N();
+  }, H = () => {
+    f && n?.trimEnd() === "" && C(!1);
+  }, _ = (e) => {
+    E(i.filter((V) => V?.id !== e?.id)), S(e);
+  }, x = i?.length > 0;
+  return /* @__PURE__ */ a.createElement("div", {
+    className: `se-search-box ${t ? "expand-box" : "shrink-box"}`,
     style: {
-      width: "100%"
-    }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBar
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBarProgress,
-    style: {
-      width: `${a}%`,
-      background: `${t || "linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)"}`,
-      transition: "width 0.4s ease-in-out"
-    }
-  })), c && /* @__PURE__ */ e.createElement("div", {
-    className: r.stepsCount
-  }, `${Math.round(a)}% completed`));
-};
+      width: k
+    },
+    "data-automation-id": R
+  }, t && /* @__PURE__ */ a.createElement("div", {
+    className: "search-box-container"
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: `chips-and-search-box-container${x ? " has-chips" : ""}`
+  }, x && i?.map((e) => /* @__PURE__ */ a.createElement(F, {
+    key: e?.value,
+    label: e?.label,
+    icon: "close",
+    onIconClick: () => _(e)
+  })), /* @__PURE__ */ a.createElement("div", {
+    className: "search-input-container"
+  }, w && /* @__PURE__ */ a.createElement(g, {
+    name: "search",
+    className: "search-icon img-wrap",
+    onClick: () => f && C((e) => !e)
+  }), /* @__PURE__ */ a.createElement("input", {
+    ref: m,
+    className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
+    id: "search_bar",
+    type: "text",
+    placeholder: I,
+    onChange: (e) => y(e.target.value),
+    value: n,
+    disabled: v,
+    onBlur: H
+  }), !!n && /* @__PURE__ */ a.createElement(g, {
+    name: "close",
+    className: "cross-icon img-wrap",
+    onClick: B
+  }))), b && /* @__PURE__ */ a.createElement("div", {
+    className: "filter-component-container"
+  }, b())));
+}
 export {
-  p as ProgressBar
+  z as SearchBox
 };
 //# sourceMappingURL=index40.js.map

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAO;AAAA,EAAA,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IACd;AAAA,EACI,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}
+{"version":3,"file":"index40.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n  label: string;\n  value: string;\n  id: string | number;\n  [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: ChipType) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: ChipType[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n  automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null,\n    automationId = ''\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: ChipType) => {\n    setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip\n                  key={chip?.value}\n                  label={chip?.label}\n                  icon=\"close\"\n                  onIconClick={() => removeChip(chip)}\n                />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":"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"}

package/dist/index41.js

@@ -1,55 +1,37 @@
-import e, { useState as g, useRef as p } from "react";
-import { Icon as c } from "./index5.js";
-import { ProgressBar as f } from "./index40.js";
+import e from "react";
 /* empty css         */
 const r = {
-  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
-  accordionCtn: "flex items-center justify-between",
-  gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
-  icon: "transition-transform duration-300 cursor-pointer",
-  actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
-}, E = ({
-  widgetClassName: s = "",
-  actionItems: a = []
+  progressBarCtn: "flex items-center gap-2",
+  progressBar: "flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden",
+  progressBarProgress: "h-full rounded-[12px]",
+  stepsCount: "steps-count"
+}, p = ({
+  totalTasks: s = 0,
+  completedTasks: o = 0,
+  progressBarCtnClassName: n = "",
+  needPercentageCompleted: c = !0,
+  progressBarColor: t
 }) => {
-  const [n, l] = g(!1), o = p(null), i = () => {
-    l(!n);
-  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  const a = s > 0 ? o / s * 100 : 0;
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
+    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+    style: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.progressBar
   }, /* @__PURE__ */ e.createElement("div", {
-    className: r.accordionCtn
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: "title text-[var(--color-gray-900)]"
-  }, "Get Started"), /* @__PURE__ */ e.createElement(c, {
-    name: "chevron",
-    className: `${r.icon} ${n ? "rotate-180" : ""}`,
-    onClick: i
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(f, {
-    totalTasks: a.length,
-    completedTasks: a.filter((t) => t.isComplete).length,
-    progressBarCtnClassName: "get-started-progress-bar-ctn"
-  })), /* @__PURE__ */ e.createElement("div", {
-    ref: o,
-    className: r.gettingStartedWidgetContent,
+    className: r.progressBarProgress,
     style: {
-      maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
+      width: `${a}%`,
+      background: `${t || "linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)"}`,
+      transition: "width 0.4s ease-in-out"
     }
-  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
-    key: m,
-    className: r.actionItemCtn
-  }, /* @__PURE__ */ e.createElement(c, {
-    name: "checked-circle",
-    stroke: d(t.isComplete)
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
-    onClick: t?.handleActionItemClick
-  }, t.label)))));
+  })), c && /* @__PURE__ */ e.createElement("div", {
+    className: r.stepsCount
+  }, `${Math.round(a)}% completed`));
 };
 export {
-  E as GetStartedWidget,
-  E as default
+  p as ProgressBar
 };
 //# sourceMappingURL=index41.js.map

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const getIconStroke = (isComplete?: boolean) => {\n    if(isComplete) {\n      return \"var(--color-green-500)\"\n    }\n    return \"var(--color-gray-200)\"\n  }\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={\"checked-circle\"}  stroke={getIconStroke(item.isComplete)} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAAA,GAGrBI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAIPC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrES,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBc,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAkB,CAAA,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbgB,gBAAAA,EAAAA,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAQA,MAAAA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IACpE;AAAA,EAAA,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCW,gBAAAA,EAAAA,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index41.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAClF,SACEM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IAAA;AAAA,EACd,CACI,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}