@studiocubics/components 0.0.13 → 0.0.15

package/dist/Inputs/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/Inputs/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, mergeRefs } from \"@studiocubics/utils\";\nimport { useRef, useState, type ComponentProps } from \"react\";\nimport styles from \"./SearchInput.module.css\";\nimport { type ButtonProps, Button } from \"../Button/Button\";\nimport { type TextInputProps, TextInput } from \"../TextInput/TextInput\";\n\nexport interface SearchInputProps extends Omit<TextInputProps, \"slotProps\"> {\n  variant?: \"collapsible\" | \"default\";\n  slotProps?: TextInputProps[\"slotProps\"] & {\n    searchInputRoot?: ComponentProps<\"div\">;\n    searchCollapseToggle?: ButtonProps;\n    searchButton?: ButtonProps;\n    clearButton?: ButtonProps;\n  };\n  onSearch?: (query: string) => void;\n  onClear?: () => void;\n  //   inputVariant:TextInputProps[\"variant\"]\n}\n\nexport function SearchOpenIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      {/* <path d=\"m13 13.5 2-2.5-2-2.5\" /> */}\n      <path d=\"m21 21-4.3-4.3\" />\n      <path d=\"M9 8.5 7 11l2 2.5\" />\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    </svg>\n  );\n}\nexport function SearchIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      {/* <path d=\"m13 13.5 2-2.5-2-2.5\" /> */}\n      <path d=\"m21 21-4.3-4.3\" />\n      {/* <path d=\"M9 8.5 7 11l2 2.5\" /> */}\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    </svg>\n  );\n}\nexport function SearchCloseIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"m13 13.5 2-2.5-2-2.5\" />\n      <path d=\"m21 21-4.3-4.3\" />\n      {/* <path d=\"M9 8.5 7 11l2 2.5\" /> */}\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    </svg>\n  );\n}\nexport function ClearIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport function SearchInput(props: SearchInputProps) {\n  const {\n    ref,\n    className,\n    size = \"sm\",\n    variant = \"default\",\n    disabled,\n    disableEndIconGutters,\n    disableStartIconGutters,\n    disableInputGutters,\n    slotProps = {},\n    value,\n    onChange,\n    onSearch,\n    onClear,\n    ...rest\n  } = props;\n\n  const [collapsed, setCollapsed] = useState(variant == \"collapsible\");\n  const [internalValue, setInternalValue] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Use controlled value if provided, otherwise use internal state\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setInternalValue(e.target.value);\n    }\n    onChange?.(e);\n  };\n\n  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!isControlled) {\n      setInternalValue(\"\");\n    }\n    slotProps.clearButton?.onClick?.(e);\n    onClear?.();\n  };\n\n  return (\n    <div\n      {...slotProps.searchInputRoot}\n      className={cn(\n        styles.root,\n        collapsed ? styles.collapsed : \"\",\n        slotProps.searchInputRoot?.className,\n      )}\n    >\n      {String(currentValue).trim() ? (\n        <Button\n          {...slotProps.clearButton}\n          size={slotProps.clearButton?.size || size}\n          className={cn(styles.clearButton, slotProps.clearButton?.className)}\n          disabled={slotProps.clearButton?.disabled || collapsed}\n          onClick={handleClear}\n          type={slotProps.clearButton?.type || \"button\"}\n        >\n          {slotProps.clearButton?.children ?? <ClearIcon />}\n        </Button>\n      ) : (\n        <Button\n          {...slotProps.searchCollapseToggle}\n          size={slotProps.searchCollapseToggle?.size || size}\n          onClick={(e) => {\n            slotProps.searchCollapseToggle?.onClick?.(e);\n            setCollapsed(!collapsed);\n          }}\n          disabled={\n            slotProps.searchCollapseToggle?.disabled || variant != \"collapsible\"\n          }\n          type={slotProps.searchCollapseToggle?.type || \"button\"}\n        >\n          {variant == \"collapsible\" ? (\n            collapsed ? (\n              <SearchOpenIcon />\n            ) : (\n              <SearchCloseIcon />\n            )\n          ) : (\n            <SearchIcon />\n          )}\n        </Button>\n      )}\n      <TextInput\n        type=\"search\"\n        ref={mergeRefs(inputRef, ref)}\n        className={cn(styles.input, className)}\n        size={size}\n        disableStartIconGutters={disableStartIconGutters || collapsed}\n        disableEndIconGutters={disableEndIconGutters || collapsed}\n        disableInputGutters={disableInputGutters || collapsed}\n        disabled={disabled || collapsed}\n        value={currentValue}\n        onChange={handleChange}\n        slotProps={{\n          ...slotProps,\n          inputWrapper: {\n            ...slotProps.inputWrapper,\n            className: cn(\n              slotProps.inputWrapper?.className,\n              collapsed ? styles.inputWrapper : \"\",\n            ),\n          },\n        }}\n        {...rest}\n      />\n\n      <Button\n        {...slotProps.searchButton}\n        size={slotProps.searchButton?.size || size}\n        className={cn(styles.searchButton, slotProps.searchButton?.className)}\n        disabled={\n          slotProps.searchButton?.disabled ||\n          collapsed ||\n          !String(currentValue).trim()\n        }\n        onClick={(e) => {\n          slotProps.searchButton?.onClick?.(e);\n          if (inputRef.current?.value) onSearch?.(inputRef.current?.value);\n        }}\n      >\n        {slotProps.searchButton?.children ?? \"Search\"}\n      </Button>\n    </div>\n  );\n}\n"],"names":["SearchOpenIcon","props","width","height","rest","_jsxs","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","xmlns","viewBox","_jsx","d","cx","cy","r","SearchIcon","children","SearchCloseIcon","ClearIcon","SearchInput","ref","className","size","variant","disabled","disableEndIconGutters","disableStartIconGutters","disableInputGutters","slotProps","value","onChange","onSearch","onClear","collapsed","setCollapsed","useState","internalValue","setInternalValue","inputRef","useRef","isControlled","undefined","currentValue","searchInputRoot","cn","styles","root","String","trim","Button","clearButton","onClick","e","type","searchCollapseToggle","TextInput","mergeRefs","input","target","inputWrapper","searchButton","current"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/Inputs/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, mergeRefs } from \"@studiocubics/utils\";\nimport { useRef, useState, type ComponentProps } from \"react\";\nimport styles from \"./SearchInput.module.css\";\nimport { type ButtonProps, Button } from \"../Button/Button\";\nimport { type TextInputProps, TextInput } from \"../TextInput/TextInput\";\n\nexport interface SearchInputProps extends Omit<TextInputProps, \"slotProps\"> {\n  variant?: \"collapsible\" | \"default\";\n  slotProps?: TextInputProps[\"slotProps\"] & {\n    searchInputRoot?: ComponentProps<\"div\">;\n    searchCollapseToggle?: ButtonProps;\n    searchButton?: ButtonProps;\n    clearButton?: ButtonProps;\n  };\n  onSearch?: (query: string) => void;\n  onClear?: () => void;\n  //   inputVariant:TextInputProps[\"variant\"]\n}\n\nfunction SearchOpenIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      {/* <path d=\"m13 13.5 2-2.5-2-2.5\" /> */}\n      <path d=\"m21 21-4.3-4.3\" />\n      <path d=\"M9 8.5 7 11l2 2.5\" />\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    </svg>\n  );\n}\nfunction SearchIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      {/* <path d=\"m13 13.5 2-2.5-2-2.5\" /> */}\n      <path d=\"m21 21-4.3-4.3\" />\n      {/* <path d=\"M9 8.5 7 11l2 2.5\" /> */}\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    </svg>\n  );\n}\nfunction SearchCloseIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"m13 13.5 2-2.5-2-2.5\" />\n      <path d=\"m21 21-4.3-4.3\" />\n      {/* <path d=\"M9 8.5 7 11l2 2.5\" /> */}\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    </svg>\n  );\n}\nfunction ClearIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport function SearchInput(props: SearchInputProps) {\n  const {\n    ref,\n    className,\n    size = \"sm\",\n    variant = \"default\",\n    disabled,\n    disableEndIconGutters,\n    disableStartIconGutters,\n    disableInputGutters,\n    slotProps = {},\n    value,\n    onChange,\n    onSearch,\n    onClear,\n    ...rest\n  } = props;\n\n  const [collapsed, setCollapsed] = useState(variant == \"collapsible\");\n  const [internalValue, setInternalValue] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Use controlled value if provided, otherwise use internal state\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setInternalValue(e.target.value);\n    }\n    onChange?.(e);\n  };\n\n  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!isControlled) {\n      setInternalValue(\"\");\n    }\n    slotProps.clearButton?.onClick?.(e);\n    onClear?.();\n  };\n\n  return (\n    <div\n      {...slotProps.searchInputRoot}\n      className={cn(\n        styles.root,\n        collapsed ? styles.collapsed : \"\",\n        slotProps.searchInputRoot?.className,\n      )}\n    >\n      {String(currentValue).trim() ? (\n        <Button\n          {...slotProps.clearButton}\n          size={slotProps.clearButton?.size || size}\n          className={cn(styles.clearButton, slotProps.clearButton?.className)}\n          disabled={slotProps.clearButton?.disabled || collapsed}\n          onClick={handleClear}\n          type={slotProps.clearButton?.type || \"button\"}\n        >\n          {slotProps.clearButton?.children ?? <ClearIcon />}\n        </Button>\n      ) : (\n        <Button\n          {...slotProps.searchCollapseToggle}\n          size={slotProps.searchCollapseToggle?.size || size}\n          onClick={(e) => {\n            slotProps.searchCollapseToggle?.onClick?.(e);\n            setCollapsed(!collapsed);\n          }}\n          disabled={\n            slotProps.searchCollapseToggle?.disabled || variant != \"collapsible\"\n          }\n          type={slotProps.searchCollapseToggle?.type || \"button\"}\n        >\n          {variant == \"collapsible\" ? (\n            collapsed ? (\n              <SearchOpenIcon />\n            ) : (\n              <SearchCloseIcon />\n            )\n          ) : (\n            <SearchIcon />\n          )}\n        </Button>\n      )}\n      <TextInput\n        type=\"search\"\n        ref={mergeRefs(inputRef, ref)}\n        className={cn(styles.input, className)}\n        size={size}\n        disableStartIconGutters={disableStartIconGutters || collapsed}\n        disableEndIconGutters={disableEndIconGutters || collapsed}\n        disableInputGutters={disableInputGutters || collapsed}\n        disabled={disabled || collapsed}\n        value={currentValue}\n        onChange={handleChange}\n        slotProps={{\n          ...slotProps,\n          inputWrapper: {\n            ...slotProps.inputWrapper,\n            className: cn(\n              slotProps.inputWrapper?.className,\n              collapsed ? styles.inputWrapper : \"\",\n            ),\n          },\n        }}\n        {...rest}\n      />\n\n      <Button\n        {...slotProps.searchButton}\n        size={slotProps.searchButton?.size || size}\n        className={cn(styles.searchButton, slotProps.searchButton?.className)}\n        disabled={\n          slotProps.searchButton?.disabled ||\n          collapsed ||\n          !String(currentValue).trim()\n        }\n        onClick={(e) => {\n          slotProps.searchButton?.onClick?.(e);\n          if (inputRef.current?.value) onSearch?.(inputRef.current?.value);\n        }}\n      >\n        {slotProps.searchButton?.children ?? \"Search\"}\n      </Button>\n    </div>\n  );\n}\n"],"names":["SearchOpenIcon","props","width","height","rest","_jsxs","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","xmlns","viewBox","_jsx","d","cx","cy","r","SearchIcon","children","SearchCloseIcon","ClearIcon","SearchInput","ref","className","size","variant","disabled","disableEndIconGutters","disableStartIconGutters","disableInputGutters","slotProps","value","onChange","onSearch","onClear","collapsed","setCollapsed","useState","internalValue","setInternalValue","inputRef","useRef","isControlled","undefined","currentValue","searchInputRoot","cn","styles","root","String","trim","Button","clearButton","onClick","e","type","searchCollapseToggle","TextInput","mergeRefs","input","target","inputWrapper","searchButton","current"],"mappings":"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"}

package/dist/Inputs/Select/Select.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{cn as s}from"@studiocubics/utils";import{useState as t,useEffect as l}from"react";import o from"./Select.module.css.js";import{useRipple as a,eventWithRipple as i}from"../../Misc/Ripple/Ripple.js";import{InputErrors as n}from"../../Display/InputErrors/InputErrors.js";function c(c){const{startIcon:p,endIcon:m,label:d,error:u,fullWidth:N,disableEndIconGutters:h=!1,disableStartIconGutters:b=!1,size:I="md",htmlSize:f,onTouchStart:v,onClick:S,onBlur:W,slotProps:j,className:z,...C}=c,E=j??{},{rippleElements:G,createRipple:x}=a(E.ripple),[R,T]=t(u&&!!u.length);return l(()=>{T(u&&!!u.length)},[u]),e("div",{...E.root,className:s(E.root?.className,o.root,o[`size_${I}`],N?o.fullWidth:void 0,R?o.errored:void 0),children:[d&&r("label",{...E.label,htmlFor:d,className:s(E.label?.className,o.label),children:d}),e("div",{...E.inputWrapper,className:s(E.inputWrapper?.className,o.inputWrapper),children:[p&&r("span",{...E.startIcon,className:s(o.iconContainer,E.startIcon?.className,b?o.disableGutters:void 0),children:p}),r("select",{className:s(z,o.input),onTouchStart:i(x,v),onClick:i(x,S),onBlur:e=>{T(!1),W?.(e)},id:d,size:f,...C}),m&&r("span",{...E.endIcon,className:s(o.iconContainer,E.endIcon?.className,h?o.disableGutters:void 0),children:m}),G]}),R&&r(n,{...E.error,className:s(E.error?.className,o.errorText),error:u})]})}export{c as Select};
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{toCamelCase as s,cn as t}from"@studiocubics/utils";import{useState as l,useEffect as o}from"react";import a from"./Select.module.css.js";import{useRipple as i,eventWithRipple as n}from"../../Misc/Ripple/Ripple.js";import{InputErrors as c}from"../../Display/InputErrors/InputErrors.js";function p(p){const{startIcon:m,endIcon:d,label:u,error:N,fullWidth:h,disableEndIconGutters:b=!1,disableStartIconGutters:I=!1,size:f="md",htmlSize:v,onTouchStart:S,onClick:W,onBlur:j,slotProps:z,className:C,...E}=p,G=z??{},{rippleElements:x,createRipple:R}=i(G.ripple),[T,g]=l(N&&!!N.length),k=p.id??s(u);return o(()=>{g(N&&!!N.length)},[N]),e("div",{...G.root,className:t(G.root?.className,a.root,a[`size_${f}`],h?a.fullWidth:void 0,T?a.errored:void 0),children:[u&&r("label",{...G.label,htmlFor:k,className:t(G.label?.className,a.label),children:u}),e("div",{...G.inputWrapper,className:t(G.inputWrapper?.className,a.inputWrapper),children:[m&&r("span",{...G.startIcon,className:t(a.iconContainer,G.startIcon?.className,I?a.disableGutters:void 0),children:m}),r("select",{className:t(C,a.input),onTouchStart:n(R,S),onClick:n(R,W),onBlur:e=>{g(!1),j?.(e)},id:k,size:v,...E}),d&&r("span",{...G.endIcon,className:t(a.iconContainer,G.endIcon?.className,b?a.disableGutters:void 0),children:d}),x]}),T&&r(c,{...G.error,className:t(G.error?.className,a.errorText),error:N})]})}export{p as Select};
 //# sourceMappingURL=Select.js.map

package/dist/Inputs/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/Inputs/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@studiocubics/utils\";\nimport {\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./Select.module.css\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface SelectProps extends Omit<ComponentProps<\"select\">, \"size\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  label?: string;\n  error?: string | string[];\n  fullWidth?: boolean;\n  disableEndIconGutters?: boolean;\n  disableStartIconGutters?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  htmlSize?: ComponentProps<\"select\">[\"size\"];\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n  };\n}\n\nexport function Select(props: SelectProps) {\n  const {\n    startIcon,\n    endIcon,\n    label,\n    error,\n    fullWidth,\n    disableEndIconGutters = false,\n    disableStartIconGutters = false,\n    size = \"md\",\n    htmlSize,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps: _slotProps,\n    className: inputClass,\n    ...inputProps\n  } = props;\n  const slotProps: NonNullable<SelectProps[\"slotProps\"]> = _slotProps ?? {};\n  const { rippleElements, createRipple } = useRipple<HTMLSelectElement>(\n    slotProps.ripple,\n  );\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        styles[`size_${size}`],\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={label}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        {startIcon && (\n          <span\n            {...slotProps.startIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.startIcon?.className,\n              disableStartIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {startIcon}\n          </span>\n        )}\n        <select\n          className={cn(inputClass, styles.input)}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          //TODO Causes issue on Firefox where the ripple fires after closing the dropdown\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          id={label}\n          size={htmlSize}\n          {...inputProps}\n        />\n        {endIcon && (\n          <span\n            {...slotProps.endIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.endIcon?.className,\n              disableEndIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {endIcon}\n          </span>\n        )}\n        {rippleElements}\n      </div>\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["Select","props","startIcon","endIcon","label","error","fullWidth","disableEndIconGutters","disableStartIconGutters","size","htmlSize","onTouchStart","onClick","onBlur","slotProps","_slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","useEffect","_jsxs","root","cn","styles","undefined","errored","_jsx","htmlFor","children","inputWrapper","iconContainer","disableGutters","input","eventWithRipple","e","id","InputErrors","errorText"],"mappings":"kVAyCM,SAAUA,EAAOC,GACrB,MAAMC,UACJA,EAASC,QACTA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,UACLA,EAASC,sBACTA,GAAwB,EAAKC,wBAC7BA,GAA0B,EAAKC,KAC/BA,EAAO,KAAIC,SACXA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,OACPA,EACAC,UAAWC,EACXC,UAAWC,KACRC,GACDjB,EACEa,EAAmDC,GAAc,CAAA,GACjEI,eAAEA,EAAcC,aAAEA,GAAiBC,EACvCP,EAAUQ,SAELC,EAAWC,GAAgBC,EAASpB,KAAWA,EAAMqB,QAM5D,OAJAC,EAAU,KACRH,EAAanB,KAAWA,EAAMqB,SAC7B,CAACrB,IAGFuB,EAAA,MAAA,IACMd,EAAUe,KACdb,UAAWc,EACThB,EAAUe,MAAMb,UAChBe,EAAOF,KACPE,EAAO,QAAQtB,KACfH,EAAYyB,EAAOzB,eAAY0B,EAC/BT,EAAYQ,EAAOE,aAAUD,aAG9B5B,GACC8B,EAAA,QAAA,IACMpB,EAAUV,MACd+B,QAAS/B,EACTY,UAAWc,EAAGhB,EAAUV,OAAOY,UAAWe,EAAO3B,OAAMgC,SAEtDhC,IAGLwB,EAAA,MAAA,IACMd,EAAUuB,aACdrB,UAAWc,EAAGhB,EAAUuB,cAAcrB,UAAWe,EAAOM,wBAEvDnC,GACCgC,EAAA,OAAA,IACMpB,EAAUZ,UACdc,UAAWc,EACTC,EAAOO,cACPxB,EAAUZ,WAAWc,UACrBR,EAA0BuB,EAAOQ,oBAAiBP,GACnDI,SAEAlC,IAGLgC,EAAA,SAAA,CACElB,UAAWc,EAAGb,EAAYc,EAAOS,OACjC7B,aAAc8B,EAAgBrB,EAAcT,GAE5CC,QAAS6B,EAAgBrB,EAAcR,GACvCC,OAAS6B,IACPlB,GAAa,GACbX,IAAS6B,IAEXC,GAAIvC,EACJK,KAAMC,KACFQ,IAELf,GACC+B,EAAA,OAAA,IACMpB,EAAUX,QACda,UAAWc,EACTC,EAAOO,cACPxB,EAAUX,SAASa,UACnBT,EAAwBwB,EAAOQ,oBAAiBP,GACjDI,SAEAjC,IAGJgB,KAEFI,GACCW,EAACU,MACK9B,EAAUT,MACdW,UAAWc,EAAGhB,EAAUT,OAAOW,UAAWe,EAAOc,WACjDxC,MAAOA,MAKjB"}
+{"version":3,"file":"Select.js","sources":["../../../src/Inputs/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport {\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./Select.module.css\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface SelectProps extends Omit<ComponentProps<\"select\">, \"size\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  label?: string;\n  error?: string | string[];\n  fullWidth?: boolean;\n  disableEndIconGutters?: boolean;\n  disableStartIconGutters?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  htmlSize?: ComponentProps<\"select\">[\"size\"];\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n  };\n}\n\nexport function Select(props: SelectProps) {\n  const {\n    startIcon,\n    endIcon,\n    label,\n    error,\n    fullWidth,\n    disableEndIconGutters = false,\n    disableStartIconGutters = false,\n    size = \"md\",\n    htmlSize,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps: _slotProps,\n    className: inputClass,\n    ...inputProps\n  } = props;\n  const slotProps: NonNullable<SelectProps[\"slotProps\"]> = _slotProps ?? {};\n  const { rippleElements, createRipple } = useRipple<HTMLSelectElement>(\n    slotProps.ripple,\n  );\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n  const id = props.id ?? toCamelCase(label);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        styles[`size_${size}`],\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        {startIcon && (\n          <span\n            {...slotProps.startIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.startIcon?.className,\n              disableStartIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {startIcon}\n          </span>\n        )}\n        <select\n          className={cn(inputClass, styles.input)}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          //TODO Causes issue on Firefox where the ripple fires after closing the dropdown\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          id={id}\n          size={htmlSize}\n          {...inputProps}\n        />\n        {endIcon && (\n          <span\n            {...slotProps.endIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.endIcon?.className,\n              disableEndIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {endIcon}\n          </span>\n        )}\n        {rippleElements}\n      </div>\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["Select","props","startIcon","endIcon","label","error","fullWidth","disableEndIconGutters","disableStartIconGutters","size","htmlSize","onTouchStart","onClick","onBlur","slotProps","_slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","id","toCamelCase","useEffect","_jsxs","root","cn","styles","undefined","errored","_jsx","htmlFor","children","inputWrapper","iconContainer","disableGutters","input","eventWithRipple","e","InputErrors","errorText"],"mappings":"mWAyCM,SAAUA,EAAOC,GACrB,MAAMC,UACJA,EAASC,QACTA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,UACLA,EAASC,sBACTA,GAAwB,EAAKC,wBAC7BA,GAA0B,EAAKC,KAC/BA,EAAO,KAAIC,SACXA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,OACPA,EACAC,UAAWC,EACXC,UAAWC,KACRC,GACDjB,EACEa,EAAmDC,GAAc,CAAA,GACjEI,eAAEA,EAAcC,aAAEA,GAAiBC,EACvCP,EAAUQ,SAELC,EAAWC,GAAgBC,EAASpB,KAAWA,EAAMqB,QACtDC,EAAK1B,EAAM0B,IAAMC,EAAYxB,GAMnC,OAJAyB,EAAU,KACRL,EAAanB,KAAWA,EAAMqB,SAC7B,CAACrB,IAGFyB,EAAA,MAAA,IACMhB,EAAUiB,KACdf,UAAWgB,EACTlB,EAAUiB,MAAMf,UAChBiB,EAAOF,KACPE,EAAO,QAAQxB,KACfH,EAAY2B,EAAO3B,eAAY4B,EAC/BX,EAAYU,EAAOE,aAAUD,aAG9B9B,GACCgC,EAAA,QAAA,IACMtB,EAAUV,MACdiC,QAASV,EACTX,UAAWgB,EAAGlB,EAAUV,OAAOY,UAAWiB,EAAO7B,OAAMkC,SAEtDlC,IAGL0B,EAAA,MAAA,IACMhB,EAAUyB,aACdvB,UAAWgB,EAAGlB,EAAUyB,cAAcvB,UAAWiB,EAAOM,wBAEvDrC,GACCkC,EAAA,OAAA,IACMtB,EAAUZ,UACdc,UAAWgB,EACTC,EAAOO,cACP1B,EAAUZ,WAAWc,UACrBR,EAA0ByB,EAAOQ,oBAAiBP,GACnDI,SAEApC,IAGLkC,EAAA,SAAA,CACEpB,UAAWgB,EAAGf,EAAYgB,EAAOS,OACjC/B,aAAcgC,EAAgBvB,EAAcT,GAE5CC,QAAS+B,EAAgBvB,EAAcR,GACvCC,OAAS+B,IACPpB,GAAa,GACbX,IAAS+B,IAEXjB,GAAIA,EACJlB,KAAMC,KACFQ,IAELf,GACCiC,EAAA,OAAA,IACMtB,EAAUX,QACda,UAAWgB,EACTC,EAAOO,cACP1B,EAAUX,SAASa,UACnBT,EAAwB0B,EAAOQ,oBAAiBP,GACjDI,SAEAnC,IAGJgB,KAEFI,GACCa,EAACS,MACK/B,EAAUT,MACdW,UAAWgB,EAAGlB,EAAUT,OAAOW,UAAWiB,EAAOa,WACjDzC,MAAOA,MAKjB"}

package/dist/Inputs/Switch/Switch.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as c,useEffect as n,useCallback as o}from"react";import a from"./Switch.module.css.js";import{cn as s,mergeRefs as u,toCamelCase as i}from"@studiocubics/utils";function l(l){const{value:d,defaultValue:m,type:h="checkbox",onChange:p,className:v,ref:b,label:f,"aria-label":k,icon:E,disabled:N,slotProps:L={},color:g,size:w="md",htmlSize:z,...C}=l,X=r(null),x=r(null),S=void 0!==d,[W,j]=c(m??!1),y=S?d??!1:W,M=r(!1),T=r(!1),D=r(0),F=r(y);n(()=>{F.current=y},[y]);const P=o(e=>{if(S||j(e),X.current&&p){const t=X.current;t.checked=e;const r=new Event("change",{bubbles:!0});t.dispatchEvent(r)}},[S,p]),V=o(e=>{N||(M.current=!0,T.current=!1,D.current=e)},[N]),q=o(e=>{if(!M.current||N)return;const t=e-D.current;if(Math.abs(t)>10){T.current=!0;const e=t>0;e!==F.current&&P(e)}},[N,P]),A=o(()=>{M.current=!1},[]);return n(()=>{const e=e=>q(e.clientX),t=e=>q(e.touches[0].clientX);return document.addEventListener("mousemove",e),document.addEventListener("mouseup",A),document.addEventListener("touchmove",t),document.addEventListener("touchend",A),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",A),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",A)}},[q,A]),e("div",{...L.root,"data-color":g,"data-size":w,className:s(L.root?.className,v,a.root,N?a.disabled:""),children:[e("div",{...L.inputWrapper,className:s(a.inputWrapper,L.inputWrapper?.className),children:[t("input",{...C,size:z,type:h,ref:u(b,X),className:a.input,role:"switch","aria-checked":y,"aria-label":k??f,checked:S?y:void 0,defaultChecked:S?void 0:m,disabled:N,onChange:e=>{const t=e.currentTarget.checked;S||j(t),p&&p(e,t)}}),t("span",{className:s(a.track,y?a.checked:""),onClick:()=>{T.current?T.current=!1:X.current?.click()},"aria-hidden":"true",children:t("span",{ref:x,className:a.thumb,onMouseDown:e=>V(e.clientX),onTouchStart:e=>V(e.touches[0].clientX),children:E})})]}),f&&t("label",{...L.label,htmlFor:l.id??i(f),className:s(L.label?.className,a.label),children:f})]})}export{l as Switch};
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as c,useEffect as n,useCallback as o}from"react";import a from"./Switch.module.css.js";import{toCamelCase as s,cn as u,mergeRefs as i}from"@studiocubics/utils";function l(l){const{value:d,defaultValue:m,type:h="checkbox",onChange:p,className:v,ref:b,label:f,"aria-label":k,icon:E,disabled:N,slotProps:L={},color:g,size:w="md",htmlSize:z,...C}=l,X=r(null),x=r(null),S=void 0!==d,[W,j]=c(m??!1),y=S?d??!1:W,M=r(!1),T=r(!1),D=r(0),F=r(y),P=l.id??s(f);n(()=>{F.current=y},[y]);const V=o(e=>{if(S||j(e),X.current&&p){const t=X.current;t.checked=e;const r=new Event("change",{bubbles:!0});t.dispatchEvent(r)}},[S,p]),q=o(e=>{N||(M.current=!0,T.current=!1,D.current=e)},[N]),A=o(e=>{if(!M.current||N)return;const t=e-D.current;if(Math.abs(t)>10){T.current=!0;const e=t>0;e!==F.current&&V(e)}},[N,V]),B=o(()=>{M.current=!1},[]);return n(()=>{const e=e=>A(e.clientX),t=e=>A(e.touches[0].clientX);return document.addEventListener("mousemove",e),document.addEventListener("mouseup",B),document.addEventListener("touchmove",t),document.addEventListener("touchend",B),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",B),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",B)}},[A,B]),e("div",{...L.root,"data-color":g,"data-size":w,className:u(L.root?.className,v,a.root,N?a.disabled:""),children:[e("div",{...L.inputWrapper,className:u(a.inputWrapper,L.inputWrapper?.className),children:[t("input",{...C,id:P,size:z,type:h,ref:i(b,X),className:a.input,role:"switch","aria-checked":y,"aria-label":k??f,checked:S?y:void 0,defaultChecked:S?void 0:m,disabled:N,onChange:e=>{const t=e.currentTarget.checked;S||j(t),p&&p(e,t)}}),t("span",{className:u(a.track,y?a.checked:""),onClick:()=>{T.current?T.current=!1:X.current?.click()},"aria-hidden":"true",children:t("span",{ref:x,className:a.thumb,onMouseDown:e=>q(e.clientX),onTouchStart:e=>q(e.touches[0].clientX),children:E})})]}),f&&t("label",{...L.label,htmlFor:P,className:u(L.label?.className,a.label),children:f})]})}export{l as Switch};
 //# sourceMappingURL=Switch.js.map

package/dist/Inputs/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/Inputs/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n} from \"react\";\nimport styles from \"./Switch.module.css\";\nimport { cn, mergeRefs, toCamelCase } from \"@studiocubics/utils\";\n\n/**\n * Props for the Switch component\n *\n * @group switch\n * @category inputs\n */\nexport interface SwitchProps\n  extends Omit<\n    ComponentProps<\"input\">,\n    \"defaultValue\" | \"value\" | \"onChange\" | \"size\"\n  > {\n  /**\n   * Default value of the switch in boolean\n   */\n  defaultValue?: boolean;\n  /**\n   * Value of the switch in boolean\n   */\n  value?: boolean | null;\n  /**\n   * Event handler for when the value of the switch changes\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n  /**\n   * Label for the switch\n   */\n  label?: string;\n  /**\n   * Icon to render in the thumb of the switch\n   */\n  icon?: ReactNode;\n  /**\n   * Switch slots props\n   */\n  slotProps?: {\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    track?: ComponentProps<\"span\">;\n  };\n  color?: \"primary\" | \"secondary\" | \"error\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  htmlSize?: ComponentProps<\"input\">[\"size\"];\n}\n\n/**\n * A switch can be used to show on/off state for form inputs, theme toggles etc.\n *\n * @group switch\n * @category inputs\n */\nexport function Switch(props: SwitchProps) {\n  const {\n    value,\n    defaultValue,\n    type = \"checkbox\",\n    onChange,\n    className,\n    ref,\n    label,\n    \"aria-label\": ariaLabel,\n    icon,\n    disabled,\n    slotProps = {},\n    color,\n    size = \"md\",\n    htmlSize,\n    ...rest\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const thumbRef = useRef<HTMLSpanElement>(null);\n\n  const isControlled = value !== undefined;\n  const [internalChecked, setInternalChecked] = useState<boolean>(\n    defaultValue ?? false,\n  );\n  const checked = isControlled ? (value ?? false) : internalChecked;\n\n  const isDragging = useRef(false);\n  const didDrag = useRef(false);\n  const dragStartX = useRef(0);\n\n  const checkedRef = useRef(checked);\n  useEffect(() => {\n    checkedRef.current = checked;\n  }, [checked]);\n\n  const triggerChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) setInternalChecked(newChecked);\n      if (inputRef.current && onChange) {\n        const nativeInput = inputRef.current;\n        nativeInput.checked = newChecked;\n        const nativeEvent = new Event(\"change\", { bubbles: true });\n        nativeInput.dispatchEvent(nativeEvent);\n      }\n    },\n    [isControlled, onChange],\n  );\n\n  const handleDragStart = useCallback(\n    (clientX: number) => {\n      if (disabled) return;\n      isDragging.current = true;\n      didDrag.current = false;\n      dragStartX.current = clientX;\n    },\n    [disabled],\n  );\n\n  const handleDragMove = useCallback(\n    (clientX: number) => {\n      if (!isDragging.current || disabled) return;\n\n      const delta = clientX - dragStartX.current;\n      const threshold = 10; // Minimum drag distance to trigger change\n\n      if (Math.abs(delta) > threshold) {\n        didDrag.current = true;\n        const newChecked = delta > 0;\n        if (newChecked !== checkedRef.current) {\n          triggerChange(newChecked);\n        }\n      }\n    },\n    [disabled, triggerChange],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    isDragging.current = false;\n    // didDrag.current is intentionally NOT reset here;\n    // it stays true until the subsequent click event reads and clears it\n  }, []);\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => handleDragMove(e.clientX);\n    const handleTouchMove = (e: TouchEvent) =>\n      handleDragMove(e.touches[0].clientX);\n\n    document.addEventListener(\"mousemove\", handleMouseMove);\n    document.addEventListener(\"mouseup\", handleDragEnd);\n    document.addEventListener(\"touchmove\", handleTouchMove);\n    document.addEventListener(\"touchend\", handleDragEnd);\n\n    return () => {\n      document.removeEventListener(\"mousemove\", handleMouseMove);\n      document.removeEventListener(\"mouseup\", handleDragEnd);\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n      document.removeEventListener(\"touchend\", handleDragEnd);\n    };\n  }, [handleDragMove, handleDragEnd]);\n\n  return (\n    <div\n      {...slotProps.root}\n      data-color={color}\n      data-size={size}\n      className={cn(\n        slotProps.root?.className,\n        className,\n        styles.root,\n        disabled ? styles.disabled : \"\",\n      )}\n    >\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(styles.inputWrapper, slotProps.inputWrapper?.className)}\n      >\n        <input\n          {...rest}\n          size={htmlSize}\n          type={type}\n          ref={mergeRefs(ref, inputRef)}\n          className={styles.input}\n          role=\"switch\"\n          aria-checked={checked}\n          aria-label={ariaLabel ?? label}\n          checked={isControlled ? checked : undefined}\n          defaultChecked={!isControlled ? defaultValue : undefined}\n          disabled={disabled}\n          onChange={(e) => {\n            const c = e.currentTarget.checked;\n            if (!isControlled) setInternalChecked(c);\n            if (onChange) onChange(e, c);\n          }}\n        />\n        <span\n          className={cn(styles.track, checked ? styles.checked : \"\")}\n          onClick={() => {\n            if (didDrag.current) {\n              didDrag.current = false;\n              return;\n            }\n            inputRef.current?.click();\n          }}\n          aria-hidden=\"true\"\n        >\n          <span\n            ref={thumbRef}\n            className={styles.thumb}\n            onMouseDown={(e) => handleDragStart(e.clientX)}\n            onTouchStart={(e) => handleDragStart(e.touches[0].clientX)}\n          >\n            {icon}\n          </span>\n        </span>\n      </div>\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={props.id ?? toCamelCase(label)}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n}\n"],"names":["Switch","props","value","defaultValue","type","onChange","className","ref","label","ariaLabel","icon","disabled","slotProps","color","size","htmlSize","rest","inputRef","useRef","thumbRef","isControlled","undefined","internalChecked","setInternalChecked","useState","checked","isDragging","didDrag","dragStartX","checkedRef","useEffect","current","triggerChange","useCallback","newChecked","nativeInput","nativeEvent","Event","bubbles","dispatchEvent","handleDragStart","clientX","handleDragMove","delta","Math","abs","handleDragEnd","handleMouseMove","e","handleTouchMove","touches","document","addEventListener","removeEventListener","_jsxs","root","cn","styles","children","inputWrapper","_jsx","mergeRefs","input","role","defaultChecked","c","currentTarget","track","onClick","click","thumb","onMouseDown","onTouchStart","htmlFor","id","toCamelCase"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../src/Inputs/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n} from \"react\";\nimport styles from \"./Switch.module.css\";\nimport { cn, mergeRefs, toCamelCase } from \"@studiocubics/utils\";\n\n/**\n * Props for the Switch component\n *\n * @group switch\n * @category inputs\n */\nexport interface SwitchProps\n  extends Omit<\n    ComponentProps<\"input\">,\n    \"defaultValue\" | \"value\" | \"onChange\" | \"size\"\n  > {\n  /**\n   * Default value of the switch in boolean\n   */\n  defaultValue?: boolean;\n  /**\n   * Value of the switch in boolean\n   */\n  value?: boolean | null;\n  /**\n   * Event handler for when the value of the switch changes\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n  /**\n   * Label for the switch\n   */\n  label?: string;\n  /**\n   * Icon to render in the thumb of the switch\n   */\n  icon?: ReactNode;\n  /**\n   * Switch slots props\n   */\n  slotProps?: {\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    track?: ComponentProps<\"span\">;\n  };\n  color?: \"primary\" | \"secondary\" | \"error\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  htmlSize?: ComponentProps<\"input\">[\"size\"];\n}\n\n/**\n * A switch can be used to show on/off state for form inputs, theme toggles etc.\n *\n * @group switch\n * @category inputs\n */\nexport function Switch(props: SwitchProps) {\n  const {\n    value,\n    defaultValue,\n    type = \"checkbox\",\n    onChange,\n    className,\n    ref,\n    label,\n    \"aria-label\": ariaLabel,\n    icon,\n    disabled,\n    slotProps = {},\n    color,\n    size = \"md\",\n    htmlSize,\n    ...rest\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const thumbRef = useRef<HTMLSpanElement>(null);\n\n  const isControlled = value !== undefined;\n  const [internalChecked, setInternalChecked] = useState<boolean>(\n    defaultValue ?? false,\n  );\n  const checked = isControlled ? (value ?? false) : internalChecked;\n\n  const isDragging = useRef(false);\n  const didDrag = useRef(false);\n  const dragStartX = useRef(0);\n\n  const checkedRef = useRef(checked);\n  const id = props.id ?? toCamelCase(label);\n\n  useEffect(() => {\n    checkedRef.current = checked;\n  }, [checked]);\n\n  const triggerChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) setInternalChecked(newChecked);\n      if (inputRef.current && onChange) {\n        const nativeInput = inputRef.current;\n        nativeInput.checked = newChecked;\n        const nativeEvent = new Event(\"change\", { bubbles: true });\n        nativeInput.dispatchEvent(nativeEvent);\n      }\n    },\n    [isControlled, onChange],\n  );\n\n  const handleDragStart = useCallback(\n    (clientX: number) => {\n      if (disabled) return;\n      isDragging.current = true;\n      didDrag.current = false;\n      dragStartX.current = clientX;\n    },\n    [disabled],\n  );\n\n  const handleDragMove = useCallback(\n    (clientX: number) => {\n      if (!isDragging.current || disabled) return;\n\n      const delta = clientX - dragStartX.current;\n      const threshold = 10; // Minimum drag distance to trigger change\n\n      if (Math.abs(delta) > threshold) {\n        didDrag.current = true;\n        const newChecked = delta > 0;\n        if (newChecked !== checkedRef.current) {\n          triggerChange(newChecked);\n        }\n      }\n    },\n    [disabled, triggerChange],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    isDragging.current = false;\n    // didDrag.current is intentionally NOT reset here;\n    // it stays true until the subsequent click event reads and clears it\n  }, []);\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => handleDragMove(e.clientX);\n    const handleTouchMove = (e: TouchEvent) =>\n      handleDragMove(e.touches[0].clientX);\n\n    document.addEventListener(\"mousemove\", handleMouseMove);\n    document.addEventListener(\"mouseup\", handleDragEnd);\n    document.addEventListener(\"touchmove\", handleTouchMove);\n    document.addEventListener(\"touchend\", handleDragEnd);\n\n    return () => {\n      document.removeEventListener(\"mousemove\", handleMouseMove);\n      document.removeEventListener(\"mouseup\", handleDragEnd);\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n      document.removeEventListener(\"touchend\", handleDragEnd);\n    };\n  }, [handleDragMove, handleDragEnd]);\n\n  return (\n    <div\n      {...slotProps.root}\n      data-color={color}\n      data-size={size}\n      className={cn(\n        slotProps.root?.className,\n        className,\n        styles.root,\n        disabled ? styles.disabled : \"\",\n      )}\n    >\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(styles.inputWrapper, slotProps.inputWrapper?.className)}\n      >\n        <input\n          {...rest}\n          id={id}\n          size={htmlSize}\n          type={type}\n          ref={mergeRefs(ref, inputRef)}\n          className={styles.input}\n          role=\"switch\"\n          aria-checked={checked}\n          aria-label={ariaLabel ?? label}\n          checked={isControlled ? checked : undefined}\n          defaultChecked={!isControlled ? defaultValue : undefined}\n          disabled={disabled}\n          onChange={(e) => {\n            const c = e.currentTarget.checked;\n            if (!isControlled) setInternalChecked(c);\n            if (onChange) onChange(e, c);\n          }}\n        />\n        <span\n          className={cn(styles.track, checked ? styles.checked : \"\")}\n          onClick={() => {\n            if (didDrag.current) {\n              didDrag.current = false;\n              return;\n            }\n            inputRef.current?.click();\n          }}\n          aria-hidden=\"true\"\n        >\n          <span\n            ref={thumbRef}\n            className={styles.thumb}\n            onMouseDown={(e) => handleDragStart(e.clientX)}\n            onTouchStart={(e) => handleDragStart(e.touches[0].clientX)}\n          >\n            {icon}\n          </span>\n        </span>\n      </div>\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n}\n"],"names":["Switch","props","value","defaultValue","type","onChange","className","ref","label","ariaLabel","icon","disabled","slotProps","color","size","htmlSize","rest","inputRef","useRef","thumbRef","isControlled","undefined","internalChecked","setInternalChecked","useState","checked","isDragging","didDrag","dragStartX","checkedRef","id","toCamelCase","useEffect","current","triggerChange","useCallback","newChecked","nativeInput","nativeEvent","Event","bubbles","dispatchEvent","handleDragStart","clientX","handleDragMove","delta","Math","abs","handleDragEnd","handleMouseMove","e","handleTouchMove","touches","document","addEventListener","removeEventListener","_jsxs","root","cn","styles","children","inputWrapper","_jsx","mergeRefs","input","role","defaultChecked","c","currentTarget","track","onClick","click","thumb","onMouseDown","onTouchStart","htmlFor"],"mappings":"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"}

package/dist/Inputs/TextAreaInput/TextAreaInput.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from "react";
 import { type UseRippleProps } from "../../Misc/Ripple/Ripple";
-import { type InputErrorsProps } from "../../Display/_index";
+import { type InputErrorsProps } from "../../Display/InputErrors/InputErrors";
 export interface TextAreaInputProps extends ComponentProps<"textarea"> {
     label?: string;
     error?: string | string[];

package/dist/Inputs/TextAreaInput/TextAreaInput.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as r,jsx as o}from"react/jsx-runtime";import{cn as i}from"@studiocubics/utils";import{useState as t,useEffect as s}from"react";import{useRipple as e,eventWithRipple as l}from"../../Misc/Ripple/Ripple.js";import a from"./TextAreaInput.module.css.js";import"../../Display/Accordion/Accordion.js";import"../../Cards/GlassCard/GlassCard.js";import"../../Display/Chip/Chip.js";import"../../Display/IdentityDisplay/IdentityDisplay.js";import{InputErrors as p}from"../../Display/InputErrors/InputErrors.js";import"../../Display/Kbd/buttonList.js";import"../../Display/List/List.js";import"../../Cards/Card/Card.js";import"../../Cards/CollectionItemCard/CollectionItemCard.js";import"@studiocubics/hooks";import"../Button/Button.js";import"react-dom";import"../Checkbox/CheckboxProvider.js";function m(m){const{label:c,error:d,fullWidth:n,disableResize:u=!1,onTouchStart:C,onClick:h,onBlur:j,slotProps:b={},className:y,...N}=m,{rippleElements:f,createRipple:D}=e(b.ripple),[x,I]=t(d&&!!d.length);return s(()=>{I(d&&!!d.length)},[d]),r("div",{...b.root,className:i(b.root?.className,a.root,n?a.fullWidth:void 0,x?a.errored:void 0),children:[c&&o("label",{...b.label,htmlFor:m.id||c,className:i(b.label?.className,a.label),children:c}),r("div",{...b.inputWrapper,className:i(b.inputWrapper?.className,a.inputWrapper),children:[o("textarea",{className:i(y,a.input,u?a.disableResize:void 0),onTouchStart:l(D,C),onClick:l(D,h),onBlur:r=>{I(!1),j?.(r)},id:c,...N}),f]}),x&&o(p,{...b.error,className:i(b.error?.className,a.errorText),error:d})]})}export{m as TextAreaInput};
+"use client";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{toCamelCase as l,cn as o}from"@studiocubics/utils";import{useState as s,useEffect as t}from"react";import{useRipple as i,eventWithRipple as a}from"../../Misc/Ripple/Ripple.js";import p from"./TextAreaInput.module.css.js";import{InputErrors as c}from"../../Display/InputErrors/InputErrors.js";function m(m){const{label:n,error:u,fullWidth:d,disableResize:h=!1,onTouchStart:N,onClick:f,onBlur:b,slotProps:v={},className:x,...R}=m,{rippleElements:W,createRipple:j}=i(v.ripple),[T,E]=s(u&&!!u.length),I=m.id??l(n);return t(()=>{E(u&&!!u.length)},[u]),r("div",{...v.root,className:o(v.root?.className,p.root,d?p.fullWidth:void 0,T?p.errored:void 0),children:[n&&e("label",{...v.label,htmlFor:I,className:o(v.label?.className,p.label),children:n}),r("div",{...v.inputWrapper,className:o(v.inputWrapper?.className,p.inputWrapper),children:[e("textarea",{...R,id:I,className:o(x,p.input,h?p.disableResize:void 0),onTouchStart:a(j,N),onClick:a(j,f),onBlur:r=>{E(!1),b?.(r)}}),W]}),T&&e(c,{...v.error,className:o(v.error?.className,p.errorText),error:u})]})}export{m as TextAreaInput};
 //# sourceMappingURL=TextAreaInput.js.map

package/dist/Inputs/TextAreaInput/TextAreaInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.js","sources":["../../../src/Inputs/TextAreaInput/TextAreaInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@studiocubics/utils\";\nimport { useEffect, useState, type ComponentProps } from \"react\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./TextAreaInput.module.css\";\nimport { InputErrors, type InputErrorsProps } from \"../../Display/_index\";\n\nexport interface TextAreaInputProps extends ComponentProps<\"textarea\"> {\n  label?: string;\n  error?: string | string[];\n  disableResize?: boolean;\n  fullWidth?: boolean;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n  };\n}\n\nexport function TextAreaInput(props: TextAreaInputProps) {\n  const {\n    label,\n    error,\n    fullWidth,\n    disableResize = false,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps = {},\n    className: inputClass,\n    ...inputProps\n  } = props;\n\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={props.id || label}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        <textarea\n          className={cn(\n            inputClass,\n            styles.input,\n            disableResize ? styles.disableResize : undefined\n          )}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          id={label}\n          {...inputProps}\n        />\n        {rippleElements}\n      </div>\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TextAreaInput","props","label","error","fullWidth","disableResize","onTouchStart","onClick","onBlur","slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","useEffect","_jsxs","root","cn","styles","undefined","errored","children","_jsx","htmlFor","id","inputWrapper","input","eventWithRipple","e","InputErrors","errorText"],"mappings":"wyBA0BM,SAAUA,EAAcC,GAC5B,MAAMC,MACJA,EAAKC,MACLA,EAAKC,UACLA,EAASC,cACTA,GAAgB,EAAKC,aACrBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAAY,CAAA,EACZC,UAAWC,KACRC,GACDX,GAEEY,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUN,EAAUO,SACtDC,EAAWC,GAAgBC,EAAShB,KAAWA,EAAMiB,QAM5D,OAJAC,EAAU,KACRH,EAAaf,KAAWA,EAAMiB,SAC7B,CAACjB,IAGFmB,EAAA,MAAA,IACMb,EAAUc,KACdb,UAAWc,EACTf,EAAUc,MAAMb,UAChBe,EAAOF,KACPnB,EAAYqB,EAAOrB,eAAYsB,EAC/BT,EAAYQ,EAAOE,aAAUD,GAC9BE,SAAA,CAEA1B,GACC2B,EAAA,QAAA,IACMpB,EAAUP,MACd4B,QAAS7B,EAAM8B,IAAM7B,EACrBQ,UAAWc,EAAGf,EAAUP,OAAOQ,UAAWe,EAAOvB,OAAM0B,SAEtD1B,IAGLoB,EAAA,MAAA,IACMb,EAAUuB,aACdtB,UAAWc,EAAGf,EAAUuB,cAActB,UAAWe,EAAOO,cAAaJ,SAAA,CAErEC,EAAA,WAAA,CACEnB,UAAWc,EACTb,EACAc,EAAOQ,MACP5B,EAAgBoB,EAAOpB,mBAAgBqB,GAEzCpB,aAAc4B,EAAgBpB,EAAcR,GAC5CC,QAAS2B,EAAgBpB,EAAcP,GACvCC,OAAS2B,IACPjB,GAAa,GACbV,IAAS2B,IAEXJ,GAAI7B,KACAU,IAELC,KAEFI,GACCY,EAACO,EAAW,IACN3B,EAAUN,MACdO,UAAWc,EAAGf,EAAUN,OAAOO,UAAWe,EAAOY,WACjDlC,MAAOA,MAKjB"}
+{"version":3,"file":"TextAreaInput.js","sources":["../../../src/Inputs/TextAreaInput/TextAreaInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport { useEffect, useState, type ComponentProps } from \"react\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./TextAreaInput.module.css\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface TextAreaInputProps extends ComponentProps<\"textarea\"> {\n  label?: string;\n  error?: string | string[];\n  disableResize?: boolean;\n  fullWidth?: boolean;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n  };\n}\n\nexport function TextAreaInput(props: TextAreaInputProps) {\n  const {\n    label,\n    error,\n    fullWidth,\n    disableResize = false,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps = {},\n    className: inputClass,\n    ...inputProps\n  } = props;\n\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n  const id = props.id ?? toCamelCase(label);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        <textarea\n          {...inputProps}\n          id={id}\n          className={cn(\n            inputClass,\n            styles.input,\n            disableResize ? styles.disableResize : undefined,\n          )}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n        />\n        {rippleElements}\n      </div>\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TextAreaInput","props","label","error","fullWidth","disableResize","onTouchStart","onClick","onBlur","slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","id","toCamelCase","useEffect","_jsxs","root","cn","styles","undefined","errored","children","_jsx","htmlFor","inputWrapper","input","eventWithRipple","e","InputErrors","errorText"],"mappings":"0WA6BM,SAAUA,EAAcC,GAC5B,MAAMC,MACJA,EAAKC,MACLA,EAAKC,UACLA,EAASC,cACTA,GAAgB,EAAKC,aACrBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAAY,CAAA,EACZC,UAAWC,KACRC,GACDX,GAEEY,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUN,EAAUO,SACtDC,EAAWC,GAAgBC,EAAShB,KAAWA,EAAMiB,QACtDC,EAAKpB,EAAMoB,IAAMC,EAAYpB,GAMnC,OAJAqB,EAAU,KACRL,EAAaf,KAAWA,EAAMiB,SAC7B,CAACjB,IAGFqB,EAAA,MAAA,IACMf,EAAUgB,KACdf,UAAWgB,EACTjB,EAAUgB,MAAMf,UAChBiB,EAAOF,KACPrB,EAAYuB,EAAOvB,eAAYwB,EAC/BX,EAAYU,EAAOE,aAAUD,GAC9BE,SAAA,CAEA5B,GACC6B,EAAA,QAAA,IACMtB,EAAUP,MACd8B,QAASX,EACTX,UAAWgB,EAAGjB,EAAUP,OAAOQ,UAAWiB,EAAOzB,gBAEhDA,IAGLsB,EAAA,MAAA,IACMf,EAAUwB,aACdvB,UAAWgB,EAAGjB,EAAUwB,cAAcvB,UAAWiB,EAAOM,cAAaH,SAAA,CAErEC,EAAA,WAAA,IACMnB,EACJS,GAAIA,EACJX,UAAWgB,EACTf,EACAgB,EAAOO,MACP7B,EAAgBsB,EAAOtB,mBAAgBuB,GAEzCtB,aAAc6B,EAAgBrB,EAAcR,GAC5CC,QAAS4B,EAAgBrB,EAAcP,GACvCC,OAAS4B,IACPlB,GAAa,GACbV,IAAS4B,MAGZvB,KAEFI,GACCc,EAACM,MACK5B,EAAUN,MACdO,UAAWgB,EAAGjB,EAAUN,OAAOO,UAAWiB,EAAOW,WACjDnC,MAAOA,MAKjB"}

package/dist/Inputs/TextInput/TextInput.d.ts

@@ -11,7 +11,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "size"> {
      * Use inputSize for <input size="10"/>
      */
     size?: "sm" | "md" | "lg";
-    inputSize?: ComponentProps<"input">["size"];
+    htmlSize?: ComponentProps<"input">["size"];
     disableEndIconGutters?: boolean;
     disableStartIconGutters?: boolean;
     disableInputGutters?: boolean;

package/dist/Inputs/TextInput/TextInput.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{cn as t}from"@studiocubics/utils";import{useState as s,useEffect as o}from"react";import{useRipple as l,eventWithRipple as a}from"../../Misc/Ripple/Ripple.js";import i from"./TextInput.module.css.js";import{InputErrors as n}from"../../Display/InputErrors/InputErrors.js";function c(c){const{startIcon:p,endIcon:m,label:u,error:d,fullWidth:N,disableEndIconGutters:b=!1,disableStartIconGutters:h=!1,disableInputGutters:I,size:f="md",inputSize:v,onTouchStart:G,onClick:x,onBlur:W,slotProps:j={},className:z,...C}=c,{rippleElements:E,createRipple:S}=l(j.ripple),[T,R]=s(d&&!!d.length);return o(()=>{R(d&&!!d.length)},[d]),e("div",{...j.root,className:t(j.root?.className,i.root,i[`size_${f}`],N?i.fullWidth:void 0,T?i.errored:void 0),children:[u&&r("label",{...j.label,htmlFor:c.id||u,className:t(j.label?.className,i.label),children:u}),e("div",{...j.inputWrapper,className:t(j.inputWrapper?.className,i.inputWrapper),children:[p&&r("span",{...j.startIcon,className:t(i.iconContainer,j.startIcon?.className,h?i.disableGutters:void 0),children:p}),r("input",{type:"text",className:t(z,i.input,I?i.disableGutters:""),onTouchStart:a(S,G),onClick:a(S,x),onBlur:e=>{R(!1),W?.(e)},size:v,id:u,...C}),m&&r("span",{...j.endIcon,className:t(i.iconContainer,j.endIcon?.className,b?i.disableGutters:void 0),children:m}),E]}),T&&r(n,{...j.error,className:t(j.error?.className,i.errorText),error:d})]})}export{c as TextInput};
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{toCamelCase as t,cn as s}from"@studiocubics/utils";import{useState as l,useEffect as o}from"react";import{useRipple as a,eventWithRipple as i}from"../../Misc/Ripple/Ripple.js";import n from"./TextInput.module.css.js";import{InputErrors as c}from"../../Display/InputErrors/InputErrors.js";function p(p){const{startIcon:m,endIcon:d,label:u,error:N,fullWidth:h,disableEndIconGutters:b=!1,disableStartIconGutters:I=!1,disableInputGutters:f,size:v="md",htmlSize:G,onTouchStart:x,onClick:W,onBlur:j,slotProps:z={},className:C,...E}=p,{rippleElements:S,createRipple:T}=a(z.ripple),[R,g]=l(N&&!!N.length),k=p.id??t(u);return o(()=>{g(N&&!!N.length)},[N]),e("div",{...z.root,className:s(z.root?.className,n.root,n[`size_${v}`],h?n.fullWidth:void 0,R?n.errored:void 0),children:[u&&r("label",{...z.label,htmlFor:k,className:s(z.label?.className,n.label),children:u}),e("div",{...z.inputWrapper,className:s(z.inputWrapper?.className,n.inputWrapper),children:[m&&r("span",{...z.startIcon,className:s(n.iconContainer,z.startIcon?.className,I?n.disableGutters:void 0),children:m}),r("input",{...E,id:k,type:"text",className:s(C,n.input,f?n.disableGutters:""),onTouchStart:i(T,x),onClick:i(T,W),onBlur:e=>{g(!1),j?.(e)},size:G}),d&&r("span",{...z.endIcon,className:s(n.iconContainer,z.endIcon?.className,b?n.disableGutters:void 0),children:d}),S]}),R&&r(c,{...z.error,className:s(z.error?.className,n.errorText),error:N})]})}export{p as TextInput};
 //# sourceMappingURL=TextInput.js.map

package/dist/Inputs/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../src/Inputs/TextInput/TextInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@studiocubics/utils\";\nimport {\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./TextInput.module.css\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface TextInputProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  label?: string;\n  error?: string | string[];\n  fullWidth?: boolean;\n  /**\n   * Use inputSize for <input size=\"10\"/>\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  inputSize?: ComponentProps<\"input\">[\"size\"];\n  disableEndIconGutters?: boolean;\n  disableStartIconGutters?: boolean;\n  disableInputGutters?: boolean;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n  };\n}\n\nexport function TextInput(props: TextInputProps) {\n  const {\n    startIcon,\n    endIcon,\n    label,\n    error,\n    fullWidth,\n    disableEndIconGutters = false,\n    disableStartIconGutters = false,\n    disableInputGutters,\n    size = \"md\",\n    inputSize,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps = {},\n    className: inputClass,\n    ...inputProps\n  } = props;\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        styles[`size_${size}`],\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={props.id || label}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        {startIcon && (\n          <span\n            {...slotProps.startIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.startIcon?.className,\n              disableStartIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {startIcon}\n          </span>\n        )}\n        <input\n          type=\"text\"\n          className={cn(\n            inputClass,\n            styles.input,\n            disableInputGutters ? styles.disableGutters : \"\",\n          )}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          size={inputSize}\n          id={label}\n          {...inputProps}\n        />\n        {endIcon && (\n          <span\n            {...slotProps.endIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.endIcon?.className,\n              disableEndIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {endIcon}\n          </span>\n        )}\n        {rippleElements}\n      </div>\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TextInput","props","startIcon","endIcon","label","error","fullWidth","disableEndIconGutters","disableStartIconGutters","disableInputGutters","size","inputSize","onTouchStart","onClick","onBlur","slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","useEffect","_jsxs","root","cn","styles","undefined","errored","_jsx","htmlFor","id","inputWrapper","children","iconContainer","disableGutters","type","input","eventWithRipple","e","InputErrors","errorText"],"mappings":"qVA6CM,SAAUA,EAAUC,GACxB,MAAMC,UACJA,EAASC,QACTA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,UACLA,EAASC,sBACTA,GAAwB,EAAKC,wBAC7BA,GAA0B,EAAKC,oBAC/BA,EAAmBC,KACnBA,EAAO,KAAIC,UACXA,EAASC,aACTA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAAY,CAAA,EACZC,UAAWC,KACRC,GACDjB,GACEkB,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUN,EAAUO,SACtDC,EAAWC,GAAgBC,EAASpB,KAAWA,EAAMqB,QAM5D,OAJAC,EAAU,KACRH,EAAanB,KAAWA,EAAMqB,SAC7B,CAACrB,IAGFuB,YACMb,EAAUc,KACdb,UAAWc,EACTf,EAAUc,MAAMb,UAChBe,EAAOF,KACPE,EAAO,QAAQrB,KACfJ,EAAYyB,EAAOzB,eAAY0B,EAC/BT,EAAYQ,EAAOE,aAAUD,aAG9B5B,GACC8B,EAAA,QAAA,IACMnB,EAAUX,MACd+B,QAASlC,EAAMmC,IAAMhC,EACrBY,UAAWc,EAAGf,EAAUX,OAAOY,UAAWe,EAAO3B,gBAEhDA,IAGLwB,EAAA,MAAA,IACMb,EAAUsB,aACdrB,UAAWc,EAAGf,EAAUsB,cAAcrB,UAAWe,EAAOM,cAAaC,SAAA,CAEpEpC,GACCgC,aACMnB,EAAUb,UACdc,UAAWc,EACTC,EAAOQ,cACPxB,EAAUb,WAAWc,UACrBR,EAA0BuB,EAAOS,oBAAiBR,YAGnD9B,IAGLgC,EAAA,QAAA,CACEO,KAAK,OACLzB,UAAWc,EACTb,EACAc,EAAOW,MACPjC,EAAsBsB,EAAOS,eAAiB,IAEhD5B,aAAc+B,EAAgBvB,EAAcR,GAC5CC,QAAS8B,EAAgBvB,EAAcP,GACvCC,OAAS8B,IACPpB,GAAa,GACbV,IAAS8B,IAEXlC,KAAMC,EACNyB,GAAIhC,KACAc,IAELf,GACC+B,EAAA,OAAA,IACMnB,EAAUZ,QACda,UAAWc,EACTC,EAAOQ,cACPxB,EAAUZ,SAASa,UACnBT,EAAwBwB,EAAOS,oBAAiBR,GACjDM,SAEAnC,IAGJgB,KAEFI,GACCW,EAACW,MACK9B,EAAUV,MACdW,UAAWc,EAAGf,EAAUV,OAAOW,UAAWe,EAAOe,WACjDzC,MAAOA,MAKjB"}
+{"version":3,"file":"TextInput.js","sources":["../../../src/Inputs/TextInput/TextInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport {\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./TextInput.module.css\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface TextInputProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  label?: string;\n  error?: string | string[];\n  fullWidth?: boolean;\n  /**\n   * Use inputSize for <input size=\"10\"/>\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  htmlSize?: ComponentProps<\"input\">[\"size\"];\n  disableEndIconGutters?: boolean;\n  disableStartIconGutters?: boolean;\n  disableInputGutters?: boolean;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n  };\n}\n\nexport function TextInput(props: TextInputProps) {\n  const {\n    startIcon,\n    endIcon,\n    label,\n    error,\n    fullWidth,\n    disableEndIconGutters = false,\n    disableStartIconGutters = false,\n    disableInputGutters,\n    size = \"md\",\n    htmlSize,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps = {},\n    className: inputClass,\n    ...inputProps\n  } = props;\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n  const id = props.id ?? toCamelCase(label);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        styles[`size_${size}`],\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        {startIcon && (\n          <span\n            {...slotProps.startIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.startIcon?.className,\n              disableStartIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {startIcon}\n          </span>\n        )}\n        <input\n          {...inputProps}\n          id={id}\n          type=\"text\"\n          className={cn(\n            inputClass,\n            styles.input,\n            disableInputGutters ? styles.disableGutters : \"\",\n          )}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          size={htmlSize}\n        />\n        {endIcon && (\n          <span\n            {...slotProps.endIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.endIcon?.className,\n              disableEndIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {endIcon}\n          </span>\n        )}\n        {rippleElements}\n      </div>\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["TextInput","props","startIcon","endIcon","label","error","fullWidth","disableEndIconGutters","disableStartIconGutters","disableInputGutters","size","htmlSize","onTouchStart","onClick","onBlur","slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","id","toCamelCase","useEffect","_jsxs","root","cn","styles","undefined","errored","_jsx","htmlFor","children","inputWrapper","iconContainer","disableGutters","type","input","eventWithRipple","e","InputErrors","errorText"],"mappings":"sWA6CM,SAAUA,EAAUC,GACxB,MAAMC,UACJA,EAASC,QACTA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,UACLA,EAASC,sBACTA,GAAwB,EAAKC,wBAC7BA,GAA0B,EAAKC,oBAC/BA,EAAmBC,KACnBA,EAAO,KAAIC,SACXA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAAY,CAAA,EACZC,UAAWC,KACRC,GACDjB,GACEkB,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUN,EAAUO,SACtDC,EAAWC,GAAgBC,EAASpB,KAAWA,EAAMqB,QACtDC,EAAK1B,EAAM0B,IAAMC,EAAYxB,GAMnC,OAJAyB,EAAU,KACRL,EAAanB,KAAWA,EAAMqB,SAC7B,CAACrB,IAGFyB,YACMf,EAAUgB,KACdf,UAAWgB,EACTjB,EAAUgB,MAAMf,UAChBiB,EAAOF,KACPE,EAAO,QAAQvB,KACfJ,EAAY2B,EAAO3B,eAAY4B,EAC/BX,EAAYU,EAAOE,aAAUD,aAG9B9B,GACCgC,EAAA,QAAA,IACMrB,EAAUX,MACdiC,QAASV,EACTX,UAAWgB,EAAGjB,EAAUX,OAAOY,UAAWiB,EAAO7B,OAAMkC,SAEtDlC,IAGL0B,EAAA,MAAA,IACMf,EAAUwB,aACdvB,UAAWgB,EAAGjB,EAAUwB,cAAcvB,UAAWiB,EAAOM,wBAEvDrC,GACCkC,EAAA,OAAA,IACMrB,EAAUb,UACdc,UAAWgB,EACTC,EAAOO,cACPzB,EAAUb,WAAWc,UACrBR,EAA0ByB,EAAOQ,oBAAiBP,YAGnDhC,IAGLkC,EAAA,QAAA,IACMlB,EACJS,GAAIA,EACJe,KAAK,OACL1B,UAAWgB,EACTf,EACAgB,EAAOU,MACPlC,EAAsBwB,EAAOQ,eAAiB,IAEhD7B,aAAcgC,EAAgBxB,EAAcR,GAC5CC,QAAS+B,EAAgBxB,EAAcP,GACvCC,OAAS+B,IACPrB,GAAa,GACbV,IAAS+B,IAEXnC,KAAMC,IAEPR,GACCiC,EAAA,OAAA,IACMrB,EAAUZ,QACda,UAAWgB,EACTC,EAAOO,cACPzB,EAAUZ,SAASa,UACnBT,EAAwB0B,EAAOQ,oBAAiBP,GACjDI,SAEAnC,IAGJgB,KAEFI,GACCa,EAACU,EAAW,IACN/B,EAAUV,MACdW,UAAWgB,EAAGjB,EAAUV,OAAOW,UAAWiB,EAAOc,WACjD1C,MAAOA,MAKjB"}

package/dist/Layout/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from "../../Inputs/_index";
+import { type ButtonProps } from "../../Inputs/Button/Button";
 import { type DialogProps } from "../../Layout/Dialog/Dialog";
 export interface DrawerProps extends Omit<DialogProps, "open" | "onClose"> {
     /**

package/dist/Layout/Drawer/Drawer.js

@@ -1,2 +1,2 @@
-import{jsxs as r,Fragment as o,jsx as t}from"react/jsx-runtime";import{useDisclosure as i}from"@studiocubics/hooks";import{Button as s}from"../../Inputs/Button/Button.js";import"react";import"../../Inputs/Checkbox/CheckboxProvider.js";import{cn as e}from"@studiocubics/utils";import"../../Display/InputErrors/InputErrors.js";import"../../Display/Accordion/Accordion.js";import"../../Cards/GlassCard/GlassCard.js";import"../../Display/Chip/Chip.js";import"../../Display/IdentityDisplay/IdentityDisplay.js";import"../../Display/Kbd/buttonList.js";import"../../Display/List/List.js";import"../../Cards/Card/Card.js";import"../../Cards/CollectionItemCard/CollectionItemCard.js";import"react-dom";import{Dialog as n}from"../Dialog/Dialog.js";import l from"./Drawer.module.css.js";const p=o=>r("svg",{width:"24",height:"24",stroke:"currentColor",...o,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[t("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}),t("path",{d:"M9 3v18"}),t("path",{d:"m16 15-3-3 3-3"})]}),d=o=>r("svg",{width:"24",height:"24",stroke:"currentColor",...o,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[t("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}),t("path",{d:"M15 3v18"}),t("path",{d:"m8 9 3 3-3 3"})]});function a(a){const{side:m="right",slotProps:c,children:h,className:u,...C}=a,{open:w,handleOpen:j,handleClose:g}=i();return r(o,{children:[t(s,{onClick:j,children:t("left"==m?d:p,{})}),t(n,{open:w,onClose:g,className:e(u,l.drawer),...C,children:h})]})}export{a as Drawer};
+import{jsxs as o,Fragment as t,jsx as r}from"react/jsx-runtime";import{useDisclosure as e}from"@studiocubics/hooks";import{Button as i}from"../../Inputs/Button/Button.js";import{Dialog as n}from"../Dialog/Dialog.js";import{cn as s}from"@studiocubics/utils";import l from"./Drawer.module.css.js";const h=t=>o("svg",{width:"24",height:"24",stroke:"currentColor",...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[r("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}),r("path",{d:"M9 3v18"}),r("path",{d:"m16 15-3-3 3-3"})]}),d=t=>o("svg",{width:"24",height:"24",stroke:"currentColor",...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[r("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}),r("path",{d:"M15 3v18"}),r("path",{d:"m8 9 3 3-3 3"})]});function c(c){const{side:m="right",slotProps:p,children:u,className:w,...a}=c,{open:g,handleOpen:f,handleClose:k}=e();return o(t,{children:[r(i,{onClick:f,children:r("left"==m?d:h,{})}),r(n,{open:g,onClose:k,className:s(w,l.drawer),...a,children:u})]})}export{c as Drawer};
 //# sourceMappingURL=Drawer.js.map

package/dist/Layout/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/Layout/Drawer/Drawer.tsx"],"sourcesContent":["import { useDisclosure } from \"@studiocubics/hooks\";\nimport { Button, type ButtonProps } from \"../../Inputs/_index\";\nimport { Dialog, type DialogProps } from \"../../Layout/Dialog/Dialog\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./Drawer.module.css\";\n\nexport interface DrawerProps extends Omit<DialogProps, \"open\" | \"onClose\"> {\n  /**\n   * @default \"right\"\n   */\n  side?: \"right\" | \"left\";\n\n  slotProps?: {\n    button?: ButtonProps;\n  };\n}\n\nconst PanelLeft = (props: ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      stroke=\"currentColor\"\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n      <path d=\"M9 3v18\" />\n      <path d=\"m16 15-3-3 3-3\" />\n    </svg>\n  );\n};\nconst PanelRight = (props: ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      stroke=\"currentColor\"\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n      <path d=\"M15 3v18\" />\n      <path d=\"m8 9 3 3-3 3\" />\n    </svg>\n  );\n};\n\n/**\n * Opens a drawer from the side of the screen\n */\nexport function Drawer(props: DrawerProps) {\n  const { side = \"right\", slotProps, children, className, ...rest } = props;\n  const { open, handleOpen, handleClose } = useDisclosure();\n\n  return (\n    <>\n      <Button onClick={handleOpen}>\n        {side == \"left\" ? <PanelRight /> : <PanelLeft />}\n      </Button>\n      <Dialog\n        open={open}\n        onClose={handleClose}\n        className={cn(className, styles.drawer)}\n        {...rest}\n      >\n        {children}\n      </Dialog>\n    </>\n  );\n}\n"],"names":["PanelLeft","props","_jsxs","width","height","stroke","xmlns","viewBox","fill","children","_jsx","x","y","rx","d","PanelRight","Drawer","side","slotProps","className","rest","open","handleOpen","handleClose","useDisclosure","_Fragment","Button","onClick","Dialog","onClose","cn","styles","drawer"],"mappings":"uwBAkBA,MAAMA,EAAaC,GAEfC,EAAA,MAAA,CACEC,MAAM,KACNC,OAAO,KACPC,OAAO,kBACHJ,EACJK,MAAM,6BACNC,QAAQ,YACRC,KAAK,OAAM,eACE,IAAG,iBACD,0BACC,QAAOC,SAAA,CAEvBC,EAAA,OAAA,CAAMP,MAAM,KAAKC,OAAO,KAAKO,EAAE,IAAIC,EAAE,IAAIC,GAAG,MAC5CH,EAAA,OAAA,CAAMI,EAAE,YACRJ,EAAA,OAAA,CAAMI,EAAE,sBAIRC,EAAcd,GAEhBC,EAAA,MAAA,CACEC,MAAM,KACNC,OAAO,KACPC,OAAO,kBACHJ,EACJK,MAAM,6BACNC,QAAQ,YACRC,KAAK,OAAM,eACE,IAAG,iBACD,0BACC,QAAOC,SAAA,CAEvBC,EAAA,OAAA,CAAMP,MAAM,KAAKC,OAAO,KAAKO,EAAE,IAAIC,EAAE,IAAIC,GAAG,MAC5CH,EAAA,OAAA,CAAMI,EAAE,aACRJ,EAAA,OAAA,CAAMI,EAAE,oBAQR,SAAUE,EAAOf,GACrB,MAAMgB,KAAEA,EAAO,QAAOC,UAAEA,EAAST,SAAEA,EAAQU,UAAEA,KAAcC,GAASnB,GAC9DoB,KAAEA,EAAIC,WAAEA,EAAUC,YAAEA,GAAgBC,IAE1C,OACEtB,EAAAuB,EAAA,CAAAhB,SAAA,CACEC,EAACgB,EAAM,CAACC,QAASL,EAAUb,SACPC,EAAT,QAARO,EAAkBF,EAAiBf,EAAP,CAAA,KAE/BU,EAACkB,EAAM,CACLP,KAAMA,EACNQ,QAASN,EACTJ,UAAWW,EAAGX,EAAWY,EAAOC,WAC5BZ,EAAIX,SAEPA,MAIT"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/Layout/Drawer/Drawer.tsx"],"sourcesContent":["import { useDisclosure } from \"@studiocubics/hooks\";\nimport { Button, type ButtonProps } from \"../../Inputs/Button/Button\";\nimport { Dialog, type DialogProps } from \"../../Layout/Dialog/Dialog\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./Drawer.module.css\";\n\nexport interface DrawerProps extends Omit<DialogProps, \"open\" | \"onClose\"> {\n  /**\n   * @default \"right\"\n   */\n  side?: \"right\" | \"left\";\n\n  slotProps?: {\n    button?: ButtonProps;\n  };\n}\n\nconst PanelLeft = (props: ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      stroke=\"currentColor\"\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n      <path d=\"M9 3v18\" />\n      <path d=\"m16 15-3-3 3-3\" />\n    </svg>\n  );\n};\nconst PanelRight = (props: ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      stroke=\"currentColor\"\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n      <path d=\"M15 3v18\" />\n      <path d=\"m8 9 3 3-3 3\" />\n    </svg>\n  );\n};\n\n/**\n * Opens a drawer from the side of the screen\n */\nexport function Drawer(props: DrawerProps) {\n  const { side = \"right\", slotProps, children, className, ...rest } = props;\n  const { open, handleOpen, handleClose } = useDisclosure();\n\n  return (\n    <>\n      <Button onClick={handleOpen}>\n        {side == \"left\" ? <PanelRight /> : <PanelLeft />}\n      </Button>\n      <Dialog\n        open={open}\n        onClose={handleClose}\n        className={cn(className, styles.drawer)}\n        {...rest}\n      >\n        {children}\n      </Dialog>\n    </>\n  );\n}\n"],"names":["PanelLeft","props","_jsxs","width","height","stroke","xmlns","viewBox","fill","children","_jsx","x","y","rx","d","PanelRight","Drawer","side","slotProps","className","rest","open","handleOpen","handleClose","useDisclosure","_Fragment","Button","onClick","Dialog","onClose","cn","styles","drawer"],"mappings":"uSAkBA,MAAMA,EAAaC,GAEfC,EAAA,MAAA,CACEC,MAAM,KACNC,OAAO,KACPC,OAAO,kBACHJ,EACJK,MAAM,6BACNC,QAAQ,YACRC,KAAK,OAAM,eACE,IAAG,iBACD,0BACC,QAAOC,SAAA,CAEvBC,EAAA,OAAA,CAAMP,MAAM,KAAKC,OAAO,KAAKO,EAAE,IAAIC,EAAE,IAAIC,GAAG,MAC5CH,EAAA,OAAA,CAAMI,EAAE,YACRJ,EAAA,OAAA,CAAMI,EAAE,sBAIRC,EAAcd,GAEhBC,EAAA,MAAA,CACEC,MAAM,KACNC,OAAO,KACPC,OAAO,kBACHJ,EACJK,MAAM,6BACNC,QAAQ,YACRC,KAAK,OAAM,eACE,IAAG,iBACD,0BACC,QAAOC,SAAA,CAEvBC,EAAA,OAAA,CAAMP,MAAM,KAAKC,OAAO,KAAKO,EAAE,IAAIC,EAAE,IAAIC,GAAG,MAC5CH,EAAA,OAAA,CAAMI,EAAE,aACRJ,EAAA,OAAA,CAAMI,EAAE,oBAQR,SAAUE,EAAOf,GACrB,MAAMgB,KAAEA,EAAO,QAAOC,UAAEA,EAAST,SAAEA,EAAQU,UAAEA,KAAcC,GAASnB,GAC9DoB,KAAEA,EAAIC,WAAEA,EAAUC,YAAEA,GAAgBC,IAE1C,OACEtB,EAAAuB,EAAA,CAAAhB,SAAA,CACEC,EAACgB,EAAM,CAACC,QAASL,EAAUb,SACPC,EAAT,QAARO,EAAkBF,EAAiBf,EAAP,CAAA,KAE/BU,EAACkB,EAAM,CACLP,KAAMA,EACNQ,QAASN,EACTJ,UAAWW,EAAGX,EAAWY,EAAOC,WAC5BZ,EAAIX,SAEPA,MAIT"}

package/dist/Navigation/Breadcrumbs/Breadcrumbs.d.ts

@@ -34,6 +34,4 @@ export interface BreadCrumbsProps {
      */
     renderItem?: (props: BreadcrumbsItemProps, key?: string | number) => ReactElement;
 }
-export declare const ChevronRightIcon: import("react/jsx-runtime").JSX.Element;
-export declare const EllipsisIcon: import("react/jsx-runtime").JSX.Element;
 export declare function Breadcrumbs(props: BreadCrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Navigation/Breadcrumbs/Breadcrumbs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as r,Fragment as s}from"react";import{useBreadcrumbs as o}from"./useBreadcrumbs.js";import{BreadcrumbsItem as t}from"./BreadcrumbsItem.js";import{cn as c}from"@studiocubics/utils";import l from"./Breadcrumbs.module.css.js";const n=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-right-icon lucide-chevron-right",children:e("path",{d:"m9 18 6-6-6-6"})}),u=i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-ellipsis-icon lucide-ellipsis",children:[e("circle",{cx:"12",cy:"12",r:"1"}),e("circle",{cx:"19",cy:"12",r:"1"}),e("circle",{cx:"5",cy:"12",r:"1"})]});function d(d){const{onChange:m,boundaryCount:a=1,siblingCount:h=0,children:p,defaultActive:g=0,separator:v=n,ellipsis:w=u,renderItem:b=(i,r)=>e(t,{...i},r)}=d,[f,k]=r(g),x=o({activeCrumb:f,crumbs:p,boundaryCount:a,siblingCount:h});return e("span",{className:l.root,children:x.map((e,r)=>i(s,{children:[b({className:c(l.item,f===r?l.activeItem:"","ellipsis"==e?l.ellipsis:""),onClick:()=>{return k(e=r),void(m&&m(e));var e},children:"ellipsis"==e?w:e}),r!==x.length-1&&"ellipsis"!==e&&"ellipsis"!=x[r+1]&&v]},r))})}export{d as Breadcrumbs,n as ChevronRightIcon,u as EllipsisIcon};
+"use client";import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useState as i,Fragment as t}from"react";import{useBreadcrumbs as o}from"./useBreadcrumbs.js";import{BreadcrumbsItem as n}from"./BreadcrumbsItem.js";import{cn as s}from"@studiocubics/utils";import c from"./Breadcrumbs.module.css.js";function l(e){const{width:i=24,height:t=i,...o}=e;return r("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...o,xmlns:"http://www.w3.org/2000/svg",width:i,height:t,viewBox:"0 0 24 24",children:r("path",{d:"m9 18 6-6-6-6"})})}function u(i){const{width:t=24,height:o=t,...n}=i;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...n,xmlns:"http://www.w3.org/2000/svg",width:t,height:o,viewBox:"0 0 24 24",children:[r("circle",{cx:"12",cy:"12",r:"1"}),r("circle",{cx:"19",cy:"12",r:"1"}),r("circle",{cx:"5",cy:"12",r:"1"})]})}function m(m){const{onChange:d,boundaryCount:h=1,siblingCount:a=0,children:p,defaultActive:g=0,separator:w=r(l,{}),ellipsis:f=r(u,{}),renderItem:v=(e,i)=>r(n,{...e},i)}=m,[b,k]=i(g),x=o({activeCrumb:b,crumbs:p,boundaryCount:h,siblingCount:a});return r("span",{className:c.root,children:x.map((r,i)=>e(t,{children:[v({className:s(c.item,b===i?c.activeItem:"","ellipsis"==r?c.ellipsis:""),onClick:()=>{return k(r=i),void(d&&d(r));var r},children:"ellipsis"==r?f:r}),i!==x.length-1&&"ellipsis"!==r&&"ellipsis"!=x[i+1]&&w]},i))})}export{m as Breadcrumbs};
 //# sourceMappingURL=Breadcrumbs.js.map

package/dist/Navigation/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/Navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Fragment, type ReactElement, type ReactNode, useState } from \"react\";\nimport { useBreadcrumbs } from \"./useBreadcrumbs\";\nimport { BreadcrumbsItem, type BreadcrumbsItemProps } from \"./BreadcrumbsItem\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./Breadcrumbs.module.css\";\n\nexport interface BreadCrumbsProps {\n  children: ReactElement[];\n  /**\n   * For controlled Breadcrumbs pass the onChange function\n   */\n  onChange?: (pageNumber: number) => void;\n  /**\n   * How many siblings of the active item should be shown\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * How many of the boundary items should be shown\n   * @default 0\n   */\n  boundaryCount?: number;\n  /**\n   * Crumb that will be selected by default\n   * @default 1\n   */\n  defaultActive?: number;\n  /**\n   * Node to use as separator\n   */\n  separator?: ReactNode;\n  /**\n   * Node to use as ellipsis\n   */\n  ellipsis?: ReactNode;\n  /**\n   * Function that can be used to modify the rendered BreadcrumbsItem component\n   */\n  renderItem?: (\n    props: BreadcrumbsItemProps,\n    key?: string | number,\n  ) => ReactElement;\n}\n\nexport const ChevronRightIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"lucide lucide-chevron-right-icon lucide-chevron-right\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n);\nexport const EllipsisIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"lucide lucide-ellipsis-icon lucide-ellipsis\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n    <circle cx=\"19\" cy=\"12\" r=\"1\" />\n    <circle cx=\"5\" cy=\"12\" r=\"1\" />\n  </svg>\n);\nexport function Breadcrumbs(props: BreadCrumbsProps) {\n  const {\n    onChange,\n    boundaryCount = 1,\n    siblingCount = 0,\n    children,\n    defaultActive = 0,\n    separator = ChevronRightIcon,\n    ellipsis = EllipsisIcon,\n    renderItem = (props, key?) => <BreadcrumbsItem key={key} {...props} />,\n  } = props;\n  const [activeCrumb, setActiveCrumb] = useState<number>(defaultActive);\n\n  const breadcrumbRange = useBreadcrumbs({\n    activeCrumb,\n    crumbs: children,\n    boundaryCount,\n    siblingCount,\n  });\n\n  function handleClick(i: number) {\n    setActiveCrumb(i);\n    if (onChange) onChange(i);\n  }\n\n  return (\n    <span className={styles.root}>\n      {breadcrumbRange.map((item, idx) => (\n        <Fragment key={idx}>\n          {renderItem({\n            className: cn(\n              styles.item,\n              activeCrumb === idx ? styles.activeItem : \"\",\n              item == \"ellipsis\" ? styles.ellipsis : \"\",\n            ),\n            onClick: () => handleClick(idx),\n            children: item == \"ellipsis\" ? ellipsis : item,\n          })}\n          {idx !== breadcrumbRange.length - 1 &&\n            item !== \"ellipsis\" &&\n            breadcrumbRange[idx + 1] != \"ellipsis\" &&\n            separator}\n        </Fragment>\n      ))}\n    </span>\n  );\n}\n"],"names":["ChevronRightIcon","_jsx","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","className","children","d","EllipsisIcon","_jsxs","cx","cy","r","Breadcrumbs","props","onChange","boundaryCount","siblingCount","defaultActive","separator","ellipsis","renderItem","key","BreadcrumbsItem","activeCrumb","setActiveCrumb","useState","breadcrumbRange","useBreadcrumbs","crumbs","styles","root","map","item","idx","Fragment","cn","activeItem","onClick","handleClick","i","length"],"mappings":"8SA8CO,MAAMA,EACXC,SACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,QACfC,UAAU,wDAAuDC,SAEjEX,EAAA,OAAA,CAAMY,EAAE,oBAGCC,EACXC,EAAA,MAAA,CACEb,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,QACfC,UAAU,8CAA6CC,SAAA,CAEvDX,YAAQe,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1BjB,EAAA,SAAA,CAAQe,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1BjB,EAAA,SAAA,CAAQe,GAAG,IAAIC,GAAG,KAAKC,EAAE,SAGvB,SAAUC,EAAYC,GAC1B,MAAMC,SACJA,EAAQC,cACRA,EAAgB,EAACC,aACjBA,EAAe,EAACX,SAChBA,EAAQY,cACRA,EAAgB,EAACC,UACjBA,EAAYzB,EAAgB0B,SAC5BA,EAAWZ,EAAYa,WACvBA,EAAa,CAACP,EAAOQ,IAAS3B,EAAC4B,EAAe,IAAeT,GAATQ,IAClDR,GACGU,EAAaC,GAAkBC,EAAiBR,GAEjDS,EAAkBC,EAAe,CACrCJ,cACAK,OAAQvB,EACRU,gBACAC,iBAQF,OACEtB,EAAA,OAAA,CAAMU,UAAWyB,EAAOC,KAAIzB,SACzBqB,EAAgBK,IAAI,CAACC,EAAMC,IAC1BzB,EAAC0B,EAAQ,CAAA7B,SAAA,CACNe,EAAW,CACVhB,UAAW+B,EACTN,EAAOG,KACPT,IAAgBU,EAAMJ,EAAOO,WAAa,GAClC,YAARJ,EAAqBH,EAAOV,SAAW,IAEzCkB,QAAS,KAAMC,OAdvBd,EADmBe,EAegBN,QAb/BnB,GAAUA,EAASyB,IAFzB,IAAqBA,GAgBXlC,SAAkB,YAAR2B,EAAqBb,EAAWa,IAE3CC,IAAQP,EAAgBc,OAAS,GACvB,aAATR,GAC4B,YAA5BN,EAAgBO,EAAM,IACtBf,IAbWe,KAkBvB"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/Navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentProps,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  useState,\n} from \"react\";\nimport { useBreadcrumbs } from \"./useBreadcrumbs\";\nimport { BreadcrumbsItem, type BreadcrumbsItemProps } from \"./BreadcrumbsItem\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./Breadcrumbs.module.css\";\n\nexport interface BreadCrumbsProps {\n  children: ReactElement[];\n  /**\n   * For controlled Breadcrumbs pass the onChange function\n   */\n  onChange?: (pageNumber: number) => void;\n  /**\n   * How many siblings of the active item should be shown\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * How many of the boundary items should be shown\n   * @default 0\n   */\n  boundaryCount?: number;\n  /**\n   * Crumb that will be selected by default\n   * @default 1\n   */\n  defaultActive?: number;\n  /**\n   * Node to use as separator\n   */\n  separator?: ReactNode;\n  /**\n   * Node to use as ellipsis\n   */\n  ellipsis?: ReactNode;\n  /**\n   * Function that can be used to modify the rendered BreadcrumbsItem component\n   */\n  renderItem?: (\n    props: BreadcrumbsItemProps,\n    key?: string | number,\n  ) => ReactElement;\n}\n\nfunction ChevronRightIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  );\n}\nfunction EllipsisIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"1\" />\n      <circle cx=\"19\" cy=\"12\" r=\"1\" />\n      <circle cx=\"5\" cy=\"12\" r=\"1\" />\n    </svg>\n  );\n}\nexport function Breadcrumbs(props: BreadCrumbsProps) {\n  const {\n    onChange,\n    boundaryCount = 1,\n    siblingCount = 0,\n    children,\n    defaultActive = 0,\n    separator = <ChevronRightIcon />,\n    ellipsis = <EllipsisIcon />,\n    renderItem = (props, key?) => <BreadcrumbsItem key={key} {...props} />,\n  } = props;\n  const [activeCrumb, setActiveCrumb] = useState<number>(defaultActive);\n\n  const breadcrumbRange = useBreadcrumbs({\n    activeCrumb,\n    crumbs: children,\n    boundaryCount,\n    siblingCount,\n  });\n\n  function handleClick(i: number) {\n    setActiveCrumb(i);\n    if (onChange) onChange(i);\n  }\n\n  return (\n    <span className={styles.root}>\n      {breadcrumbRange.map((item, idx) => (\n        <Fragment key={idx}>\n          {renderItem({\n            className: cn(\n              styles.item,\n              activeCrumb === idx ? styles.activeItem : \"\",\n              item == \"ellipsis\" ? styles.ellipsis : \"\",\n            ),\n            onClick: () => handleClick(idx),\n            children: item == \"ellipsis\" ? ellipsis : item,\n          })}\n          {idx !== breadcrumbRange.length - 1 &&\n            item !== \"ellipsis\" &&\n            breadcrumbRange[idx + 1] != \"ellipsis\" &&\n            separator}\n        </Fragment>\n      ))}\n    </span>\n  );\n}\n"],"names":["ChevronRightIcon","props","width","height","rest","_jsx","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","xmlns","viewBox","d","EllipsisIcon","_jsxs","children","cx","cy","r","Breadcrumbs","onChange","boundaryCount","siblingCount","defaultActive","separator","ellipsis","renderItem","key","BreadcrumbsItem","activeCrumb","setActiveCrumb","useState","breadcrumbRange","useBreadcrumbs","crumbs","className","styles","root","map","item","idx","Fragment","cn","activeItem","onClick","handleClick","i","length"],"mappings":"8SAoDA,SAASA,EAAiBC,GACxB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,SACEC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,WACXN,EACJO,MAAM,6BACNT,MAAOA,EACPC,OAAQA,EACRS,QAAQ,qBAERP,EAAA,OAAA,CAAMQ,EAAE,mBAGd,CACA,SAASC,EAAab,GACpB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEc,EAAA,MAAA,CACET,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,WACXN,EACJO,MAAM,6BACNT,MAAOA,EACPC,OAAQA,EACRS,QAAQ,YAAWI,SAAA,CAEnBX,EAAA,SAAA,CAAQY,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1Bd,YAAQY,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1Bd,YAAQY,GAAG,IAAIC,GAAG,KAAKC,EAAE,QAG/B,CACM,SAAUC,EAAYnB,GAC1B,MAAMoB,SACJA,EAAQC,cACRA,EAAgB,EAACC,aACjBA,EAAe,EAACP,SAChBA,EAAQQ,cACRA,EAAgB,EAACC,UACjBA,EAAYpB,EAACL,EAAgB,CAAA,GAAG0B,SAChCA,EAAWrB,EAACS,MAAea,WAC3BA,EAAa,CAAC1B,EAAO2B,IAASvB,EAACwB,MAA8B5B,GAAT2B,IAClD3B,GACG6B,EAAaC,GAAkBC,EAAiBR,GAEjDS,EAAkBC,EAAe,CACrCJ,cACAK,OAAQnB,EACRM,gBACAC,iBAQF,OACElB,EAAA,OAAA,CAAM+B,UAAWC,EAAOC,KAAItB,SACzBiB,EAAgBM,IAAI,CAACC,EAAMC,IAC1B1B,EAAC2B,EAAQ,CAAA1B,SAAA,CACNW,EAAW,CACVS,UAAWO,EACTN,EAAOG,KACPV,IAAgBW,EAAMJ,EAAOO,WAAa,GAClC,YAARJ,EAAqBH,EAAOX,SAAW,IAEzCmB,QAAS,KAAMC,OAdvBf,EADmBgB,EAegBN,QAb/BpB,GAAUA,EAAS0B,IAFzB,IAAqBA,GAgBX/B,SAAkB,YAARwB,EAAqBd,EAAWc,IAE3CC,IAAQR,EAAgBe,OAAS,GACvB,aAATR,GAC4B,YAA5BP,EAAgBQ,EAAM,IACtBhB,IAbWgB,KAkBvB"}

package/dist/Navigation/Pagination/Pagination.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as o,jsx as i}from"react/jsx-runtime";import{useState as t}from"react";import n from"./Pagination.module.css.js";import{usePagination as e}from"./usePagination.js";import{PaginationItem as r}from"./PaginationItem.js";import{cn as l}from"@studiocubics/utils";const s=o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-arrow-left-icon lucide-arrow-left",children:[i("path",{d:"m12 19-7-7 7-7"}),i("path",{d:"M19 12H5"})]}),c=o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line",children:[i("path",{d:"M3 19V5"}),i("path",{d:"m13 6-6 6 6 6"}),i("path",{d:"M7 12h14"})]});function a(a){const{count:d,page:u,onChange:m,defaultPage:h=1,boundaryCount:p=1,siblingCount:w=1,showFirstButton:f=!0,showLastButton:g=!0,firstLastButtonIcon:k=c,prevNextButtonIcon:C=s,renderItem:b=(o,t)=>i(r,{...o},t)}=a,[v,x]=t(h),j=u??v,B=e({count:d,page:j,siblingCount:w,boundaryCount:p});function L({disabled:o,onClick:i,icon:t}){return b({className:l(n.item,n.icon,o?n.disabled:""),onClick:o?void 0:i,children:t})}function N(o){o<1||o>d||(x(o),m&&m(o))}return o("ul",{className:n.root,children:[f&&L({disabled:1===j,onClick:()=>N(1),icon:k}),L({disabled:1===j,onClick:()=>N(j-1),icon:C}),B.map((o,t)=>"ellipses"===o?i("li",{children:"…"},`dots-${t}`):b({className:l(n.item,j===o?n.activeItem:""),onClick:()=>N(o),children:o},o)),L({disabled:j===d,onClick:()=>N(j+1),icon:C}),g&&L({disabled:j===d,onClick:()=>N(d),icon:k})]})}export{a as Pagination};
+"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as n}from"react";import i from"./Pagination.module.css.js";import{usePagination as e}from"./usePagination.js";import{PaginationItem as r}from"./PaginationItem.js";import{cn as s}from"@studiocubics/utils";function c(n){const{width:i=24,height:e=i,...r}=n;return o("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...r,xmlns:"http://www.w3.org/2000/svg",width:i,height:e,viewBox:"0 0 24 24",children:[t("path",{d:"m12 19-7-7 7-7"}),t("path",{d:"M19 12H5"})]})}function d(n){const{width:i=24,height:e=i,...r}=n;return o("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...r,xmlns:"http://www.w3.org/2000/svg",width:i,height:e,viewBox:"0 0 24 24",children:[t("path",{d:"M3 19V5"}),t("path",{d:"m13 6-6 6 6 6"}),t("path",{d:"M7 12h14"})]})}function l(l){const{count:a,page:u,onChange:h,defaultPage:m=1,boundaryCount:p=1,siblingCount:g=1,showFirstButton:w=!0,showLastButton:f=!0,firstLastButtonIcon:k=t(d,{}),prevNextButtonIcon:C=t(c,{}),renderItem:b=(o,n)=>t(r,{...o},n)}=l,[v,x]=n(m),j=u??v,B=e({count:a,page:j,siblingCount:g,boundaryCount:p});function L({disabled:t,onClick:o,icon:n}){return b({className:s(i.item,i.icon,t?i.disabled:""),onClick:t?void 0:o,children:n})}function I(t){t<1||t>a||(x(t),h&&h(t))}return o("ul",{className:i.root,children:[w&&a>1&&L({disabled:1===j,onClick:()=>I(1),icon:k}),a>1&&L({disabled:1===j,onClick:()=>I(j-1),icon:C}),B.map((o,n)=>"ellipses"===o?t("li",{children:"…"},`dots-${n}`):b({className:s(i.item,j===o?i.activeItem:""),onClick:()=>I(o),children:o},o)),a>1&&L({disabled:j===a,onClick:()=>I(j+1),icon:C}),f&&a>1&&L({disabled:j===a,onClick:()=>I(a),icon:k})]})}export{l as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/dist/Navigation/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/Navigation/Pagination/Pagination.tsx"],"sourcesContent":["\"use client\";\nimport { useState, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Pagination.module.css\";\nimport { usePagination } from \"./usePagination\";\nimport { type PaginationItemProps, PaginationItem } from \"./PaginationItem\";\nimport { cn } from \"@studiocubics/utils\";\n\nexport interface PaginationProps {\n  /**\n   * Total number of pages\n   */\n  count: number;\n  /**\n   * For controlled Pagination pass the state\n   */\n  page?: number;\n  /**\n   * For controlled Pagination pass the onChange function\n   */\n  onChange?: (pageNumber: number) => void;\n  /**\n   * Page that will be selected by default\n   * @default 1\n   */\n  defaultPage?: number;\n  /**\n   * How many siblings of the active item should be shown\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * How many of the boundary items should be shown\n   * @default 1\n   */\n  boundaryCount?: number;\n  /**\n   * Function that can be used to modify the rendered PaginationItem component\n   */\n  renderItem?: (\n    props: PaginationItemProps,\n    key?: string | number\n  ) => ReactElement;\n  /**\n   * Shows the skip to first button\n   */\n  showFirstButton?: boolean;\n  /**\n   * Shows the skip to last button\n   */\n  showLastButton?: boolean;\n  /**\n   * Icon for first button and the last button icon which will be 180deg\n   */\n  firstLastButtonIcon?: ReactNode;\n  /**\n   * Icon for prev button and the next button icon which will be 180deg\n   */\n  prevNextButtonIcon?: ReactNode;\n}\nconst arrowLeftIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"lucide lucide-arrow-left-icon lucide-arrow-left\"\n  >\n    <path d=\"m12 19-7-7 7-7\" />\n    <path d=\"M19 12H5\" />\n  </svg>\n);\nconst ArrowLeftToLineIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"lucide lucide-arrow-left-to-line-icon lucide-arrow-left-to-line\"\n  >\n    <path d=\"M3 19V5\" />\n    <path d=\"m13 6-6 6 6 6\" />\n    <path d=\"M7 12h14\" />\n  </svg>\n);\nexport function Pagination(props: PaginationProps) {\n  const {\n    count,\n    page: pageProp,\n    onChange,\n    defaultPage = 1,\n    boundaryCount = 1,\n    siblingCount = 1,\n    showFirstButton = true,\n    showLastButton = true,\n    firstLastButtonIcon = ArrowLeftToLineIcon,\n    prevNextButtonIcon = arrowLeftIcon,\n    renderItem = (props, key?) => <PaginationItem key={key} {...props} />,\n  } = props;\n\n  const [page, setPage] = useState(defaultPage);\n  const activePage = pageProp ?? page;\n\n  const paginationRange = usePagination({\n    count,\n    page: activePage,\n    siblingCount,\n    boundaryCount,\n  });\n\n  function renderIconButton({\n    disabled,\n    onClick,\n    icon,\n  }: {\n    disabled: boolean;\n    onClick: () => void;\n    icon: React.ReactNode;\n  }) {\n    return renderItem({\n      className: cn(styles.item, styles.icon, disabled ? styles.disabled : \"\"),\n      onClick: !disabled ? onClick : undefined,\n      children: icon,\n    });\n  }\n\n  function handleClick(i: number) {\n    if (i < 1 || i > count) return;\n    setPage(i);\n    if (onChange) onChange(i);\n  }\n\n  return (\n    <ul className={styles.root}>\n      {showFirstButton &&\n        renderIconButton({\n          disabled: activePage === 1,\n          onClick: () => handleClick(1),\n          icon: firstLastButtonIcon,\n        })}\n      {renderIconButton({\n        disabled: activePage === 1,\n        onClick: () => handleClick(activePage - 1),\n        icon: prevNextButtonIcon,\n      })}\n\n      {paginationRange.map((item, idx) =>\n        item === \"ellipses\" ? (\n          <li key={`dots-${idx}`}>…</li>\n        ) : (\n          renderItem(\n            {\n              className: cn(\n                styles.item,\n                activePage === item ? styles.activeItem : \"\"\n              ),\n              onClick: () => handleClick(item),\n              children: item,\n            },\n            item\n          )\n        )\n      )}\n      {renderIconButton({\n        disabled: activePage === count,\n        onClick: () => handleClick(activePage + 1),\n        icon: prevNextButtonIcon,\n      })}\n\n      {showLastButton &&\n        renderIconButton({\n          disabled: activePage === count,\n          onClick: () => handleClick(count),\n          icon: firstLastButtonIcon,\n        })}\n    </ul>\n  );\n}\n"],"names":["arrowLeftIcon","_jsxs","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","className","children","_jsx","d","ArrowLeftToLineIcon","Pagination","props","count","page","pageProp","onChange","defaultPage","boundaryCount","siblingCount","showFirstButton","showLastButton","firstLastButtonIcon","prevNextButtonIcon","renderItem","key","PaginationItem","setPage","useState","activePage","paginationRange","usePagination","renderIconButton","disabled","onClick","icon","cn","styles","item","undefined","handleClick","i","root","map","idx","activeItem"],"mappings":"2RA2DA,MAAMA,EACJC,EAAA,MAAA,CACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,QACfC,UAAU,kDAAiDC,SAAA,CAE3DC,EAAA,OAAA,CAAMC,EAAE,mBACRD,EAAA,OAAA,CAAMC,EAAE,gBAGNC,EACJd,EAAA,MAAA,CACEC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,QACfC,UAAU,kEAAiEC,SAAA,CAE3EC,EAAA,OAAA,CAAMC,EAAE,YACRD,EAAA,OAAA,CAAMC,EAAE,kBACRD,EAAA,OAAA,CAAMC,EAAE,gBAGN,SAAUE,EAAWC,GACzB,MAAMC,MACJA,EACAC,KAAMC,EAAQC,SACdA,EAAQC,YACRA,EAAc,EAACC,cACfA,EAAgB,EAACC,aACjBA,EAAe,EAACC,gBAChBA,GAAkB,EAAIC,eACtBA,GAAiB,EAAIC,oBACrBA,EAAsBZ,EAAmBa,mBACzCA,EAAqB5B,EAAa6B,WAClCA,EAAa,CAACZ,EAAOa,IAASjB,EAACkB,EAAc,IAAed,GAATa,IACjDb,GAEGE,EAAMa,GAAWC,EAASX,GAC3BY,EAAad,GAAYD,EAEzBgB,EAAkBC,EAAc,CACpClB,QACAC,KAAMe,EACNV,eACAD,kBAGF,SAASc,GAAiBC,SACxBA,EAAQC,QACRA,EAAOC,KACPA,IAMA,OAAOX,EAAW,CAChBlB,UAAW8B,EAAGC,EAAOC,KAAMD,EAAOF,KAAMF,EAAWI,EAAOJ,SAAW,IACrEC,QAAUD,OAAqBM,EAAVL,EACrB3B,SAAU4B,GAEd,CAEA,SAASK,EAAYC,GACfA,EAAI,GAAKA,EAAI5B,IACjBc,EAAQc,GACJzB,GAAUA,EAASyB,GACzB,CAEA,OACE7C,QAAIU,UAAW+B,EAAOK,eACnBtB,GACCY,EAAiB,CACfC,SAAyB,IAAfJ,EACVK,QAAS,IAAMM,EAAY,GAC3BL,KAAMb,IAETU,EAAiB,CAChBC,SAAyB,IAAfJ,EACVK,QAAS,IAAMM,EAAYX,EAAa,GACxCM,KAAMZ,IAGPO,EAAgBa,IAAI,CAACL,EAAMM,IACjB,aAATN,EACE9B,EAAA,KAAA,CAAAD,SAAA,KAAS,QAAQqC,KAEjBpB,EACE,CACElB,UAAW8B,EACTC,EAAOC,KACPT,IAAeS,EAAOD,EAAOQ,WAAa,IAE5CX,QAAS,IAAMM,EAAYF,GAC3B/B,SAAU+B,GAEZA,IAILN,EAAiB,CAChBC,SAAUJ,IAAehB,EACzBqB,QAAS,IAAMM,EAAYX,EAAa,GACxCM,KAAMZ,IAGPF,GACCW,EAAiB,CACfC,SAAUJ,IAAehB,EACzBqB,QAAS,IAAMM,EAAY3B,GAC3BsB,KAAMb,MAIhB"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/Navigation/Pagination/Pagination.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useState,\n  type ComponentProps,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./Pagination.module.css\";\nimport { usePagination } from \"./usePagination\";\nimport { type PaginationItemProps, PaginationItem } from \"./PaginationItem\";\nimport { cn } from \"@studiocubics/utils\";\n\nexport interface PaginationProps {\n  /**\n   * Total number of pages\n   */\n  count: number;\n  /**\n   * For controlled Pagination pass the state\n   */\n  page?: number;\n  /**\n   * For controlled Pagination pass the onChange function\n   */\n  onChange?: (pageNumber: number) => void;\n  /**\n   * Page that will be selected by default\n   * @default 1\n   */\n  defaultPage?: number;\n  /**\n   * How many siblings of the active item should be shown\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * How many of the boundary items should be shown\n   * @default 1\n   */\n  boundaryCount?: number;\n  /**\n   * Function that can be used to modify the rendered PaginationItem component\n   */\n  renderItem?: (\n    props: PaginationItemProps,\n    key?: string | number,\n  ) => ReactElement;\n  /**\n   * Shows the skip to first button\n   */\n  showFirstButton?: boolean;\n  /**\n   * Shows the skip to last button\n   */\n  showLastButton?: boolean;\n  /**\n   * Icon for first button and the last button icon which will be 180deg\n   */\n  firstLastButtonIcon?: ReactNode;\n  /**\n   * Icon for prev button and the next button icon which will be 180deg\n   */\n  prevNextButtonIcon?: ReactNode;\n}\nfunction ArrowLeftIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"m12 19-7-7 7-7\" />\n      <path d=\"M19 12H5\" />\n    </svg>\n  );\n}\nfunction ArrowLeftToLineIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M3 19V5\" />\n      <path d=\"m13 6-6 6 6 6\" />\n      <path d=\"M7 12h14\" />\n    </svg>\n  );\n}\nexport function Pagination(props: PaginationProps) {\n  const {\n    count,\n    page: pageProp,\n    onChange,\n    defaultPage = 1,\n    boundaryCount = 1,\n    siblingCount = 1,\n    showFirstButton = true,\n    showLastButton = true,\n    firstLastButtonIcon = <ArrowLeftToLineIcon />,\n    prevNextButtonIcon = <ArrowLeftIcon />,\n    renderItem = (props, key?) => <PaginationItem key={key} {...props} />,\n  } = props;\n\n  const [page, setPage] = useState(defaultPage);\n  const activePage = pageProp ?? page;\n\n  const paginationRange = usePagination({\n    count,\n    page: activePage,\n    siblingCount,\n    boundaryCount,\n  });\n\n  function renderIconButton({\n    disabled,\n    onClick,\n    icon,\n  }: {\n    disabled: boolean;\n    onClick: () => void;\n    icon: React.ReactNode;\n  }) {\n    return renderItem({\n      className: cn(styles.item, styles.icon, disabled ? styles.disabled : \"\"),\n      onClick: !disabled ? onClick : undefined,\n      children: icon,\n    });\n  }\n\n  function handleClick(i: number) {\n    if (i < 1 || i > count) return;\n    setPage(i);\n    if (onChange) onChange(i);\n  }\n\n  return (\n    <ul className={styles.root}>\n      {showFirstButton &&\n        count > 1 &&\n        renderIconButton({\n          disabled: activePage === 1,\n          onClick: () => handleClick(1),\n          icon: firstLastButtonIcon,\n        })}\n      {count > 1 &&\n        renderIconButton({\n          disabled: activePage === 1,\n          onClick: () => handleClick(activePage - 1),\n          icon: prevNextButtonIcon,\n        })}\n\n      {paginationRange.map((item, idx) =>\n        item === \"ellipses\" ? (\n          <li key={`dots-${idx}`}>…</li>\n        ) : (\n          renderItem(\n            {\n              className: cn(\n                styles.item,\n                activePage === item ? styles.activeItem : \"\",\n              ),\n              onClick: () => handleClick(item),\n              children: item,\n            },\n            item,\n          )\n        ),\n      )}\n      {count > 1 &&\n        renderIconButton({\n          disabled: activePage === count,\n          onClick: () => handleClick(activePage + 1),\n          icon: prevNextButtonIcon,\n        })}\n\n      {showLastButton &&\n        count > 1 &&\n        renderIconButton({\n          disabled: activePage === count,\n          onClick: () => handleClick(count),\n          icon: firstLastButtonIcon,\n        })}\n    </ul>\n  );\n}\n"],"names":["ArrowLeftIcon","props","width","height","rest","_jsxs","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","xmlns","viewBox","children","_jsx","d","ArrowLeftToLineIcon","Pagination","count","page","pageProp","onChange","defaultPage","boundaryCount","siblingCount","showFirstButton","showLastButton","firstLastButtonIcon","prevNextButtonIcon","renderItem","key","PaginationItem","setPage","useState","activePage","paginationRange","usePagination","renderIconButton","disabled","onClick","icon","className","cn","styles","item","undefined","handleClick","i","root","map","idx","activeItem"],"mappings":"2RAgEA,SAASA,EAAcC,GACrB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,EAAA,MAAA,CACEC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,WACXN,EACJO,MAAM,6BACNT,MAAOA,EACPC,OAAQA,EACRS,QAAQ,YAAWC,SAAA,CAEnBC,UAAMC,EAAE,mBACRD,EAAA,OAAA,CAAMC,EAAE,eAGd,CACA,SAASC,EAAoBf,GAC3B,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,EAAA,MAAA,CACEC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,WACXN,EACJO,MAAM,6BACNT,MAAOA,EACPC,OAAQA,EACRS,QAAQ,YAAWC,SAAA,CAEnBC,EAAA,OAAA,CAAMC,EAAE,YACRD,EAAA,OAAA,CAAMC,EAAE,kBACRD,EAAA,OAAA,CAAMC,EAAE,eAGd,CACM,SAAUE,EAAWhB,GACzB,MAAMiB,MACJA,EACAC,KAAMC,EAAQC,SACdA,EAAQC,YACRA,EAAc,EAACC,cACfA,EAAgB,EAACC,aACjBA,EAAe,EAACC,gBAChBA,GAAkB,EAAIC,eACtBA,GAAiB,EAAIC,oBACrBA,EAAsBb,EAACE,EAAmB,CAAA,GAAGY,mBAC7CA,EAAqBd,EAACd,EAAa,CAAA,GAAG6B,WACtCA,EAAa,CAAC5B,EAAO6B,IAAShB,EAACiB,EAAc,IAAe9B,GAAT6B,IACjD7B,GAEGkB,EAAMa,GAAWC,EAASX,GAC3BY,EAAad,GAAYD,EAEzBgB,EAAkBC,EAAc,CACpClB,QACAC,KAAMe,EACNV,eACAD,kBAGF,SAASc,GAAiBC,SACxBA,EAAQC,QACRA,EAAOC,KACPA,IAMA,OAAOX,EAAW,CAChBY,UAAWC,EAAGC,EAAOC,KAAMD,EAAOH,KAAMF,EAAWK,EAAOL,SAAW,IACrEC,QAAUD,OAAqBO,EAAVN,EACrB1B,SAAU2B,GAEd,CAEA,SAASM,EAAYC,GACfA,EAAI,GAAKA,EAAI7B,IACjBc,EAAQe,GACJ1B,GAAUA,EAAS0B,GACzB,CAEA,OACE1C,QAAIoC,UAAWE,EAAOK,eACnBvB,GACCP,EAAQ,GACRmB,EAAiB,CACfC,SAAyB,IAAfJ,EACVK,QAAS,IAAMO,EAAY,GAC3BN,KAAMb,IAETT,EAAQ,GACPmB,EAAiB,CACfC,SAAyB,IAAfJ,EACVK,QAAS,IAAMO,EAAYZ,EAAa,GACxCM,KAAMZ,IAGTO,EAAgBc,IAAI,CAACL,EAAMM,IACjB,aAATN,EACE9B,EAAA,KAAA,CAAAD,SAAA,KAAS,QAAQqC,KAEjBrB,EACE,CACEY,UAAWC,EACTC,EAAOC,KACPV,IAAeU,EAAOD,EAAOQ,WAAa,IAE5CZ,QAAS,IAAMO,EAAYF,GAC3B/B,SAAU+B,GAEZA,IAIL1B,EAAQ,GACPmB,EAAiB,CACfC,SAAUJ,IAAehB,EACzBqB,QAAS,IAAMO,EAAYZ,EAAa,GACxCM,KAAMZ,IAGTF,GACCR,EAAQ,GACRmB,EAAiB,CACfC,SAAUJ,IAAehB,EACzBqB,QAAS,IAAMO,EAAY5B,GAC3BsB,KAAMb,MAIhB"}

package/dist/Typography/CopyableText/CopyableText.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicComponentProps, PolymorphicComponentType } from "@studiocubics/types";
-import { type ComponentProps, type ElementType } from "react";
+import { type ElementType } from "react";
 import { type ButtonProps } from "../../Inputs/Button/Button";
 export interface CopyableTextBaseProps {
     children: string;
@@ -12,5 +12,4 @@ declare const defaultElement = "div";
 type DefaultElement = typeof defaultElement;
 export type CopyableTextProps<C extends ElementType = DefaultElement> = PolymorphicComponentProps<C, CopyableTextBaseProps>;
 export declare const CopyableText: PolymorphicComponentType<CopyableTextBaseProps, DefaultElement>;
-export declare function CopyIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Typography/CopyableText/CopyableText.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{cn as r}from"@studiocubics/utils";import{useState as e,useEffect as i}from"react";import n from"./CopyableText.module.css.js";import{useDelayedAction as s}from"@studiocubics/hooks";import{Button as c}from"../../Inputs/Button/Button.js";function l(l){const{as:u,children:p,className:h,disabled:m=!1,slotProps:w={},...f}=l,[k,x]=e(!1),b=s(),g=u||"div",v={...f,className:r(h,n.root)};return i(()=>{k&&b(()=>x(!1),2e3)},[b,k]),t(g,{...v,children:[o("span",{children:p}),o(c,{disabled:m,square:!0,size:"sm",type:"button",...w.button,onClick:async function(t){await navigator.clipboard.writeText(p),x(!0),w.button?.onClick?.(t)},children:o(k?a:d,{width:24,height:24})})]})}l.displayName="CopyableText";const u=l;function d(r){return t("svg",{...r,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:[o("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),o("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})}function a(t){return o("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:o("path",{d:"M4 12 9 17l11 -11"})})}export{d as CopyIcon,u as CopyableText};
+"use client";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{cn as r}from"@studiocubics/utils";import{useState as e,useEffect as i}from"react";import n from"./CopyableText.module.css.js";import{useDelayedAction as s}from"@studiocubics/hooks";import{Button as c}from"../../Inputs/Button/Button.js";function l(l){const{as:u,children:p,className:h,disabled:m=!1,slotProps:w={},...f}=l,[k,x]=e(!1),b=s(),g=u||"div",v={...f,className:r(h,n.root)};return i(()=>{k&&b(()=>x(!1),2e3)},[b,k]),t(g,{...v,children:[o("span",{children:p}),o(c,{disabled:m,square:!0,size:"sm",type:"button",...w.button,onClick:async function(t){await navigator.clipboard.writeText(p),x(!0),w.button?.onClick?.(t)},children:o(k?a:d,{width:24,height:24})})]})}l.displayName="CopyableText";const u=l;function d(r){return t("svg",{...r,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:[o("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),o("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})}function a(t){return o("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:o("path",{d:"M4 12 9 17l11 -11"})})}export{u as CopyableText};
 //# sourceMappingURL=CopyableText.js.map

package/dist/Typography/CopyableText/CopyableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.js","sources":["../../../src/Typography/CopyableText/CopyableText.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  PolymorphicComponentProps,\n  PolymorphicComponentType,\n} from \"@studiocubics/types\";\nimport { cn } from \"@studiocubics/utils\";\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  useEffect,\n  useState,\n  type ElementType,\n} from \"react\";\nimport styles from \"./CopyableText.module.css\";\nimport { useDelayedAction } from \"@studiocubics/hooks\";\nimport { Button, type ButtonProps } from \"../../Inputs/Button/Button\";\n\nexport interface CopyableTextBaseProps {\n  children: string;\n  disabled?: boolean;\n  slotProps?: {\n    button?: ButtonProps;\n  };\n}\n\nconst defaultElement = \"div\";\ntype DefaultElement = typeof defaultElement;\n\nexport type CopyableTextProps<C extends ElementType = DefaultElement> =\n  PolymorphicComponentProps<C, CopyableTextBaseProps>;\n\nfunction CopyableTextBase<C extends ElementType = DefaultElement>(\n  props: CopyableTextProps<C>,\n) {\n  const {\n    as,\n    children,\n    className,\n    disabled = false,\n    slotProps = {},\n    ...rest\n  } = props as CopyableTextProps<DefaultElement>;\n\n  const [copied, setCopied] = useState(false);\n  const delay = useDelayedAction();\n  const Component = (as || defaultElement) as ElementType;\n  const componentProps = { ...rest, className: cn(className, styles.root) };\n\n  async function handleCopy(e: MouseEvent<HTMLButtonElement>) {\n    await navigator.clipboard.writeText(children);\n    setCopied(true);\n    slotProps.button?.onClick?.(e);\n  }\n  useEffect(() => {\n    if (copied) {\n      delay(() => setCopied(false), 2000);\n    }\n  }, [delay, copied]);\n  return (\n    <Component {...componentProps}>\n      <span>{children}</span>\n      <Button\n        disabled={disabled}\n        square\n        size=\"sm\"\n        type=\"button\"\n        {...slotProps.button}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <CheckIcon width={24} height={24} />\n        ) : (\n          <CopyIcon width={24} height={24} />\n        )}\n      </Button>\n    </Component>\n  );\n}\n\nCopyableTextBase.displayName = \"CopyableText\";\n\nexport const CopyableText = CopyableTextBase as PolymorphicComponentType<\n  CopyableTextBaseProps,\n  DefaultElement\n>;\n\nexport function CopyIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n// TODO convert to animated check icon\nfunction CheckIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M4 12 9 17l11 -11\" />\n    </svg>\n  );\n}\n"],"names":["CopyableTextBase","props","as","children","className","disabled","slotProps","rest","copied","setCopied","useState","delay","useDelayedAction","Component","componentProps","cn","styles","root","useEffect","_jsxs","_jsx","Button","square","size","type","button","onClick","async","e","navigator","clipboard","writeText","CheckIcon","CopyIcon","width","height","displayName","CopyableText","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","x","y","rx","ry","d"],"mappings":"kTAgCA,SAASA,EACPC,GAEA,MAAMC,GACJA,EAAEC,SACFA,EAAQC,UACRA,EAASC,SACTA,GAAW,EAAKC,UAChBA,EAAY,CAAA,KACTC,GACDN,GAEGO,EAAQC,GAAaC,GAAS,GAC/BC,EAAQC,IACRC,EAAaX,GApBE,MAqBfY,EAAiB,IAAKP,EAAMH,UAAWW,EAAGX,EAAWY,EAAOC,OAYlE,OALAC,EAAU,KACJV,GACFG,EAAM,IAAMF,GAAU,GAAQ,MAE/B,CAACE,EAAOH,IAETW,EAACN,EAAS,IAAKC,EAAcX,SAAA,CAC3BiB,EAAA,OAAA,CAAAjB,SAAOA,IACPiB,EAACC,EAAM,CACLhB,SAAUA,EACViB,QAAM,EACNC,KAAK,KACLC,KAAK,YACDlB,EAAUmB,OACdC,QAnBNC,eAA0BC,SAClBC,UAAUC,UAAUC,UAAU5B,GACpCM,GAAU,GACVH,EAAUmB,QAAQC,UAAUE,EAC9B,EAeyBzB,SAGjBiB,EADDZ,EACEwB,EAEAC,EAFS,CAACC,MAAO,GAAIC,OAAQ,SAOxC,CAEAnC,EAAiBoC,YAAc,eAExB,MAAMC,EAAerC,EAKtB,SAAUiC,EAAShC,GACvB,OACEkB,EAAA,MAAA,IACMlB,EACJqC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QAAOzC,SAAA,CAEtBiB,EAAA,OAAA,CAAMc,MAAM,KAAKC,OAAO,KAAKU,EAAE,IAAIC,EAAE,IAAIC,GAAG,IAAIC,GAAG,MACnD5B,EAAA,OAAA,CAAM6B,EAAE,8DAGd,CAEA,SAASjB,EAAU/B,GACjB,OACEmB,EAAA,MAAA,IACMnB,EACJqC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QAAOzC,SAEtBiB,UAAM6B,EAAE,uBAGd"}
+{"version":3,"file":"CopyableText.js","sources":["../../../src/Typography/CopyableText/CopyableText.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  PolymorphicComponentProps,\n  PolymorphicComponentType,\n} from \"@studiocubics/types\";\nimport { cn } from \"@studiocubics/utils\";\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  useEffect,\n  useState,\n  type ElementType,\n} from \"react\";\nimport styles from \"./CopyableText.module.css\";\nimport { useDelayedAction } from \"@studiocubics/hooks\";\nimport { Button, type ButtonProps } from \"../../Inputs/Button/Button\";\n\nexport interface CopyableTextBaseProps {\n  children: string;\n  disabled?: boolean;\n  slotProps?: {\n    button?: ButtonProps;\n  };\n}\n\nconst defaultElement = \"div\";\ntype DefaultElement = typeof defaultElement;\n\nexport type CopyableTextProps<C extends ElementType = DefaultElement> =\n  PolymorphicComponentProps<C, CopyableTextBaseProps>;\n\nfunction CopyableTextBase<C extends ElementType = DefaultElement>(\n  props: CopyableTextProps<C>,\n) {\n  const {\n    as,\n    children,\n    className,\n    disabled = false,\n    slotProps = {},\n    ...rest\n  } = props as CopyableTextProps<DefaultElement>;\n\n  const [copied, setCopied] = useState(false);\n  const delay = useDelayedAction();\n  const Component = (as || defaultElement) as ElementType;\n  const componentProps = { ...rest, className: cn(className, styles.root) };\n\n  async function handleCopy(e: MouseEvent<HTMLButtonElement>) {\n    await navigator.clipboard.writeText(children);\n    setCopied(true);\n    slotProps.button?.onClick?.(e);\n  }\n  useEffect(() => {\n    if (copied) {\n      delay(() => setCopied(false), 2000);\n    }\n  }, [delay, copied]);\n  return (\n    <Component {...componentProps}>\n      <span>{children}</span>\n      <Button\n        disabled={disabled}\n        square\n        size=\"sm\"\n        type=\"button\"\n        {...slotProps.button}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <CheckIcon width={24} height={24} />\n        ) : (\n          <CopyIcon width={24} height={24} />\n        )}\n      </Button>\n    </Component>\n  );\n}\n\nCopyableTextBase.displayName = \"CopyableText\";\n\nexport const CopyableText = CopyableTextBase as PolymorphicComponentType<\n  CopyableTextBaseProps,\n  DefaultElement\n>;\n\nfunction CopyIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n// TODO convert to animated check icon\nfunction CheckIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M4 12 9 17l11 -11\" />\n    </svg>\n  );\n}\n"],"names":["CopyableTextBase","props","as","children","className","disabled","slotProps","rest","copied","setCopied","useState","delay","useDelayedAction","Component","componentProps","cn","styles","root","useEffect","_jsxs","_jsx","Button","square","size","type","button","onClick","async","e","navigator","clipboard","writeText","CheckIcon","CopyIcon","width","height","displayName","CopyableText","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","x","y","rx","ry","d"],"mappings":"kTAgCA,SAASA,EACPC,GAEA,MAAMC,GACJA,EAAEC,SACFA,EAAQC,UACRA,EAASC,SACTA,GAAW,EAAKC,UAChBA,EAAY,CAAA,KACTC,GACDN,GAEGO,EAAQC,GAAaC,GAAS,GAC/BC,EAAQC,IACRC,EAAaX,GApBE,MAqBfY,EAAiB,IAAKP,EAAMH,UAAWW,EAAGX,EAAWY,EAAOC,OAYlE,OALAC,EAAU,KACJV,GACFG,EAAM,IAAMF,GAAU,GAAQ,MAE/B,CAACE,EAAOH,IAETW,EAACN,EAAS,IAAKC,EAAcX,SAAA,CAC3BiB,EAAA,OAAA,CAAAjB,SAAOA,IACPiB,EAACC,EAAM,CACLhB,SAAUA,EACViB,QAAM,EACNC,KAAK,KACLC,KAAK,YACDlB,EAAUmB,OACdC,QAnBNC,eAA0BC,SAClBC,UAAUC,UAAUC,UAAU5B,GACpCM,GAAU,GACVH,EAAUmB,QAAQC,UAAUE,EAC9B,EAeyBzB,SAGjBiB,EADDZ,EACEwB,EAEAC,EAFS,CAACC,MAAO,GAAIC,OAAQ,SAOxC,CAEAnC,EAAiBoC,YAAc,eAExB,MAAMC,EAAerC,EAK5B,SAASiC,EAAShC,GAChB,OACEkB,EAAA,MAAA,IACMlB,EACJqC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QAAOzC,SAAA,CAEtBiB,EAAA,OAAA,CAAMc,MAAM,KAAKC,OAAO,KAAKU,EAAE,IAAIC,EAAE,IAAIC,GAAG,IAAIC,GAAG,MACnD5B,EAAA,OAAA,CAAM6B,EAAE,8DAGd,CAEA,SAASjB,EAAU/B,GACjB,OACEmB,EAAA,MAAA,IACMnB,EACJqC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QAAOzC,SAEtBiB,UAAM6B,EAAE,uBAGd"}