@yamada-ui/react 2.2.2-dev-20260608072350 → 2.2.2

package/dist/esm/components/steps/use-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-steps.js","names":["createContext"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => mergeProps(rest, props)(),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-current\": current ? \"step\" : undefined,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n          \"data-orientation\": orientation,\n          [statusDataAttr]: dataAttr(true),\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,EACJ,oBAAoB,yBACpB,eAAe,oBACf,gBAAgB,wBACd,kBAAiC;AASrC,MAAM,CAAC,cAAc,mBAAmBA,gBAA4B,EAClE,MAAM,eACR,CAAC;AAMD,MAAM,CAAC,kBAAkB,uBAAuBA,gBAC9C,EACE,MAAM,mBACR,CACF;AA+BA,MAAa,YAAY,EACvB,QAAQ,GACR,eAAe,GACf,OAAO,WACP,cAAc,cACd,UACA,GAAG,SACc,CAAC,MAAM;CACxB,MAAM,cAAc,oBAAoB;CACxC,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C,cAAc;EACd,OAAO;EACP;CACF,CAAC;CACD,MAAM,KAAK,MAAM;CAEjB,MAAM,YAAY,aACf,cAAwC;EACvC,IAAI,YAAY,OACd,OAAO;OACF,IAAI,YAAY,OACrB,OAAO;OAEP,OAAO;CAEX,GACA,CAAC,KAAK,CACR;CAEA,MAAM,SAAS,kBACP,UAAU,UAAU,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAChD,CAAC,QAAQ,CACX;CAEA,MAAM,SAAS,kBAAkB;EAC/B,UAAU,UAAU,KAAK,IAAI,OAAO,QAAQ,CAAC,CAAC;CAChD,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,eAA2B,aAC9B,QAAQ,CAAC,MAAM,WAAW,MAAM,KAAK,EAAE,GACxC,CAAC,IAAI,CACP;CAEA,MAAM,eAAiC,aACpC,UAAU;EACT,OAAO;GACL,oBAAoB;GACpB,GAAG;EACL;CACF,GACA,CAAC,WAAW,CACd;CAEA,MAAM,kBAAyD,aAC5D,EAAE,OAAO,YAAY,OAAO,GAAG,UAAU,CAAC,OAAO;EAChD,IAAI,GAAG,GAAG,GAAG;EACb,QAAQ,cAAc;EACtB,UAAU;EACV,GAAG;CACL,IACA;EAAC;EAAO;EAAI;CAAK,CACnB;CAEA,MAAM,sBAA4C,aAC/C,QAAQ,CAAC,OAAO;EACf,UAAU,UAAU;EACpB,GAAG;EACH,UAAA,GAAA,cAAA,YAAoB,MAAM,SAAS,MAAM;CAC3C,IACA,CAAC,QAAQ,KAAK,CAChB;CAaA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBArBgD,aAC/C,QAAQ,CAAC,MAAM;GACd,OAAO;IACL,UAAU,SAAS;IACnB,GAAG;IACH,UAAA,GAAA,cAAA,YAAoB,MAAM,SAAS,MAAM;GAC3C;EACF,GACA;GAAC;GAAO;GAAO;EAAM,CAaH;EAClB;EACA;EACA;EACA;CACF;AACF;AAWA,MAAa,gBAAgB,EAC3B,mBAAmB,oBACnB,OACA,GAAG,WACoB;CACvB,MAAM,EAAE,aAAa,aAAa,mBAAmB;CACrD,MAAM,EAAE,IAAI,WAAW,gBAAgB,gBAAgB;CACvD,MAAM,SAAS,UAAU,KAAK;CAC9B,MAAM,UAAU,WAAW;CAC3B,MAAM,QAAQ,UAAU;CACxB,MAAM,OAAO,UAAU,YAAY,UAAU,GAAG;CAChD,MAAM,iBAAiB,QAAQ;CAC/B,MAAM,EAAE,gBAAgB,eAAe;CAEvC,0BAA0B;EACxB,MAAM,KAAK,YAAY,MAAM,KAAK,GAAG;EACrC,MAAM,aAAa,CAAC,CAAC,YAAY,GAAG,eAAe,GAAG,GAAG,GAAG,OAAO;EAEnE,IAAI,MAAM,YAAY,CAAA,GAAA,cAAA,cAAa,IAAI,mBAAmB,GAAG,GAAG,GAAG,OAAO;CAC5E,GAAG;EAAC;EAAa;EAAa;EAAI;CAAK,CAAC;CAExC,MAAM,eAAiC,aACpC,EAAE,KAAK,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,MACvD,WACE;EACE,gBAAgB,UAAU,SAAS,KAAA;EACnC,oBAAA,GAAA,cAAA,IAAsB,oBAAoB,cAAc;EACxD,oBAAoB;GACnB,kBAAA,GAAA,cAAA,UAA0B,IAAI;CACjC,GACA,MACA,OACA,EAAE,KAAK,UAAU,KAAK,QAAQ,EAAE,CAClC,EAAE,GACJ;EAAC;EAAoB;EAAS;EAAa;EAAgB;EAAM;CAAQ,CAC3E;CAEA,MAAM,gBAAkC,aACrC,WAAW;GACT,kBAAA,GAAA,cAAA,UAA0B,IAAI;EAC/B,GAAG;CACL,IACA,CAAC,cAAc,CACjB;CA4BA,OAAO;EACL;EACA;EACA;EACA;EACA,qBA/B2C,aAC1C,WAAW;IACT,kBAAA,GAAA,cAAA,UAA0B,IAAI;GAC/B,GAAG;EACL,IACA,CAAC,cAAc,CA0BG;EAClB,mBAxBoC,aACnC,WAAW;IACT,kBAAA,GAAA,cAAA,UAA0B,IAAI;GAC/B,GAAG;EACL,IACA,CAAC,cAAc,CAmBC;EAChB;EACA,mBAlBoC,aACnC,WAAW;GACV,oBAAoB;GACpB,MAAM;IACL,kBAAA,GAAA,cAAA,UAA0B,IAAI;GAC/B,GAAG;EACL,IACA,CAAC,aAAa,cAAc,CAWZ;EAChB;CACF;AACF"}
+{"version":3,"file":"use-steps.js","names":["createContext"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => mergeProps(rest, props)(),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-current\": current ? \"step\" : undefined,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n          \"data-orientation\": orientation,\n          [statusDataAttr]: dataAttr(true),\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}

package/dist/esm/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n    ThemeProps<SwitchStyle> {\n  /**\n   * The switch icon to use.\n   */\n  icon?: ReactNode | { off: ReactNode; on: ReactNode }\n  /**\n   * Props for switch input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for switch label element.\n   */\n  labelProps?: HTMLStyledProps<\"span\">\n}\n\nconst {\n  PropsContext: SwitchPropsContext,\n  usePropsContext: useSwitchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\nexport { SwitchPropsContext, useSwitchPropsContext }\n\n/**\n * `Switch` is a component used to toggle between on and off states.\n *\n * @see https://yamada-ui.com/docs/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n  ({ children, icon, inputProps, labelProps, ...props }) => {\n    const {\n      checked,\n      getInputProps,\n      getLabelProps,\n      getRootProps,\n      getThumbProps,\n      getTrackProps,\n    } = useSwitch(props)\n\n    return (\n      <styled.label {...getRootProps()}>\n        <styled.input data-peer {...getInputProps(inputProps)} />\n\n        <SwitchTrack {...getTrackProps()}>\n          <SwitchThumb {...getThumbProps()}>\n            {icon && isObject(icon) && \"on\" in icon\n              ? checked\n                ? icon.on\n                : icon.off\n              : icon}\n          </SwitchThumb>\n        </SwitchTrack>\n\n        {children ? (\n          <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n        ) : null}\n      </styled.label>\n    )\n  },\n  \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;AA8BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,MAAM,YAAY,YAAY,GAAG,YAAY;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,kBACE,UAAU,KAAK;CAEnB,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,aAAa;YAA/B;GACE,oBAAC,OAAO,OAAR;IAAc,aAAA;IAAU,GAAI,cAAc,UAAU;GAAI,CAAA;GAExD,oBAAC,aAAD;IAAa,GAAI,cAAc;cAC7B,oBAAC,aAAD;KAAa,GAAI,cAAc;eAC5B,SAAA,GAAA,cAAA,UAAiB,IAAI,KAAK,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;IACO,CAAA;GACF,CAAA;GAEZ,WACC,oBAAC,aAAD;IAAa,GAAI,cAAc,UAAU;IAAI;GAAsB,CAAA,IACjE;EACQ;;AAElB,GACA,MACF,EAAE;AAIF,MAAM,cAAc,YAAqC,OAAO,OAAO,EAAE;AAIzE,MAAM,cAAc,YAAqC,OAAO,OAAO,EAAE;AAIzE,MAAM,cAAc,YAAsC,QAAQ,OAAO,EAAE"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n    ThemeProps<SwitchStyle> {\n  /**\n   * The switch icon to use.\n   */\n  icon?: ReactNode | { off: ReactNode; on: ReactNode }\n  /**\n   * Props for switch input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for switch label element.\n   */\n  labelProps?: HTMLStyledProps<\"span\">\n}\n\nconst {\n  PropsContext: SwitchPropsContext,\n  usePropsContext: useSwitchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\nexport { SwitchPropsContext, useSwitchPropsContext }\n\n/**\n * `Switch` is a component used to toggle between on and off states.\n *\n * @see https://yamada-ui.com/docs/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n  ({ children, icon, inputProps, labelProps, ...props }) => {\n    const {\n      checked,\n      getInputProps,\n      getLabelProps,\n      getRootProps,\n      getThumbProps,\n      getTrackProps,\n    } = useSwitch(props)\n\n    return (\n      <styled.label {...getRootProps()}>\n        <styled.input data-peer {...getInputProps(inputProps)} />\n\n        <SwitchTrack {...getTrackProps()}>\n          <SwitchThumb {...getThumbProps()}>\n            {icon && isObject(icon) && \"on\" in icon\n              ? checked\n                ? icon.on\n                : icon.off\n              : icon}\n          </SwitchThumb>\n        </SwitchTrack>\n\n        {children ? (\n          <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n        ) : null}\n      </styled.label>\n    )\n  },\n  \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;AA8BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,MAAM,YAAY,YAAY,GAAG,YAAY;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,kBACE,UAAU,KAAK;CAEnB,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,aAAa;YAA/B;GACE,oBAAC,OAAO,OAAR;IAAc,aAAA;IAAU,GAAI,cAAc,UAAU;GAAI,CAAA;GAExD,oBAAC,aAAD;IAAa,GAAI,cAAc;cAC7B,oBAAC,aAAD;KAAa,GAAI,cAAc;eAC5B,SAAA,GAAA,cAAA,SAAA,CAAiB,IAAI,KAAK,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;IACO,CAAA;GACF,CAAA;GAEZ,WACC,oBAAC,aAAD;IAAa,GAAI,cAAc,UAAU;IAAI;GAAsB,CAAA,IACjE;EACQ;;AAElB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,cAAc,YAAqC,OAAO,OAAO,CAAC,CAAC;AAIzE,MAAM,cAAc,YAAqC,OAAO,OAAO,CAAC,CAAC;AAIzE,MAAM,cAAc,YAAsC,QAAQ,OAAO,CAAC,CAAC"}

package/dist/esm/components/switch/use-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-switch.js","names":[],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;AAqEA,MAAa,aACX,QAA2B,CAAC,MACzB;CACH,MAAM,OAAO,MAAM;CACnB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;CACT,CAAC;CAED,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAO,GAAG,eAAe;EAE3C,WAAW,GAAG,OAAO,OAAO;EAC5B,eAAe,EAAE;CACnB,GACA;EAAC;EAAc;EAAY;CAAW,CACxC;CAEA,MAAM,YAAY,aACf,OAAwC;EACvC,IAAI,eAAe,gBAAgB,GAAG,QAAQ,SAC5C,SAAS,SAAS,MAAM;CAC5B,GACA,CAAC,aAAa,YAAY,CAC5B;CAEA,MAAM,eAAoC,aACvC,QAAQ,CAAC,MACR,WACE,WACA;EAAE,SAAS;EAAI,iBAAA,GAAA,cAAA,UAAyB,OAAO;CAAE,GACjD,MACA,KACF,EAAE,GACJ;EAAC;EAAS;EAAM;EAAI;CAAS,CAC/B;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,OAAO,EAAE,GAAG,KAAK,EAAE,GACtE,CAAC,SAAS,SAAS,CACrB;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,OAAO,EAAE,GAAG,KAAK,EAAE,GACtE,CAAC,SAAS,SAAS,CACrB;CAsDA,OAAO;EACL;EACA,eAtDyC,aACxC,QAAQ,CAAC,MAAM;GAsBd,OAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;IACF,GACA;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;IAAQ,GACzD,OACA;KAAE;KAAU;IAAU,CACxB,EAAE,EAAE,UAAU,MAAM,CAGL;IACb,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;GACzC;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAWY;EACZ,eATwC,aACvC,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,OAAO,EAAE,GAAG,KAAK,EAAE,GACtE,CAAC,WAAW,OAAO,CAMP;EACZ;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-switch.js","names":[],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;AAqEA,MAAa,aACX,QAA2B,CAAC,MACzB;CACH,MAAM,OAAO,MAAM;CACnB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;CACT,CAAC;CAED,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAO,GAAG,eAAe;EAE3C,WAAW,GAAG,OAAO,OAAO;EAC5B,eAAe,EAAE;CACnB,GACA;EAAC;EAAc;EAAY;CAAW,CACxC;CAEA,MAAM,YAAY,aACf,OAAwC;EACvC,IAAI,eAAe,gBAAgB,GAAG,QAAQ,SAC5C,SAAS,SAAS,MAAM;CAC5B,GACA,CAAC,aAAa,YAAY,CAC5B;CAEA,MAAM,eAAoC,aACvC,QAAQ,CAAC,MACR,WACE,WACA;EAAE,SAAS;EAAI,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;CAAE,GACjD,MACA,KACF,CAAC,CAAC,GACJ;EAAC;EAAS;EAAM;EAAI;CAAS,CAC/B;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,SAAS,SAAS,CACrB;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,SAAS,SAAS,CACrB;CAsDA,OAAO;EACL;EACA,eAtDyC,aACxC,QAAQ,CAAC,MAAM;GAsBd,OAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;IACF,GACA;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;IAAQ,GACzD,OACA;KAAE;KAAU;IAAU,CACxB,CAAC,CAAC,EAAE,UAAU,MAAM,CAGL;IACb,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;GACzC;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAWY;EACZ,eATwC,aACvC,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,WAAW,OAAO,CAMP;EACZ;EACA;EACA;CACF;AACF"}

package/dist/esm/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["NativeTable.Root","NativeTable.Thead","NativeTable.Tr","NativeTable.Th","NativeTable.Tbody","NativeTable.Td","NativeTable.Tfoot"],"sources":["../../../../src/components/table/table.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  AccessorFn,\n  Cell,\n  CellContext,\n  ColumnDef,\n  ColumnDefTemplate,\n  ColumnFiltersColumnDef,\n  ColumnFiltersState,\n  ColumnMeta,\n  ColumnPinningColumnDef,\n  ColumnSizingColumnDef,\n  GlobalFilterColumnDef,\n  GroupingColumnDef,\n  Header,\n  HeaderContext,\n  HeaderGroup,\n  OnChangeFn,\n  SortingState as OriginalSortingState,\n  PaginationState,\n  Table as ReactTable,\n  Row,\n  RowData,\n  RowSelectionState,\n  SortDirection,\n  SortingColumnDef,\n  TableOptions,\n  VisibilityColumnDef,\n} from \"@tanstack/react-table\"\nimport type { FC, FocusEvent, KeyboardEvent, ReactElement } from \"react\"\nimport type { CSSProps, GenericsComponent, HTMLStyledProps } from \"../../core\"\nimport type { ReactNodeOrFunction, TransformProps } from \"../../utils\"\nimport type { CheckboxProps } from \"../checkbox\"\nimport {\n  createColumnHelper,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { useMemo, useRef } from \"react\"\nimport { createComponent, focusRingStyle, mergeProps, styled } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  isFunction,\n  runIfFn,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { Checkbox } from \"../checkbox\"\nimport { ChevronsUpDownIcon, ChevronUpIcon } from \"../icon\"\nimport { NativeTable } from \"../native-table\"\n\ndeclare module \"@tanstack/react-table\" {\n  interface ColumnDefExtensions<TData extends RowData, TValue = unknown>\n    extends\n      VisibilityColumnDef,\n      ColumnPinningColumnDef,\n      ColumnFiltersColumnDef<TData>,\n      GlobalFilterColumnDef,\n      SortingColumnDef<TData>,\n      GroupingColumnDef<TData, TValue>,\n      ColumnSizingColumnDef {}\n\n  interface ColumnDefBase<TData extends RowData, TValue = unknown>\n    extends\n      ColumnDefExtensions<TData, TValue>,\n      Pick<CSSProps, \"lineClamp\" | \"truncated\">,\n      Pick<NativeTable.TdProps, \"numeric\"> {\n    cell?: ColumnDefTemplate<CellContext<TData, TValue>>\n    footer?: ColumnDefTemplate<HeaderContext<TData, TValue>>\n    getUniqueValues?: AccessorFn<TData, unknown[]>\n    meta?: ColumnMeta<TData, TValue>\n    cellProps?: NativeTable.TdProps\n    footerProps?: NativeTable.ThProps\n    headerProps?: NativeTable.ThProps\n  }\n}\n\nexport { createColumnHelper }\nexport type {\n  ColumnDef,\n  ColumnFiltersState,\n  PaginationState,\n  RowSelectionState,\n  SortDirection,\n}\n\nfunction getMergeHeaderGroups(\n  headerGroups: HeaderGroup<any>[],\n): HeaderGroup<any>[] {\n  if (headerGroups.length <= 1) return headerGroups\n\n  const columnsIds = new Set()\n\n  return headerGroups.map((headerGroup, depth, { length: fullDepth }) => {\n    return {\n      ...headerGroup,\n      headers: headerGroup.headers\n        .filter((header) => !columnsIds.has(header.column.id))\n        .map((header) => {\n          columnsIds.add(header.column.id)\n\n          return header.isPlaceholder\n            ? { ...header, isPlaceholder: false, rowSpan: fullDepth - depth }\n            : { ...header, rowSpan: 1 }\n        }),\n    }\n  })\n}\n\nfunction getMergeFooterGroups(\n  headerGroups: HeaderGroup<any>[],\n): HeaderGroup<any>[] {\n  if (headerGroups.length <= 1) return headerGroups\n\n  return headerGroups.map((headerGroup, depth) => {\n    const nextHeaderGroups = headerGroups.slice(depth + 1)\n\n    return {\n      ...headerGroup,\n      headers: headerGroup.headers\n        .filter((header) => !header.isPlaceholder)\n        .map((header) => {\n          if (nextHeaderGroups.length === 0) return header\n\n          const rowSpan = nextHeaderGroups.reduce((acc, nextHeaderGroup) => {\n            const hasNextHeader = nextHeaderGroup.headers.some(\n              (nextHeader) => nextHeader.column.id === header.column.id,\n            )\n\n            return acc + (hasNextHeader ? 1 : 0)\n          }, 1)\n\n          return { ...header, rowSpan }\n        }),\n    }\n  })\n}\n\nexport interface ColumnSort<Y extends RowData> {\n  desc: boolean\n  id: keyof Y\n}\nexport type SortingState<Y extends RowData> = ColumnSort<Y>[]\n\ninterface ComponentContext extends Pick<\n  TableProps<any>,\n  | \"columnResizeMode\"\n  | \"resizableTriggerProps\"\n  | \"sortingIcon\"\n  | \"sortingIconProps\"\n> {\n  table: ReactTable<any>\n}\n\ninterface OmittedTableOptions<Y extends RowData> extends Omit<\n  TableOptions<Y>,\n  | \"getCoreRowModel\"\n  | \"onColumnFiltersChange\"\n  | \"onPaginationChange\"\n  | \"onSortingChange\"\n> {}\n\ninterface PickedNativeTableProps extends Pick<\n  NativeTable.RootProps,\n  | \"className\"\n  | \"highlightOnHover\"\n  | \"highlightOnSelected\"\n  | \"layout\"\n  | \"scrollAreaProps\"\n  | \"size\"\n  | \"stickyFooter\"\n  | \"stickyHeader\"\n  | \"striped\"\n  | \"variant\"\n  | \"withBorder\"\n  | \"withColumnBorders\"\n  | \"withScrollArea\"\n> {}\n\nexport interface TableProps<Y extends RowData>\n  extends\n    OmittedTableOptions<Y>,\n    PickedNativeTableProps,\n    Pick<CSSProps, \"colorScheme\" | \"lineClamp\" | \"truncated\"> {\n  /**\n   * The column filters state of the table.\n   */\n  columnFilters?: ColumnFiltersState\n  /**\n   * The default column filters state of the table.\n   */\n  defaultColumnFilters?: ColumnFiltersState\n  /**\n   * The default pagination state of the table.\n   */\n  defaultPagination?: PaginationState\n  /**\n   * The default row selection state of the table.\n   */\n  defaultRowSelection?: RowSelectionState\n  /**\n   * The default sorting state of the table.\n   */\n  defaultSorting?: SortingState<Y>\n  /**\n   * If `true`, the table width will be automatically resized to the content.\n   *\n   * @default false\n   */\n  enableAutoResizeTableWidth?: boolean\n  /**\n   * If `true`, the keyboard navigation will be enabled.\n   *\n   * @default true\n   */\n  enableKeyboardNavigation?: boolean\n  /**\n   * If `true`, the pagination will be enabled.\n   *\n   * @default false\n   */\n  enablePagination?: boolean\n  /**\n   * The footer of the table.\n   */\n  footer?: ReactNodeOrFunction<ReactTable<Y>>\n  /**\n   * The header of the table.\n   */\n  header?: ReactNodeOrFunction<ReactTable<Y>>\n  /**\n   * The initial focusable cell of the table.\n   *\n   * @default {rowIndex: 0, colIndex: 0}\n   */\n  initialFocusableCell?: { colIndex: number; rowIndex: number }\n  /**\n   * The pagination state of the table.\n   */\n  pagination?: PaginationState\n  /**\n   * The row selection state of the table.\n   */\n  rowSelection?: RowSelectionState\n  /**\n   * If `true`, the row will be selected when the row is clicked.\n   *\n   * @default false\n   */\n  selectOnClickRow?: boolean\n  /**\n   * The sorting state of the table.\n   */\n  sorting?: SortingState<Y>\n  /**\n   * The sorting icon of the table.\n   */\n  sortingIcon?: ReactNodeOrFunction<false | SortDirection>\n  /**\n   * If `true`, the table will have a checkbox column.\n   *\n   * @default true\n   */\n  withCheckbox?: boolean\n  /**\n   * If `true`, the table will have a checkbox in the footer.\n   *\n   * @default false\n   */\n  withFooterCheckbox?: boolean\n  /**\n   * If `true`, the table will have footer groups.\n   *\n   * @default false\n   */\n  withFooterGroups?: boolean\n  /**\n   * The props for the table cell.\n   */\n  cellProps?: TransformProps<NativeTable.TdProps, Cell<Y, unknown>>\n  /**\n   * The props for the checkbox.\n   */\n  checkboxProps?: CheckboxProps\n  /**\n   * The props for the table footer group.\n   */\n  footerGroupProps?: TransformProps<NativeTable.TrProps, HeaderGroup<Y>>\n  /**\n   * The props for the table footer.\n   */\n  footerProps?: TransformProps<NativeTable.ThProps, Header<Y, unknown>>\n  /**\n   * The props for the table header checkbox.\n   */\n  headerCheckboxProps?: TransformProps<CheckboxProps, Header<Y, unknown>>\n  /**\n   * The props for the table header group.\n   */\n  headerGroupProps?: TransformProps<NativeTable.TrProps, HeaderGroup<Y>>\n  /**\n   * The props for the table header.\n   */\n  headerProps?: TransformProps<NativeTable.ThProps, Header<Y, unknown>>\n  /**\n   * The props for the resizable trigger.\n   */\n  resizableTriggerProps?: TransformProps<\n    Omit<ResizableTriggerProps, \"resizing\">,\n    Header<Y, unknown>\n  >\n  /**\n   * The props for the table row checkbox.\n   */\n  rowCheckboxProps?: TransformProps<CheckboxProps, Row<Y>>\n  /**\n   * The props for the table row.\n   */\n  rowProps?: TransformProps<NativeTable.TrProps, Row<Y>>\n  /**\n   * The props for the sorting icon.\n   */\n  sortingIconProps?: TransformProps<\n    Omit<SortingIconProps, \"sorted\">,\n    Header<Y, unknown>\n  >\n  /**\n   * The props for the table.\n   */\n  tableProps?: NativeTable.RootProps\n  /**\n   * The props for the table tbody.\n   */\n  tbodyProps?: NativeTable.TbodyProps\n  /**\n   * The props for the table tfoot.\n   */\n  tfootProps?: NativeTable.TfootProps\n  /**\n   * The props for the table thead.\n   */\n  theadProps?: NativeTable.TheadProps\n  /**\n   * The callback invoked when the column filters state changes.\n   */\n  onColumnFiltersChange?: (columnFilters: ColumnFiltersState) => void\n  /**\n   * The callback invoked when the pagination state changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void\n  /**\n   * The callback invoked when the row is clicked.\n   */\n  onRowClick?: (row: Row<Y>) => void\n  /**\n   * The callback invoked when the row is double clicked.\n   */\n  onRowDoubleClick?: (row: Row<Y>) => void\n  /**\n   * The callback invoked when the sorting state changes.\n   */\n  onSortingChange?: (sorting: SortingState<Y>) => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TablePropsContext,\n  useComponentContext,\n  usePropsContext: useTablePropsContext,\n  withContext,\n} = createComponent<TableProps<any>, any, ComponentContext>(\"table\")\n\nexport { TablePropsContext, useTablePropsContext }\n\n/**\n * `Table` is a table component equipped with column sorting, row selection, and click event features.\n *\n * @see https://yamada-ui.com/docs/components/table\n */\nexport const Table = withContext(\n  <Y extends RowData>({\n    className,\n    colorScheme,\n    size,\n    variant,\n    columnFilters: columnFiltersProp,\n    columnResizeMode = \"onChange\",\n    columns: columnsProp,\n    data,\n    defaultColumnFilters,\n    defaultPagination = { pageIndex: 0, pageSize: 20 },\n    defaultRowSelection = {},\n    defaultSorting,\n    enableAutoResizeTableWidth = false,\n    enableColumnResizing = false,\n    enableKeyboardNavigation = true,\n    enablePagination = false,\n    enableRowSelection = false,\n    footer,\n    header,\n    highlightOnHover = !!enableRowSelection,\n    highlightOnSelected = !!enableRowSelection,\n    initialFocusableCell = { colIndex: 0, rowIndex: 0 },\n    layout,\n    lineClamp,\n    manualPagination,\n    pagination: paginationProp,\n    rowCount: totalRowCount,\n    rowSelection: rowSelectionProp,\n    selectOnClickRow = false,\n    sortDescFirst = false,\n    sorting: sortingProp,\n    sortingIcon,\n    state,\n    stickyFooter,\n    stickyHeader,\n    striped,\n    truncated,\n    withBorder,\n    withCheckbox = true,\n    withColumnBorders,\n    withFooterCheckbox = false,\n    withFooterGroups = false,\n    withScrollArea,\n    cellProps,\n    checkboxProps,\n    footerGroupProps,\n    footerProps,\n    headerCheckboxProps,\n    headerGroupProps,\n    headerProps,\n    resizableTriggerProps,\n    rowCheckboxProps,\n    rowProps,\n    scrollAreaProps,\n    sortingIconProps,\n    tableProps,\n    tbodyProps,\n    tfootProps,\n    theadProps,\n    onColumnFiltersChange: onColumnFiltersChangeProp,\n    onPaginationChange: onPaginationChangeProp,\n    onRowClick,\n    onRowDoubleClick,\n    onRowSelectionChange: onRowSelectionChangeProp,\n    onSortingChange: onSortingChangeProp,\n    ...rest\n  }: TableProps<Y>) => {\n    const { t } = useI18n(\"table\")\n    const initialFocus = useRef<boolean>(false)\n    const ref = useRef<HTMLTableElement>(null)\n    const focusedCell = useRef<null | { colIndex: number; rowIndex: number }>(\n      null,\n    )\n    const [rowSelection, onRowSelectionChange] = useControllableState({\n      defaultValue: defaultRowSelection,\n      value: rowSelectionProp,\n      onChange: onRowSelectionChangeProp,\n    })\n    const [sorting, onSortingChange] = useControllableState({\n      defaultValue: defaultSorting,\n      value: sortingProp,\n      onChange: onSortingChangeProp,\n    })\n    const [pagination, onPaginationChange] = useControllableState({\n      defaultValue: defaultPagination,\n      value: paginationProp,\n      onChange: onPaginationChangeProp,\n    })\n    const [columnFilters, onColumnFiltersChange] = useControllableState({\n      defaultValue: defaultColumnFilters,\n      value: columnFiltersProp,\n      onChange: onColumnFiltersChangeProp,\n    })\n    const columns = useMemo(() => {\n      if (!enableRowSelection || !withCheckbox) return columnsProp\n\n      const clonedColumns = [...columnsProp]\n\n      const header = ({ header, table }: HeaderContext<Y, any>) => {\n        return (\n          <Checkbox\n            {...mergeProps(\n              {\n                checked: table.getIsAllRowsSelected(),\n                indeterminate: table.getIsSomeRowsSelected(),\n                indicatorProps: { outline: \"none\" },\n                inputProps: {\n                  \"aria-label\": t(\"Select all rows\"),\n                  \"data-focusable\": \"\",\n                  tabIndex: -1,\n                },\n                onChange: table.getToggleAllRowsSelectedHandler(),\n              },\n              checkboxProps ?? {},\n              runIfFn(headerCheckboxProps, header) ?? {},\n            )()}\n          />\n        )\n      }\n\n      const cell = ({ row }: CellContext<Y, any>) => {\n        return (\n          <Checkbox\n            {...mergeProps(\n              {\n                checked: row.getIsSelected(),\n                disabled: !row.getCanSelect(),\n                indeterminate: row.getIsSomeSelected(),\n                indicatorProps: { outline: \"none\" },\n                inputProps: {\n                  \"aria-label\": t(\"Select row\"),\n                  \"data-focusable\": \"\",\n                  tabIndex: -1,\n                },\n                onChange: row.getToggleSelectedHandler(),\n              },\n              checkboxProps ?? {},\n              runIfFn(rowCheckboxProps, row) ?? {},\n            )()}\n          />\n        )\n      }\n\n      clonedColumns.unshift({\n        id: \"select\",\n        cell,\n        header,\n        ...(withFooterCheckbox\n          ? { footer: header }\n          : { footerProps: { \"aria-hidden\": \"true\" } }),\n        cellProps: { verticalAlign: \"middle\" },\n        headerProps: { w: \"calc({spaces.4} + {space-x} * 2)\" },\n      })\n\n      return clonedColumns\n    }, [\n      checkboxProps,\n      columnsProp,\n      enableRowSelection,\n      headerCheckboxProps,\n      rowCheckboxProps,\n      t,\n      withCheckbox,\n      withFooterCheckbox,\n    ])\n    const table = useReactTable<Y>({\n      columnResizeMode,\n      columns,\n      data,\n      enableColumnResizing,\n      enableRowSelection,\n      getCoreRowModel: getCoreRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      manualPagination,\n      rowCount: totalRowCount,\n      sortDescFirst,\n      state: {\n        columnFilters,\n        pagination: enablePagination ? pagination : undefined,\n        rowSelection,\n        sorting: sorting as OriginalSortingState,\n        ...state,\n      },\n      onColumnFiltersChange,\n      onPaginationChange,\n      onRowSelectionChange,\n      onSortingChange: onSortingChange as OnChangeFn<OriginalSortingState>,\n      ...(enablePagination\n        ? { getPaginationRowModel: getPaginationRowModel() }\n        : {}),\n      ...rest,\n    })\n    const headerGroups = table.getHeaderGroups()\n    const mergedHeaderGroups = getMergeHeaderGroups(headerGroups)\n    const rows = table.getRowModel().rows\n    const footerGroups = table.getFooterGroups()\n    const mergedFooterGroups = getMergeFooterGroups(\n      withFooterGroups ? footerGroups : [],\n    )\n    const headerGroupCount = headerGroups.length\n    const rowCount = rows.length\n    const colCount = table.getAllLeafColumns().length\n    const maxColIndex = colCount - 1\n    const pageIndex = enablePagination\n      ? table.getState().pagination.pageIndex\n      : 0\n    const cellMap = useMemo(() => {\n      const cellMap = new Map<string, string>()\n\n      if (!enableKeyboardNavigation) return cellMap\n\n      const insertCellMap = (\n        id: string,\n        colSpan: number,\n        rowSpan: number,\n        colIndex: number,\n        rowIndex: number,\n      ) => {\n        for (let i = 0; i < colSpan; i++) {\n          cellMap.set(`${colIndex + i}-${rowIndex}`, `${colIndex}-${rowIndex}`)\n        }\n\n        for (let i = 1; i < rowSpan; i++) {\n          cellMap.set(`${colIndex}-${rowIndex + i}`, `${colIndex}-${rowIndex}`)\n        }\n      }\n\n      const insertCellMapByHeaderGroup = (\n        headerGroup: HeaderGroup<Y>,\n        rowIndex: number,\n      ) => {\n        let placeholderCount = 0\n\n        headerGroup.headers.forEach((header) => {\n          const colSpan = header.colSpan || 1\n          const rowSpan = header.rowSpan || 1\n          const colIndex = header.index + placeholderCount\n\n          placeholderCount += colSpan - 1\n\n          insertCellMap(header.id, colSpan, rowSpan, colIndex, rowIndex)\n        })\n      }\n\n      mergedHeaderGroups.forEach((headerGroup, rowIndex) => {\n        insertCellMapByHeaderGroup(headerGroup, rowIndex)\n      })\n\n      rows.forEach((row, rowIndex) => {\n        rowIndex += headerGroupCount\n\n        row.getVisibleCells().forEach((cell) => {\n          const colIndex = cell.column.getIndex()\n\n          insertCellMap(cell.id, 1, 1, colIndex, rowIndex)\n        })\n      })\n\n      mergedFooterGroups.forEach((footerGroup, rowIndex) => {\n        rowIndex += headerGroupCount + rowCount\n\n        insertCellMapByHeaderGroup(footerGroup, rowIndex)\n      })\n\n      return cellMap\n    }, [\n      enableKeyboardNavigation,\n      headerGroupCount,\n      mergedFooterGroups,\n      mergedHeaderGroups,\n      rows,\n      rowCount,\n    ])\n    const context = useMemo(\n      () => ({\n        columnResizeMode,\n        sortingIcon,\n        table,\n        resizableTriggerProps,\n        sortingIconProps,\n      }),\n      [\n        columnResizeMode,\n        sortingIcon,\n        sortingIconProps,\n        resizableTriggerProps,\n        table,\n      ],\n    )\n    const getCell = (\n      evOrEl:\n        | Element\n        | FocusEvent<HTMLTableElement>\n        | KeyboardEvent<HTMLTableElement>\n        | null\n        | undefined,\n    ) => {\n      if (!evOrEl) return\n\n      const el =\n        evOrEl instanceof HTMLElement\n          ? evOrEl.closest(\"th, td\")\n          : \"target\" in evOrEl && evOrEl.target instanceof HTMLElement\n            ? evOrEl.target.closest(\"th, td\")\n            : null\n\n      if (!(el instanceof HTMLTableCellElement)) return\n\n      const { colindex, rowindex } = el.dataset\n      const { colSpan, rowSpan } = el\n\n      if (!colindex || !rowindex) return\n\n      const colIndex = parseInt(colindex)\n      const rowIndex = parseInt(rowindex)\n\n      return { colIndex, colSpan, el, rowIndex, rowSpan }\n    }\n    const getShouldFocusCell = (colIndex: number, rowIndex: number) => {\n      const [trulyColIndex, trulyRowIndex] =\n        cellMap.get(`${colIndex}-${rowIndex}`)?.split(\"-\") ?? []\n\n      if (!trulyColIndex || !trulyRowIndex) return\n\n      const targetEl = ref.current?.querySelector(\n        `[data-colindex=\"${trulyColIndex}\"][data-rowindex=\"${trulyRowIndex}\"]`,\n      )\n\n      if (!targetEl || !(targetEl instanceof HTMLTableCellElement)) return\n\n      return targetEl\n    }\n    const removeTabIndex = (el: Element | null | undefined) => {\n      if (!el || !(el instanceof HTMLElement)) return\n\n      el.tabIndex = -1\n      el.querySelectorAll(\"[data-focusable]\").forEach((el) => {\n        if (el instanceof HTMLElement) el.tabIndex = -1\n      })\n    }\n    const onCellFocus = (\n      el: HTMLTableCellElement | null | undefined,\n      colIndex: number,\n      rowIndex: number,\n    ) => {\n      const targetEl = getShouldFocusCell(colIndex, rowIndex)\n\n      if (!targetEl) return\n\n      focusedCell.current = { colIndex, rowIndex }\n\n      removeTabIndex(el)\n\n      const shouldFocusEl =\n        targetEl.querySelector(\"[data-focusable]\") ?? targetEl\n\n      if (shouldFocusEl instanceof HTMLElement) {\n        shouldFocusEl.tabIndex = 0\n        shouldFocusEl.focus()\n      }\n    }\n    const onFocus = (ev: FocusEvent<HTMLTableElement>) => {\n      if (initialFocus.current) return\n\n      initialFocus.current = true\n\n      const cell = getCell(ev)\n\n      if (!cell) return\n\n      onCellFocus(cell.el, cell.colIndex, cell.rowIndex)\n    }\n    const onKeyDown = (ev: KeyboardEvent<HTMLTableElement>) => {\n      if (!enableKeyboardNavigation) return\n\n      const cell = getCell(ev)\n\n      if (!cell) return\n\n      runKeyAction(ev, {\n        ArrowDown: () =>\n          onCellFocus(cell.el, cell.colIndex, cell.rowIndex + cell.rowSpan),\n        ArrowLeft: () => onCellFocus(cell.el, cell.colIndex - 1, cell.rowIndex),\n        ArrowRight: () =>\n          onCellFocus(cell.el, cell.colIndex + cell.colSpan, cell.rowIndex),\n        ArrowUp: () => onCellFocus(cell.el, cell.colIndex, cell.rowIndex - 1),\n        End: () => onCellFocus(cell.el, maxColIndex, cell.rowIndex),\n        Home: () => onCellFocus(cell.el, 0, cell.rowIndex),\n        ...(enablePagination\n          ? {\n              PageDown: () => {\n                if (!table.getCanNextPage()) return\n\n                table.setPageIndex(pageIndex + 1)\n              },\n              PageUp: () => {\n                if (!table.getCanPreviousPage()) return\n\n                table.setPageIndex(pageIndex - 1)\n              },\n            }\n          : {}),\n      })\n    }\n    const getTabIndex = (colIndex: number, rowIndex: number) => {\n      if (!enableKeyboardNavigation) return undefined\n\n      return colIndex === initialFocusableCell.colIndex &&\n        rowIndex === initialFocusableCell.rowIndex\n        ? 0\n        : undefined\n    }\n\n    useUpdateEffect(() => {\n      if (!enableKeyboardNavigation) return\n\n      const { colIndex, rowIndex } = focusedCell.current ?? initialFocusableCell\n      const targetEl = getShouldFocusCell(colIndex, rowIndex)\n\n      if (targetEl) targetEl.tabIndex = 0\n    }, [pageIndex, enableKeyboardNavigation])\n\n    return (\n      <ComponentContext value={context}>\n        {header ? runIfFn(header, table) : null}\n\n        <NativeTable.Root\n          {...mergeProps(\n            {\n              ref,\n              className,\n              style:\n                enableColumnResizing && enableAutoResizeTableWidth\n                  ? { width: table.getCenterTotalSize() }\n                  : {},\n              colorScheme,\n              size,\n              variant,\n              \"aria-colcount\": colCount,\n              \"aria-multiselectable\": enableRowSelection ? \"true\" : undefined,\n              \"aria-rowcount\": totalRowCount || data.length,\n              highlightOnHover,\n              highlightOnSelected,\n              layout,\n              role: \"grid\",\n              stickyFooter,\n              stickyHeader,\n              striped,\n              withBorder,\n              withColumnBorders,\n              withScrollArea,\n              scrollAreaProps,\n              onFocus,\n              onKeyDown,\n            },\n            tableProps ?? {},\n          )()}\n        >\n          <NativeTable.Thead {...theadProps}>\n            {mergedHeaderGroups.map((headerGroup, rowIndex) => {\n              let placeholderCount = 0\n\n              return (\n                <NativeTable.Tr\n                  key={headerGroup.id}\n                  aria-rowindex={rowIndex + 1}\n                  role=\"row\"\n                  {...runIfFn(headerGroupProps, headerGroup)}\n                >\n                  {headerGroup.headers.map((header) => {\n                    const { columnDef } = header.column\n                    const colIndex = header.index + placeholderCount\n                    const tabIndex = getTabIndex(colIndex, rowIndex)\n                    const canSort = header.column.getCanSort()\n                    const sorted = header.column.getIsSorted()\n                    const canResize = header.column.getCanResize()\n                    const resizing = header.column.getIsResizing()\n                    const children = header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n\n                    placeholderCount += (header.colSpan || 1) - 1\n\n                    return (\n                      <NativeTable.Th\n                        key={header.id}\n                        aria-colindex={colIndex + 1}\n                        aria-rowindex={rowIndex + 1}\n                        aria-sort={\n                          sorted\n                            ? sorted === \"asc\"\n                              ? \"ascending\"\n                              : \"descending\"\n                            : \"none\"\n                        }\n                        data-colindex={colIndex}\n                        data-rowindex={rowIndex}\n                        colSpan={header.colSpan || undefined}\n                        numeric={columnDef.numeric}\n                        pe={\n                          canSort\n                            ? \"calc((1rem * {lineHeights.moderate}) + {space-x})\"\n                            : undefined\n                        }\n                        position=\"relative\"\n                        role=\"columnheader\"\n                        rowSpan={header.rowSpan || undefined}\n                        tabIndex={tabIndex}\n                        {...mergeProps(\n                          {\n                            css: {\n                              \"&:has([data-focusable]:focus-visible)\":\n                                focusRingStyle.outline,\n                            },\n                            style: enableColumnResizing\n                              ? { width: header.getSize() }\n                              : {},\n                          },\n                          runIfFn(headerProps, header) ?? {},\n                          columnDef.headerProps ?? {},\n                        )()}\n                      >\n                        <TruncatedText\n                          lineClamp={columnDef.lineClamp ?? lineClamp}\n                          truncated={columnDef.truncated ?? truncated}\n                        >\n                          {children}\n                        </TruncatedText>\n\n                        {canSort ? (\n                          <SortingIcon\n                            sorted={sorted}\n                            onClick={header.column.getToggleSortingHandler()}\n                          />\n                        ) : null}\n\n                        {canResize ? (\n                          <ResizableTrigger\n                            resizing={resizing}\n                            onDoubleClick={header.column.resetSize}\n                            onMouseDown={header.getResizeHandler()}\n                            onTouchStart={header.getResizeHandler()}\n                          />\n                        ) : null}\n                      </NativeTable.Th>\n                    )\n                  })}\n                </NativeTable.Tr>\n              )\n            })}\n          </NativeTable.Thead>\n\n          <NativeTable.Tbody {...tbodyProps}>\n            {rows.map((row, rowIndex) => {\n              rowIndex += headerGroupCount\n\n              const selected = !!rowSelection[row.id]\n              const disabled =\n                isFunction(enableRowSelection) && !enableRowSelection(row)\n\n              return (\n                <NativeTable.Tr\n                  id={row.id}\n                  key={row.id}\n                  aria-disabled={ariaAttr(disabled)}\n                  aria-rowindex={rowIndex + 1}\n                  aria-selected={ariaAttr(selected)}\n                  data-disabled={dataAttr(disabled)}\n                  data-selected={dataAttr(selected)}\n                  role=\"row\"\n                  {...mergeProps(\n                    {\n                      onClick:\n                        !disabled && selectOnClickRow\n                          ? () => row.toggleSelected(!selected)\n                          : undefined,\n                    },\n                    {\n                      onClick: !disabled ? () => onRowClick?.(row) : undefined,\n                      onDoubleClick: !disabled\n                        ? () => onRowDoubleClick?.(row)\n                        : undefined,\n                    },\n                    runIfFn(rowProps, row) ?? {},\n                  )()}\n                >\n                  {row.getVisibleCells().map((cell) => {\n                    const { columnDef } = cell.column\n                    const colIndex = cell.column.getIndex()\n                    const tabIndex = getTabIndex(colIndex, rowIndex)\n                    const children = flexRender(\n                      cell.column.columnDef.cell,\n                      cell.getContext(),\n                    )\n\n                    return (\n                      <NativeTable.Td\n                        key={cell.id}\n                        aria-colindex={colIndex + 1}\n                        aria-rowindex={rowIndex + 1}\n                        data-colindex={colIndex}\n                        data-rowindex={rowIndex}\n                        numeric={columnDef.numeric}\n                        role=\"gridcell\"\n                        tabIndex={tabIndex}\n                        {...mergeProps(\n                          {\n                            css: {\n                              \"&:has([data-focusable]:focus-visible)\":\n                                focusRingStyle.outline,\n                            },\n                          },\n                          runIfFn(cellProps, cell) ?? {},\n                          columnDef.cellProps ?? {},\n                        )()}\n                      >\n                        <TruncatedText\n                          lineClamp={columnDef.lineClamp ?? lineClamp}\n                          truncated={columnDef.truncated ?? truncated}\n                        >\n                          {children}\n                        </TruncatedText>\n                      </NativeTable.Td>\n                    )\n                  })}\n                </NativeTable.Tr>\n              )\n            })}\n          </NativeTable.Tbody>\n\n          {withFooterGroups ? (\n            <NativeTable.Tfoot {...tfootProps}>\n              {mergedFooterGroups.map((footerGroup, rowIndex) => {\n                rowIndex += headerGroupCount + rowCount\n\n                let placeholderCount = 0\n\n                return (\n                  <NativeTable.Tr\n                    key={footerGroup.id}\n                    aria-rowindex={rowIndex + 1}\n                    role=\"row\"\n                    {...runIfFn(footerGroupProps, footerGroup)}\n                  >\n                    {footerGroup.headers.map((header) => {\n                      const { columnDef } = header.column\n                      const colIndex = header.index + placeholderCount\n                      const tabIndex = getTabIndex(colIndex, rowIndex)\n                      const children = header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.footer,\n                            header.getContext(),\n                          )\n\n                      placeholderCount += (header.colSpan || 1) - 1\n\n                      return (\n                        <NativeTable.Td\n                          key={header.id}\n                          aria-colindex={colIndex + 1}\n                          aria-rowindex={rowIndex + 1}\n                          data-colindex={colIndex}\n                          data-rowindex={rowIndex}\n                          colSpan={header.colSpan || undefined}\n                          numeric={columnDef.numeric}\n                          role=\"gridcell\"\n                          rowSpan={header.rowSpan || undefined}\n                          tabIndex={tabIndex}\n                          {...mergeProps(\n                            {\n                              css: {\n                                \"&:has([data-focusable]:focus-visible)\":\n                                  focusRingStyle.outline,\n                              },\n                            },\n                            runIfFn(footerProps, header) ?? {},\n                            columnDef.footerProps ?? {},\n                          )()}\n                        >\n                          <TruncatedText\n                            lineClamp={columnDef.lineClamp ?? lineClamp}\n                            truncated={columnDef.truncated ?? truncated}\n                          >\n                            {children}\n                          </TruncatedText>\n                        </NativeTable.Td>\n                      )\n                    })}\n                  </NativeTable.Tr>\n                )\n              })}\n            </NativeTable.Tfoot>\n          ) : null}\n        </NativeTable.Root>\n\n        {footer ? runIfFn(footer, table) : null}\n      </ComponentContext>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends RowData>(props: TableProps<Y>): ReactElement\n}>\n\ninterface SortingIconProps extends HTMLStyledProps<\"button\"> {\n  sorted: false | SortDirection\n}\n\nconst SortingIcon: FC<SortingIconProps> = ({ sorted, ...rest }) => {\n  const { t } = useI18n(\"table\")\n  const { sortingIcon, sortingIconProps = {} } = useComponentContext()\n  const Icon = sorted ? ChevronUpIcon : ChevronsUpDownIcon\n\n  return (\n    <styled.button\n      type=\"button\"\n      layerStyle=\"ghost\"\n      colorScheme=\"mono\"\n      aria-label={t(\n        sorted\n          ? sorted === \"desc\"\n            ? \"Sort descending\"\n            : \"Sort ascending\"\n          : \"Clear sorting\",\n      )}\n      data-focusable\n      aspectRatio=\"1\"\n      cursor=\"pointer\"\n      display=\"center\"\n      focusVisibleRing=\"none\"\n      h=\"calc(1em * {lineHeights.moderate})\"\n      position=\"absolute\"\n      right=\"{space-x}\"\n      rounded=\"l1\"\n      tabIndex={-1}\n      top=\"50%\"\n      transform=\"translateY(-50%)\"\n      transitionDuration=\"moderate\"\n      transitionProperty=\"common\"\n      _hover={{ layerStyle: \"ghost.hover\" }}\n      {...mergeProps(rest, sortingIconProps)()}\n    >\n      {runIfFn(sortingIcon, sorted) ?? (\n        <Icon transform={`rotate(${sorted === \"desc\" ? 180 : 0}deg)`} />\n      )}\n    </styled.button>\n  )\n}\n\ninterface ResizableTriggerProps extends HTMLStyledProps {\n  resizing: boolean\n}\n\nconst ResizableTrigger: FC<ResizableTriggerProps> = ({ resizing, ...rest }) => {\n  const {\n    columnResizeMode,\n    table,\n    resizableTriggerProps = {},\n  } = useComponentContext()\n  const offset = table.getState().columnSizingInfo.deltaOffset\n\n  return (\n    <styled.div\n      data-active={dataAttr(resizing)}\n      bg=\"colorScheme.solid\"\n      cursor=\"col-resize\"\n      insetY=\"0\"\n      opacity={{ base: \"0\", _hover: \"1\", _active: \"1\" }}\n      position=\"absolute\"\n      right=\"0\"\n      touchAction=\"none\"\n      transform={`translateX(${columnResizeMode === \"onEnd\" && resizing && offset ? `${offset}px` : \"50%\"})`}\n      userSelect=\"none\"\n      w=\"1\"\n      {...mergeProps(rest, resizableTriggerProps)()}\n    />\n  )\n}\n\ninterface TruncatedTextProps extends HTMLStyledProps<\"span\"> {}\n\nconst TruncatedText: FC<TruncatedTextProps> = ({\n  children,\n  lineClamp,\n  truncated,\n  ...rest\n}) => {\n  if (lineClamp || truncated) {\n    return (\n      <styled.span\n        lineClamp={lineClamp}\n        truncated={truncated}\n        wordBreak=\"break-all\"\n        {...rest}\n      >\n        {children}\n      </styled.span>\n    )\n  } else {\n    return children\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":["NativeTable.Root","NativeTable.Thead","NativeTable.Tr","NativeTable.Th","NativeTable.Tbody","NativeTable.Td","NativeTable.Tfoot"],"sources":["../../../../src/components/table/table.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  AccessorFn,\n  Cell,\n  CellContext,\n  ColumnDef,\n  ColumnDefTemplate,\n  ColumnFiltersColumnDef,\n  ColumnFiltersState,\n  ColumnMeta,\n  ColumnPinningColumnDef,\n  ColumnSizingColumnDef,\n  GlobalFilterColumnDef,\n  GroupingColumnDef,\n  Header,\n  HeaderContext,\n  HeaderGroup,\n  OnChangeFn,\n  SortingState as OriginalSortingState,\n  PaginationState,\n  Table as ReactTable,\n  Row,\n  RowData,\n  RowSelectionState,\n  SortDirection,\n  SortingColumnDef,\n  TableOptions,\n  VisibilityColumnDef,\n} from \"@tanstack/react-table\"\nimport type { FC, FocusEvent, KeyboardEvent, ReactElement } from \"react\"\nimport type { CSSProps, GenericsComponent, HTMLStyledProps } from \"../../core\"\nimport type { ReactNodeOrFunction, TransformProps } from \"../../utils\"\nimport type { CheckboxProps } from \"../checkbox\"\nimport {\n  createColumnHelper,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { useMemo, useRef } from \"react\"\nimport { createComponent, focusRingStyle, mergeProps, styled } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  isFunction,\n  runIfFn,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { Checkbox } from \"../checkbox\"\nimport { ChevronsUpDownIcon, ChevronUpIcon } from \"../icon\"\nimport { NativeTable } from \"../native-table\"\n\ndeclare module \"@tanstack/react-table\" {\n  interface ColumnDefExtensions<TData extends RowData, TValue = unknown>\n    extends\n      VisibilityColumnDef,\n      ColumnPinningColumnDef,\n      ColumnFiltersColumnDef<TData>,\n      GlobalFilterColumnDef,\n      SortingColumnDef<TData>,\n      GroupingColumnDef<TData, TValue>,\n      ColumnSizingColumnDef {}\n\n  interface ColumnDefBase<TData extends RowData, TValue = unknown>\n    extends\n      ColumnDefExtensions<TData, TValue>,\n      Pick<CSSProps, \"lineClamp\" | \"truncated\">,\n      Pick<NativeTable.TdProps, \"numeric\"> {\n    cell?: ColumnDefTemplate<CellContext<TData, TValue>>\n    footer?: ColumnDefTemplate<HeaderContext<TData, TValue>>\n    getUniqueValues?: AccessorFn<TData, unknown[]>\n    meta?: ColumnMeta<TData, TValue>\n    cellProps?: NativeTable.TdProps\n    footerProps?: NativeTable.ThProps\n    headerProps?: NativeTable.ThProps\n  }\n}\n\nexport { createColumnHelper }\nexport type {\n  ColumnDef,\n  ColumnFiltersState,\n  PaginationState,\n  RowSelectionState,\n  SortDirection,\n}\n\nfunction getMergeHeaderGroups(\n  headerGroups: HeaderGroup<any>[],\n): HeaderGroup<any>[] {\n  if (headerGroups.length <= 1) return headerGroups\n\n  const columnsIds = new Set()\n\n  return headerGroups.map((headerGroup, depth, { length: fullDepth }) => {\n    return {\n      ...headerGroup,\n      headers: headerGroup.headers\n        .filter((header) => !columnsIds.has(header.column.id))\n        .map((header) => {\n          columnsIds.add(header.column.id)\n\n          return header.isPlaceholder\n            ? { ...header, isPlaceholder: false, rowSpan: fullDepth - depth }\n            : { ...header, rowSpan: 1 }\n        }),\n    }\n  })\n}\n\nfunction getMergeFooterGroups(\n  headerGroups: HeaderGroup<any>[],\n): HeaderGroup<any>[] {\n  if (headerGroups.length <= 1) return headerGroups\n\n  return headerGroups.map((headerGroup, depth) => {\n    const nextHeaderGroups = headerGroups.slice(depth + 1)\n\n    return {\n      ...headerGroup,\n      headers: headerGroup.headers\n        .filter((header) => !header.isPlaceholder)\n        .map((header) => {\n          if (nextHeaderGroups.length === 0) return header\n\n          const rowSpan = nextHeaderGroups.reduce((acc, nextHeaderGroup) => {\n            const hasNextHeader = nextHeaderGroup.headers.some(\n              (nextHeader) => nextHeader.column.id === header.column.id,\n            )\n\n            return acc + (hasNextHeader ? 1 : 0)\n          }, 1)\n\n          return { ...header, rowSpan }\n        }),\n    }\n  })\n}\n\nexport interface ColumnSort<Y extends RowData> {\n  desc: boolean\n  id: keyof Y\n}\nexport type SortingState<Y extends RowData> = ColumnSort<Y>[]\n\ninterface ComponentContext extends Pick<\n  TableProps<any>,\n  | \"columnResizeMode\"\n  | \"resizableTriggerProps\"\n  | \"sortingIcon\"\n  | \"sortingIconProps\"\n> {\n  table: ReactTable<any>\n}\n\ninterface OmittedTableOptions<Y extends RowData> extends Omit<\n  TableOptions<Y>,\n  | \"getCoreRowModel\"\n  | \"onColumnFiltersChange\"\n  | \"onPaginationChange\"\n  | \"onSortingChange\"\n> {}\n\ninterface PickedNativeTableProps extends Pick<\n  NativeTable.RootProps,\n  | \"className\"\n  | \"highlightOnHover\"\n  | \"highlightOnSelected\"\n  | \"layout\"\n  | \"scrollAreaProps\"\n  | \"size\"\n  | \"stickyFooter\"\n  | \"stickyHeader\"\n  | \"striped\"\n  | \"variant\"\n  | \"withBorder\"\n  | \"withColumnBorders\"\n  | \"withScrollArea\"\n> {}\n\nexport interface TableProps<Y extends RowData>\n  extends\n    OmittedTableOptions<Y>,\n    PickedNativeTableProps,\n    Pick<CSSProps, \"colorScheme\" | \"lineClamp\" | \"truncated\"> {\n  /**\n   * The column filters state of the table.\n   */\n  columnFilters?: ColumnFiltersState\n  /**\n   * The default column filters state of the table.\n   */\n  defaultColumnFilters?: ColumnFiltersState\n  /**\n   * The default pagination state of the table.\n   */\n  defaultPagination?: PaginationState\n  /**\n   * The default row selection state of the table.\n   */\n  defaultRowSelection?: RowSelectionState\n  /**\n   * The default sorting state of the table.\n   */\n  defaultSorting?: SortingState<Y>\n  /**\n   * If `true`, the table width will be automatically resized to the content.\n   *\n   * @default false\n   */\n  enableAutoResizeTableWidth?: boolean\n  /**\n   * If `true`, the keyboard navigation will be enabled.\n   *\n   * @default true\n   */\n  enableKeyboardNavigation?: boolean\n  /**\n   * If `true`, the pagination will be enabled.\n   *\n   * @default false\n   */\n  enablePagination?: boolean\n  /**\n   * The footer of the table.\n   */\n  footer?: ReactNodeOrFunction<ReactTable<Y>>\n  /**\n   * The header of the table.\n   */\n  header?: ReactNodeOrFunction<ReactTable<Y>>\n  /**\n   * The initial focusable cell of the table.\n   *\n   * @default {rowIndex: 0, colIndex: 0}\n   */\n  initialFocusableCell?: { colIndex: number; rowIndex: number }\n  /**\n   * The pagination state of the table.\n   */\n  pagination?: PaginationState\n  /**\n   * The row selection state of the table.\n   */\n  rowSelection?: RowSelectionState\n  /**\n   * If `true`, the row will be selected when the row is clicked.\n   *\n   * @default false\n   */\n  selectOnClickRow?: boolean\n  /**\n   * The sorting state of the table.\n   */\n  sorting?: SortingState<Y>\n  /**\n   * The sorting icon of the table.\n   */\n  sortingIcon?: ReactNodeOrFunction<false | SortDirection>\n  /**\n   * If `true`, the table will have a checkbox column.\n   *\n   * @default true\n   */\n  withCheckbox?: boolean\n  /**\n   * If `true`, the table will have a checkbox in the footer.\n   *\n   * @default false\n   */\n  withFooterCheckbox?: boolean\n  /**\n   * If `true`, the table will have footer groups.\n   *\n   * @default false\n   */\n  withFooterGroups?: boolean\n  /**\n   * The props for the table cell.\n   */\n  cellProps?: TransformProps<NativeTable.TdProps, Cell<Y, unknown>>\n  /**\n   * The props for the checkbox.\n   */\n  checkboxProps?: CheckboxProps\n  /**\n   * The props for the table footer group.\n   */\n  footerGroupProps?: TransformProps<NativeTable.TrProps, HeaderGroup<Y>>\n  /**\n   * The props for the table footer.\n   */\n  footerProps?: TransformProps<NativeTable.ThProps, Header<Y, unknown>>\n  /**\n   * The props for the table header checkbox.\n   */\n  headerCheckboxProps?: TransformProps<CheckboxProps, Header<Y, unknown>>\n  /**\n   * The props for the table header group.\n   */\n  headerGroupProps?: TransformProps<NativeTable.TrProps, HeaderGroup<Y>>\n  /**\n   * The props for the table header.\n   */\n  headerProps?: TransformProps<NativeTable.ThProps, Header<Y, unknown>>\n  /**\n   * The props for the resizable trigger.\n   */\n  resizableTriggerProps?: TransformProps<\n    Omit<ResizableTriggerProps, \"resizing\">,\n    Header<Y, unknown>\n  >\n  /**\n   * The props for the table row checkbox.\n   */\n  rowCheckboxProps?: TransformProps<CheckboxProps, Row<Y>>\n  /**\n   * The props for the table row.\n   */\n  rowProps?: TransformProps<NativeTable.TrProps, Row<Y>>\n  /**\n   * The props for the sorting icon.\n   */\n  sortingIconProps?: TransformProps<\n    Omit<SortingIconProps, \"sorted\">,\n    Header<Y, unknown>\n  >\n  /**\n   * The props for the table.\n   */\n  tableProps?: NativeTable.RootProps\n  /**\n   * The props for the table tbody.\n   */\n  tbodyProps?: NativeTable.TbodyProps\n  /**\n   * The props for the table tfoot.\n   */\n  tfootProps?: NativeTable.TfootProps\n  /**\n   * The props for the table thead.\n   */\n  theadProps?: NativeTable.TheadProps\n  /**\n   * The callback invoked when the column filters state changes.\n   */\n  onColumnFiltersChange?: (columnFilters: ColumnFiltersState) => void\n  /**\n   * The callback invoked when the pagination state changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void\n  /**\n   * The callback invoked when the row is clicked.\n   */\n  onRowClick?: (row: Row<Y>) => void\n  /**\n   * The callback invoked when the row is double clicked.\n   */\n  onRowDoubleClick?: (row: Row<Y>) => void\n  /**\n   * The callback invoked when the sorting state changes.\n   */\n  onSortingChange?: (sorting: SortingState<Y>) => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TablePropsContext,\n  useComponentContext,\n  usePropsContext: useTablePropsContext,\n  withContext,\n} = createComponent<TableProps<any>, any, ComponentContext>(\"table\")\n\nexport { TablePropsContext, useTablePropsContext }\n\n/**\n * `Table` is a table component equipped with column sorting, row selection, and click event features.\n *\n * @see https://yamada-ui.com/docs/components/table\n */\nexport const Table = withContext(\n  <Y extends RowData>({\n    className,\n    colorScheme,\n    size,\n    variant,\n    columnFilters: columnFiltersProp,\n    columnResizeMode = \"onChange\",\n    columns: columnsProp,\n    data,\n    defaultColumnFilters,\n    defaultPagination = { pageIndex: 0, pageSize: 20 },\n    defaultRowSelection = {},\n    defaultSorting,\n    enableAutoResizeTableWidth = false,\n    enableColumnResizing = false,\n    enableKeyboardNavigation = true,\n    enablePagination = false,\n    enableRowSelection = false,\n    footer,\n    header,\n    highlightOnHover = !!enableRowSelection,\n    highlightOnSelected = !!enableRowSelection,\n    initialFocusableCell = { colIndex: 0, rowIndex: 0 },\n    layout,\n    lineClamp,\n    manualPagination,\n    pagination: paginationProp,\n    rowCount: totalRowCount,\n    rowSelection: rowSelectionProp,\n    selectOnClickRow = false,\n    sortDescFirst = false,\n    sorting: sortingProp,\n    sortingIcon,\n    state,\n    stickyFooter,\n    stickyHeader,\n    striped,\n    truncated,\n    withBorder,\n    withCheckbox = true,\n    withColumnBorders,\n    withFooterCheckbox = false,\n    withFooterGroups = false,\n    withScrollArea,\n    cellProps,\n    checkboxProps,\n    footerGroupProps,\n    footerProps,\n    headerCheckboxProps,\n    headerGroupProps,\n    headerProps,\n    resizableTriggerProps,\n    rowCheckboxProps,\n    rowProps,\n    scrollAreaProps,\n    sortingIconProps,\n    tableProps,\n    tbodyProps,\n    tfootProps,\n    theadProps,\n    onColumnFiltersChange: onColumnFiltersChangeProp,\n    onPaginationChange: onPaginationChangeProp,\n    onRowClick,\n    onRowDoubleClick,\n    onRowSelectionChange: onRowSelectionChangeProp,\n    onSortingChange: onSortingChangeProp,\n    ...rest\n  }: TableProps<Y>) => {\n    const { t } = useI18n(\"table\")\n    const initialFocus = useRef<boolean>(false)\n    const ref = useRef<HTMLTableElement>(null)\n    const focusedCell = useRef<null | { colIndex: number; rowIndex: number }>(\n      null,\n    )\n    const [rowSelection, onRowSelectionChange] = useControllableState({\n      defaultValue: defaultRowSelection,\n      value: rowSelectionProp,\n      onChange: onRowSelectionChangeProp,\n    })\n    const [sorting, onSortingChange] = useControllableState({\n      defaultValue: defaultSorting,\n      value: sortingProp,\n      onChange: onSortingChangeProp,\n    })\n    const [pagination, onPaginationChange] = useControllableState({\n      defaultValue: defaultPagination,\n      value: paginationProp,\n      onChange: onPaginationChangeProp,\n    })\n    const [columnFilters, onColumnFiltersChange] = useControllableState({\n      defaultValue: defaultColumnFilters,\n      value: columnFiltersProp,\n      onChange: onColumnFiltersChangeProp,\n    })\n    const columns = useMemo(() => {\n      if (!enableRowSelection || !withCheckbox) return columnsProp\n\n      const clonedColumns = [...columnsProp]\n\n      const header = ({ header, table }: HeaderContext<Y, any>) => {\n        return (\n          <Checkbox\n            {...mergeProps(\n              {\n                checked: table.getIsAllRowsSelected(),\n                indeterminate: table.getIsSomeRowsSelected(),\n                indicatorProps: { outline: \"none\" },\n                inputProps: {\n                  \"aria-label\": t(\"Select all rows\"),\n                  \"data-focusable\": \"\",\n                  tabIndex: -1,\n                },\n                onChange: table.getToggleAllRowsSelectedHandler(),\n              },\n              checkboxProps ?? {},\n              runIfFn(headerCheckboxProps, header) ?? {},\n            )()}\n          />\n        )\n      }\n\n      const cell = ({ row }: CellContext<Y, any>) => {\n        return (\n          <Checkbox\n            {...mergeProps(\n              {\n                checked: row.getIsSelected(),\n                disabled: !row.getCanSelect(),\n                indeterminate: row.getIsSomeSelected(),\n                indicatorProps: { outline: \"none\" },\n                inputProps: {\n                  \"aria-label\": t(\"Select row\"),\n                  \"data-focusable\": \"\",\n                  tabIndex: -1,\n                },\n                onChange: row.getToggleSelectedHandler(),\n              },\n              checkboxProps ?? {},\n              runIfFn(rowCheckboxProps, row) ?? {},\n            )()}\n          />\n        )\n      }\n\n      clonedColumns.unshift({\n        id: \"select\",\n        cell,\n        header,\n        ...(withFooterCheckbox\n          ? { footer: header }\n          : { footerProps: { \"aria-hidden\": \"true\" } }),\n        cellProps: { verticalAlign: \"middle\" },\n        headerProps: { w: \"calc({spaces.4} + {space-x} * 2)\" },\n      })\n\n      return clonedColumns\n    }, [\n      checkboxProps,\n      columnsProp,\n      enableRowSelection,\n      headerCheckboxProps,\n      rowCheckboxProps,\n      t,\n      withCheckbox,\n      withFooterCheckbox,\n    ])\n    const table = useReactTable<Y>({\n      columnResizeMode,\n      columns,\n      data,\n      enableColumnResizing,\n      enableRowSelection,\n      getCoreRowModel: getCoreRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      manualPagination,\n      rowCount: totalRowCount,\n      sortDescFirst,\n      state: {\n        columnFilters,\n        pagination: enablePagination ? pagination : undefined,\n        rowSelection,\n        sorting: sorting as OriginalSortingState,\n        ...state,\n      },\n      onColumnFiltersChange,\n      onPaginationChange,\n      onRowSelectionChange,\n      onSortingChange: onSortingChange as OnChangeFn<OriginalSortingState>,\n      ...(enablePagination\n        ? { getPaginationRowModel: getPaginationRowModel() }\n        : {}),\n      ...rest,\n    })\n    const headerGroups = table.getHeaderGroups()\n    const mergedHeaderGroups = getMergeHeaderGroups(headerGroups)\n    const rows = table.getRowModel().rows\n    const footerGroups = table.getFooterGroups()\n    const mergedFooterGroups = getMergeFooterGroups(\n      withFooterGroups ? footerGroups : [],\n    )\n    const headerGroupCount = headerGroups.length\n    const rowCount = rows.length\n    const colCount = table.getAllLeafColumns().length\n    const maxColIndex = colCount - 1\n    const pageIndex = enablePagination\n      ? table.getState().pagination.pageIndex\n      : 0\n    const cellMap = useMemo(() => {\n      const cellMap = new Map<string, string>()\n\n      if (!enableKeyboardNavigation) return cellMap\n\n      const insertCellMap = (\n        id: string,\n        colSpan: number,\n        rowSpan: number,\n        colIndex: number,\n        rowIndex: number,\n      ) => {\n        for (let i = 0; i < colSpan; i++) {\n          cellMap.set(`${colIndex + i}-${rowIndex}`, `${colIndex}-${rowIndex}`)\n        }\n\n        for (let i = 1; i < rowSpan; i++) {\n          cellMap.set(`${colIndex}-${rowIndex + i}`, `${colIndex}-${rowIndex}`)\n        }\n      }\n\n      const insertCellMapByHeaderGroup = (\n        headerGroup: HeaderGroup<Y>,\n        rowIndex: number,\n      ) => {\n        let placeholderCount = 0\n\n        headerGroup.headers.forEach((header) => {\n          const colSpan = header.colSpan || 1\n          const rowSpan = header.rowSpan || 1\n          const colIndex = header.index + placeholderCount\n\n          placeholderCount += colSpan - 1\n\n          insertCellMap(header.id, colSpan, rowSpan, colIndex, rowIndex)\n        })\n      }\n\n      mergedHeaderGroups.forEach((headerGroup, rowIndex) => {\n        insertCellMapByHeaderGroup(headerGroup, rowIndex)\n      })\n\n      rows.forEach((row, rowIndex) => {\n        rowIndex += headerGroupCount\n\n        row.getVisibleCells().forEach((cell) => {\n          const colIndex = cell.column.getIndex()\n\n          insertCellMap(cell.id, 1, 1, colIndex, rowIndex)\n        })\n      })\n\n      mergedFooterGroups.forEach((footerGroup, rowIndex) => {\n        rowIndex += headerGroupCount + rowCount\n\n        insertCellMapByHeaderGroup(footerGroup, rowIndex)\n      })\n\n      return cellMap\n    }, [\n      enableKeyboardNavigation,\n      headerGroupCount,\n      mergedFooterGroups,\n      mergedHeaderGroups,\n      rows,\n      rowCount,\n    ])\n    const context = useMemo(\n      () => ({\n        columnResizeMode,\n        sortingIcon,\n        table,\n        resizableTriggerProps,\n        sortingIconProps,\n      }),\n      [\n        columnResizeMode,\n        sortingIcon,\n        sortingIconProps,\n        resizableTriggerProps,\n        table,\n      ],\n    )\n    const getCell = (\n      evOrEl:\n        | Element\n        | FocusEvent<HTMLTableElement>\n        | KeyboardEvent<HTMLTableElement>\n        | null\n        | undefined,\n    ) => {\n      if (!evOrEl) return\n\n      const el =\n        evOrEl instanceof HTMLElement\n          ? evOrEl.closest(\"th, td\")\n          : \"target\" in evOrEl && evOrEl.target instanceof HTMLElement\n            ? evOrEl.target.closest(\"th, td\")\n            : null\n\n      if (!(el instanceof HTMLTableCellElement)) return\n\n      const { colindex, rowindex } = el.dataset\n      const { colSpan, rowSpan } = el\n\n      if (!colindex || !rowindex) return\n\n      const colIndex = parseInt(colindex)\n      const rowIndex = parseInt(rowindex)\n\n      return { colIndex, colSpan, el, rowIndex, rowSpan }\n    }\n    const getShouldFocusCell = (colIndex: number, rowIndex: number) => {\n      const [trulyColIndex, trulyRowIndex] =\n        cellMap.get(`${colIndex}-${rowIndex}`)?.split(\"-\") ?? []\n\n      if (!trulyColIndex || !trulyRowIndex) return\n\n      const targetEl = ref.current?.querySelector(\n        `[data-colindex=\"${trulyColIndex}\"][data-rowindex=\"${trulyRowIndex}\"]`,\n      )\n\n      if (!targetEl || !(targetEl instanceof HTMLTableCellElement)) return\n\n      return targetEl\n    }\n    const removeTabIndex = (el: Element | null | undefined) => {\n      if (!el || !(el instanceof HTMLElement)) return\n\n      el.tabIndex = -1\n      el.querySelectorAll(\"[data-focusable]\").forEach((el) => {\n        if (el instanceof HTMLElement) el.tabIndex = -1\n      })\n    }\n    const onCellFocus = (\n      el: HTMLTableCellElement | null | undefined,\n      colIndex: number,\n      rowIndex: number,\n    ) => {\n      const targetEl = getShouldFocusCell(colIndex, rowIndex)\n\n      if (!targetEl) return\n\n      focusedCell.current = { colIndex, rowIndex }\n\n      removeTabIndex(el)\n\n      const shouldFocusEl =\n        targetEl.querySelector(\"[data-focusable]\") ?? targetEl\n\n      if (shouldFocusEl instanceof HTMLElement) {\n        shouldFocusEl.tabIndex = 0\n        shouldFocusEl.focus()\n      }\n    }\n    const onFocus = (ev: FocusEvent<HTMLTableElement>) => {\n      if (initialFocus.current) return\n\n      initialFocus.current = true\n\n      const cell = getCell(ev)\n\n      if (!cell) return\n\n      onCellFocus(cell.el, cell.colIndex, cell.rowIndex)\n    }\n    const onKeyDown = (ev: KeyboardEvent<HTMLTableElement>) => {\n      if (!enableKeyboardNavigation) return\n\n      const cell = getCell(ev)\n\n      if (!cell) return\n\n      runKeyAction(ev, {\n        ArrowDown: () =>\n          onCellFocus(cell.el, cell.colIndex, cell.rowIndex + cell.rowSpan),\n        ArrowLeft: () => onCellFocus(cell.el, cell.colIndex - 1, cell.rowIndex),\n        ArrowRight: () =>\n          onCellFocus(cell.el, cell.colIndex + cell.colSpan, cell.rowIndex),\n        ArrowUp: () => onCellFocus(cell.el, cell.colIndex, cell.rowIndex - 1),\n        End: () => onCellFocus(cell.el, maxColIndex, cell.rowIndex),\n        Home: () => onCellFocus(cell.el, 0, cell.rowIndex),\n        ...(enablePagination\n          ? {\n              PageDown: () => {\n                if (!table.getCanNextPage()) return\n\n                table.setPageIndex(pageIndex + 1)\n              },\n              PageUp: () => {\n                if (!table.getCanPreviousPage()) return\n\n                table.setPageIndex(pageIndex - 1)\n              },\n            }\n          : {}),\n      })\n    }\n    const getTabIndex = (colIndex: number, rowIndex: number) => {\n      if (!enableKeyboardNavigation) return undefined\n\n      return colIndex === initialFocusableCell.colIndex &&\n        rowIndex === initialFocusableCell.rowIndex\n        ? 0\n        : undefined\n    }\n\n    useUpdateEffect(() => {\n      if (!enableKeyboardNavigation) return\n\n      const { colIndex, rowIndex } = focusedCell.current ?? initialFocusableCell\n      const targetEl = getShouldFocusCell(colIndex, rowIndex)\n\n      if (targetEl) targetEl.tabIndex = 0\n    }, [pageIndex, enableKeyboardNavigation])\n\n    return (\n      <ComponentContext value={context}>\n        {header ? runIfFn(header, table) : null}\n\n        <NativeTable.Root\n          {...mergeProps(\n            {\n              ref,\n              className,\n              style:\n                enableColumnResizing && enableAutoResizeTableWidth\n                  ? { width: table.getCenterTotalSize() }\n                  : {},\n              colorScheme,\n              size,\n              variant,\n              \"aria-colcount\": colCount,\n              \"aria-multiselectable\": enableRowSelection ? \"true\" : undefined,\n              \"aria-rowcount\": totalRowCount || data.length,\n              highlightOnHover,\n              highlightOnSelected,\n              layout,\n              role: \"grid\",\n              stickyFooter,\n              stickyHeader,\n              striped,\n              withBorder,\n              withColumnBorders,\n              withScrollArea,\n              scrollAreaProps,\n              onFocus,\n              onKeyDown,\n            },\n            tableProps ?? {},\n          )()}\n        >\n          <NativeTable.Thead {...theadProps}>\n            {mergedHeaderGroups.map((headerGroup, rowIndex) => {\n              let placeholderCount = 0\n\n              return (\n                <NativeTable.Tr\n                  key={headerGroup.id}\n                  aria-rowindex={rowIndex + 1}\n                  role=\"row\"\n                  {...runIfFn(headerGroupProps, headerGroup)}\n                >\n                  {headerGroup.headers.map((header) => {\n                    const { columnDef } = header.column\n                    const colIndex = header.index + placeholderCount\n                    const tabIndex = getTabIndex(colIndex, rowIndex)\n                    const canSort = header.column.getCanSort()\n                    const sorted = header.column.getIsSorted()\n                    const canResize = header.column.getCanResize()\n                    const resizing = header.column.getIsResizing()\n                    const children = header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n\n                    placeholderCount += (header.colSpan || 1) - 1\n\n                    return (\n                      <NativeTable.Th\n                        key={header.id}\n                        aria-colindex={colIndex + 1}\n                        aria-rowindex={rowIndex + 1}\n                        aria-sort={\n                          sorted\n                            ? sorted === \"asc\"\n                              ? \"ascending\"\n                              : \"descending\"\n                            : \"none\"\n                        }\n                        data-colindex={colIndex}\n                        data-rowindex={rowIndex}\n                        colSpan={header.colSpan || undefined}\n                        numeric={columnDef.numeric}\n                        pe={\n                          canSort\n                            ? \"calc((1rem * {lineHeights.moderate}) + {space-x})\"\n                            : undefined\n                        }\n                        position=\"relative\"\n                        role=\"columnheader\"\n                        rowSpan={header.rowSpan || undefined}\n                        tabIndex={tabIndex}\n                        {...mergeProps(\n                          {\n                            css: {\n                              \"&:has([data-focusable]:focus-visible)\":\n                                focusRingStyle.outline,\n                            },\n                            style: enableColumnResizing\n                              ? { width: header.getSize() }\n                              : {},\n                          },\n                          runIfFn(headerProps, header) ?? {},\n                          columnDef.headerProps ?? {},\n                        )()}\n                      >\n                        <TruncatedText\n                          lineClamp={columnDef.lineClamp ?? lineClamp}\n                          truncated={columnDef.truncated ?? truncated}\n                        >\n                          {children}\n                        </TruncatedText>\n\n                        {canSort ? (\n                          <SortingIcon\n                            sorted={sorted}\n                            onClick={header.column.getToggleSortingHandler()}\n                          />\n                        ) : null}\n\n                        {canResize ? (\n                          <ResizableTrigger\n                            resizing={resizing}\n                            onDoubleClick={header.column.resetSize}\n                            onMouseDown={header.getResizeHandler()}\n                            onTouchStart={header.getResizeHandler()}\n                          />\n                        ) : null}\n                      </NativeTable.Th>\n                    )\n                  })}\n                </NativeTable.Tr>\n              )\n            })}\n          </NativeTable.Thead>\n\n          <NativeTable.Tbody {...tbodyProps}>\n            {rows.map((row, rowIndex) => {\n              rowIndex += headerGroupCount\n\n              const selected = !!rowSelection[row.id]\n              const disabled =\n                isFunction(enableRowSelection) && !enableRowSelection(row)\n\n              return (\n                <NativeTable.Tr\n                  id={row.id}\n                  key={row.id}\n                  aria-disabled={ariaAttr(disabled)}\n                  aria-rowindex={rowIndex + 1}\n                  aria-selected={ariaAttr(selected)}\n                  data-disabled={dataAttr(disabled)}\n                  data-selected={dataAttr(selected)}\n                  role=\"row\"\n                  {...mergeProps(\n                    {\n                      onClick:\n                        !disabled && selectOnClickRow\n                          ? () => row.toggleSelected(!selected)\n                          : undefined,\n                    },\n                    {\n                      onClick: !disabled ? () => onRowClick?.(row) : undefined,\n                      onDoubleClick: !disabled\n                        ? () => onRowDoubleClick?.(row)\n                        : undefined,\n                    },\n                    runIfFn(rowProps, row) ?? {},\n                  )()}\n                >\n                  {row.getVisibleCells().map((cell) => {\n                    const { columnDef } = cell.column\n                    const colIndex = cell.column.getIndex()\n                    const tabIndex = getTabIndex(colIndex, rowIndex)\n                    const children = flexRender(\n                      cell.column.columnDef.cell,\n                      cell.getContext(),\n                    )\n\n                    return (\n                      <NativeTable.Td\n                        key={cell.id}\n                        aria-colindex={colIndex + 1}\n                        aria-rowindex={rowIndex + 1}\n                        data-colindex={colIndex}\n                        data-rowindex={rowIndex}\n                        numeric={columnDef.numeric}\n                        role=\"gridcell\"\n                        tabIndex={tabIndex}\n                        {...mergeProps(\n                          {\n                            css: {\n                              \"&:has([data-focusable]:focus-visible)\":\n                                focusRingStyle.outline,\n                            },\n                          },\n                          runIfFn(cellProps, cell) ?? {},\n                          columnDef.cellProps ?? {},\n                        )()}\n                      >\n                        <TruncatedText\n                          lineClamp={columnDef.lineClamp ?? lineClamp}\n                          truncated={columnDef.truncated ?? truncated}\n                        >\n                          {children}\n                        </TruncatedText>\n                      </NativeTable.Td>\n                    )\n                  })}\n                </NativeTable.Tr>\n              )\n            })}\n          </NativeTable.Tbody>\n\n          {withFooterGroups ? (\n            <NativeTable.Tfoot {...tfootProps}>\n              {mergedFooterGroups.map((footerGroup, rowIndex) => {\n                rowIndex += headerGroupCount + rowCount\n\n                let placeholderCount = 0\n\n                return (\n                  <NativeTable.Tr\n                    key={footerGroup.id}\n                    aria-rowindex={rowIndex + 1}\n                    role=\"row\"\n                    {...runIfFn(footerGroupProps, footerGroup)}\n                  >\n                    {footerGroup.headers.map((header) => {\n                      const { columnDef } = header.column\n                      const colIndex = header.index + placeholderCount\n                      const tabIndex = getTabIndex(colIndex, rowIndex)\n                      const children = header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.footer,\n                            header.getContext(),\n                          )\n\n                      placeholderCount += (header.colSpan || 1) - 1\n\n                      return (\n                        <NativeTable.Td\n                          key={header.id}\n                          aria-colindex={colIndex + 1}\n                          aria-rowindex={rowIndex + 1}\n                          data-colindex={colIndex}\n                          data-rowindex={rowIndex}\n                          colSpan={header.colSpan || undefined}\n                          numeric={columnDef.numeric}\n                          role=\"gridcell\"\n                          rowSpan={header.rowSpan || undefined}\n                          tabIndex={tabIndex}\n                          {...mergeProps(\n                            {\n                              css: {\n                                \"&:has([data-focusable]:focus-visible)\":\n                                  focusRingStyle.outline,\n                              },\n                            },\n                            runIfFn(footerProps, header) ?? {},\n                            columnDef.footerProps ?? {},\n                          )()}\n                        >\n                          <TruncatedText\n                            lineClamp={columnDef.lineClamp ?? lineClamp}\n                            truncated={columnDef.truncated ?? truncated}\n                          >\n                            {children}\n                          </TruncatedText>\n                        </NativeTable.Td>\n                      )\n                    })}\n                  </NativeTable.Tr>\n                )\n              })}\n            </NativeTable.Tfoot>\n          ) : null}\n        </NativeTable.Root>\n\n        {footer ? runIfFn(footer, table) : null}\n      </ComponentContext>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends RowData>(props: TableProps<Y>): ReactElement\n}>\n\ninterface SortingIconProps extends HTMLStyledProps<\"button\"> {\n  sorted: false | SortDirection\n}\n\nconst SortingIcon: FC<SortingIconProps> = ({ sorted, ...rest }) => {\n  const { t } = useI18n(\"table\")\n  const { sortingIcon, sortingIconProps = {} } = useComponentContext()\n  const Icon = sorted ? ChevronUpIcon : ChevronsUpDownIcon\n\n  return (\n    <styled.button\n      type=\"button\"\n      layerStyle=\"ghost\"\n      colorScheme=\"mono\"\n      aria-label={t(\n        sorted\n          ? sorted === \"desc\"\n            ? \"Sort descending\"\n            : \"Sort ascending\"\n          : \"Clear sorting\",\n      )}\n      data-focusable\n      aspectRatio=\"1\"\n      cursor=\"pointer\"\n      display=\"center\"\n      focusVisibleRing=\"none\"\n      h=\"calc(1em * {lineHeights.moderate})\"\n      position=\"absolute\"\n      right=\"{space-x}\"\n      rounded=\"l1\"\n      tabIndex={-1}\n      top=\"50%\"\n      transform=\"translateY(-50%)\"\n      transitionDuration=\"moderate\"\n      transitionProperty=\"common\"\n      _hover={{ layerStyle: \"ghost.hover\" }}\n      {...mergeProps(rest, sortingIconProps)()}\n    >\n      {runIfFn(sortingIcon, sorted) ?? (\n        <Icon transform={`rotate(${sorted === \"desc\" ? 180 : 0}deg)`} />\n      )}\n    </styled.button>\n  )\n}\n\ninterface ResizableTriggerProps extends HTMLStyledProps {\n  resizing: boolean\n}\n\nconst ResizableTrigger: FC<ResizableTriggerProps> = ({ resizing, ...rest }) => {\n  const {\n    columnResizeMode,\n    table,\n    resizableTriggerProps = {},\n  } = useComponentContext()\n  const offset = table.getState().columnSizingInfo.deltaOffset\n\n  return (\n    <styled.div\n      data-active={dataAttr(resizing)}\n      bg=\"colorScheme.solid\"\n      cursor=\"col-resize\"\n      insetY=\"0\"\n      opacity={{ base: \"0\", _hover: \"1\", _active: \"1\" }}\n      position=\"absolute\"\n      right=\"0\"\n      touchAction=\"none\"\n      transform={`translateX(${columnResizeMode === \"onEnd\" && resizing && offset ? `${offset}px` : \"50%\"})`}\n      userSelect=\"none\"\n      w=\"1\"\n      {...mergeProps(rest, resizableTriggerProps)()}\n    />\n  )\n}\n\ninterface TruncatedTextProps extends HTMLStyledProps<\"span\"> {}\n\nconst TruncatedText: FC<TruncatedTextProps> = ({\n  children,\n  lineClamp,\n  truncated,\n  ...rest\n}) => {\n  if (lineClamp || truncated) {\n    return (\n      <styled.span\n        lineClamp={lineClamp}\n        truncated={truncated}\n        wordBreak=\"break-all\"\n        {...rest}\n      >\n        {children}\n      </styled.span>\n    )\n  } else {\n    return children\n  }\n}\n"],"mappings":"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"}

package/dist/esm/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { TabsStyle } from \"./tabs.style\"\nimport type { UseTabPanelProps, UseTabProps, UseTabsProps } from \"./use-tabs\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, isUndefined } from \"../../utils\"\nimport { tabsStyle } from \"./tabs.style\"\nimport {\n  TabDescendantsContext,\n  TabPanelDescendantsContext,\n  TabsContext,\n  useTab,\n  useTabPanel,\n  useTabs,\n  useTabsContext,\n} from \"./use-tabs\"\n\ninterface ComponentContext extends Pick<\n  TabsRootProps,\n  \"items\" | \"lazy\" | \"lazyBehavior\"\n> {}\n\nexport interface TabsItem extends Omit<TabsTabProps, \"index\"> {\n  /**\n   * The content for panel element.\n   */\n  panel: ReactNode\n  /**\n   * The content for tab element.\n   */\n  tab: ReactNode\n  /**\n   * Props for panel element.\n   */\n  panelProps?: TabsPanelProps\n}\n\nexport interface TabsRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    Omit<UseTabsProps, \"orientation\">,\n    Pick<UseLazyMountProps, \"lazy\" | \"lazyBehavior\">,\n    ThemeProps<TabsStyle> {\n  /**\n   * If provided, generate tab and panel components based on tabs.\n   */\n  items?: TabsItem[]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TabsPropsContext,\n  useComponentContext,\n  usePropsContext: useTabsPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TabsRootProps, TabsStyle, ComponentContext>(\n  \"tabs\",\n  tabsStyle,\n)\n\nexport { TabsPropsContext, useTabsPropsContext }\n\n/**\n * `Tabs` is a component for switching between different display areas.\n *\n * @see https://yamada-ui.com/docs/components/tabs\n */\nexport const TabsRoot = withProvider<\"div\", TabsRootProps, \"orientation\">(\n  ({\n    children,\n    items,\n    lazy,\n    lazyBehavior,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      focusedIndex,\n      index,\n      manual,\n      orientation,\n      setFocusedIndex,\n      setIndex,\n      tabDescendants,\n      tabPanelDescendants,\n      getListProps,\n      getRootProps,\n    } = useTabs({ orientation: computedOrientation, ...rest })\n    const componentContext = useMemo(\n      () => ({ items, lazy, lazyBehavior }),\n      [items, lazy, lazyBehavior],\n    )\n    const tabsContext = useMemo(\n      () => ({\n        id,\n        focusedIndex,\n        index,\n        manual,\n        orientation,\n        setFocusedIndex,\n        setIndex,\n        getListProps,\n      }),\n      [\n        id,\n        manual,\n        focusedIndex,\n        index,\n        orientation,\n        setFocusedIndex,\n        setIndex,\n        getListProps,\n      ],\n    )\n\n    return (\n      <TabDescendantsContext value={tabDescendants}>\n        <TabPanelDescendantsContext value={tabPanelDescendants}>\n          <TabsContext value={tabsContext}>\n            <ComponentContext value={componentContext}>\n              <styled.div {...getRootProps()}>{children}</styled.div>\n            </ComponentContext>\n          </TabsContext>\n        </TabPanelDescendantsContext>\n      </TabDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface TabsListProps extends HTMLStyledProps {}\n\nexport const TabsList = withContext<\"div\", TabsListProps>(\n  ({ children, ...rest }) => {\n    const { items } = useComponentContext()\n    const { getListProps } = useTabsContext()\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items?.map(\n          (\n            { id, panel: _panel, tab, panelProps: _panelProps, ...rest },\n            index,\n          ) =>\n            isUndefined(tab) || isNull(tab) ? null : (\n              <TabsTab id={id} key={id ?? index} index={index} {...rest}>\n                {tab}\n              </TabsTab>\n            ),\n        )\n      }\n    }, [children, items])\n\n    return <styled.div {...getListProps(rest)}>{computedChildren}</styled.div>\n  },\n  \"list\",\n)()\n\nexport interface TabsTabProps extends HTMLStyledProps<\"button\">, UseTabProps {}\n\nexport const TabsTab = withContext<\"button\", TabsTabProps>(\"button\", \"tab\")(\n  undefined,\n  (props) => {\n    const { getRootProps } = useTab(props)\n\n    return getRootProps()\n  },\n)\n\nexport interface TabsPanelsProps extends PropsWithChildren {}\n\nexport const TabsPanels: FC<TabsPanelsProps> = ({ children }) => {\n  const { items } = useComponentContext()\n\n  return useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return items?.map(({ id, panel, panelProps }, index) =>\n        isUndefined(panel) || isNull(panel) ? null : (\n          <TabsPanel key={id ?? index} index={index} {...panelProps}>\n            {panel}\n          </TabsPanel>\n        ),\n      )\n    }\n  }, [children, items])\n}\n\nexport interface TabsPanelProps extends HTMLStyledProps, UseTabPanelProps {}\n\nexport const TabsPanel = withContext<\"div\", TabsPanelProps>(\"div\", \"panel\")(\n  undefined,\n  (props) => {\n    const { lazy, lazyBehavior } = useComponentContext()\n    const { selected: mounted, getRootProps } = useTabPanel(props)\n    const children = useLazyMount({ lazy, lazyBehavior, mounted, ...props })\n\n    return { ...getRootProps(), children }\n  },\n)\n"],"mappings":";;;;;;;;;;;AAuDA,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,SACF;;;;;;AASA,MAAa,WAAW,cACrB,EACC,UACA,OACA,MACA,cACA,aAAa,iBACb,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,cACA,OACA,QACA,aACA,iBACA,UACA,gBACA,qBACA,cACA,iBACE,QAAQ;EAAE,aAbc,SAAS,eAaQ;EAAG,GAAG;CAAK,CAAC;CACzD,MAAM,mBAAmB,eAChB;EAAE;EAAO;EAAM;CAAa,IACnC;EAAC;EAAO;EAAM;CAAY,CAC5B;CAwBA,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,oBAAC,4BAAD;GAA4B,OAAO;aACjC,oBAAC,aAAD;IAAa,OA1BC,eACX;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF,IACA;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF,CAMkC;cAC5B,oBAAC,kBAAD;KAAkB,OAAO;eACvB,oBAAC,OAAO,KAAR;MAAY,GAAI,aAAa;MAAI;KAAqB,CAAA;IACtC,CAAA;GACP,CAAA;EACa,CAAA;CACP,CAAA;AAE3B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,EAAE;AAIF,MAAa,WAAW,aACrB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,UAAU,oBAAoB;CACtC,MAAM,EAAE,iBAAiB,eAAe;CACxC,MAAM,mBAAmB,cAAc;EACrC,IAAI,UACF,OAAO;OAEP,OAAO,OAAO,KAEV,EAAE,IAAI,OAAO,QAAQ,KAAK,YAAY,aAAa,GAAG,QACtD,WAAA,GAAA,cAAA,aAEY,GAAG,MAAA,GAAA,cAAA,QAAY,GAAG,IAAI,OAChC,oBAAC,SAAD;GAAa;GAA6B;GAAO,GAAI;aAClD;EACM,GAFa,MAAM,KAEnB,CAEf;CAEJ,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OAAO,oBAAC,OAAO,KAAR;EAAY,GAAI,aAAa,IAAI;YAAI;CAA6B,CAAA;AAC3E,GACA,MACF,EAAE;AAIF,MAAa,UAAU,YAAoC,UAAU,KAAK,EACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,iBAAiB,OAAO,KAAK;CAErC,OAAO,aAAa;AACtB,CACF;AAIA,MAAa,cAAmC,EAAE,eAAe;CAC/D,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO,cAAc;EACnB,IAAI,UACF,OAAO;OAEP,OAAO,OAAO,KAAK,EAAE,IAAI,OAAO,cAAc,WAAA,GAAA,cAAA,aAChC,KAAK,MAAA,GAAA,cAAA,QAAY,KAAK,IAAI,OACpC,oBAAC,WAAD;GAAoC;GAAO,GAAI;aAC5C;EACQ,GAFK,MAAM,KAEX,CAEf;CAEJ,GAAG,CAAC,UAAU,KAAK,CAAC;AACtB;AAIA,MAAa,YAAY,YAAmC,OAAO,OAAO,EACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,MAAM,iBAAiB,oBAAoB;CACnD,MAAM,EAAE,UAAU,SAAS,iBAAiB,YAAY,KAAK;CAC7D,MAAM,WAAW,aAAa;EAAE;EAAM;EAAc;EAAS,GAAG;CAAM,CAAC;CAEvE,OAAO;EAAE,GAAG,aAAa;EAAG;CAAS;AACvC,CACF"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { TabsStyle } from \"./tabs.style\"\nimport type { UseTabPanelProps, UseTabProps, UseTabsProps } from \"./use-tabs\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, isUndefined } from \"../../utils\"\nimport { tabsStyle } from \"./tabs.style\"\nimport {\n  TabDescendantsContext,\n  TabPanelDescendantsContext,\n  TabsContext,\n  useTab,\n  useTabPanel,\n  useTabs,\n  useTabsContext,\n} from \"./use-tabs\"\n\ninterface ComponentContext extends Pick<\n  TabsRootProps,\n  \"items\" | \"lazy\" | \"lazyBehavior\"\n> {}\n\nexport interface TabsItem extends Omit<TabsTabProps, \"index\"> {\n  /**\n   * The content for panel element.\n   */\n  panel: ReactNode\n  /**\n   * The content for tab element.\n   */\n  tab: ReactNode\n  /**\n   * Props for panel element.\n   */\n  panelProps?: TabsPanelProps\n}\n\nexport interface TabsRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    Omit<UseTabsProps, \"orientation\">,\n    Pick<UseLazyMountProps, \"lazy\" | \"lazyBehavior\">,\n    ThemeProps<TabsStyle> {\n  /**\n   * If provided, generate tab and panel components based on tabs.\n   */\n  items?: TabsItem[]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TabsPropsContext,\n  useComponentContext,\n  usePropsContext: useTabsPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TabsRootProps, TabsStyle, ComponentContext>(\n  \"tabs\",\n  tabsStyle,\n)\n\nexport { TabsPropsContext, useTabsPropsContext }\n\n/**\n * `Tabs` is a component for switching between different display areas.\n *\n * @see https://yamada-ui.com/docs/components/tabs\n */\nexport const TabsRoot = withProvider<\"div\", TabsRootProps, \"orientation\">(\n  ({\n    children,\n    items,\n    lazy,\n    lazyBehavior,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      focusedIndex,\n      index,\n      manual,\n      orientation,\n      setFocusedIndex,\n      setIndex,\n      tabDescendants,\n      tabPanelDescendants,\n      getListProps,\n      getRootProps,\n    } = useTabs({ orientation: computedOrientation, ...rest })\n    const componentContext = useMemo(\n      () => ({ items, lazy, lazyBehavior }),\n      [items, lazy, lazyBehavior],\n    )\n    const tabsContext = useMemo(\n      () => ({\n        id,\n        focusedIndex,\n        index,\n        manual,\n        orientation,\n        setFocusedIndex,\n        setIndex,\n        getListProps,\n      }),\n      [\n        id,\n        manual,\n        focusedIndex,\n        index,\n        orientation,\n        setFocusedIndex,\n        setIndex,\n        getListProps,\n      ],\n    )\n\n    return (\n      <TabDescendantsContext value={tabDescendants}>\n        <TabPanelDescendantsContext value={tabPanelDescendants}>\n          <TabsContext value={tabsContext}>\n            <ComponentContext value={componentContext}>\n              <styled.div {...getRootProps()}>{children}</styled.div>\n            </ComponentContext>\n          </TabsContext>\n        </TabPanelDescendantsContext>\n      </TabDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface TabsListProps extends HTMLStyledProps {}\n\nexport const TabsList = withContext<\"div\", TabsListProps>(\n  ({ children, ...rest }) => {\n    const { items } = useComponentContext()\n    const { getListProps } = useTabsContext()\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items?.map(\n          (\n            { id, panel: _panel, tab, panelProps: _panelProps, ...rest },\n            index,\n          ) =>\n            isUndefined(tab) || isNull(tab) ? null : (\n              <TabsTab id={id} key={id ?? index} index={index} {...rest}>\n                {tab}\n              </TabsTab>\n            ),\n        )\n      }\n    }, [children, items])\n\n    return <styled.div {...getListProps(rest)}>{computedChildren}</styled.div>\n  },\n  \"list\",\n)()\n\nexport interface TabsTabProps extends HTMLStyledProps<\"button\">, UseTabProps {}\n\nexport const TabsTab = withContext<\"button\", TabsTabProps>(\"button\", \"tab\")(\n  undefined,\n  (props) => {\n    const { getRootProps } = useTab(props)\n\n    return getRootProps()\n  },\n)\n\nexport interface TabsPanelsProps extends PropsWithChildren {}\n\nexport const TabsPanels: FC<TabsPanelsProps> = ({ children }) => {\n  const { items } = useComponentContext()\n\n  return useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return items?.map(({ id, panel, panelProps }, index) =>\n        isUndefined(panel) || isNull(panel) ? null : (\n          <TabsPanel key={id ?? index} index={index} {...panelProps}>\n            {panel}\n          </TabsPanel>\n        ),\n      )\n    }\n  }, [children, items])\n}\n\nexport interface TabsPanelProps extends HTMLStyledProps, UseTabPanelProps {}\n\nexport const TabsPanel = withContext<\"div\", TabsPanelProps>(\"div\", \"panel\")(\n  undefined,\n  (props) => {\n    const { lazy, lazyBehavior } = useComponentContext()\n    const { selected: mounted, getRootProps } = useTabPanel(props)\n    const children = useLazyMount({ lazy, lazyBehavior, mounted, ...props })\n\n    return { ...getRootProps(), children }\n  },\n)\n"],"mappings":";;;;;;;;;;;AAuDA,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,SACF;;;;;;AASA,MAAa,WAAW,cACrB,EACC,UACA,OACA,MACA,cACA,aAAa,iBACb,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,cACA,OACA,QACA,aACA,iBACA,UACA,gBACA,qBACA,cACA,iBACE,QAAQ;EAAE,aAbc,SAAS,eAaQ;EAAG,GAAG;CAAK,CAAC;CACzD,MAAM,mBAAmB,eAChB;EAAE;EAAO;EAAM;CAAa,IACnC;EAAC;EAAO;EAAM;CAAY,CAC5B;CAwBA,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,oBAAC,4BAAD;GAA4B,OAAO;aACjC,oBAAC,aAAD;IAAa,OA1BC,eACX;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF,IACA;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;IACF,CAMkC;cAC5B,oBAAC,kBAAD;KAAkB,OAAO;eACvB,oBAAC,OAAO,KAAR;MAAY,GAAI,aAAa;MAAI;KAAqB,CAAA;IACtC,CAAA;GACP,CAAA;EACa,CAAA;CACP,CAAA;AAE3B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAIF,MAAa,WAAW,aACrB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,UAAU,oBAAoB;CACtC,MAAM,EAAE,iBAAiB,eAAe;CACxC,MAAM,mBAAmB,cAAc;EACrC,IAAI,UACF,OAAO;OAEP,OAAO,OAAO,KAEV,EAAE,IAAI,OAAO,QAAQ,KAAK,YAAY,aAAa,GAAG,QACtD,WAAA,GAAA,cAAA,YAAA,CAEY,GAAG,MAAA,GAAA,cAAA,OAAA,CAAY,GAAG,IAAI,OAChC,oBAAC,SAAD;GAAa;GAA6B;GAAO,GAAI;aAClD;EACM,GAFa,MAAM,KAEnB,CAEf;CAEJ,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OAAO,oBAAC,OAAO,KAAR;EAAY,GAAI,aAAa,IAAI;YAAI;CAA6B,CAAA;AAC3E,GACA,MACF,CAAC,CAAC;AAIF,MAAa,UAAU,YAAoC,UAAU,KAAK,CAAC,CACzE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,iBAAiB,OAAO,KAAK;CAErC,OAAO,aAAa;AACtB,CACF;AAIA,MAAa,cAAmC,EAAE,eAAe;CAC/D,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO,cAAc;EACnB,IAAI,UACF,OAAO;OAEP,OAAO,OAAO,KAAK,EAAE,IAAI,OAAO,cAAc,WAAA,GAAA,cAAA,YAAA,CAChC,KAAK,MAAA,GAAA,cAAA,OAAA,CAAY,KAAK,IAAI,OACpC,oBAAC,WAAD;GAAoC;GAAO,GAAI;aAC5C;EACQ,GAFK,MAAM,KAEX,CAEf;CAEJ,GAAG,CAAC,UAAU,KAAK,CAAC;AACtB;AAIA,MAAa,YAAY,YAAmC,OAAO,OAAO,CAAC,CACzE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,MAAM,iBAAiB,oBAAoB;CACnD,MAAM,EAAE,UAAU,SAAS,iBAAiB,YAAY,KAAK;CAC7D,MAAM,WAAW,aAAa;EAAE;EAAM;EAAc;EAAS,GAAG;CAAM,CAAC;CAEvE,OAAO;EAAE,GAAG,aAAa;EAAG;CAAS;AACvC,CACF"}

package/dist/esm/components/tabs/use-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tabs.js","names":["createContext"],"sources":["../../../../src/components/tabs/use-tabs.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: TabDescendantsContext,\n  useDescendant: useTabDescendant,\n  useDescendants: useTabDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport { TabDescendantsContext, useTabDescendant, useTabDescendants }\n\nconst {\n  DescendantsContext: TabPanelDescendantsContext,\n  useDescendant: useTabPanelDescendant,\n  useDescendants: useTabPanelDescendants,\n} = createDescendants<HTMLDivElement>()\n\nexport {\n  TabPanelDescendantsContext,\n  useTabPanelDescendant,\n  useTabPanelDescendants,\n}\n\ninterface TabsContext extends Omit<\n  UseTabsReturn,\n  \"getRootProps\" | \"tabDescendants\" | \"tabPanelDescendants\"\n> {}\n\nconst [TabsContext, useTabsContext] = createContext<TabsContext>({\n  name: \"TabsContext\",\n})\n\nexport { TabsContext, useTabsContext }\n\nexport interface UseTabsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The index of the selected tab.\n   */\n  defaultIndex?: number\n  /**\n   * The index of the selected tab.\n   */\n  index?: number\n  /**\n   * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n   *\n   * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n   *\n   * @default false\n   */\n  manual?: boolean\n  /**\n   * The orientation of the tabs.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when the index changes.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useTabs = ({\n  id,\n  defaultIndex = 0,\n  index: indexProp,\n  manual = false,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseTabsProps = {}) => {\n  const uuid = useId()\n  const tabDescendants = useTabDescendants()\n  const tabPanelDescendants = useTabPanelDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const [focusedIndex, setFocusedIndex] = useState<number>(index)\n  const horizontal = orientation === \"horizontal\"\n\n  id ??= uuid\n\n  const onFocusFirstTab = useCallback(() => {\n    const first = tabDescendants.enabledFirstValue()\n\n    if (first) first.node.focus()\n  }, [tabDescendants])\n\n  const onFocusLastTab = useCallback(() => {\n    const last = tabDescendants.enabledLastValue()\n\n    if (last) last.node.focus()\n  }, [tabDescendants])\n\n  const onFocusNextTab = useCallback(() => {\n    const next = tabDescendants.enabledNextValue(focusedIndex)\n\n    if (next) next.node.focus()\n  }, [tabDescendants, focusedIndex])\n\n  const onFocusPrevTab = useCallback(() => {\n    const prev = tabDescendants.enabledPrevValue(focusedIndex)\n\n    if (prev) prev.node.focus()\n  }, [tabDescendants, focusedIndex])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: !horizontal ? onFocusNextTab : undefined,\n        ArrowLeft: horizontal ? onFocusPrevTab : undefined,\n        ArrowRight: horizontal ? onFocusNextTab : undefined,\n        ArrowUp: !horizontal ? onFocusPrevTab : undefined,\n        End: onFocusLastTab,\n        Home: onFocusFirstTab,\n      })\n    },\n    [\n      horizontal,\n      onFocusNextTab,\n      onFocusPrevTab,\n      onFocusLastTab,\n      onFocusFirstTab,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (isUndefined(indexProp)) return\n\n    setIndex(indexProp)\n    setFocusedIndex(indexProp)\n  }, [indexProp])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps({ \"data-orientation\": orientation }, rest, props, { ref })(),\n    [orientation, rest],\n  )\n\n  const getListProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-orientation\": orientation,\n      role: \"tablist\",\n      ...props,\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [orientation, onKeyDown],\n  )\n\n  return {\n    id,\n    focusedIndex,\n    index,\n    manual,\n    orientation,\n    setFocusedIndex,\n    setIndex,\n    tabDescendants,\n    tabPanelDescendants,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseTabsReturn = ReturnType<typeof useTabs>\n\nexport interface UseTabProps extends HTMLProps<\"button\"> {\n  /**\n   * The index of the tab.\n   */\n  index: number\n}\n\nexport const useTab = ({ id, disabled, index, ...rest }: UseTabProps) => {\n  const {\n    id: rootId,\n    index: selectedIndex,\n    manual,\n    orientation,\n    setFocusedIndex,\n    setIndex,\n  } = useTabsContext()\n  const { register } = useTabDescendant({ disabled })\n  const tabPanelId = `${rootId}-panel-${index}`\n  const selected = index === selectedIndex\n\n  id ??= `${rootId}-tab-${index}`\n\n  const onClick = useCallback(() => {\n    if (!disabled) setIndex(index)\n  }, [index, setIndex, disabled])\n\n  const onFocus = useCallback(() => {\n    if (disabled) return\n\n    setFocusedIndex(index)\n\n    if (!manual) setIndex(index)\n  }, [setFocusedIndex, index, manual, disabled, setIndex])\n\n  const getRootProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          id,\n          type: \"button\",\n          \"aria-controls\": tabPanelId,\n          \"aria-selected\": selected,\n          \"data-orientation\": orientation,\n          disabled,\n          role: \"tab\",\n          tabIndex: selected ? 0 : -1,\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n        {\n          onClick: handlerAll(props.onClick, rest.onClick, onClick),\n          onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n        },\n      )({ mergeEvent: false }),\n    [\n      disabled,\n      id,\n      onClick,\n      onFocus,\n      orientation,\n      register,\n      rest,\n      selected,\n      tabPanelId,\n    ],\n  )\n\n  return { index, selected, getRootProps }\n}\n\nexport type UseTabReturn = ReturnType<typeof useTab>\n\nexport interface UseTabPanelProps extends HTMLProps {\n  /**\n   * The index of the tab panel.\n   */\n  index: number\n}\n\nexport const useTabPanel = ({\n  id,\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseTabPanelProps) => {\n  const { id: rootId, index: selectedIndex, orientation } = useTabsContext()\n  const { register } = useTabPanelDescendant()\n  const tabId = `${rootId}-tab-${index}`\n  const selected = index === selectedIndex\n\n  id ??= `${rootId}-panel-${index}`\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          id,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, tabId),\n          \"data-orientation\": orientation,\n          hidden: !selected,\n          role: \"tabpanel\",\n          tabIndex: selected ? 0 : -1,\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [id, ariaLabelledbyProp, orientation, register, rest, selected, tabId],\n  )\n\n  return { index, selected, getRootProps }\n}\n\nexport type UseTabPanelReturn = ReturnType<typeof useTabPanel>\n"],"mappings":"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"}
+{"version":3,"file":"use-tabs.js","names":["createContext"],"sources":["../../../../src/components/tabs/use-tabs.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: TabDescendantsContext,\n  useDescendant: useTabDescendant,\n  useDescendants: useTabDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport { TabDescendantsContext, useTabDescendant, useTabDescendants }\n\nconst {\n  DescendantsContext: TabPanelDescendantsContext,\n  useDescendant: useTabPanelDescendant,\n  useDescendants: useTabPanelDescendants,\n} = createDescendants<HTMLDivElement>()\n\nexport {\n  TabPanelDescendantsContext,\n  useTabPanelDescendant,\n  useTabPanelDescendants,\n}\n\ninterface TabsContext extends Omit<\n  UseTabsReturn,\n  \"getRootProps\" | \"tabDescendants\" | \"tabPanelDescendants\"\n> {}\n\nconst [TabsContext, useTabsContext] = createContext<TabsContext>({\n  name: \"TabsContext\",\n})\n\nexport { TabsContext, useTabsContext }\n\nexport interface UseTabsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The index of the selected tab.\n   */\n  defaultIndex?: number\n  /**\n   * The index of the selected tab.\n   */\n  index?: number\n  /**\n   * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n   *\n   * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n   *\n   * @default false\n   */\n  manual?: boolean\n  /**\n   * The orientation of the tabs.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when the index changes.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useTabs = ({\n  id,\n  defaultIndex = 0,\n  index: indexProp,\n  manual = false,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseTabsProps = {}) => {\n  const uuid = useId()\n  const tabDescendants = useTabDescendants()\n  const tabPanelDescendants = useTabPanelDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const [focusedIndex, setFocusedIndex] = useState<number>(index)\n  const horizontal = orientation === \"horizontal\"\n\n  id ??= uuid\n\n  const onFocusFirstTab = useCallback(() => {\n    const first = tabDescendants.enabledFirstValue()\n\n    if (first) first.node.focus()\n  }, [tabDescendants])\n\n  const onFocusLastTab = useCallback(() => {\n    const last = tabDescendants.enabledLastValue()\n\n    if (last) last.node.focus()\n  }, [tabDescendants])\n\n  const onFocusNextTab = useCallback(() => {\n    const next = tabDescendants.enabledNextValue(focusedIndex)\n\n    if (next) next.node.focus()\n  }, [tabDescendants, focusedIndex])\n\n  const onFocusPrevTab = useCallback(() => {\n    const prev = tabDescendants.enabledPrevValue(focusedIndex)\n\n    if (prev) prev.node.focus()\n  }, [tabDescendants, focusedIndex])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: !horizontal ? onFocusNextTab : undefined,\n        ArrowLeft: horizontal ? onFocusPrevTab : undefined,\n        ArrowRight: horizontal ? onFocusNextTab : undefined,\n        ArrowUp: !horizontal ? onFocusPrevTab : undefined,\n        End: onFocusLastTab,\n        Home: onFocusFirstTab,\n      })\n    },\n    [\n      horizontal,\n      onFocusNextTab,\n      onFocusPrevTab,\n      onFocusLastTab,\n      onFocusFirstTab,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (isUndefined(indexProp)) return\n\n    setIndex(indexProp)\n    setFocusedIndex(indexProp)\n  }, [indexProp])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps({ \"data-orientation\": orientation }, rest, props, { ref })(),\n    [orientation, rest],\n  )\n\n  const getListProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-orientation\": orientation,\n      role: \"tablist\",\n      ...props,\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [orientation, onKeyDown],\n  )\n\n  return {\n    id,\n    focusedIndex,\n    index,\n    manual,\n    orientation,\n    setFocusedIndex,\n    setIndex,\n    tabDescendants,\n    tabPanelDescendants,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseTabsReturn = ReturnType<typeof useTabs>\n\nexport interface UseTabProps extends HTMLProps<\"button\"> {\n  /**\n   * The index of the tab.\n   */\n  index: number\n}\n\nexport const useTab = ({ id, disabled, index, ...rest }: UseTabProps) => {\n  const {\n    id: rootId,\n    index: selectedIndex,\n    manual,\n    orientation,\n    setFocusedIndex,\n    setIndex,\n  } = useTabsContext()\n  const { register } = useTabDescendant({ disabled })\n  const tabPanelId = `${rootId}-panel-${index}`\n  const selected = index === selectedIndex\n\n  id ??= `${rootId}-tab-${index}`\n\n  const onClick = useCallback(() => {\n    if (!disabled) setIndex(index)\n  }, [index, setIndex, disabled])\n\n  const onFocus = useCallback(() => {\n    if (disabled) return\n\n    setFocusedIndex(index)\n\n    if (!manual) setIndex(index)\n  }, [setFocusedIndex, index, manual, disabled, setIndex])\n\n  const getRootProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          id,\n          type: \"button\",\n          \"aria-controls\": tabPanelId,\n          \"aria-selected\": selected,\n          \"data-orientation\": orientation,\n          disabled,\n          role: \"tab\",\n          tabIndex: selected ? 0 : -1,\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n        {\n          onClick: handlerAll(props.onClick, rest.onClick, onClick),\n          onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n        },\n      )({ mergeEvent: false }),\n    [\n      disabled,\n      id,\n      onClick,\n      onFocus,\n      orientation,\n      register,\n      rest,\n      selected,\n      tabPanelId,\n    ],\n  )\n\n  return { index, selected, getRootProps }\n}\n\nexport type UseTabReturn = ReturnType<typeof useTab>\n\nexport interface UseTabPanelProps extends HTMLProps {\n  /**\n   * The index of the tab panel.\n   */\n  index: number\n}\n\nexport const useTabPanel = ({\n  id,\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseTabPanelProps) => {\n  const { id: rootId, index: selectedIndex, orientation } = useTabsContext()\n  const { register } = useTabPanelDescendant()\n  const tabId = `${rootId}-tab-${index}`\n  const selected = index === selectedIndex\n\n  id ??= `${rootId}-panel-${index}`\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          id,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, tabId),\n          \"data-orientation\": orientation,\n          hidden: !selected,\n          role: \"tabpanel\",\n          tabIndex: selected ? 0 : -1,\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [id, ariaLabelledbyProp, orientation, register, rest, selected, tabId],\n  )\n\n  return { index, selected, getRootProps }\n}\n\nexport type UseTabPanelReturn = ReturnType<typeof useTabPanel>\n"],"mappings":"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"}

package/dist/esm/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n  extends HTMLStyledProps<\"span\">, ThemeProps<TagStyle> {\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Icon to be displayed to the end of the tag.\n   */\n  endIcon?: ReactNode\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactNode\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: TagContentProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLStyledProps<\"span\">\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TagPropsContext,\n  useComponentContext,\n  usePropsContext: useTagPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\nexport { TagPropsContext, useTagPropsContext }\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see https://yamada-ui.com/docs/components/tag\n */\nexport const Tag = withProvider<\"span\", TagProps, \"disabled\">(\n  ({\n    children,\n    disabled,\n    endIcon,\n    startIcon,\n    closeButtonProps,\n    contentProps,\n    iconProps,\n    onClose,\n    ...rest\n  }) => {\n    const context = useMemo(() => ({ disabled }), [disabled])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n          {startIcon ? (\n            <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n          ) : null}\n\n          {children ? (\n            <TagContent {...contentProps}>{children}</TagContent>\n          ) : null}\n\n          {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n          {onClose ? (\n            <TagCloseButton onClick={onClose} {...closeButtonProps} />\n          ) : null}\n        </styled.span>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n  undefined,\n  (props) => {\n    const { disabled } = useComponentContext()\n\n    return { \"data-disabled\": dataAttr(disabled), ...props }\n  },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n  \"icon\",\n  \"start\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n  \"icon\",\n  \"end\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n  \"icon\",\n  \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const { disabled } = useComponentContext()\n  const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n  const { t } = useI18n(\"tag\")\n\n  return {\n    \"aria-label\": t(\"Close tag\"),\n    \"data-disabled\": dataAttr(disabled),\n    children: children || <XIcon />,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;AAiDA,MAAM,EACJ,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,iBACE,oBAA0D,OAAO,QAAQ;;;;;;AAS7E,MAAa,MAAM,cAChB,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,SACA,GAAG,WACC;CAGJ,OACE,oBAAC,kBAAD;EAAkB,OAHJ,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAGtB;YAC7B,qBAAC,OAAO,MAAR;GAAa,kBAAA,GAAA,cAAA,UAAwB,QAAQ;GAAG,GAAI;aAApD;IACG,YACC,oBAAC,cAAD;KAAc,GAAI;eAAY;IAAwB,CAAA,IACpD;IAEH,WACC,oBAAC,YAAD;KAAY,GAAI;KAAe;IAAqB,CAAA,IAClD;IAEH,UAAU,oBAAC,YAAD;KAAY,GAAI;eAAY;IAAoB,CAAA,IAAI;IAE9D,UACC,oBAAC,gBAAD;KAAgB,SAAS;KAAS,GAAI;IAAmB,CAAA,IACvD;GACO;;CACG,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAChC,EAAE;AAIF,MAAM,aAAa,YAAqC,QAAQ,SAAS,EACvE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CACF;AAIA,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACF,CAAC,EAAE,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACF,CAAC,EAAE,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACF,CAAC,EAAE,KAAA,IAAY,EAAE,UAAU,GAAG,YAAY;CACxC,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,aAAa,oBAAoB;CACzC,MAAM,OAAO,aAA8B;EAAE;EAAK;EAAU,GAAG;CAAM,CAAC;CACtE,MAAM,EAAE,MAAM,QAAQ,KAAK;CAE3B,OAAO;EACL,cAAc,EAAE,WAAW;EAC3B,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAClC,UAAU,YAAY,oBAAC,OAAD,CAAQ,CAAA;EAC9B,GAAG;CACL;AACF,CAAC"}
+{"version":3,"file":"tag.js","names":[],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n  extends HTMLStyledProps<\"span\">, ThemeProps<TagStyle> {\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Icon to be displayed to the end of the tag.\n   */\n  endIcon?: ReactNode\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactNode\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: TagContentProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLStyledProps<\"span\">\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TagPropsContext,\n  useComponentContext,\n  usePropsContext: useTagPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\nexport { TagPropsContext, useTagPropsContext }\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see https://yamada-ui.com/docs/components/tag\n */\nexport const Tag = withProvider<\"span\", TagProps, \"disabled\">(\n  ({\n    children,\n    disabled,\n    endIcon,\n    startIcon,\n    closeButtonProps,\n    contentProps,\n    iconProps,\n    onClose,\n    ...rest\n  }) => {\n    const context = useMemo(() => ({ disabled }), [disabled])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n          {startIcon ? (\n            <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n          ) : null}\n\n          {children ? (\n            <TagContent {...contentProps}>{children}</TagContent>\n          ) : null}\n\n          {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n          {onClose ? (\n            <TagCloseButton onClick={onClose} {...closeButtonProps} />\n          ) : null}\n        </styled.span>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n  undefined,\n  (props) => {\n    const { disabled } = useComponentContext()\n\n    return { \"data-disabled\": dataAttr(disabled), ...props }\n  },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n  \"icon\",\n  \"start\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n  \"icon\",\n  \"end\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n  \"icon\",\n  \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const { disabled } = useComponentContext()\n  const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n  const { t } = useI18n(\"tag\")\n\n  return {\n    \"aria-label\": t(\"Close tag\"),\n    \"data-disabled\": dataAttr(disabled),\n    children: children || <XIcon />,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;AAiDA,MAAM,EACJ,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,iBACE,oBAA0D,OAAO,QAAQ;;;;;;AAS7E,MAAa,MAAM,cAChB,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,SACA,GAAG,WACC;CAGJ,OACE,oBAAC,kBAAD;EAAkB,OAHJ,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAGtB;YAC7B,qBAAC,OAAO,MAAR;GAAa,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;GAAG,GAAI;aAApD;IACG,YACC,oBAAC,cAAD;KAAc,GAAI;eAAY;IAAwB,CAAA,IACpD;IAEH,WACC,oBAAC,YAAD;KAAY,GAAI;KAAe;IAAqB,CAAA,IAClD;IAEH,UAAU,oBAAC,YAAD;KAAY,GAAI;eAAY;IAAoB,CAAA,IAAI;IAE9D,UACC,oBAAC,gBAAD;KAAgB,SAAS;KAAS,GAAI;IAAmB,CAAA,IACvD;GACO;;CACG,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAChC,CAAC,CAAC;AAIF,MAAM,aAAa,YAAqC,QAAQ,SAAS,CAAC,CACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CACF;AAIA,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACF,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACF,CAAC,CAAC,CAAC,KAAA,IAAY,UAAU;CACvB,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO;EAAE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAAG,GAAG;CAAM;AACzD,CAAC;AAID,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACF,CAAC,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,GAAG,YAAY;CACxC,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,aAAa,oBAAoB;CACzC,MAAM,OAAO,aAA8B;EAAE;EAAK;EAAU,GAAG;CAAM,CAAC;CACtE,MAAM,EAAE,MAAM,QAAQ,KAAK;CAE3B,OAAO;EACL,cAAc,EAAE,WAAW;EAC3B,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,UAAU,YAAY,oBAAC,OAAD,CAAQ,CAAA;EAC9B,GAAG;CACL;AACF,CAAC"}

package/dist/esm/components/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../../src/components/text/text.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TextStyle } from \"./text.style\"\nimport { createComponent } from \"../../core\"\nimport { textStyle } from \"./text.style\"\n\nexport interface TextProps extends HTMLStyledProps<\"p\">, ThemeProps<TextStyle> {\n  /**\n   * The CSS `text-align` property.\n   */\n  align?: CSSProps[\"textAlign\"]\n  /**\n   * The CSS `text-transform` property.\n   */\n  casing?: CSSProps[\"textTransform\"]\n  /**\n   * The CSS `text-decoration` property.\n   */\n  decoration?: CSSProps[\"textDecoration\"]\n}\n\nconst {\n  PropsContext: TextPropsContext,\n  usePropsContext: useTextPropsContext,\n  withContext,\n} = createComponent<TextProps, TextStyle>(\"text\", textStyle)\n\nexport { TextPropsContext, useTextPropsContext }\n\n/**\n * `Text` is a component that represents a paragraph of text. By default, it renders a `p` element.\n *\n * @see https://yamada-ui.com/docs/components/text\n */\nexport const Text = withContext(\"p\")(\n  undefined,\n  ({\n    align: textAlign,\n    casing: textTransform,\n    decoration: textDecoration,\n    ...rest\n  }) => ({\n    textAlign,\n    textDecoration,\n    textTransform,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;AAsBA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACE,gBAAsC,QAAQ,SAAS;;;;;;AAS3D,MAAa,OAAO,YAAY,GAAG,EACjC,KAAA,IACC,EACC,OAAO,WACP,QAAQ,eACR,YAAY,gBACZ,GAAG,YACE;CACL;CACA;CACA;CACA,GAAG;AACL,EACF"}
+{"version":3,"file":"text.js","names":[],"sources":["../../../../src/components/text/text.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TextStyle } from \"./text.style\"\nimport { createComponent } from \"../../core\"\nimport { textStyle } from \"./text.style\"\n\nexport interface TextProps extends HTMLStyledProps<\"p\">, ThemeProps<TextStyle> {\n  /**\n   * The CSS `text-align` property.\n   */\n  align?: CSSProps[\"textAlign\"]\n  /**\n   * The CSS `text-transform` property.\n   */\n  casing?: CSSProps[\"textTransform\"]\n  /**\n   * The CSS `text-decoration` property.\n   */\n  decoration?: CSSProps[\"textDecoration\"]\n}\n\nconst {\n  PropsContext: TextPropsContext,\n  usePropsContext: useTextPropsContext,\n  withContext,\n} = createComponent<TextProps, TextStyle>(\"text\", textStyle)\n\nexport { TextPropsContext, useTextPropsContext }\n\n/**\n * `Text` is a component that represents a paragraph of text. By default, it renders a `p` element.\n *\n * @see https://yamada-ui.com/docs/components/text\n */\nexport const Text = withContext(\"p\")(\n  undefined,\n  ({\n    align: textAlign,\n    casing: textTransform,\n    decoration: textDecoration,\n    ...rest\n  }) => ({\n    textAlign,\n    textDecoration,\n    textTransform,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;AAsBA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACE,gBAAsC,QAAQ,SAAS;;;;;;AAS3D,MAAa,OAAO,YAAY,GAAG,CAAC,CAClC,KAAA,IACC,EACC,OAAO,WACP,QAAQ,eACR,YAAY,gBACZ,GAAG,YACE;CACL;CACA;CACA;CACA,GAAG;AACL,EACF"}

package/dist/esm/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../../src/components/textarea/textarea.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { TextareaStyle } from \"./textarea.style\"\nimport type { UseTextareaProps } from \"./use-textarea\"\nimport { createComponent } from \"../../core\"\nimport { useFieldProps } from \"../field\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { textareaStyle } from \"./textarea.style\"\nimport { useTextarea } from \"./use-textarea\"\n\nexport interface TextareaProps\n  extends\n    HTMLStyledProps<\"textarea\">,\n    ThemeProps<TextareaStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    UseTextareaProps {}\n\nconst {\n  PropsContext: TextareaPropsContext,\n  usePropsContext: useTextareaPropsContext,\n  withContext,\n} = createComponent<TextareaProps, TextareaStyle>(\"textarea\", textareaStyle)\n\nexport { TextareaPropsContext, useTextareaPropsContext }\n\n/**\n * `Textarea` is a component used to obtain multi-line text input.\n *\n * @see https://yamada-ui.com/docs/components/textarea\n */\nexport const Textarea = withContext(\"textarea\")(\n  (props) => {\n    const context = useInputPropsContext()\n\n    return { rows: 2, ...context, ...props }\n  },\n  (props) => {\n    const {\n      props: { errorBorderColor, focusBorderColor, ...rest },\n      ariaProps,\n      dataProps,\n      eventProps,\n    } = useFieldProps(props)\n    const { getTextareaProps } = useTextarea({\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      ...rest,\n    })\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n\n    return {\n      ...varProps,\n      ...getTextareaProps(),\n    }\n  },\n)\n"],"mappings":";;;;;;;;AAqBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,YAAY,aAAa;;;;;;AAS3E,MAAa,WAAW,YAAY,UAAU,GAC3C,UAAU;CAGT,OAAO;EAAE,MAAM;EAAG,GAFF,qBAEW;EAAG,GAAG;CAAM;AACzC,IACC,UAAU;CACT,MAAM,EACJ,OAAO,EAAE,kBAAkB,kBAAkB,GAAG,QAChD,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,EAAE,qBAAqB,YAAY;EACvC,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL,CAAC;CAGD,OAAO;EACL,GAHe,eAAe;GAAE;GAAkB;EAAiB,CAGzD;EACV,GAAG,iBAAiB;CACtB;AACF,CACF"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../../src/components/textarea/textarea.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { TextareaStyle } from \"./textarea.style\"\nimport type { UseTextareaProps } from \"./use-textarea\"\nimport { createComponent } from \"../../core\"\nimport { useFieldProps } from \"../field\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { textareaStyle } from \"./textarea.style\"\nimport { useTextarea } from \"./use-textarea\"\n\nexport interface TextareaProps\n  extends\n    HTMLStyledProps<\"textarea\">,\n    ThemeProps<TextareaStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    UseTextareaProps {}\n\nconst {\n  PropsContext: TextareaPropsContext,\n  usePropsContext: useTextareaPropsContext,\n  withContext,\n} = createComponent<TextareaProps, TextareaStyle>(\"textarea\", textareaStyle)\n\nexport { TextareaPropsContext, useTextareaPropsContext }\n\n/**\n * `Textarea` is a component used to obtain multi-line text input.\n *\n * @see https://yamada-ui.com/docs/components/textarea\n */\nexport const Textarea = withContext(\"textarea\")(\n  (props) => {\n    const context = useInputPropsContext()\n\n    return { rows: 2, ...context, ...props }\n  },\n  (props) => {\n    const {\n      props: { errorBorderColor, focusBorderColor, ...rest },\n      ariaProps,\n      dataProps,\n      eventProps,\n    } = useFieldProps(props)\n    const { getTextareaProps } = useTextarea({\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      ...rest,\n    })\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n\n    return {\n      ...varProps,\n      ...getTextareaProps(),\n    }\n  },\n)\n"],"mappings":";;;;;;;;AAqBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,YAAY,aAAa;;;;;;AAS3E,MAAa,WAAW,YAAY,UAAU,CAAC,EAC5C,UAAU;CAGT,OAAO;EAAE,MAAM;EAAG,GAFF,qBAEW;EAAG,GAAG;CAAM;AACzC,IACC,UAAU;CACT,MAAM,EACJ,OAAO,EAAE,kBAAkB,kBAAkB,GAAG,QAChD,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,EAAE,qBAAqB,YAAY;EACvC,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL,CAAC;CAGD,OAAO;EACL,GAHe,eAAe;GAAE;GAAkB;EAAiB,CAGzD;EACV,GAAG,iBAAiB;CACtB;AACF,CACF"}

package/dist/esm/components/textarea/use-autosize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-autosize.js","names":["noop"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  addDomEvent,\n  createdDom,\n  handlerAll,\n  mergeRefs,\n  noop,\n  pickObject,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderRightWidth\",\n  \"borderTopWidth\",\n  \"boxSizing\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n  // non-standard\n  \"tabSize\",\n  \"textIndent\",\n  // non-standard\n  \"textRendering\",\n  \"textTransform\",\n  \"width\",\n  \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n  height: \"0\",\n  \"max-height\": \"none\",\n  \"min-height\": \"0\",\n  overflow: \"hidden\",\n  position: \"absolute\",\n  right: \"0\",\n  top: \"0\",\n  visibility: \"hidden\",\n  \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n  (typeof SIZING_STYLE_PROPERTIES)[number],\n  keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n  border: number\n  padding: number\n  rowHeight: number\n  style: Pick<CSSStyleDeclaration, SizingProperties>\n}\n\nconst getSizingStyle = (el: HTMLElement): null | SizingStyle => {\n  const style = window.getComputedStyle(el) as CSSStyleDeclaration | undefined\n\n  if (style == null) return null\n\n  const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n  if (computedStyle.boxSizing === \"\") return null\n\n  const padding =\n    parseFloat(computedStyle.paddingBottom) +\n    parseFloat(computedStyle.paddingTop)\n\n  const border =\n    parseFloat(computedStyle.borderBottomWidth) +\n    parseFloat(computedStyle.borderTopWidth)\n\n  const rowHeight = parseFloat(computedStyle.lineHeight)\n\n  return {\n    style: computedStyle,\n    border,\n    padding,\n    rowHeight,\n  }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n  Object.keys(HIDDEN_STYLE).forEach((key) => {\n    el.style.setProperty(\n      key,\n      HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n      \"important\",\n    )\n  })\n}\n\nconst calcRows = (\n  el: HTMLTextAreaElement,\n  sizingStyle: SizingStyle,\n  value: string,\n  maxRows: number,\n  minRows: number,\n) => {\n  const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n  Object.assign(cloneEl.style, sizingStyle.style)\n\n  setHiddenStyle(cloneEl)\n\n  cloneEl.value = value\n\n  document.body.appendChild(cloneEl)\n\n  let rows: number\n\n  if (cloneEl.scrollHeight) {\n    const rowHeight = sizingStyle.rowHeight\n\n    rows = Math.min(\n      maxRows,\n      Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n    )\n  } else {\n    const lineBreaks = (value.match(/\\n/g) || []).length\n\n    rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n  }\n\n  document.body.removeChild(cloneEl)\n\n  return rows\n}\n\nexport interface UseAutosizeProps {\n  /**\n   * If `true`, the Textarea height will not be adjusted.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Autosize up to maxRows rows.\n   *\n   * @default Infinity\n   */\n  maxRows?: number\n  /**\n   * Autosize up to minRows rows.\n   *\n   * @default 2\n   */\n  minRows?: number\n}\n\nexport const useAutosize = ({\n  disabled = false,\n  maxRows = Infinity,\n  minRows = 2,\n}: UseAutosizeProps = {}) => {\n  const ref = useRef<HTMLTextAreaElement>(null)\n  const beforeValueRef = useRef<string>(null)\n  const value = ref.current?.value ?? \"\"\n\n  const onResizeTextarea = useCallback(() => {\n    const el = ref.current\n\n    if (!el) return\n\n    let { placeholder, value } = el\n\n    if (value === beforeValueRef.current) return\n\n    beforeValueRef.current = value\n\n    value ||= placeholder || \"x\"\n\n    const sizingStyle = getSizingStyle(el)\n\n    if (!sizingStyle) return\n\n    const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n    el.rows = rows\n  }, [ref, maxRows, minRows])\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n      onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n    }),\n    [ref, onResizeTextarea, disabled],\n  )\n\n  useSafeLayoutEffect(() => {\n    if (!createdDom() || disabled) return\n\n    onResizeTextarea()\n\n    const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n    const unsubscribeLoadingdone = addDomEvent(\n      document.fonts,\n      \"loadingdone\",\n      onResizeTextarea,\n    )\n\n    return () => {\n      unsubscribeResize()\n      unsubscribeLoadingdone()\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    if (disabled) return\n\n    onResizeTextarea()\n  }, [value])\n\n  return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":";;;;;;AAeA,MAAM,0BAA0B;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF;AAEA,MAAM,eAAe;CACnB,QAAQ;CACR,cAAc;CACd,cAAc;CACd,UAAU;CACV,UAAU;CACV,OAAO;CACP,KAAK;CACL,YAAY;CACZ,WAAW;AACb;AAcA,MAAM,kBAAkB,OAAwC;CAC9D,MAAM,QAAQ,OAAO,iBAAiB,EAAE;CAExC,IAAI,SAAS,MAAM,OAAO;CAE1B,MAAM,iBAAA,GAAA,cAAA,YAA2B,OAAO,uBAAuB;CAE/D,IAAI,cAAc,cAAc,IAAI,OAAO;CAE3C,MAAM,UACJ,WAAW,cAAc,aAAa,IACtC,WAAW,cAAc,UAAU;CAQrC,OAAO;EACL,OAAO;EACP,QAPA,WAAW,cAAc,iBAAiB,IAC1C,WAAW,cAAc,cAAc;EAOvC;EACA,WANgB,WAAW,cAAc,UAMjC;CACV;AACF;AAEA,MAAM,kBAAkB,OAAoB;CAC1C,OAAO,KAAK,YAAY,EAAE,SAAS,QAAQ;EACzC,GAAG,MAAM,YACP,KACA,aAAa,MACb,WACF;CACF,CAAC;AACH;AAEA,MAAM,YACJ,IACA,aACA,OACA,SACA,YACG;CACH,MAAM,UAAU,GAAG,UAAU;CAE7B,OAAO,OAAO,QAAQ,OAAO,YAAY,KAAK;CAE9C,eAAe,OAAO;CAEtB,QAAQ,QAAQ;CAEhB,SAAS,KAAK,YAAY,OAAO;CAEjC,IAAI;CAEJ,IAAI,QAAQ,cAAc;EACxB,MAAM,YAAY,YAAY;EAE9B,OAAO,KAAK,IACV,SACA,KAAK,IAAI,SAAS,KAAK,MAAM,QAAQ,eAAe,SAAS,CAAC,CAChE;CACF,OAAO;EACL,MAAM,cAAc,MAAM,MAAM,KAAK,KAAK,CAAC,GAAG;EAE9C,OAAO,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,aAAa,CAAC,CAAC;CAC5D;CAEA,SAAS,KAAK,YAAY,OAAO;CAEjC,OAAO;AACT;AAuBA,MAAa,eAAe,EAC1B,WAAW,OACX,UAAU,UACV,UAAU,MACU,CAAC,MAAM;CAC3B,MAAM,MAAM,OAA4B,IAAI;CAC5C,MAAM,iBAAiB,OAAe,IAAI;CAC1C,MAAM,QAAQ,IAAI,SAAS,SAAS;CAEpC,MAAM,mBAAmB,kBAAkB;EACzC,MAAM,KAAK,IAAI;EAEf,IAAI,CAAC,IAAI;EAET,IAAI,EAAE,aAAa,UAAU;EAE7B,IAAI,UAAU,eAAe,SAAS;EAEtC,eAAe,UAAU;EAEzB,UAAU,eAAe;EAEzB,MAAM,cAAc,eAAe,EAAE;EAErC,IAAI,CAAC,aAAa;EAIlB,GAAG,OAFU,SAAS,IAAI,aAAa,OAAO,SAAS,OAE1C;CACf,GAAG;EAAC;EAAK;EAAS;CAAO,CAAC;CAE1B,MAAM,mBAA2C,aAC9C,QAAQ,CAAC,OAAO;EACf,GAAG;EACH,KAAK,UAAU,MAAM,KAAK,GAAG;EAC7B,OAAO;GAAE,QAAQ,CAAC,WAAW,SAAS,KAAA;GAAW,GAAG,MAAM;EAAM;EAChE,WAAA,GAAA,cAAA,YAAqB,MAAM,UAAU,CAAC,WAAW,mBAAmBA,cAAAA,IAAI;CAC1E,IACA;EAAC;EAAK;EAAkB;CAAQ,CAClC;CAEA,0BAA0B;EACxB,IAAI,EAAA,GAAA,cAAA,YAAY,KAAK,UAAU;EAE/B,iBAAiB;EAEjB,MAAM,qBAAA,GAAA,cAAA,aAAgC,QAAQ,UAAU,gBAAgB;EACxE,MAAM,0BAAA,GAAA,cAAA,aACJ,SAAS,OACT,eACA,gBACF;EAEA,aAAa;GACX,kBAAkB;GAClB,uBAAuB;EACzB;CACF,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,IAAI,UAAU;EAEd,iBAAiB;CACnB,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;EAAE;EAAK;EAAkB;CAAiB;AACnD"}
+{"version":3,"file":"use-autosize.js","names":["noop"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  addDomEvent,\n  createdDom,\n  handlerAll,\n  mergeRefs,\n  noop,\n  pickObject,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderRightWidth\",\n  \"borderTopWidth\",\n  \"boxSizing\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n  // non-standard\n  \"tabSize\",\n  \"textIndent\",\n  // non-standard\n  \"textRendering\",\n  \"textTransform\",\n  \"width\",\n  \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n  height: \"0\",\n  \"max-height\": \"none\",\n  \"min-height\": \"0\",\n  overflow: \"hidden\",\n  position: \"absolute\",\n  right: \"0\",\n  top: \"0\",\n  visibility: \"hidden\",\n  \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n  (typeof SIZING_STYLE_PROPERTIES)[number],\n  keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n  border: number\n  padding: number\n  rowHeight: number\n  style: Pick<CSSStyleDeclaration, SizingProperties>\n}\n\nconst getSizingStyle = (el: HTMLElement): null | SizingStyle => {\n  const style = window.getComputedStyle(el) as CSSStyleDeclaration | undefined\n\n  if (style == null) return null\n\n  const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n  if (computedStyle.boxSizing === \"\") return null\n\n  const padding =\n    parseFloat(computedStyle.paddingBottom) +\n    parseFloat(computedStyle.paddingTop)\n\n  const border =\n    parseFloat(computedStyle.borderBottomWidth) +\n    parseFloat(computedStyle.borderTopWidth)\n\n  const rowHeight = parseFloat(computedStyle.lineHeight)\n\n  return {\n    style: computedStyle,\n    border,\n    padding,\n    rowHeight,\n  }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n  Object.keys(HIDDEN_STYLE).forEach((key) => {\n    el.style.setProperty(\n      key,\n      HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n      \"important\",\n    )\n  })\n}\n\nconst calcRows = (\n  el: HTMLTextAreaElement,\n  sizingStyle: SizingStyle,\n  value: string,\n  maxRows: number,\n  minRows: number,\n) => {\n  const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n  Object.assign(cloneEl.style, sizingStyle.style)\n\n  setHiddenStyle(cloneEl)\n\n  cloneEl.value = value\n\n  document.body.appendChild(cloneEl)\n\n  let rows: number\n\n  if (cloneEl.scrollHeight) {\n    const rowHeight = sizingStyle.rowHeight\n\n    rows = Math.min(\n      maxRows,\n      Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n    )\n  } else {\n    const lineBreaks = (value.match(/\\n/g) || []).length\n\n    rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n  }\n\n  document.body.removeChild(cloneEl)\n\n  return rows\n}\n\nexport interface UseAutosizeProps {\n  /**\n   * If `true`, the Textarea height will not be adjusted.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Autosize up to maxRows rows.\n   *\n   * @default Infinity\n   */\n  maxRows?: number\n  /**\n   * Autosize up to minRows rows.\n   *\n   * @default 2\n   */\n  minRows?: number\n}\n\nexport const useAutosize = ({\n  disabled = false,\n  maxRows = Infinity,\n  minRows = 2,\n}: UseAutosizeProps = {}) => {\n  const ref = useRef<HTMLTextAreaElement>(null)\n  const beforeValueRef = useRef<string>(null)\n  const value = ref.current?.value ?? \"\"\n\n  const onResizeTextarea = useCallback(() => {\n    const el = ref.current\n\n    if (!el) return\n\n    let { placeholder, value } = el\n\n    if (value === beforeValueRef.current) return\n\n    beforeValueRef.current = value\n\n    value ||= placeholder || \"x\"\n\n    const sizingStyle = getSizingStyle(el)\n\n    if (!sizingStyle) return\n\n    const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n    el.rows = rows\n  }, [ref, maxRows, minRows])\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n      onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n    }),\n    [ref, onResizeTextarea, disabled],\n  )\n\n  useSafeLayoutEffect(() => {\n    if (!createdDom() || disabled) return\n\n    onResizeTextarea()\n\n    const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n    const unsubscribeLoadingdone = addDomEvent(\n      document.fonts,\n      \"loadingdone\",\n      onResizeTextarea,\n    )\n\n    return () => {\n      unsubscribeResize()\n      unsubscribeLoadingdone()\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    if (disabled) return\n\n    onResizeTextarea()\n  }, [value])\n\n  return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":"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"}

package/dist/esm/components/textarea/use-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-textarea.js","names":[],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { assignRef, mergeRefs } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n  extends HTMLProps<\"textarea\">, Omit<UseAutosizeProps, \"disabled\" | \"ref\"> {\n  /**\n   * If `true`, the Textarea height auto-adjusts to text height.\n   */\n  autosize?: boolean\n  /**\n   * Ref to a resize function.\n   */\n  resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n  autosize,\n  maxRows,\n  minRows,\n  resizeRef,\n  ...rest\n}: UseTextareaProps = {}) => {\n  const { ref, onResizeTextarea } = useAutosize({\n    disabled: !autosize,\n    maxRows,\n    minRows,\n  })\n\n  assignRef(resizeRef, onResizeTextarea)\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => {\n      const textareaProps = mergeProps(rest, props, {\n        ref: mergeRefs(ref),\n        ...(autosize\n          ? {\n              style: { resize: \"none\" as const },\n              onChange: onResizeTextarea,\n            }\n          : {}),\n      })()\n\n      return textareaProps\n    },\n    [autosize, onResizeTextarea, rest, ref],\n  )\n\n  return {\n    getTextareaProps,\n    onResizeTextarea,\n  }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;AAsBA,MAAa,eAAe,EAC1B,UACA,SACA,SACA,WACA,GAAG,SACiB,CAAC,MAAM;CAC3B,MAAM,EAAE,KAAK,qBAAqB,YAAY;EAC5C,UAAU,CAAC;EACX;EACA;CACF,CAAC;CAED,UAAU,WAAW,gBAAgB;CAmBrC,OAAO;EACL,kBAlB+C,aAC9C,QAAQ,CAAC,MAAM;GAWd,OAVsB,WAAW,MAAM,OAAO;IAC5C,KAAK,UAAU,GAAG;IAClB,GAAI,WACA;KACE,OAAO,EAAE,QAAQ,OAAgB;KACjC,UAAU;IACZ,IACA,CAAC;GACP,CAAC,EAEkB;EACrB,GACA;GAAC;GAAU;GAAkB;GAAM;EAAG,CAIvB;EACf;CACF;AACF"}
+{"version":3,"file":"use-textarea.js","names":[],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { assignRef, mergeRefs } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n  extends HTMLProps<\"textarea\">, Omit<UseAutosizeProps, \"disabled\" | \"ref\"> {\n  /**\n   * If `true`, the Textarea height auto-adjusts to text height.\n   */\n  autosize?: boolean\n  /**\n   * Ref to a resize function.\n   */\n  resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n  autosize,\n  maxRows,\n  minRows,\n  resizeRef,\n  ...rest\n}: UseTextareaProps = {}) => {\n  const { ref, onResizeTextarea } = useAutosize({\n    disabled: !autosize,\n    maxRows,\n    minRows,\n  })\n\n  assignRef(resizeRef, onResizeTextarea)\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => {\n      const textareaProps = mergeProps(rest, props, {\n        ref: mergeRefs(ref),\n        ...(autosize\n          ? {\n              style: { resize: \"none\" as const },\n              onChange: onResizeTextarea,\n            }\n          : {}),\n      })()\n\n      return textareaProps\n    },\n    [autosize, onResizeTextarea, rest, ref],\n  )\n\n  return {\n    getTextareaProps,\n    onResizeTextarea,\n  }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;AAsBA,MAAa,eAAe,EAC1B,UACA,SACA,SACA,WACA,GAAG,SACiB,CAAC,MAAM;CAC3B,MAAM,EAAE,KAAK,qBAAqB,YAAY;EAC5C,UAAU,CAAC;EACX;EACA;CACF,CAAC;CAED,UAAU,WAAW,gBAAgB;CAmBrC,OAAO;EACL,kBAlB+C,aAC9C,QAAQ,CAAC,MAAM;GAWd,OAVsB,WAAW,MAAM,OAAO;IAC5C,KAAK,UAAU,GAAG;IAClB,GAAI,WACA;KACE,OAAO,EAAE,QAAQ,OAAgB;KACjC,UAAU;IACZ,IACA,CAAC;GACP,CAAC,CAAC,CAEiB;EACrB,GACA;GAAC;GAAU;GAAkB;GAAM;EAAG,CAIvB;EACf;CACF;AACF"}