@jbpark/ui-kit 3.3.0 → 3.5.0

package/dist/components/atoms/input/input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["import { input } from '@repo/ui/core';\n\nconst { Input: Core } = input;\n\nconst Input = ({ ...props }: React.ComponentPropsWithoutRef<'input'>) => {\n  return <Core {...props} />;\n};\n\nexport default Input;\n"],"mappings":";;;;AAEA,MAAM,EAAE,OAAO,SAASA;AAExB,MAAM,SAAS,EAAE,GAAG,YAAqD;AACvE,QAAO,oBAAC,QAAK,GAAI,QAAS"}
+{"version":3,"file":"input.mjs","names":["input"],"sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["import { input } from '@repo/ui/core';\n\nconst { Input: Core } = input;\n\nconst Input = ({ ref, ...props }: React.ComponentPropsWithRef<'input'>) => {\n  return <Core ref={ref} {...props} />;\n};\n\nexport default Input;\n"],"mappings":";;;;AAEA,MAAM,EAAE,OAAO,SAASA;AAExB,MAAM,SAAS,EAAE,KAAK,GAAG,YAAkD;AACzE,QAAO,oBAAC;EAAU;EAAK,GAAI;GAAS"}

package/dist/components/atoms/input/search.d.mts

@@ -16,8 +16,10 @@ declare const Search: {
     className,
     defaultValue,
     value,
+    disabled,
     allowClear,
     onChange,
+    onKeyDown: _onKeyDown,
     onSearch: _onSearch,
     ...props
   }: Props): react_jsx_runtime0.JSX.Element;

package/dist/components/atoms/input/search.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";;;UAaiB,KAAA,SAAc,KAAA,CAAM,qBAAA;EACnC,UAAA;EACA,QAAA,IACE,CAAA,EAAG,KAAA,CAAM,WAAA,CAAY,gBAAA;IAAsB,MAAA;MAAU,KAAA;IAAA;EAAA;EAEvD,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,MAAA;EAAA;;;;;;;;;KASH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";;;UAciB,KAAA,SAAc,KAAA,CAAM,qBAAA;EACnC,UAAA;EACA,QAAA,IACE,CAAA,EAAG,KAAA,CAAM,WAAA,CAAY,gBAAA;IAAsB,MAAA;MAAU,KAAA;IAAA;EAAA;EAEvD,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,MAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/input/search.mjs

@@ -6,16 +6,13 @@ import Button from "../../../Button.mjs";
 import { CircleX, Search } from "lucide-react";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergedRef } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/input/search.tsx
 const { Input: Core } = input_exports;
-const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onChange, onSearch: _onSearch, ...props }) => {
+const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear = true, onChange, onKeyDown: _onKeyDown, onSearch: _onSearch, ...props }) => {
 	const inputRef = useRef(null);
-	const setRefs = (node) => {
-		inputRef.current = node;
-		if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	};
+	const mergedRef = useMergedRef(inputRef, ref);
 	const [uncontrolledHasValue, setUncontrolledHasValue] = useState(!!defaultValue);
 	const hasValue = value !== void 0 ? !!value : uncontrolledHasValue;
 	const onClear = () => {
@@ -27,6 +24,7 @@ const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onCh
 		onChange?.({ target: { value: "" } });
 	};
 	const onSearch = () => {
+		if (disabled) return;
 		if (inputRef.current) _onSearch?.(inputRef.current.value);
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -34,10 +32,12 @@ const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onCh
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("relative grow", "inline-flex items-center"),
 			children: [/* @__PURE__ */ jsx(Core, {
-				ref: setRefs,
+				...props,
+				ref: mergedRef,
 				inputMode: "search",
 				type: "search",
 				enterKeyHint: "search",
+				disabled,
 				className: cn("rounded-r-none", "[&::-webkit-search-cancel-button]:hidden", "[&::-webkit-search-decoration]:hidden"),
 				value,
 				defaultValue,
@@ -46,18 +46,20 @@ const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onCh
 					onChange?.(e);
 				},
 				onKeyDown: (e) => {
+					_onKeyDown?.(e);
 					if (e.key === "Enter") onSearch();
-				},
-				...props
+				}
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "지우기",
-				className: cn("absolute right-2", "shrink-0 cursor-pointer", (!allowClear || !hasValue) && "hidden"),
+				disabled,
+				className: cn("absolute right-2", "shrink-0 cursor-pointer", "disabled:cursor-not-allowed disabled:opacity-50", (!allowClear || !hasValue) && "hidden"),
 				onClick: onClear,
 				children: /* @__PURE__ */ jsx(CircleX, { className: "size-4" })
 			})]
 		}), /* @__PURE__ */ jsx(Button, {
 			icon: /* @__PURE__ */ jsx(Search, {}),
+			disabled,
 			className: cn("rounded-l-none", "size-9"),
 			onClick: onSearch
 		})]

package/dist/components/atoms/input/search.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { input } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onChange?: (\n    e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n  ) => void;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  allowClear = true,\n  onChange,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (!inputRef.current) {\n      return;\n    }\n\n    if (value === undefined) {\n      inputRef.current.value = '';\n      setUncontrolledHasValue(false);\n    }\n\n    const event = {\n      target: { value: '' },\n    } as React.ChangeEvent<HTMLInputElement>;\n    onChange?.(event);\n  };\n\n  const onSearch = () => {\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          ref={setRefs}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n          {...props}\n        />\n        <button\n          type=\"button\"\n          aria-label=\"지우기\"\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,aAAa,MACb,UACA,UAAU,WACV,GAAG,YACQ;CACX,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,WAAW,SAAkC;AACjD,WAAS,UAAU;AAEnB,MAAI,OAAO,QAAQ,WACjB,KAAI,KAAK;WACA,IACT,KAAI,UAAU;;CAIlB,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,aAAa;CAC1B,MAAM,WAAW,UAAU,SAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;AACpB,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,UAAU,QAAW;AACvB,YAAS,QAAQ,QAAQ;AACzB,2BAAwB,MAAM;;AAMhC,aAHc,EACZ,QAAQ,EAAE,OAAO,IAAI,EACtB,CACgB;;CAGnB,MAAM,iBAAiB;AACrB,MAAI,SAAS,QACX,aAAY,SAAS,QAAQ,MAAM;;AAIvC,QACE,qBAAC;EACC,WAAW,GACT,qBACA,cACA,UAED;aAED,qBAAC;GACC,WAAW,GACT,iBACA,2BAED;cAED,oBAAC;IACC,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACb,WAAW,GACT,kBACA,4CACA,wCAED;IACM;IACO;IACd,WAAU,MAAK;AACb,SAAI,UAAU,OACZ,yBAAwB,CAAC,CAAC,EAAE,OAAO,MAAM;AAE3C,gBAAW,EAAE;;IAEf,YAAW,MAAK;AACd,SAAI,EAAE,QAAQ,QACZ,WAAU;;IAGd,GAAI;KACJ,EACF,oBAAC;IACC,MAAK;IACL,cAAW;IACX,WAAW,GACT,oBACA,4BACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;cAET,oBAAC,WAAQ,WAAU,WAAW;KACvB;IACL,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACxB,WAAW,GACT,kBACA,SAED;GACD,SAAS;IACT;GACE;;AAIV,SAAO,cAAc"}
+{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { input } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onChange?: (\n    e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n  ) => void;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (!inputRef.current) {\n      return;\n    }\n\n    if (value === undefined) {\n      inputRef.current.value = '';\n      setUncontrolledHasValue(false);\n    }\n\n    onChange?.({ target: { value: '' } });\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          aria-label=\"지우기\"\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,YAAY,aAAa,UAAU,IAAI;CAE7C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,aAAa;CAC1B,MAAM,WAAW,UAAU,SAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;AACpB,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,UAAU,QAAW;AACvB,YAAS,QAAQ,QAAQ;AACzB,2BAAwB,MAAM;;AAGhC,aAAW,EAAE,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;;CAGvC,MAAM,iBAAiB;AACrB,MAAI,SACF;AAEF,MAAI,SAAS,QACX,aAAY,SAAS,QAAQ,MAAM;;AAIvC,QACE,qBAAC;EACC,WAAW,GACT,qBACA,cACA,UAED;aAED,qBAAC;GACC,WAAW,GACT,iBACA,2BAED;cAED,oBAAC;IACC,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,wCAED;IACM;IACO;IACd,WAAU,MAAK;AACb,SAAI,UAAU,OACZ,yBAAwB,CAAC,CAAC,EAAE,OAAO,MAAM;AAE3C,gBAAW,EAAE;;IAEf,YAAW,MAAK;AACd,kBAAa,EAAE;AACf,SAAI,EAAE,QAAQ,QACZ,WAAU;;KAGd,EACF,oBAAC;IACC,MAAK;IACL,cAAW;IACD;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;cAET,oBAAC,WAAQ,WAAU,WAAW;KACvB;IACL,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACd;GACV,WAAW,GACT,kBACA,SAED;GACD,SAAS;IACT;GACE;;AAIV,SAAO,cAAc"}

package/dist/components/atoms/option-group.d.mts

@@ -0,0 +1,15 @@
+//#region src/components/atoms/option-group.d.ts
+type OptionValue = string | number | boolean;
+interface Option {
+  label: string;
+  value: OptionValue;
+  disabled?: boolean;
+}
+type Options = string[] | number[] | boolean[] | Option[];
+interface OptionGroupClassNames {
+  wrapper?: string;
+  item?: string;
+}
+//#endregion
+export { OptionGroupClassNames, OptionValue, Options };
+//# sourceMappingURL=option-group.d.mts.map

package/dist/components/atoms/option-group.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.d.mts","names":[],"sources":["../../../src/components/atoms/option-group.ts"],"mappings":";KAAY,WAAA;AAAA,UAEK,MAAA;EACf,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGU,OAAA,qCAA4C,MAAA;AAAA,UAEvC,qBAAA;EACf,OAAA;EACA,IAAA;AAAA"}

package/dist/components/atoms/option-group.mjs

@@ -0,0 +1,9 @@
+//#region src/components/atoms/option-group.ts
+const normalizeOptions = (options) => options.map((item) => typeof item === "object" ? item : {
+	label: `${item}`,
+	value: item
+});
+
+//#endregion
+export { normalizeOptions };
+//# sourceMappingURL=option-group.mjs.map

package/dist/components/atoms/option-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.mjs","names":[],"sources":["../../../src/components/atoms/option-group.ts"],"sourcesContent":["export type OptionValue = string | number | boolean;\n\nexport interface Option {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n}\n\nexport type Options = string[] | number[] | boolean[] | Option[];\n\nexport interface OptionGroupClassNames {\n  wrapper?: string;\n  item?: string;\n}\n\nexport const normalizeOptions = (options: Options): Option[] =>\n  options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n"],"mappings":";AAeA,MAAa,oBAAoB,YAC/B,QAAQ,KAAI,SACV,OAAO,SAAS,WACZ,OACA;CACE,OAAO,GAAG;CACV,OAAO;CACR,CACN"}

package/dist/components/atoms/popover.d.mts

@@ -6,6 +6,9 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'c
   title?: React.ReactNode;
   placement?: Placement;
   content: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 declare const Popover: ({
   title,
@@ -13,6 +16,9 @@ declare const Popover: ({
   className,
   content,
   children,
+  open: _open,
+  defaultOpen,
+  onOpenChange,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/atoms/popover.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.mts","names":[],"sources":["../../../src/components/atoms/popover.tsx"],"mappings":";;;KAOK,SAAA;AAAA,UAcK,KAAA,SAAc,IAAA,CACtB,KAAA,CAAM,wBAAA;EAGN,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,SAAA,GAAY,SAAA;EACZ,OAAA,EAAS,KAAA,CAAM,SAAA;AAAA;AAAA,cAkNX,OAAA;EAAW,KAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAOd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"popover.d.mts","names":[],"sources":["../../../src/components/atoms/popover.tsx"],"mappings":";;;KASK,SAAA;AAAA,UAcY,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,SAAA,GAAY,SAAA;EACZ,OAAA,EAAS,KAAA,CAAM,SAAA;EACf,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA;AAAA;AAAA,cA4GZ,OAAA;EAAW,KAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,IAAA,EAAA,KAAA;EAAA,WAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/popover.mjs

@@ -2,6 +2,7 @@ import { cn, renderConditional } from "../../utils.mjs";
 import { popover_exports } from "../../core/popover.mjs";
 import Typography from "../../Typography.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/popover.tsx
 const { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover_exports;
@@ -61,167 +62,81 @@ const vBorderShape = "before:border-l-[9px] before:border-r-[9px] before:border-
 const hBorderShape = "before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent";
 const vFillShape = "after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent";
 const hFillShape = "after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent";
-const topBorder = "before:border-t-[9px] before:border-t-border";
-const bottomBorder = "before:border-b-[9px] before:border-b-border";
-const leftBorder = "before:border-l-[9px] before:border-l-border";
-const rightBorder = "before:border-r-[9px] before:border-r-border";
-const topFill = "after:border-t-8 after:border-t-popover";
-const bottomFill = "after:border-b-8 after:border-b-popover";
-const leftFill = "after:border-l-8 after:border-l-popover";
-const rightFill = "after:border-r-8 after:border-r-popover";
-const arrowStyles = {
-	top: [
-		"absolute left-1/2 -translate-x-1/2 top-full",
-		beforeBase,
-		"before:top-0 before:left-1/2 before:-translate-x-1/2",
-		vBorderShape,
-		topBorder,
-		afterBase,
-		"after:-top-px after:left-1/2 after:-translate-x-1/2",
-		vFillShape,
-		topFill
-	].join(" "),
-	topLeft: [
-		"absolute left-4 top-full",
-		beforeBase,
-		"before:top-0 before:left-0",
-		vBorderShape,
-		topBorder,
-		afterBase,
-		"after:-top-px after:left-px",
-		vFillShape,
-		topFill
-	].join(" "),
-	topRight: [
-		"absolute right-4 top-full",
-		beforeBase,
-		"before:top-0 before:right-0",
-		vBorderShape,
-		topBorder,
-		afterBase,
-		"after:-top-px after:right-px",
-		vFillShape,
-		topFill
-	].join(" "),
-	bottom: [
-		"absolute left-1/2 -translate-x-1/2 bottom-full",
-		beforeBase,
-		"before:bottom-0 before:left-1/2 before:-translate-x-1/2",
-		vBorderShape,
-		bottomBorder,
-		afterBase,
-		"after:-bottom-px after:left-1/2 after:-translate-x-1/2",
-		vFillShape,
-		bottomFill
-	].join(" "),
-	bottomLeft: [
-		"absolute left-4 bottom-full",
-		beforeBase,
-		"before:bottom-0 before:left-0",
-		vBorderShape,
-		bottomBorder,
-		afterBase,
-		"after:-bottom-px after:left-px",
-		vFillShape,
-		bottomFill
-	].join(" "),
-	bottomRight: [
-		"absolute right-4 bottom-full",
-		beforeBase,
-		"before:bottom-0 before:right-0",
-		vBorderShape,
-		bottomBorder,
-		afterBase,
-		"after:-bottom-px after:right-px",
-		vFillShape,
-		bottomFill
-	].join(" "),
-	left: [
-		"absolute top-1/2 -translate-y-1/2 left-full",
-		beforeBase,
-		"before:left-0 before:top-1/2 before:-translate-y-1/2",
-		hBorderShape,
-		leftBorder,
-		afterBase,
-		"after:-left-px after:top-1/2 after:-translate-y-1/2",
-		hFillShape,
-		leftFill
-	].join(" "),
-	leftTop: [
-		"absolute top-4 left-full",
-		beforeBase,
-		"before:left-0 before:top-0",
-		hBorderShape,
-		leftBorder,
-		afterBase,
-		"after:-left-px after:top-px",
-		hFillShape,
-		leftFill
-	].join(" "),
-	leftBottom: [
-		"absolute bottom-4 left-full",
-		beforeBase,
-		"before:left-0 before:bottom-0",
-		hBorderShape,
-		leftBorder,
-		afterBase,
-		"after:-left-px after:bottom-px",
-		hFillShape,
-		leftFill
-	].join(" "),
-	right: [
-		"absolute top-1/2 -translate-y-1/2 right-full",
-		beforeBase,
-		"before:right-0 before:top-1/2 before:-translate-y-1/2",
-		hBorderShape,
-		rightBorder,
-		afterBase,
-		"after:-right-px after:top-1/2 after:-translate-y-1/2",
-		hFillShape,
-		rightFill
-	].join(" "),
-	rightTop: [
-		"absolute top-4 right-full",
-		beforeBase,
-		"before:right-0 before:top-0",
-		hBorderShape,
-		rightBorder,
-		afterBase,
-		"after:-right-px after:top-px",
-		hFillShape,
-		rightFill
-	].join(" "),
-	rightBottom: [
-		"absolute bottom-4 right-full",
-		beforeBase,
-		"before:right-0 before:bottom-0",
-		hBorderShape,
-		rightBorder,
-		afterBase,
-		"after:-right-px after:bottom-px",
-		hFillShape,
-		rightFill
-	].join(" ")
+const borderShapeBySide = {
+	top: vBorderShape,
+	bottom: vBorderShape,
+	left: hBorderShape,
+	right: hBorderShape
 };
-const Popover = ({ title, placement = "top", className, content, children, ...props }) => {
-	return /* @__PURE__ */ jsxs(CorePopover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-		asChild: true,
-		children
-	}), /* @__PURE__ */ jsxs(PopoverContent, {
-		...props,
-		align: placementMap[placement].align,
-		side: placementMap[placement].side,
-		sideOffset: 16,
-		className: cn("relative w-auto", className),
-		children: [
-			renderConditional(title, (v) => /* @__PURE__ */ jsx(Typography.Title, {
-				level: 6,
-				children: v
-			})),
-			content,
-			/* @__PURE__ */ jsx("div", { className: cn(arrowStyles[placement]) })
-		]
-	})] });
+const fillShapeBySide = {
+	top: vFillShape,
+	bottom: vFillShape,
+	left: hFillShape,
+	right: hFillShape
+};
+const borderColorBySide = {
+	top: "before:border-t-[9px] before:border-t-border",
+	bottom: "before:border-b-[9px] before:border-b-border",
+	left: "before:border-l-[9px] before:border-l-border",
+	right: "before:border-r-[9px] before:border-r-border"
+};
+const fillColorBySide = {
+	top: "after:border-t-8 after:border-t-popover",
+	bottom: "after:border-b-8 after:border-b-popover",
+	left: "after:border-l-8 after:border-l-popover",
+	right: "after:border-r-8 after:border-r-popover"
+};
+const offsetAxisBySide = {
+	top: "x",
+	bottom: "x",
+	left: "y",
+	right: "y"
+};
+const startEdgeByAxis = {
+	x: "left",
+	y: "top"
+};
+const endEdgeByAxis = {
+	x: "right",
+	y: "bottom"
+};
+const getArrowClassName = (side, align) => {
+	const axis = offsetAxisBySide[side];
+	const alignEdge = align === "start" ? startEdgeByAxis[axis] : align === "end" ? endEdgeByAxis[axis] : null;
+	const positionAlign = alignEdge ? `${alignEdge}-4` : `${startEdgeByAxis[axis]}-1/2 -translate-${axis}-1/2`;
+	const beforeAlign = alignEdge ? `before:${alignEdge}-0` : `before:${startEdgeByAxis[axis]}-1/2 before:-translate-${axis}-1/2`;
+	const afterAlign = alignEdge ? `after:${alignEdge}-px` : `after:${startEdgeByAxis[axis]}-1/2 after:-translate-${axis}-1/2`;
+	return cn(`absolute ${positionAlign} ${side}-full`, beforeBase, `before:${side}-0`, beforeAlign, borderShapeBySide[side], borderColorBySide[side], afterBase, `after:-${side}-px`, afterAlign, fillShapeBySide[side], fillColorBySide[side]);
+};
+const Popover = ({ title, placement = "top", className, content, children, open: _open, defaultOpen, onOpenChange, ...props }) => {
+	const [open, setOpen] = useControllableState({
+		value: _open,
+		defaultValue: defaultOpen ?? false,
+		onChange: onOpenChange
+	});
+	const { side, align } = placementMap[placement];
+	return /* @__PURE__ */ jsxs(CorePopover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			...props,
+			align,
+			side,
+			sideOffset: 16,
+			className: cn("relative w-auto", className),
+			children: [
+				renderConditional(title, (v) => /* @__PURE__ */ jsx(Typography.Title, {
+					level: 6,
+					children: v
+				})),
+				content,
+				/* @__PURE__ */ jsx("div", { className: getArrowClassName(side, align) })
+			]
+		})]
+	});
 };
 
 //#endregion

package/dist/components/atoms/popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.mjs","names":["popover"],"sources":["../../../src/components/atoms/popover.tsx"],"sourcesContent":["import { popover } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Typography from './typography';\n\nconst { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\ninterface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title' | 'content'\n> {\n  title?: React.ReactNode;\n  placement?: Placement;\n  content: React.ReactNode;\n}\n\nconst placementMap = {\n  top: {\n    side: 'top',\n    align: 'center',\n  },\n  left: {\n    side: 'left',\n    align: 'center',\n  },\n  right: {\n    side: 'right',\n    align: 'center',\n  },\n  bottom: {\n    side: 'bottom',\n    align: 'center',\n  },\n  topLeft: {\n    side: 'top',\n    align: 'start',\n  },\n  topRight: {\n    side: 'top',\n    align: 'end',\n  },\n  bottomLeft: {\n    side: 'bottom',\n    align: 'start',\n  },\n  bottomRight: {\n    side: 'bottom',\n    align: 'end',\n  },\n  leftTop: {\n    side: 'left',\n    align: 'start',\n  },\n  leftBottom: {\n    side: 'left',\n    align: 'end',\n  },\n  rightTop: {\n    side: 'right',\n    align: 'start',\n  },\n  rightBottom: {\n    side: 'right',\n    align: 'end',\n  },\n} as const;\n\nconst beforeBase = 'before:content-[\"\"] before:absolute before:h-0 before:w-0';\nconst afterBase = 'after:content-[\"\"] after:absolute after:h-0 after:w-0';\n\nconst vBorderShape =\n  'before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent';\nconst hBorderShape =\n  'before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent';\nconst vFillShape =\n  'after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent';\nconst hFillShape =\n  'after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent';\n\nconst topBorder = 'before:border-t-[9px] before:border-t-border';\nconst bottomBorder = 'before:border-b-[9px] before:border-b-border';\nconst leftBorder = 'before:border-l-[9px] before:border-l-border';\nconst rightBorder = 'before:border-r-[9px] before:border-r-border';\nconst topFill = 'after:border-t-8 after:border-t-popover';\nconst bottomFill = 'after:border-b-8 after:border-b-popover';\nconst leftFill = 'after:border-l-8 after:border-l-popover';\nconst rightFill = 'after:border-r-8 after:border-r-popover';\n\nconst arrowStyles: Record<Placement, string> = {\n  top: [\n    'absolute left-1/2 -translate-x-1/2 top-full',\n    beforeBase,\n    'before:top-0 before:left-1/2 before:-translate-x-1/2',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:left-1/2 after:-translate-x-1/2',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  topLeft: [\n    'absolute left-4 top-full',\n    beforeBase,\n    'before:top-0 before:left-0',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:left-px',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  topRight: [\n    'absolute right-4 top-full',\n    beforeBase,\n    'before:top-0 before:right-0',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:right-px',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  bottom: [\n    'absolute left-1/2 -translate-x-1/2 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:left-1/2 before:-translate-x-1/2',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:left-1/2 after:-translate-x-1/2',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  bottomLeft: [\n    'absolute left-4 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:left-0',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:left-px',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  bottomRight: [\n    'absolute right-4 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:right-0',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:right-px',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  left: [\n    'absolute top-1/2 -translate-y-1/2 left-full',\n    beforeBase,\n    'before:left-0 before:top-1/2 before:-translate-y-1/2',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:top-1/2 after:-translate-y-1/2',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  leftTop: [\n    'absolute top-4 left-full',\n    beforeBase,\n    'before:left-0 before:top-0',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:top-px',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  leftBottom: [\n    'absolute bottom-4 left-full',\n    beforeBase,\n    'before:left-0 before:bottom-0',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:bottom-px',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  right: [\n    'absolute top-1/2 -translate-y-1/2 right-full',\n    beforeBase,\n    'before:right-0 before:top-1/2 before:-translate-y-1/2',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:top-1/2 after:-translate-y-1/2',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n  rightTop: [\n    'absolute top-4 right-full',\n    beforeBase,\n    'before:right-0 before:top-0',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:top-px',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n  rightBottom: [\n    'absolute bottom-4 right-full',\n    beforeBase,\n    'before:right-0 before:bottom-0',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:bottom-px',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n};\n\nconst Popover = ({\n  title,\n  placement = 'top',\n  className,\n  content,\n  children,\n  ...props\n}: Props) => {\n  return (\n    <CorePopover>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        {...props}\n        align={placementMap[placement].align}\n        side={placementMap[placement].side}\n        sideOffset={16}\n        className={cn('relative w-auto', className)}\n      >\n        {renderConditional(title, v => (\n          <Typography.Title level={6}>{v}</Typography.Title>\n        ))}\n        {content}\n        <div className={cn(arrowStyles[placement])} />\n      </PopoverContent>\n    </CorePopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;AAKA,MAAM,EAAE,SAAS,aAAa,gBAAgB,mBAAmBA;AAyBjE,MAAM,eAAe;CACnB,KAAK;EACH,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACR;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,eACJ;AACF,MAAM,eACJ;AACF,MAAM,aACJ;AACF,MAAM,aACJ;AAEF,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,YAAY;AAElB,MAAM,cAAyC;CAC7C,KAAK;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACZ;AAED,MAAM,WAAW,EACf,OACA,YAAY,OACZ,WACA,SACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC,0BACC,oBAAC;EAAe;EAAS;GAA0B,EACnD,qBAAC;EACC,GAAI;EACJ,OAAO,aAAa,WAAW;EAC/B,MAAM,aAAa,WAAW;EAC9B,YAAY;EACZ,WAAW,GAAG,mBAAmB,UAAU;;GAE1C,kBAAkB,QAAO,MACxB,oBAAC,WAAW;IAAM,OAAO;cAAI;KAAqB,CAClD;GACD;GACD,oBAAC,SAAI,WAAW,GAAG,YAAY,WAAW,GAAI;;GAC/B,IACL"}
+{"version":3,"file":"popover.mjs","names":["popover"],"sources":["../../../src/components/atoms/popover.tsx"],"sourcesContent":["import { useControllableState } from '@jbpark/use-hooks';\n\nimport { popover } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Typography from './typography';\n\nconst { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title' | 'content'\n> {\n  title?: React.ReactNode;\n  placement?: Placement;\n  content: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nconst placementMap: Record<Placement, { side: Side; align: Align }> = {\n  top: { side: 'top', align: 'center' },\n  left: { side: 'left', align: 'center' },\n  right: { side: 'right', align: 'center' },\n  bottom: { side: 'bottom', align: 'center' },\n  topLeft: { side: 'top', align: 'start' },\n  topRight: { side: 'top', align: 'end' },\n  bottomLeft: { side: 'bottom', align: 'start' },\n  bottomRight: { side: 'bottom', align: 'end' },\n  leftTop: { side: 'left', align: 'start' },\n  leftBottom: { side: 'left', align: 'end' },\n  rightTop: { side: 'right', align: 'start' },\n  rightBottom: { side: 'right', align: 'end' },\n};\n\nconst beforeBase = 'before:content-[\"\"] before:absolute before:h-0 before:w-0';\nconst afterBase = 'after:content-[\"\"] after:absolute after:h-0 after:w-0';\n\nconst vBorderShape =\n  'before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent';\nconst hBorderShape =\n  'before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent';\nconst vFillShape =\n  'after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent';\nconst hFillShape =\n  'after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent';\n\n// Top/bottom placements draw a vertical-edge triangle (border-l/border-r) —\n// the arrow points up/down, so its left/right edges form the point. Left/\n// right placements draw the horizontal-edge equivalent.\nconst borderShapeBySide: Record<Side, string> = {\n  top: vBorderShape,\n  bottom: vBorderShape,\n  left: hBorderShape,\n  right: hBorderShape,\n};\nconst fillShapeBySide: Record<Side, string> = {\n  top: vFillShape,\n  bottom: vFillShape,\n  left: hFillShape,\n  right: hFillShape,\n};\nconst borderColorBySide: Record<Side, string> = {\n  top: 'before:border-t-[9px] before:border-t-border',\n  bottom: 'before:border-b-[9px] before:border-b-border',\n  left: 'before:border-l-[9px] before:border-l-border',\n  right: 'before:border-r-[9px] before:border-r-border',\n};\nconst fillColorBySide: Record<Side, string> = {\n  top: 'after:border-t-8 after:border-t-popover',\n  bottom: 'after:border-b-8 after:border-b-popover',\n  left: 'after:border-l-8 after:border-l-popover',\n  right: 'after:border-r-8 after:border-r-popover',\n};\n\n// `side` picks which edge of the content the arrow sits against; `align`\n// slides it along that edge. The offset axis (x for top/bottom, y for\n// left/right) is perpendicular to `side` — `align: 'center'` centers the\n// arrow with a translate, while `start`/`end` pin it 16px from that edge.\nconst offsetAxisBySide: Record<Side, 'x' | 'y'> = {\n  top: 'x',\n  bottom: 'x',\n  left: 'y',\n  right: 'y',\n};\nconst startEdgeByAxis = { x: 'left', y: 'top' } as const;\nconst endEdgeByAxis = { x: 'right', y: 'bottom' } as const;\n\nconst getArrowClassName = (side: Side, align: Align) => {\n  const axis = offsetAxisBySide[side];\n  const alignEdge =\n    align === 'start'\n      ? startEdgeByAxis[axis]\n      : align === 'end'\n        ? endEdgeByAxis[axis]\n        : null;\n\n  const positionAlign = alignEdge\n    ? `${alignEdge}-4`\n    : `${startEdgeByAxis[axis]}-1/2 -translate-${axis}-1/2`;\n  const beforeAlign = alignEdge\n    ? `before:${alignEdge}-0`\n    : `before:${startEdgeByAxis[axis]}-1/2 before:-translate-${axis}-1/2`;\n  const afterAlign = alignEdge\n    ? `after:${alignEdge}-px`\n    : `after:${startEdgeByAxis[axis]}-1/2 after:-translate-${axis}-1/2`;\n\n  return cn(\n    `absolute ${positionAlign} ${side}-full`,\n    beforeBase,\n    `before:${side}-0`,\n    beforeAlign,\n    borderShapeBySide[side],\n    borderColorBySide[side],\n    afterBase,\n    `after:-${side}-px`,\n    afterAlign,\n    fillShapeBySide[side],\n    fillColorBySide[side],\n  );\n};\n\nconst Popover = ({\n  title,\n  placement = 'top',\n  className,\n  content,\n  children,\n  open: _open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: Props) => {\n  const [open, setOpen] = useControllableState<boolean>({\n    value: _open,\n    defaultValue: defaultOpen ?? false,\n    onChange: onOpenChange,\n  });\n\n  const { side, align } = placementMap[placement];\n\n  return (\n    <CorePopover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        {...props}\n        align={align}\n        side={side}\n        sideOffset={16}\n        className={cn('relative w-auto', className)}\n      >\n        {renderConditional(title, v => (\n          <Typography.Title level={6}>{v}</Typography.Title>\n        ))}\n        {content}\n        <div className={getArrowClassName(side, align)} />\n      </PopoverContent>\n    </CorePopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;;AAOA,MAAM,EAAE,SAAS,aAAa,gBAAgB,mBAAmBA;AA+BjE,MAAM,eAAgE;CACpE,KAAK;EAAE,MAAM;EAAO,OAAO;EAAU;CACrC,MAAM;EAAE,MAAM;EAAQ,OAAO;EAAU;CACvC,OAAO;EAAE,MAAM;EAAS,OAAO;EAAU;CACzC,QAAQ;EAAE,MAAM;EAAU,OAAO;EAAU;CAC3C,SAAS;EAAE,MAAM;EAAO,OAAO;EAAS;CACxC,UAAU;EAAE,MAAM;EAAO,OAAO;EAAO;CACvC,YAAY;EAAE,MAAM;EAAU,OAAO;EAAS;CAC9C,aAAa;EAAE,MAAM;EAAU,OAAO;EAAO;CAC7C,SAAS;EAAE,MAAM;EAAQ,OAAO;EAAS;CACzC,YAAY;EAAE,MAAM;EAAQ,OAAO;EAAO;CAC1C,UAAU;EAAE,MAAM;EAAS,OAAO;EAAS;CAC3C,aAAa;EAAE,MAAM;EAAS,OAAO;EAAO;CAC7C;AAED,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,eACJ;AACF,MAAM,eACJ;AACF,MAAM,aACJ;AACF,MAAM,aACJ;AAKF,MAAM,oBAA0C;CAC9C,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AACD,MAAM,kBAAwC;CAC5C,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AACD,MAAM,oBAA0C;CAC9C,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AACD,MAAM,kBAAwC;CAC5C,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AAMD,MAAM,mBAA4C;CAChD,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AACD,MAAM,kBAAkB;CAAE,GAAG;CAAQ,GAAG;CAAO;AAC/C,MAAM,gBAAgB;CAAE,GAAG;CAAS,GAAG;CAAU;AAEjD,MAAM,qBAAqB,MAAY,UAAiB;CACtD,MAAM,OAAO,iBAAiB;CAC9B,MAAM,YACJ,UAAU,UACN,gBAAgB,QAChB,UAAU,QACR,cAAc,QACd;CAER,MAAM,gBAAgB,YAClB,GAAG,UAAU,MACb,GAAG,gBAAgB,MAAM,kBAAkB,KAAK;CACpD,MAAM,cAAc,YAChB,UAAU,UAAU,MACpB,UAAU,gBAAgB,MAAM,yBAAyB,KAAK;CAClE,MAAM,aAAa,YACf,SAAS,UAAU,OACnB,SAAS,gBAAgB,MAAM,wBAAwB,KAAK;AAEhE,QAAO,GACL,YAAY,cAAc,GAAG,KAAK,QAClC,YACA,UAAU,KAAK,KACf,aACA,kBAAkB,OAClB,kBAAkB,OAClB,WACA,UAAU,KAAK,MACf,YACA,gBAAgB,OAChB,gBAAgB,MACjB;;AAGH,MAAM,WAAW,EACf,OACA,YAAY,OACZ,WACA,SACA,UACA,MAAM,OACN,aACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,MAAM,WAAW,qBAA8B;EACpD,OAAO;EACP,cAAc,eAAe;EAC7B,UAAU;EACX,CAAC;CAEF,MAAM,EAAE,MAAM,UAAU,aAAa;AAErC,QACE,qBAAC;EAAkB;EAAM,cAAc;aACrC,oBAAC;GAAe;GAAS;IAA0B,EACnD,qBAAC;GACC,GAAI;GACG;GACD;GACN,YAAY;GACZ,WAAW,GAAG,mBAAmB,UAAU;;IAE1C,kBAAkB,QAAO,MACxB,oBAAC,WAAW;KAAM,OAAO;eAAI;MAAqB,CAClD;IACD;IACD,oBAAC,SAAI,WAAW,kBAAkB,MAAM,MAAM,GAAI;;IACnC;GACL"}

package/dist/components/atoms/radio/group.d.mts

@@ -1,20 +1,16 @@
+import { OptionGroupClassNames, OptionValue, Options } from "../option-group.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/radio/group.d.ts
-type OptionValue = string | number | boolean;
-type Option = {
-  label: string;
-  value: OptionValue;
-  disabled?: boolean;
-};
-type Options = string[] | number[] | boolean[] | Option[];
 interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' | 'defaultValue' | 'value'> {
   options?: Options;
   orientation?: 'vertical' | 'horizontal';
   placement?: 'left' | 'right';
-  classNames?: Record<string, string>;
+  classNames?: OptionGroupClassNames;
   defaultValue?: OptionValue;
   value?: OptionValue;
+  /** Native form field name — participates in `FormData` when set. */
+  name?: string;
   optionType?: 'default' | 'button';
   buttonStyle?: 'solid' | 'outlined';
   size?: 'small' | 'middle' | 'large';
@@ -27,6 +23,7 @@ declare const RadioGroup: ({
   className,
   classNames,
   options: _options,
+  name,
   optionType,
   buttonStyle,
   size,
@@ -37,5 +34,5 @@ declare const RadioGroup: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { OptionValue, RadioGroup };
+export { RadioGroup };
 //# sourceMappingURL=group.d.mts.map

package/dist/components/atoms/radio/group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;KAaY,WAAA;AAAA,KAEP,MAAA;EACH,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGG,OAAA,qCAA4C,MAAA;AAAA,UAEhC,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,MAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EACR,UAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA,EAAO,WAAA;AAAA;AAAA,cAGf,UAAA;EAAc,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAcjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;;UAwBiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,qBAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EAFK;EAIb,IAAA;EACA,UAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA,EAAO,WAAA;AAAA;AAAA,cAGf,UAAA;EAAc,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,IAAA;EAAA,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAejB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/radio/group.mjs

@@ -3,33 +3,32 @@
 import { cn } from "../../../utils.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import Button from "../../../Button.mjs";
+import { normalizeOptions } from "../option-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
 import Radio from "./radio.mjs";
-import { useId, useState } from "react";
+import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/radio/group.tsx
-const { RadioGroup: Core } = radio_group_exports;
-const RadioGroup = ({ orientation = "horizontal", placement = "left", className, classNames = {}, options: _options = [], optionType = "default", buttonStyle = "solid", size, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-	const controlled = _value !== void 0;
-	const value = controlled ? _value : uncontrolledValue;
-	const options = _options.map((item) => typeof item === "object" ? item : {
-		label: `${item}`,
-		value: item
+const { RadioGroup: Core, RadioGroupItem: Item } = radio_group_exports;
+const RadioGroup = ({ orientation = "horizontal", placement = "left", className, classNames = {}, options: _options = [], name, optionType = "default", buttonStyle = "solid", size, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
+	const [value, setValue] = useControllableState({
+		value: _value,
+		defaultValue,
+		onChange: _onChange
 	});
+	const options = normalizeOptions(_options);
 	const isButton = optionType === "button";
 	const onChange = (checked, optionValue) => {
 		if (!checked) return;
-		if (!controlled) setUncontrolledValue(optionValue);
-		_onChange(optionValue);
+		setValue(optionValue);
 	};
 	const baseId = useId();
 	const getOptionId = (index) => `${baseId}-${index}`;
-	const checkedIndex = options.findIndex((item) => item.value === value);
-	const checkedId = checkedIndex === -1 ? "" : getOptionId(checkedIndex);
-	const onValueChange = (optionId) => {
-		const item = options.find((_, index) => getOptionId(index) === optionId);
+	const checkedItemValue = value === void 0 ? "" : String(value);
+	const onValueChange = (itemValue) => {
+		const item = options.find((option) => String(option.value) === itemValue);
 		if (!item) return;
 		onChange(true, item.value);
 	};
@@ -40,13 +39,17 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 			const checked = value === item.value;
 			return /* @__PURE__ */ jsx("li", {
 				className: cn("flex", classNames?.wrapper),
-				children: isButton ? /* @__PURE__ */ jsx(Button, {
-					variant: checked ? buttonStyle : "outlined",
-					size,
-					className: cn("rounded-none", index === 0 && "rounded-l-lg", index === options.length - 1 && "rounded-r-lg", checked && buttonStyle === "outlined" && "border-primary"),
+				children: isButton ? /* @__PURE__ */ jsx(Item, {
+					asChild: true,
+					value: String(item.value),
 					disabled: disabled || item.disabled,
-					onClick: () => onChange(true, item.value),
-					children: item.label
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: checked ? buttonStyle : "outlined",
+						size,
+						disabled: disabled || item.disabled,
+						className: cn("rounded-none border", checked && (buttonStyle === "outlined" ? "border-primary" : "border-transparent"), index === 0 && (orientation === "vertical" ? "rounded-t-lg" : "rounded-l-lg"), index === options.length - 1 && (orientation === "vertical" ? "rounded-b-lg" : "rounded-r-lg")),
+						children: item.label
+					})
 				}) : /* @__PURE__ */ jsx(Radio, {
 					id: getOptionId(index),
 					placement,
@@ -60,12 +63,12 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 			}, String(item.value));
 		})
 	});
-	if (isButton) return list;
 	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ jsx(Core, {
 			className: "block",
-			value: checkedId,
+			name,
+			value: checkedItemValue,
 			onValueChange,
 			children: list
 		})