@new-black/lyra 0.1.8 → 0.1.9

package/dist/lyra18.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lyra18.cjs","sources":["../src/components/inputs/select/select.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode, Ref } from \"react\";\nimport {\n  Button as AriaButton,\n  Label,\n  Select as AriaSelect,\n  SelectContext,\n  SelectProps as AriaSelectProps,\n  SelectValue,\n  useContextProps,\n} from \"react-aria-components\";\n\nimport { twMerge } from \"tailwind-merge\";\n\nimport { useIsMobileDevice } from \"../../..\";\nimport { cx, VariantProps } from \"../../../utils/class-variance-authority\";\nimport { ListBox } from \"../../list-box\";\nimport { Popover } from \"../../overlays/popover\";\nimport { SvgIcon } from \"../../svg-icon\";\nimport { Text } from \"../../text\";\nimport {\n  sharedInputFieldStyles,\n  sharedInputFieldWrapperStyles,\n  sharedInputHintStyles,\n  sharedInputlabelStyles,\n} from \"..\";\n\nexport type SelectProps<T extends object> = Omit<AriaSelectProps<T>, \"children\"> &\n  VariantProps<typeof sharedInputFieldWrapperStyles> &\n  VariantProps<typeof sharedInputFieldStyles> & {\n    label?: string;\n    hint?: string;\n    description?: string;\n    errorMessage?: string;\n    children: ReactNode | ((item: T) => ReactNode);\n    screenWidthMobileBreakpoint?: number;\n  };\n\nfunction _Select<T extends object>(\n  {\n    label,\n    hint,\n    size = \"medium\",\n    fullWidth,\n    validationState,\n    isRequired,\n    description,\n    errorMessage,\n    screenWidthMobileBreakpoint = 640,\n    ...props\n  }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SelectContext);\n\n  const isMobileDevice = useIsMobileDevice(screenWidthMobileBreakpoint);\n\n  return (\n    <AriaSelect\n      {...props}\n      ref={ref}\n      className={twMerge(sharedInputFieldWrapperStyles({ fullWidth }))}\n    >\n      {(state) => {\n        return (\n          <>\n            <div\n              className={cx(\n                \"mx-1 flex items-center gap-3\",\n                label ? \"justify-between\" : \"justify-end\",\n              )}\n            >\n              {label ? (\n                <Label\n                  className={sharedInputlabelStyles()}\n                  style={{ fontFamily: \"var(--input-label-font-family)\" }}\n                >\n                  {label}\n                  {isRequired && <span className=\"text-danger\">{\" *\"}</span>}\n                </Label>\n              ) : null}\n              {hint ? (\n                <span\n                  className={sharedInputHintStyles()}\n                  style={{ fontFamily: \"var(--input-hint-font-family)\" }}\n                >\n                  {hint}\n                </span>\n              ) : null}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <AriaButton\n                className={({ isDisabled, isFocusVisible, isHovered }) =>\n                  twMerge(\n                    sharedInputFieldStyles({\n                      isDisabled,\n                      isHovered,\n                      isFocused: isFocusVisible,\n                      fullWidth,\n                      size,\n                      validationState,\n                      className: \"w-full items-center justify-between gap-3\",\n                    }),\n                  )\n                }\n              >\n                <SelectValue className=\"select-none truncate\" />\n                <SvgIcon\n                  name=\"chevron-down\"\n                  aria-hidden=\"true\"\n                  className={cx(\n                    size === \"large\" && \"h-5 w-5\",\n                    size === \"medium\" && \"h-4 w-4\",\n                    size === \"small\" && \"h-3 w-3\",\n                    state.isOpen ? \"rotate-180\" : \"rotate-0\",\n                    \"transition duration-200 ease-out\",\n                  )}\n                />\n              </AriaButton>\n            </div>\n            {description && (\n              <Text\n                className=\"ms-1 mt-1.5\"\n                variant=\"body-small\"\n                color=\"secondary\"\n                slot=\"description\"\n              >\n                {description}\n              </Text>\n            )}\n            {errorMessage && (\n              <Text\n                className=\"ms-1 mt-1.5\"\n                variant=\"body-small\"\n                color=\"accent-danger\"\n                slot=\"errorMessage\"\n              >\n                {errorMessage}\n              </Text>\n            )}\n            <Popover showPopoverInBottomDrawerOnSmallScreens>\n              {isMobileDevice && label && (\n                <div className=\"p-4 pb-2\">\n                  <Text variant=\"body-medium\">{label}</Text>\n                </div>\n              )}\n              <ListBox\n                className=\"outline-none\"\n                aria-label={label ?? `options on select ${props.name}`}\n                selectionMode=\"single\"\n              >\n                {props.children}\n              </ListBox>\n            </Popover>\n          </>\n        );\n      }}\n    </AriaSelect>\n  );\n}\n\nexport const Select = forwardRef(_Select) as <T extends object>(\n  props: SelectProps<T> & { ref?: Ref<HTMLDivElement> },\n) => ReturnType<typeof _Select>;\n"],"names":["_Select","label","hint","size","fullWidth","validationState","isRequired","description","errorMessage","screenWidthMobileBreakpoint","props","ref","useContextProps","SelectContext","isMobileDevice","useIsMobileDevice","jsx","AriaSelect","twMerge","sharedInputFieldWrapperStyles","state","jsxs","Fragment","cx","Label","sharedInputlabelStyles","sharedInputHintStyles","AriaButton","isDisabled","isFocusVisible","isHovered","sharedInputFieldStyles","SelectValue","SvgIcon","Text","Popover","ListBox","Select","forwardRef"],"mappings":"slCAqCA,SAASA,EACP,CACE,MAAAC,EACA,KAAAC,EACA,KAAAC,EAAO,SACP,UAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,aAAAC,EACA,4BAAAC,EAA8B,IAC9B,GAAGC,CACL,EACAC,EACA,CACA,CAACD,EAAOC,CAAG,EAAIC,EAAAA,gBAAgBF,EAAOC,EAAKE,EAAAA,aAAa,EAElD,MAAAC,EAAiBC,oBAAkBN,CAA2B,EAGlE,OAAAO,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGP,EACJ,IAAAC,EACA,UAAWO,EAAAA,QAAQC,EAAAA,8BAA8B,CAAE,UAAAf,CAAW,CAAA,CAAC,EAE9D,SAACgB,GAGIC,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAAAD,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWE,EAAA,GACT,+BACAtB,EAAQ,kBAAoB,aAC9B,EAEC,SAAA,CACCA,EAAAoB,EAAA,kBAAA,KAACG,EAAA,MAAA,CACC,UAAWC,EAAAA,uBAAuB,EAClC,MAAO,CAAE,WAAY,gCAAiC,EAErD,SAAA,CAAAxB,EACAK,GAAcU,EAAA,kBAAA,IAAC,OAAK,CAAA,UAAU,cAAe,SAAK,KAAA,CAAA,CAAA,CAAA,EAEnD,KACHd,EACCc,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWU,EAAAA,sBAAsB,EACjC,MAAO,CAAE,WAAY,+BAAgC,EAEpD,SAAAxB,CAAA,CAAA,EAED,IAAA,CAAA,CACN,EACAc,EAAAA,kBAAAA,IAAC,MAAI,CAAA,UAAU,0BACb,SAAAK,EAAA,kBAAA,KAACM,EAAA,OAAA,CACC,UAAW,CAAC,CAAE,WAAAC,EAAY,eAAAC,EAAgB,UAAAC,CACxC,IAAAZ,EAAA,QACEa,yBAAuB,CACrB,WAAAH,EACA,UAAAE,EACA,UAAWD,EACX,UAAAzB,EACA,KAAAD,EACA,gBAAAE,EACA,UAAW,2CAAA,CACZ,CACH,EAGF,SAAA,CAACW,EAAAA,kBAAAA,IAAAgB,EAAA,YAAA,CAAY,UAAU,sBAAuB,CAAA,EAC9ChB,EAAA,kBAAA,IAACiB,EAAA,QAAA,CACC,KAAK,eACL,cAAY,OACZ,UAAWV,EAAA,GACTpB,IAAS,SAAW,UACpBA,IAAS,UAAY,UACrBA,IAAS,SAAW,UACpBiB,EAAM,OAAS,aAAe,WAC9B,kCACF,CAAA,CACF,CAAA,CAAA,CAAA,EAEJ,EACCb,GACCS,EAAA,kBAAA,IAACkB,EAAA,KAAA,CACC,UAAU,cACV,QAAQ,aACR,MAAM,YACN,KAAK,cAEJ,SAAA3B,CAAA,CACH,EAEDC,GACCQ,EAAA,kBAAA,IAACkB,EAAA,KAAA,CACC,UAAU,cACV,QAAQ,aACR,MAAM,gBACN,KAAK,eAEJ,SAAA1B,CAAA,CACH,EAEFa,EAAAA,kBAAAA,KAACc,EAAAA,QAAQ,CAAA,wCAAuC,GAC7C,SAAA,CAAkBrB,GAAAb,GAChBe,EAAA,kBAAA,IAAA,MAAA,CAAI,UAAU,WACb,iCAACkB,EAAK,KAAA,CAAA,QAAQ,cAAe,SAAAjC,CAAM,CAAA,EACrC,EAEFe,EAAA,kBAAA,IAACoB,EAAA,QAAA,CACC,UAAU,eACV,aAAYnC,GAAS,qBAAqBS,EAAM,IAAI,GACpD,cAAc,SAEb,SAAMA,EAAA,QAAA,CACT,CAAA,EACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAGN,CAEa,MAAA2B,EAASC,aAAWtC,CAAO"}
+{"version":3,"file":"lyra18.cjs","sources":["../src/components/inputs/select/select.tsx"],"sourcesContent":["import { CSSProperties, Key, useCallback, useRef, useState } from \"react\";\nimport { Label } from \"react-aria-components\";\n\nimport { Listbox } from \"@headlessui/react\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport { useLocale } from \"../../..\";\nimport { cx } from \"../../../utils/class-variance-authority\";\nimport { buttonStyles } from \"../../button\";\nimport { listBoxStyles } from \"../../list-box\";\nimport { listBoxItemStyles } from \"../../list-box/list-box-styles2\";\nimport { Popover } from \"../../overlays\";\nimport { SvgIcon } from \"../../svg-icon\";\nimport { Text } from \"../../text\";\nimport {\n  sharedInputFieldStyles,\n  sharedInputFieldWrapperStyles,\n  sharedInputHintStyles,\n  sharedInputlabelStyles,\n} from \"../shared.styles\";\nimport { TagGroup, TagItem } from \"../shared/tags\";\n\nimport {\n  MultiSelectProps,\n  SelectFooterProps,\n  SelectHeaderProps,\n  SelectItemProps,\n  SelectItemsProps,\n  SelectProps,\n  ValueButton,\n} from \"./select.types\";\n\nconst minHeightClasses = (size: \"small\" | \"medium\" | \"large\") => {\n  return cx(\n    size === \"small\" && \"min-h-[42px]\",\n    size === \"medium\" && \"min-h-[50px]\",\n    size === \"large\" && \"min-h-[58px]\",\n  );\n};\n\nconst SelectHeader = ({ label, hint, isRequired }: SelectHeaderProps) => (\n  <div className={cx(\"flex items-center gap-3\", label ? \"justify-between\" : \"justify-end\")}>\n    {label ? (\n      <Label\n        className={sharedInputlabelStyles()}\n        style={{ fontFamily: \"var(--input-label-font-family)\" }}\n      >\n        {label}\n        {isRequired && <span className=\"text-danger\">{\" *\"}</span>}\n      </Label>\n    ) : null}\n    {hint ? (\n      <span\n        className={sharedInputHintStyles()}\n        style={{ fontFamily: \"var(--input-hint-font-family)\" }}\n      >\n        {hint}\n      </span>\n    ) : null}\n  </div>\n);\n\nconst SelectFooter = ({ description, errorMessage }: SelectFooterProps) => (\n  <>\n    {description && (\n      <Text className=\"ml-1 mt-1.5\" variant=\"body-small\" color=\"secondary\" slot=\"description\">\n        {description}\n      </Text>\n    )}\n    {errorMessage && (\n      <Text className=\"ml-1 mt-1.5\" variant=\"body-small\" color=\"accent-danger\" slot=\"errorMessage\">\n        {errorMessage}\n      </Text>\n    )}\n  </>\n);\n\nconst SelectItem = <T extends object>({\n  item,\n  state,\n  renderItem,\n  itemLabelKey,\n}: SelectItemProps<T>) => {\n  const label = item?.[itemLabelKey] as string;\n\n  if (renderItem) {\n    return renderItem(item, state);\n  }\n  return (\n    <div className=\"flex items-center gap-1\">\n      {state.selected ? (\n        <SvgIcon name=\"checkmark\" className=\"h-4 w-4\" />\n      ) : (\n        <div className=\"h-4 w-4\" />\n      )}\n      {label}\n    </div>\n  );\n};\n\nconst SelectItems = <T extends object>({\n  direction,\n  disabledItemIdKeys,\n  itemIdKey,\n  itemLabelKey,\n  items,\n  open,\n  renderItem,\n  triggerRef,\n}: SelectItemsProps<T>) => {\n  return (\n    <Popover\n      className=\"!max-h-96 pb-2\"\n      isOpen={open}\n      triggerRef={triggerRef}\n      showPopoverInBottomDrawerOnSmallScreens\n      shouldUpdatePosition\n      style={\n        {\n          \"--trigger-width\": (triggerRef.current as any)?.offsetWidth + \"px\",\n          direction,\n        } as CSSProperties\n      }\n    >\n      {items && items.length ? (\n        <Listbox.Options static className={listBoxStyles()}>\n          {items.map((item) => (\n            <Listbox.Option\n              key={item[itemIdKey] as Key}\n              className={({ active, selected, disabled }) =>\n                twMerge(\n                  listBoxItemStyles({\n                    active,\n                    disabled,\n                    selected,\n                  }),\n                )\n              }\n              value={item}\n              disabled={disabledItemIdKeys?.includes(item?.[itemIdKey] as string)}\n            >\n              {(renderItemState) => (\n                <SelectItem\n                  item={item}\n                  state={renderItemState}\n                  renderItem={renderItem}\n                  itemLabelKey={itemLabelKey}\n                />\n              )}\n            </Listbox.Option>\n          ))}\n        </Listbox.Options>\n      ) : null}\n    </Popover>\n  );\n};\n\nconst SingleValueButton = <T extends object>({\n  endSlot,\n  fullWidth,\n  isDisabled,\n  isInvalid,\n  open,\n  itemLabelKey,\n  placeholder,\n  size = \"medium\",\n  startSlot,\n  value,\n  onChange,\n}: Omit<ValueButton<T>, \"onChange\"> & {\n  onChange: (newValue?: T) => void;\n}) => {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"Escape\" || e.key === \"Backspace\") {\n      onChange?.(undefined);\n    }\n  };\n\n  return (\n    <Listbox.Button\n      className={sharedInputFieldStyles({\n        fullWidth,\n        isDisabled,\n        isHovered,\n        isFocused,\n        isInvalid,\n        size,\n        className: minHeightClasses(size),\n      })}\n      onPointerEnter={() => setIsHovered(true)}\n      onPointerLeave={() => setIsHovered(false)}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onFocus={() => {\n        setIsFocused(true);\n      }}\n      onBlur={() => {\n        setIsFocused(false);\n      }}\n      onKeyDown={onKeyDown}\n    >\n      {startSlot}\n      <div className=\"grow text-left\">\n        {value?.[itemLabelKey] ? (\n          <>{value?.[itemLabelKey]}</>\n        ) : (\n          <Text color=\"secondary\">{placeholder}</Text>\n        )}\n      </div>\n      {endSlot}\n      <div className=\"flex items-center gap-2\">\n        {value ? (\n          <>\n            <div\n              className={twMerge(\n                buttonStyles({\n                  size: \"small\",\n                  color: \"monochrome\",\n                  variant: \"ghost\",\n                  className: \"p-1\",\n                  isDisabled,\n                }),\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange?.(undefined);\n              }}\n            >\n              <SvgIcon name=\"cross\" className=\"h-4 w-4\" />\n            </div>\n          </>\n        ) : null}\n        <SvgIcon\n          name=\"chevron-down\"\n          className={cx(\"h-4 w-4 transition duration-150\", open && \"rotate-180\")}\n        />\n      </div>\n    </Listbox.Button>\n  );\n};\n\nconst MultipleValuesButton = <T extends object>({\n  endSlot,\n  fullWidth,\n  isDisabled,\n  isInvalid,\n  open,\n  itemLabelKey,\n  itemIdKey,\n  placeholder,\n  size = \"medium\",\n  label,\n  startSlot,\n  onChange,\n  value,\n}: Omit<ValueButton<T>, \"value\" | \"onChange\"> & {\n  value?: T[];\n  onChange: (newValue?: T[]) => void;\n}) => {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <Listbox.Button\n      className={sharedInputFieldStyles({\n        fullWidth,\n        isDisabled,\n        isHovered,\n        isFocused,\n        isInvalid,\n        size,\n        className: minHeightClasses(size),\n      })}\n      as=\"div\"\n      role=\"button\"\n      tabIndex={0}\n      onPointerEnter={() => setIsHovered(true)}\n      onPointerLeave={() => setIsHovered(false)}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onFocus={() => {\n        setIsFocused(true);\n      }}\n      onBlur={() => {\n        setIsFocused(false);\n      }}\n    >\n      {startSlot}\n      <div className=\"grow text-left\">\n        {value && value.length ? (\n          <TagGroup<T>\n            aria-label={label ?? \"Selected items\"}\n            onRemove={(keys) => {\n              value && onChange(value.filter((item) => !keys.has(item[itemIdKey] as any)));\n            }}\n          >\n            {value.map((item) => (\n              <TagItem key={item[itemIdKey] as Key} {...item}>\n                {item?.[itemLabelKey] as string}\n              </TagItem>\n            ))}\n          </TagGroup>\n        ) : (\n          <Text color=\"secondary\">{placeholder}</Text>\n        )}\n      </div>\n      {endSlot}\n      <SvgIcon\n        name=\"chevron-down\"\n        className={cx(\"h-4 w-4 min-w-[16px] transition duration-150\", open && \"rotate-180\")}\n      />\n    </Listbox.Button>\n  );\n};\n\nexport const Select = <T extends object>({\n  isDisabled,\n  isRequired,\n  label,\n  hint,\n  description,\n  errorMessage,\n  isInvalid,\n  fullWidth = true,\n  by,\n  defaultValue,\n  name,\n  onChange,\n  itemLabelKey,\n  itemIdKey,\n  value,\n  size = \"medium\",\n  startSlot,\n  items,\n  endSlot,\n  disabledItemIdKeys,\n  placeholder,\n  renderItem,\n}: SelectProps<T>) => {\n  const [internalValue, setInternalValue] = useState<T | undefined>(value ?? defaultValue);\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { direction } = useLocale();\n\n  const onSingleChange = useCallback(\n    (newValue?: T) => {\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    },\n    [onChange],\n  );\n\n  return (\n    <Listbox\n      disabled={isDisabled}\n      name={name}\n      by={by as any}\n      onChange={onSingleChange}\n      value={internalValue ?? \"\"}\n    >\n      {({ open, disabled, value }) => (\n        <>\n          <div className={sharedInputFieldWrapperStyles({ fullWidth })}>\n            <SelectHeader label={label} hint={hint} isRequired={isRequired} />\n            <div ref={triggerRef}>\n              <SingleValueButton\n                endSlot={endSlot}\n                fullWidth={fullWidth}\n                isDisabled={disabled}\n                isInvalid={isInvalid}\n                open={open}\n                placeholder={placeholder}\n                size={size}\n                startSlot={startSlot}\n                value={value as T | undefined}\n                itemLabelKey={itemLabelKey}\n                itemIdKey={itemIdKey}\n                onChange={onSingleChange}\n              />\n            </div>\n            <SelectFooter description={description} errorMessage={errorMessage} />\n          </div>\n          <SelectItems<T>\n            triggerRef={triggerRef}\n            itemIdKey={itemIdKey}\n            itemLabelKey={itemLabelKey}\n            items={items}\n            open={open}\n            renderItem={renderItem}\n            disabledItemIdKeys={disabledItemIdKeys}\n            direction={direction}\n          />\n        </>\n      )}\n    </Listbox>\n  );\n};\n\nexport const MultiSelect = <T extends object>({\n  isDisabled,\n  isRequired,\n  label,\n  hint,\n  description,\n  errorMessage,\n  isInvalid,\n  fullWidth = true,\n  by,\n  defaultValue,\n  name,\n  onChange,\n  itemLabelKey,\n  itemIdKey,\n  value,\n  size = \"medium\",\n  startSlot,\n  items,\n  endSlot,\n  disabledItemIdKeys,\n  placeholder,\n  renderItem,\n}: MultiSelectProps<T>) => {\n  const [internalValue, setInternalValue] = useState<T[] | undefined>(value ?? defaultValue);\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { direction } = useLocale();\n\n  const onMultipleChange = useCallback(\n    (newValue?: T[]) => {\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    },\n    [onChange],\n  );\n\n  return (\n    <Listbox\n      disabled={isDisabled}\n      name={name}\n      by={by as any}\n      onChange={onMultipleChange}\n      multiple\n      value={internalValue ?? []}\n    >\n      {({ open, disabled, value }) => (\n        <>\n          <div className={sharedInputFieldWrapperStyles({ fullWidth })}>\n            <SelectHeader label={label} hint={hint} isRequired={isRequired} />\n            <div ref={triggerRef}>\n              <MultipleValuesButton\n                endSlot={endSlot}\n                fullWidth={fullWidth}\n                isDisabled={disabled}\n                isInvalid={isInvalid}\n                open={open}\n                placeholder={placeholder}\n                size={size}\n                startSlot={startSlot}\n                value={value}\n                itemLabelKey={itemLabelKey}\n                itemIdKey={itemIdKey}\n                onChange={onMultipleChange}\n              />\n            </div>\n            <SelectFooter description={description} errorMessage={errorMessage} />\n          </div>\n          <SelectItems<T>\n            triggerRef={triggerRef}\n            itemIdKey={itemIdKey}\n            itemLabelKey={itemLabelKey}\n            items={items}\n            open={open}\n            renderItem={renderItem}\n            disabledItemIdKeys={disabledItemIdKeys}\n            direction={direction}\n          />\n        </>\n      )}\n    </Listbox>\n  );\n};\n"],"names":["minHeightClasses","size","cx","SelectHeader","label","hint","isRequired","jsxs","Label","sharedInputlabelStyles","jsx","sharedInputHintStyles","SelectFooter","description","errorMessage","Fragment","Text","SelectItem","item","state","renderItem","itemLabelKey","SvgIcon","SelectItems","direction","disabledItemIdKeys","itemIdKey","items","open","triggerRef","Popover","_a","Listbox","listBoxStyles","active","selected","disabled","twMerge","listBoxItemStyles","renderItemState","SingleValueButton","endSlot","fullWidth","isDisabled","isInvalid","placeholder","startSlot","value","onChange","isFocused","setIsFocused","useState","isHovered","setIsHovered","onKeyDown","e","sharedInputFieldStyles","buttonStyles","MultipleValuesButton","TagGroup","keys","TagItem","Select","by","defaultValue","name","internalValue","setInternalValue","useRef","useLocale","onSingleChange","useCallback","newValue","sharedInputFieldWrapperStyles","MultiSelect","onMultipleChange"],"mappings":"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"}

package/dist/lyra18.js

@@ -1,164 +1,424 @@
-import { j as e } from "./lyra53.js";
-import { forwardRef as y } from "react";
-import { useContextProps as v, Select as N, Label as S, Button as w, SelectValue as g, SelectContext as I } from "./lyra52.js";
+import { j as s } from "./lyra53.js";
+import { useState as S, useRef as R, useCallback as V } from "react";
+import { Label as W } from "./lyra52.js";
 import "./lyra2.js";
-import { cx as c } from "./lyra62.js";
+import { cx as M } from "./lyra62.js";
 import "./lyra67.js";
-import { Text as i } from "./lyra42.js";
-import "./lyra68.js";
+import { Text as y } from "./lyra42.js";
 import "./lyra69.js";
 import "./lyra70.js";
+import "./lyra68.js";
 import "./lyra8.js";
-import "./lyra72.js";
+import { buttonStyles as X } from "./lyra9.js";
 import "./lyra10.js";
 import "./lyra11.js";
-import "./lyra147.js";
+import "./lyra146.js";
 import "./lyra24.js";
-import { SvgIcon as F } from "./lyra38.js";
+import { SvgIcon as B } from "./lyra38.js";
 import "./lyra15.js";
 import "./lyra17.js";
-import { sharedInputFieldWrapperStyles as M, sharedInputlabelStyles as B, sharedInputHintStyles as D, sharedInputFieldStyles as P } from "./lyra19.js";
+import "./lyra27.js";
+import { listBoxStyles as Y } from "./lyra28.js";
+import { listBoxItemStyles as Z } from "./lyra147.js";
+import { Popover as _ } from "./lyra29.js";
+import "./lyra31.js";
+import "./lyra144.js";
+import { sharedInputFieldWrapperStyles as D, sharedInputlabelStyles as z, sharedInputHintStyles as C, sharedInputFieldStyles as T } from "./lyra19.js";
+import { TagGroup as K, TagItem as ss } from "./lyra148.js";
 import "./lyra20.js";
-import "./lyra148.js";
+import "./lyra145.js";
 import "./lyra22.js";
-import "./lyra23.js";
 import "./lyra25.js";
 import "./lyra26.js";
-import { ListBox as C } from "./lyra27.js";
-import "./lyra73.js";
-import { Popover as L } from "./lyra29.js";
-import "./lyra31.js";
-import "./lyra149.js";
-import "./lyra75.js";
+import "./lyra76.js";
 import "./lyra39.js";
 import "./lyra77.js";
 import "./lyra41.js";
 import "./lyra79.js";
-import { useIsMobileDevice as O } from "./lyra46.js";
 import "./lyra48.js";
 import "./lyra57.js";
-import { twMerge as p } from "./lyra54.js";
-function R({
+import { Listbox as b } from "./lyra149.js";
+import { twMerge as G } from "./lyra54.js";
+import { useLocale as U } from "./lyra51.js";
+const q = (e) => M(
+  e === "small" && "min-h-[42px]",
+  e === "medium" && "min-h-[50px]",
+  e === "large" && "min-h-[58px]"
+), A = ({ label: e, hint: r, isRequired: o }) => /* @__PURE__ */ s.jsxs("div", { className: M("flex items-center gap-3", e ? "justify-between" : "justify-end"), children: [
+  e ? /* @__PURE__ */ s.jsxs(
+    W,
+    {
+      className: z(),
+      style: { fontFamily: "var(--input-label-font-family)" },
+      children: [
+        e,
+        o && /* @__PURE__ */ s.jsx("span", { className: "text-danger", children: " *" })
+      ]
+    }
+  ) : null,
+  r ? /* @__PURE__ */ s.jsx(
+    "span",
+    {
+      className: C(),
+      style: { fontFamily: "var(--input-hint-font-family)" },
+      children: r
+    }
+  ) : null
+] }), J = ({ description: e, errorMessage: r }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+  e && /* @__PURE__ */ s.jsx(y, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: e }),
+  r && /* @__PURE__ */ s.jsx(y, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: r })
+] }), es = ({
+  item: e,
+  state: r,
+  renderItem: o,
+  itemLabelKey: p
+}) => {
+  const i = e == null ? void 0 : e[p];
+  return o ? o(e, r) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
+    r.selected ? /* @__PURE__ */ s.jsx(B, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
+    i
+  ] });
+}, Q = ({
+  direction: e,
+  disabledItemIdKeys: r,
+  itemIdKey: o,
+  itemLabelKey: p,
+  items: i,
+  open: j,
+  renderItem: h,
+  triggerRef: c
+}) => {
+  var d;
+  return /* @__PURE__ */ s.jsx(
+    _,
+    {
+      className: "!max-h-96 pb-2",
+      isOpen: j,
+      triggerRef: c,
+      showPopoverInBottomDrawerOnSmallScreens: !0,
+      shouldUpdatePosition: !0,
+      style: {
+        "--trigger-width": ((d = c.current) == null ? void 0 : d.offsetWidth) + "px",
+        direction: e
+      },
+      children: i && i.length ? /* @__PURE__ */ s.jsx(b.Options, { static: !0, className: Y(), children: i.map((t) => /* @__PURE__ */ s.jsx(
+        b.Option,
+        {
+          className: ({ active: l, selected: a, disabled: n }) => G(
+            Z({
+              active: l,
+              disabled: n,
+              selected: a
+            })
+          ),
+          value: t,
+          disabled: r == null ? void 0 : r.includes(t == null ? void 0 : t[o]),
+          children: (l) => /* @__PURE__ */ s.jsx(
+            es,
+            {
+              item: t,
+              state: l,
+              renderItem: h,
+              itemLabelKey: p
+            }
+          )
+        },
+        t[o]
+      )) }) : null
+    }
+  );
+}, rs = ({
+  endSlot: e,
+  fullWidth: r,
+  isDisabled: o,
+  isInvalid: p,
+  open: i,
+  itemLabelKey: j,
+  placeholder: h,
+  size: c = "medium",
+  startSlot: d,
+  value: t,
+  onChange: l
+}) => {
+  const [a, n] = S(!1), [N, x] = S(!1), v = (m) => {
+    (m.key === "Escape" || m.key === "Backspace") && (l == null || l(void 0));
+  };
+  return /* @__PURE__ */ s.jsxs(
+    b.Button,
+    {
+      className: T({
+        fullWidth: r,
+        isDisabled: o,
+        isHovered: N,
+        isFocused: a,
+        isInvalid: p,
+        size: c,
+        className: q(c)
+      }),
+      onPointerEnter: () => x(!0),
+      onPointerLeave: () => x(!1),
+      onMouseEnter: () => x(!0),
+      onMouseLeave: () => x(!1),
+      onFocus: () => {
+        n(!0);
+      },
+      onBlur: () => {
+        n(!1);
+      },
+      onKeyDown: v,
+      children: [
+        d,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: t != null && t[j] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: t == null ? void 0 : t[j] }) : /* @__PURE__ */ s.jsx(y, { color: "secondary", children: h }) }),
+        e,
+        /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+          t ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
+            "div",
+            {
+              className: G(
+                X({
+                  size: "small",
+                  color: "monochrome",
+                  variant: "ghost",
+                  className: "p-1",
+                  isDisabled: o
+                })
+              ),
+              onClick: (m) => {
+                m.stopPropagation(), l == null || l(void 0);
+              },
+              children: /* @__PURE__ */ s.jsx(B, { name: "cross", className: "h-4 w-4" })
+            }
+          ) }) : null,
+          /* @__PURE__ */ s.jsx(
+            B,
+            {
+              name: "chevron-down",
+              className: M("h-4 w-4 transition duration-150", i && "rotate-180")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, ts = ({
+  endSlot: e,
+  fullWidth: r,
+  isDisabled: o,
+  isInvalid: p,
+  open: i,
+  itemLabelKey: j,
+  itemIdKey: h,
+  placeholder: c,
+  size: d = "medium",
   label: t,
-  hint: m,
-  size: o = "medium",
-  fullWidth: a,
-  validationState: d,
-  isRequired: f,
-  description: n,
-  errorMessage: l,
-  screenWidthMobileBreakpoint: x = 640,
-  ...r
-}, s) {
-  [r, s] = v(r, s, I);
-  const u = O(x);
-  return /* @__PURE__ */ e.jsx(
-    N,
+  startSlot: l,
+  onChange: a,
+  value: n
+}) => {
+  const [N, x] = S(!1), [v, m] = S(!1);
+  return /* @__PURE__ */ s.jsxs(
+    b.Button,
     {
-      ...r,
-      ref: s,
-      className: p(M({ fullWidth: a })),
-      children: (h) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(
-          "div",
+      className: T({
+        fullWidth: r,
+        isDisabled: o,
+        isHovered: v,
+        isFocused: N,
+        isInvalid: p,
+        size: d,
+        className: q(d)
+      }),
+      as: "div",
+      role: "button",
+      tabIndex: 0,
+      onPointerEnter: () => m(!0),
+      onPointerLeave: () => m(!1),
+      onMouseEnter: () => m(!0),
+      onMouseLeave: () => m(!1),
+      onFocus: () => {
+        x(!0);
+      },
+      onBlur: () => {
+        x(!1);
+      },
+      children: [
+        l,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: n && n.length ? /* @__PURE__ */ s.jsx(
+          K,
           {
-            className: c(
-              "mx-1 flex items-center gap-3",
-              t ? "justify-between" : "justify-end"
-            ),
-            children: [
-              t ? /* @__PURE__ */ e.jsxs(
-                S,
-                {
-                  className: B(),
-                  style: { fontFamily: "var(--input-label-font-family)" },
-                  children: [
-                    t,
-                    f && /* @__PURE__ */ e.jsx("span", { className: "text-danger", children: " *" })
-                  ]
-                }
-              ) : null,
-              m ? /* @__PURE__ */ e.jsx(
-                "span",
-                {
-                  className: D(),
-                  style: { fontFamily: "var(--input-hint-font-family)" },
-                  children: m
-                }
-              ) : null
-            ]
+            "aria-label": t ?? "Selected items",
+            onRemove: (u) => {
+              n && a(n.filter((F) => !u.has(F[h])));
+            },
+            children: n.map((u) => /* @__PURE__ */ s.jsx(ss, { ...u, children: u == null ? void 0 : u[j] }, u[h]))
           }
-        ),
-        /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsxs(
-          w,
+        ) : /* @__PURE__ */ s.jsx(y, { color: "secondary", children: c }) }),
+        e,
+        /* @__PURE__ */ s.jsx(
+          B,
           {
-            className: ({ isDisabled: j, isFocusVisible: $, isHovered: b }) => p(
-              P({
-                isDisabled: j,
-                isHovered: b,
-                isFocused: $,
-                fullWidth: a,
-                size: o,
-                validationState: d,
-                className: "w-full items-center justify-between gap-3"
-              })
-            ),
-            children: [
-              /* @__PURE__ */ e.jsx(g, { className: "select-none truncate" }),
-              /* @__PURE__ */ e.jsx(
-                F,
-                {
-                  name: "chevron-down",
-                  "aria-hidden": "true",
-                  className: c(
-                    o === "large" && "h-5 w-5",
-                    o === "medium" && "h-4 w-4",
-                    o === "small" && "h-3 w-3",
-                    h.isOpen ? "rotate-180" : "rotate-0",
-                    "transition duration-200 ease-out"
-                  )
-                }
-              )
-            ]
+            name: "chevron-down",
+            className: M("h-4 w-4 min-w-[16px] transition duration-150", i && "rotate-180")
           }
-        ) }),
-        n && /* @__PURE__ */ e.jsx(
-          i,
-          {
-            className: "ms-1 mt-1.5",
-            variant: "body-small",
-            color: "secondary",
-            slot: "description",
-            children: n
-          }
-        ),
-        l && /* @__PURE__ */ e.jsx(
-          i,
+        )
+      ]
+    }
+  );
+}, Ws = ({
+  isDisabled: e,
+  isRequired: r,
+  label: o,
+  hint: p,
+  description: i,
+  errorMessage: j,
+  isInvalid: h,
+  fullWidth: c = !0,
+  by: d,
+  defaultValue: t,
+  name: l,
+  onChange: a,
+  itemLabelKey: n,
+  itemIdKey: N,
+  value: x,
+  size: v = "medium",
+  startSlot: m,
+  items: u,
+  endSlot: F,
+  disabledItemIdKeys: P,
+  placeholder: k,
+  renderItem: H
+}) => {
+  const [E, $] = S(x ?? t), g = R(null), { direction: I } = U(), w = V(
+    (f) => {
+      $(f), a == null || a(f);
+    },
+    [a]
+  );
+  return /* @__PURE__ */ s.jsx(
+    b,
+    {
+      disabled: e,
+      name: l,
+      by: d,
+      onChange: w,
+      value: E ?? "",
+      children: ({ open: f, disabled: L, value: O }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: D({ fullWidth: c }), children: [
+          /* @__PURE__ */ s.jsx(A, { label: o, hint: p, isRequired: r }),
+          /* @__PURE__ */ s.jsx("div", { ref: g, children: /* @__PURE__ */ s.jsx(
+            rs,
+            {
+              endSlot: F,
+              fullWidth: c,
+              isDisabled: L,
+              isInvalid: h,
+              open: f,
+              placeholder: k,
+              size: v,
+              startSlot: m,
+              value: O,
+              itemLabelKey: n,
+              itemIdKey: N,
+              onChange: w
+            }
+          ) }),
+          /* @__PURE__ */ s.jsx(J, { description: i, errorMessage: j })
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          Q,
           {
-            className: "ms-1 mt-1.5",
-            variant: "body-small",
-            color: "accent-danger",
-            slot: "errorMessage",
-            children: l
+            triggerRef: g,
+            itemIdKey: N,
+            itemLabelKey: n,
+            items: u,
+            open: f,
+            renderItem: H,
+            disabledItemIdKeys: P,
+            direction: I
           }
-        ),
-        /* @__PURE__ */ e.jsxs(L, { showPopoverInBottomDrawerOnSmallScreens: !0, children: [
-          u && t && /* @__PURE__ */ e.jsx("div", { className: "p-4 pb-2", children: /* @__PURE__ */ e.jsx(i, { variant: "body-medium", children: t }) }),
-          /* @__PURE__ */ e.jsx(
-            C,
+        )
+      ] })
+    }
+  );
+}, Xs = ({
+  isDisabled: e,
+  isRequired: r,
+  label: o,
+  hint: p,
+  description: i,
+  errorMessage: j,
+  isInvalid: h,
+  fullWidth: c = !0,
+  by: d,
+  defaultValue: t,
+  name: l,
+  onChange: a,
+  itemLabelKey: n,
+  itemIdKey: N,
+  value: x,
+  size: v = "medium",
+  startSlot: m,
+  items: u,
+  endSlot: F,
+  disabledItemIdKeys: P,
+  placeholder: k,
+  renderItem: H
+}) => {
+  const [E, $] = S(x ?? t), g = R(null), { direction: I } = U(), w = V(
+    (f) => {
+      $(f), a == null || a(f);
+    },
+    [a]
+  );
+  return /* @__PURE__ */ s.jsx(
+    b,
+    {
+      disabled: e,
+      name: l,
+      by: d,
+      onChange: w,
+      multiple: !0,
+      value: E ?? [],
+      children: ({ open: f, disabled: L, value: O }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: D({ fullWidth: c }), children: [
+          /* @__PURE__ */ s.jsx(A, { label: o, hint: p, isRequired: r }),
+          /* @__PURE__ */ s.jsx("div", { ref: g, children: /* @__PURE__ */ s.jsx(
+            ts,
             {
-              className: "outline-none",
-              "aria-label": t ?? `options on select ${r.name}`,
-              selectionMode: "single",
-              children: r.children
+              endSlot: F,
+              fullWidth: c,
+              isDisabled: L,
+              isInvalid: h,
+              open: f,
+              placeholder: k,
+              size: v,
+              startSlot: m,
+              value: O,
+              itemLabelKey: n,
+              itemIdKey: N,
+              onChange: w
             }
-          )
-        ] })
+          ) }),
+          /* @__PURE__ */ s.jsx(J, { description: i, errorMessage: j })
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          Q,
+          {
+            triggerRef: g,
+            itemIdKey: N,
+            itemLabelKey: n,
+            items: u,
+            open: f,
+            renderItem: H,
+            disabledItemIdKeys: P,
+            direction: I
+          }
+        )
       ] })
     }
   );
-}
-const Ne = y(R);
+};
 export {
-  Ne as Select
+  Xs as MultiSelect,
+  Ws as Select
 };