@jbpark/ui-kit 3.3.0 → 3.5.0

package/dist/components/molecules/upload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useFileToDataUrl } from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [isDragOver, setIsDragOver] = useState(false);\n  const [uncontrolledValue, setUncontrolledValue] =\n    useState<UploadFile[]>(defaultValue);\n\n  const controlled = _value !== undefined;\n  const files = controlled ? _value : uncontrolledValue;\n\n  const onChange = (next: UploadFile[]) => {\n    if (!controlled) {\n      setUncontrolledValue(next);\n    }\n    _onChange(next);\n  };\n\n  const addFiles = async (fileList: FileList) => {\n    const incoming = Array.from(fileList);\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n\n    const uploaded = await Promise.all(\n      accepted.map(async file => ({\n        uid: `${file.name}-${file.lastModified}-${file.size}`,\n        name: file.name,\n        url: await readAsDataUrl(file),\n      })),\n    );\n\n    onChange([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    onChange(files.filter(file => file.uid !== uid));\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        htmlFor={inputId}\n        onDragOver={e => {\n          e.preventDefault();\n          if (!disabled) {\n            setIsDragOver(true);\n          }\n        }}\n        onDragLeave={() => setIsDragOver(false)}\n        onDrop={e => {\n          e.preventDefault();\n          setIsDragOver(false);\n\n          if (disabled) {\n            return;\n          }\n\n          if (e.dataTransfer.files.length) {\n            addFiles(e.dataTransfer.files);\n          }\n        }}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragOver && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(e.target.files);\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'flex flex-col gap-2',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                'flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;;AAiCA,MAAM,WAAW,SACf,gBAAgB,KAAK,KAAK,IAAI,IAC9B,+BAA+B,KAAK,KAAK,KAAK;AAEhD,MAAMA,YAAU,EACd,eAAe,EAAE,EACjB,OAAO,QACP,WAAW,MACX,SAAS,WACT,UACA,UACA,WACA,YACA,UAAU,kBAAkB,SACjB;CACX,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,mBAAmB,wBACxB,SAAuB,aAAa;CAEtC,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,SAAuB;AACvC,MAAI,CAAC,WACH,sBAAqB,KAAK;AAE5B,YAAU,KAAK;;CAGjB,MAAM,WAAW,OAAO,aAAuB;EAC7C,MAAM,WAAW,MAAM,KAAK,SAAS;EACrC,MAAM,YACJ,OAAO,aAAa,WAChB,KAAK,IAAI,GAAG,WAAW,MAAM,OAAO,GACpC,SAAS;EAEf,MAAM,WAAW,SAAS,MAAM,GAAG,UAAU;EAE7C,MAAM,WAAW,MAAM,QAAQ,IAC7B,SAAS,IAAI,OAAM,UAAS;GAC1B,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,aAAa,GAAG,KAAK;GAC/C,MAAM,KAAK;GACX,KAAK,MAAM,cAAc,KAAK;GAC/B,EAAE,CACJ;AAED,WAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;;CAGnC,MAAM,cAAc,QAAgB;AAClC,WAAS,MAAM,QAAO,SAAQ,KAAK,QAAQ,IAAI,CAAC;;AAGlD,QACE,qBAAC;EACC,WAAW,GACT,uBACA,UAED;aAED,qBAAC;GACC,SAAS;GACT,aAAY,MAAK;AACf,MAAE,gBAAgB;AAClB,QAAI,CAAC,SACH,eAAc,KAAK;;GAGvB,mBAAmB,cAAc,MAAM;GACvC,SAAQ,MAAK;AACX,MAAE,gBAAgB;AAClB,kBAAc,MAAM;AAEpB,QAAI,SACF;AAGF,QAAI,EAAE,aAAa,MAAM,OACvB,UAAS,EAAE,aAAa,MAAM;;GAGlC,WAAW,GACT,kEACA,mDACA,iCACA,qBACA,cAAc,4BACd,YAAY,qDACZ,YAAY,SAEb;;IAED,oBAACC,UAAW,WAAU,WAAW;IACjC,qBAAC;KAAK;KAAmB,WAAW,MAAM;KAAG;QAAiB;IAC9D,oBAAC;KACC,IAAI;KACJ,MAAK;KACG;KACE;KACA;KACV,WAAU;KACV,WAAU,MAAK;AACb,UAAI,EAAE,OAAO,OAAO,OAClB,UAAS,EAAE,OAAO,MAAM;AAE1B,QAAE,OAAO,QAAQ;;MAEnB;;IACI,EAEP,MAAM,SAAS,KACd,oBAAC;GACC,WAAW,GACT,uBACA,YAAY,KAEb;aAEA,MAAM,KAAI,SACT,qBAAC;IAEC,WAAW,GACT,iDACA,YAAY,KAEb;;KAEA,QAAQ,KAAK,IACZ,oBAAC;MACC,KAAK,KAAK;MACV,KAAI;MACJ,WAAU;OACV;KAEJ,oBAAC;MAAK,WAAU;gBAA2B,KAAK;OAAY;KAC5D,oBAAC;MACC,MAAK;MACL,OAAM;MACN,MAAK;MACL,MAAM,oBAAC,KAAE,WAAU,WAAW;MAC9B,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;OAC3B;;MAvBG,KAAK,IAwBP,CACL;IACC;GAEH"}
+{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport {\n  useControllableState,\n  useFileDrop,\n  useFileToDataUrl,\n} from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [files, setFiles] = useControllableState<UploadFile[]>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const addFiles = async (incoming: File[]) => {\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n\n    const uploaded = await Promise.all(\n      accepted.map(async file => ({\n        uid: `${file.name}-${file.lastModified}-${file.size}`,\n        name: file.name,\n        url: await readAsDataUrl(file),\n      })),\n    );\n\n    setFiles([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    setFiles(files.filter(file => file.uid !== uid));\n  };\n\n  const { dropRef, isDragging } = useFileDrop<HTMLLabelElement>({\n    accept,\n    multiple,\n    disabled,\n    onDrop: addFiles,\n  });\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        ref={dropRef}\n        htmlFor={inputId}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragging && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(Array.from(e.target.files));\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'flex flex-col gap-2',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                'flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,WAAW,SACf,gBAAgB,KAAK,KAAK,IAAI,IAC9B,+BAA+B,KAAK,KAAK,KAAK;AAEhD,MAAMA,YAAU,EACd,eAAe,EAAE,EACjB,OAAO,QACP,WAAW,MACX,SAAS,WACT,UACA,UACA,WACA,YACA,UAAU,kBAAkB,SACjB;CACX,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,OAAO,YAAY,qBAAmC;EAC3D,OAAO;EACP;EACA,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,OAAO,aAAqB;EAC3C,MAAM,YACJ,OAAO,aAAa,WAChB,KAAK,IAAI,GAAG,WAAW,MAAM,OAAO,GACpC,SAAS;EAEf,MAAM,WAAW,SAAS,MAAM,GAAG,UAAU;EAE7C,MAAM,WAAW,MAAM,QAAQ,IAC7B,SAAS,IAAI,OAAM,UAAS;GAC1B,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,aAAa,GAAG,KAAK;GAC/C,MAAM,KAAK;GACX,KAAK,MAAM,cAAc,KAAK;GAC/B,EAAE,CACJ;AAED,WAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;;CAGnC,MAAM,cAAc,QAAgB;AAClC,WAAS,MAAM,QAAO,SAAQ,KAAK,QAAQ,IAAI,CAAC;;CAGlD,MAAM,EAAE,SAAS,eAAe,YAA8B;EAC5D;EACA;EACA;EACA,QAAQ;EACT,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GACT,uBACA,UAED;aAED,qBAAC;GACC,KAAK;GACL,SAAS;GACT,WAAW,GACT,kEACA,mDACA,iCACA,qBACA,cAAc,4BACd,YAAY,qDACZ,YAAY,SAEb;;IAED,oBAACC,UAAW,WAAU,WAAW;IACjC,qBAAC;KAAK;KAAmB,WAAW,MAAM;KAAG;QAAiB;IAC9D,oBAAC;KACC,IAAI;KACJ,MAAK;KACG;KACE;KACA;KACV,WAAU;KACV,WAAU,MAAK;AACb,UAAI,EAAE,OAAO,OAAO,OAClB,UAAS,MAAM,KAAK,EAAE,OAAO,MAAM,CAAC;AAEtC,QAAE,OAAO,QAAQ;;MAEnB;;IACI,EAEP,MAAM,SAAS,KACd,oBAAC;GACC,WAAW,GACT,uBACA,YAAY,KAEb;aAEA,MAAM,KAAI,SACT,qBAAC;IAEC,WAAW,GACT,iDACA,YAAY,KAEb;;KAEA,QAAQ,KAAK,IACZ,oBAAC;MACC,KAAK,KAAK;MACV,KAAI;MACJ,WAAU;OACV;KAEJ,oBAAC;MAAK,WAAU;gBAA2B,KAAK;OAAY;KAC5D,oBAAC;MACC,MAAK;MACL,OAAM;MACN,MAAK;MACL,MAAM,oBAAC,KAAE,WAAU,WAAW;MAC9B,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;OAC3B;;MAvBG,KAAK,IAwBP,CACL;IACC;GAEH"}

package/dist/components/organisms/list/list.mjs

@@ -9,7 +9,7 @@ import { useIntersectionObserver } from "@jbpark/use-hooks";
 
 //#region src/components/organisms/list/list.tsx
 const List = ({ loading, loaderProps, loader, header, title, titleLevel = 2, empty, scroll, data, className, classNames, renderItem = () => null, itemKey, ...props }) => {
-	const [loaderRef, entry] = useIntersectionObserver({
+	const [loaderRef, { isIntersecting }] = useIntersectionObserver({
 		threshold: 0,
 		root: null,
 		rootMargin: "0px",
@@ -22,11 +22,11 @@ const List = ({ loading, loaderProps, loader, header, title, titleLevel = 2, emp
 			fetchingRef.current = false;
 			return;
 		}
-		if (entry?.isIntersecting && scroll.hasMore && !fetchingRef.current) {
+		if (isIntersecting && scroll.hasMore && !fetchingRef.current) {
 			fetchingRef.current = true;
 			scroll.next();
 		}
-	}, [entry, scroll]);
+	}, [isIntersecting, scroll]);
 	if (loading) return loader || /* @__PURE__ */ jsxs("div", {
 		className: cn(className),
 		...props,

package/dist/components/organisms/list/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useIntersectionObserver } from '@jbpark/use-hooks';\n\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/skeleton';\nimport { Title } from '../../atoms/typography';\n\ninterface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title'\n> {\n  loading?: boolean;\n  loaderProps?: React.ComponentProps<typeof Skeleton>;\n  loader?: React.ReactNode;\n  title?: React.ReactNode;\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  header?: React.ReactNode;\n  empty?: React.ReactNode;\n  classNames?: {\n    title?: string;\n    header?: string;\n    body?: string;\n  };\n  scroll?: {\n    hasMore: boolean;\n    loading: boolean;\n    loader?: React.ReactNode;\n    options?: IntersectionObserverInit;\n    /**\n     * Called when more items should be fetched. `List` tracks in-flight\n     * requests via `loading` — the caller MUST flip `loading` back to\n     * `false` when the fetch settles, including on failure/rejection.\n     * If `loading` never becomes `false` again after a failed fetch,\n     * `List` will stop calling `next()` for subsequent intersections.\n     */\n    next: () => void;\n  };\n  data?: T[];\n  renderItem?: (item: T, index: number) => React.ReactNode;\n  itemKey?: (item: T, index: number) => React.Key;\n}\n\nconst List = <T,>({\n  loading,\n  loaderProps,\n  loader,\n  header,\n  title,\n  titleLevel = 2,\n  empty,\n  scroll,\n  data,\n  className,\n  classNames,\n  renderItem = () => null,\n  itemKey,\n  ...props\n}: Props<T>) => {\n  const [loaderRef, entry] = useIntersectionObserver({\n    threshold: 0,\n    root: null,\n    rootMargin: '0px',\n    ...scroll?.options,\n  });\n\n  // `scroll` is typically a new object identity every render, so this\n  // effect re-runs often. Guard with a ref (updated synchronously, unlike\n  // the `loading` prop which only reflects the caller's next state update)\n  // to avoid firing `next()` again for the same in-flight request before\n  // the caller's `loading` has had a chance to become true.\n  const fetchingRef = useRef(false);\n\n  useEffect(() => {\n    if (!scroll) {\n      return;\n    }\n\n    if (scroll.loading) {\n      fetchingRef.current = false;\n      return;\n    }\n\n    if (entry?.isIntersecting && scroll.hasMore && !fetchingRef.current) {\n      fetchingRef.current = true;\n      scroll.next();\n    }\n  }, [entry, scroll]);\n\n  if (loading) {\n    return (\n      loader || (\n        <div className={cn(className)} {...props}>\n          <div className={cn(classNames?.title)}>{title && <Skeleton />}</div>\n          <div className={cn(classNames?.header)}>\n            {header && <Skeleton size=\"small\" />}\n          </div>\n          <div className={cn('space-y-2', classNames?.body)}>\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          </div>\n        </div>\n      )\n    );\n  }\n\n  if (!data?.length && empty) {\n    return (\n      <div className={cn(className)} {...props}>\n        {empty}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <Title\n          level={titleLevel}\n          className={cn(\n            'px-1.5 py-4',\n            'text-black-90 text-lg leading-5.75 font-bold',\n            //\n          )}\n        >\n          {v}\n        </Title>\n      ))}\n      <div className={cn(classNames?.header)}>{header}</div>\n      <div role=\"list\" className={cn('space-y-2', classNames?.body)}>\n        {data?.map((item, i) =>\n          itemKey ? (\n            <React.Fragment key={itemKey(item, i)}>\n              {renderItem(item, i)}\n            </React.Fragment>\n          ) : (\n            renderItem(item, i)\n          ),\n        )}\n        {scroll?.loading &&\n          (scroll?.loader ?? (\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          ))}\n        {scroll && <div ref={loaderRef} />}\n      </div>\n    </div>\n  );\n};\n\nexport default List;\n"],"mappings":";;;;;;;;;;AA8CA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,aAAa,GACb,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,SACA,GAAG,YACW;CACd,MAAM,CAAC,WAAW,SAAS,wBAAwB;EACjD,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;CAOF,MAAM,cAAc,OAAO,MAAM;AAEjC,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,SAAS;AAClB,eAAY,UAAU;AACtB;;AAGF,MAAI,OAAO,kBAAkB,OAAO,WAAW,CAAC,YAAY,SAAS;AACnE,eAAY,UAAU;AACtB,UAAO,MAAM;;IAEd,CAAC,OAAO,OAAO,CAAC;AAEnB,KAAI,QACF,QACE,UACE,qBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;;GACjC,oBAAC;IAAI,WAAW,GAAG,YAAY,MAAM;cAAG,SAAS,oBAAC,aAAW;KAAO;GACpE,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cACnC,UAAU,oBAAC,YAAS,MAAK,UAAU;KAChC;GACN,oBAAC;IAAI,WAAW,GAAG,aAAa,YAAY,KAAK;cAC/C,oBAAC,SAAS;KAAK,OAAO;KAAI,KAAK;KAAI,GAAI;MAAe;KAClD;;GACF;AAKZ,KAAI,CAAC,MAAM,UAAU,MACnB,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;YAChC;GACG;AAIV,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,OAAO;IACP,WAAW,GACT,eACA,+CAED;cAEA;KACK,CACR;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,MAAK;IAAO,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC1D,MAAM,KAAK,MAAM,MAChB,UACE,oBAAC,MAAM,sBACJ,WAAW,MAAM,EAAE,IADD,QAAQ,MAAM,EAAE,CAEpB,GAEjB,WAAW,MAAM,EAAE,CAEtB;KACA,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAEzD,UAAU,oBAAC,SAAI,KAAK,YAAa;;KAC9B;;GACF"}
+{"version":3,"file":"list.mjs","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useIntersectionObserver } from '@jbpark/use-hooks';\n\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/skeleton';\nimport { Title } from '../../atoms/typography';\n\ninterface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title'\n> {\n  loading?: boolean;\n  loaderProps?: React.ComponentProps<typeof Skeleton>;\n  loader?: React.ReactNode;\n  title?: React.ReactNode;\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  header?: React.ReactNode;\n  empty?: React.ReactNode;\n  classNames?: {\n    title?: string;\n    header?: string;\n    body?: string;\n  };\n  scroll?: {\n    hasMore: boolean;\n    loading: boolean;\n    loader?: React.ReactNode;\n    options?: IntersectionObserverInit;\n    /**\n     * Called when more items should be fetched. `List` tracks in-flight\n     * requests via `loading` — the caller MUST flip `loading` back to\n     * `false` when the fetch settles, including on failure/rejection.\n     * If `loading` never becomes `false` again after a failed fetch,\n     * `List` will stop calling `next()` for subsequent intersections.\n     */\n    next: () => void;\n  };\n  data?: T[];\n  renderItem?: (item: T, index: number) => React.ReactNode;\n  itemKey?: (item: T, index: number) => React.Key;\n}\n\nconst List = <T,>({\n  loading,\n  loaderProps,\n  loader,\n  header,\n  title,\n  titleLevel = 2,\n  empty,\n  scroll,\n  data,\n  className,\n  classNames,\n  renderItem = () => null,\n  itemKey,\n  ...props\n}: Props<T>) => {\n  const [loaderRef, { isIntersecting }] = useIntersectionObserver({\n    threshold: 0,\n    root: null,\n    rootMargin: '0px',\n    ...scroll?.options,\n  });\n\n  // `scroll` is typically a new object identity every render, so this\n  // effect re-runs often. Guard with a ref (updated synchronously, unlike\n  // the `loading` prop which only reflects the caller's next state update)\n  // to avoid firing `next()` again for the same in-flight request before\n  // the caller's `loading` has had a chance to become true.\n  const fetchingRef = useRef(false);\n\n  useEffect(() => {\n    if (!scroll) {\n      return;\n    }\n\n    if (scroll.loading) {\n      fetchingRef.current = false;\n      return;\n    }\n\n    if (isIntersecting && scroll.hasMore && !fetchingRef.current) {\n      fetchingRef.current = true;\n      scroll.next();\n    }\n  }, [isIntersecting, scroll]);\n\n  if (loading) {\n    return (\n      loader || (\n        <div className={cn(className)} {...props}>\n          <div className={cn(classNames?.title)}>{title && <Skeleton />}</div>\n          <div className={cn(classNames?.header)}>\n            {header && <Skeleton size=\"small\" />}\n          </div>\n          <div className={cn('space-y-2', classNames?.body)}>\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          </div>\n        </div>\n      )\n    );\n  }\n\n  if (!data?.length && empty) {\n    return (\n      <div className={cn(className)} {...props}>\n        {empty}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <Title\n          level={titleLevel}\n          className={cn(\n            'px-1.5 py-4',\n            'text-black-90 text-lg leading-5.75 font-bold',\n            //\n          )}\n        >\n          {v}\n        </Title>\n      ))}\n      <div className={cn(classNames?.header)}>{header}</div>\n      <div role=\"list\" className={cn('space-y-2', classNames?.body)}>\n        {data?.map((item, i) =>\n          itemKey ? (\n            <React.Fragment key={itemKey(item, i)}>\n              {renderItem(item, i)}\n            </React.Fragment>\n          ) : (\n            renderItem(item, i)\n          ),\n        )}\n        {scroll?.loading &&\n          (scroll?.loader ?? (\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          ))}\n        {scroll && <div ref={loaderRef} />}\n      </div>\n    </div>\n  );\n};\n\nexport default List;\n"],"mappings":";;;;;;;;;;AA8CA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,aAAa,GACb,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,SACA,GAAG,YACW;CACd,MAAM,CAAC,WAAW,EAAE,oBAAoB,wBAAwB;EAC9D,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;CAOF,MAAM,cAAc,OAAO,MAAM;AAEjC,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,SAAS;AAClB,eAAY,UAAU;AACtB;;AAGF,MAAI,kBAAkB,OAAO,WAAW,CAAC,YAAY,SAAS;AAC5D,eAAY,UAAU;AACtB,UAAO,MAAM;;IAEd,CAAC,gBAAgB,OAAO,CAAC;AAE5B,KAAI,QACF,QACE,UACE,qBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;;GACjC,oBAAC;IAAI,WAAW,GAAG,YAAY,MAAM;cAAG,SAAS,oBAAC,aAAW;KAAO;GACpE,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cACnC,UAAU,oBAAC,YAAS,MAAK,UAAU;KAChC;GACN,oBAAC;IAAI,WAAW,GAAG,aAAa,YAAY,KAAK;cAC/C,oBAAC,SAAS;KAAK,OAAO;KAAI,KAAK;KAAI,GAAI;MAAe;KAClD;;GACF;AAKZ,KAAI,CAAC,MAAM,UAAU,MACnB,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;YAChC;GACG;AAIV,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,OAAO;IACP,WAAW,GACT,eACA,+CAED;cAEA;KACK,CACR;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,MAAK;IAAO,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC1D,MAAM,KAAK,MAAM,MAChB,UACE,oBAAC,MAAM,sBACJ,WAAW,MAAM,EAAE,IADD,QAAQ,MAAM,EAAE,CAEpB,GAEjB,WAAW,MAAM,EAAE,CAEtB;KACA,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAEzD,UAAU,oBAAC,SAAI,KAAK,YAAa;;KAC9B;;GACF"}

package/dist/components/organisms/toast.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";;;KAaK,SAAA;AAAA,UAEY,KAAA;EACf,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,QAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,SAAA;EACA,OAAA;AAAA;AAAA,UAGQ,WAAA,SAAoB,KAAA;EAC5B,EAAA;EACA,QAAA;EACA,SAAA,GAAY,WAAA;AAAA;AAAA,cA6DR,KAAA;EAAA;;;;;;;;;KASH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cAmKa,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;iBAEtB,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;eAE3B,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;iBAEvB,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;AAAA;AAAA,KAR5C,cAAA,GAAiB,IAAA,CAAK,WAAA"}
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";;;KAcK,SAAA;AAAA,UAEY,KAAA;EACf,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,QAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,SAAA;EACA,OAAA;AAAA;AAAA,UAGQ,WAAA,SAAoB,KAAA;EAC5B,EAAA;EACA,QAAA;EACA,SAAA,GAAY,WAAA;AAAA;AAAA,cA6DR,KAAA;EAAA;;;;;;;;;KASH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cA2Ja,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;iBAEtB,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;eAE3B,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;iBAEvB,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;AAAA;AAAA,KAR5C,cAAA,GAAiB,IAAA,CAAK,WAAA"}

package/dist/components/organisms/toast.mjs

@@ -5,6 +5,7 @@ import Button from "../../Button.mjs";
 import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTimeout } from "@jbpark/use-hooks";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { v4 } from "uuid";
@@ -98,11 +99,7 @@ const StaticToast = ({ id, duration = DEFAULT_DURATION, container, onClose, ...p
 			Toast.destroy(id);
 		}, 200);
 	};
-	useEffect(() => {
-		if (!duration) return;
-		const timer = setTimeout(close, duration);
-		return () => clearTimeout(timer);
-	}, [duration]);
+	useTimeout(close, duration || null);
 	if (!isBrowser) return null;
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		className: cn("transition-all duration-200", visible ? "opacity-100" : "translate-x-2 opacity-0"),

package/dist/components/organisms/toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.mjs","names":["uuid"],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\ntype ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  type?: ToastType;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState = {\n  stack: StaticProps[];\n  update: (() => void) | null;\n};\n\nconst containerStates = new Map<HTMLElement, ContainerState>();\n\nconst getContainerState = (container: HTMLElement): ContainerState => {\n  let state = containerStates.get(container);\n\n  if (!state) {\n    state = { stack: [], update: null };\n    containerStates.set(container, state);\n  }\n\n  return state;\n};\n\nconst createToastRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#toast-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'toast-root');\n    rootEl.setAttribute('role', 'region');\n    rootEl.setAttribute('aria-label', 'Notifications');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'fixed';\n    rootEl.style.right = '0';\n    rootEl.style.bottom = '0';\n    rootEl.style.display = 'flex';\n    rootEl.style.flexDirection = 'column-reverse';\n    rootEl.style.gap = '8px';\n    rootEl.style.padding = '16px';\n    rootEl.style.pointerEvents = 'none';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst TYPE_ICONS: Record<ToastType, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  type,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || type) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (type && TYPE_ICONS[type])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          type=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label=\"Close\"\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps) => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      Toast.destroy(id);\n    }, 200);\n  };\n\n  useEffect(() => {\n    if (!duration) {\n      return;\n    }\n\n    const timer = setTimeout(close, duration);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [duration]);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    createToastRoot(container)!,\n  );\n};\n\nconst ToastStackRenderer = ({ container }: { container: HTMLElement }) => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    const state = getContainerState(container);\n    state.update = () => forceUpdate({});\n    return () => {\n      state.update = null;\n    };\n  }, [container]);\n\n  const { stack } = getContainerState(container);\n\n  return (\n    <>\n      {stack.map(({ id, ...props }) => (\n        <StaticToast key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst toastRoots = new Map<HTMLElement, Root>();\n\nconst renderToast = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createToastRoot(targetContainer)!;\n\n  if (!toastRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    toastRoots.set(targetContainer, root);\n    root.render(<ToastStackRenderer container={targetContainer} />);\n  }\n\n  const state = getContainerState(targetContainer);\n  const id = props.id || uuid();\n  state.stack.push({ ...props, id });\n  state.update?.();\n\n  return id;\n};\n\nToast.destroy = (id?: string) => {\n  if (!id) {\n    containerStates.forEach(state => {\n      state.stack = [];\n      state.update?.();\n    });\n    toastRoots.forEach(root => root.unmount());\n    toastRoots.clear();\n    containerStates.clear();\n    return;\n  }\n\n  containerStates.forEach((state, container) => {\n    if (!state.stack.some(toast => toast.id === id)) {\n      return;\n    }\n\n    state.stack = state.stack.filter(toast => toast.id !== id);\n    state.update?.();\n\n    if (!state.stack.length) {\n      toastRoots.get(container)?.unmount();\n      toastRoots.delete(container);\n      containerStates.delete(container);\n    }\n  });\n};\n\nToast.destroyAll = () => {\n  Toast.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'type' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":"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"}
+{"version":3,"file":"toast.mjs","names":["uuid"],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\ntype ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  type?: ToastType;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState = {\n  stack: StaticProps[];\n  update: (() => void) | null;\n};\n\nconst containerStates = new Map<HTMLElement, ContainerState>();\n\nconst getContainerState = (container: HTMLElement): ContainerState => {\n  let state = containerStates.get(container);\n\n  if (!state) {\n    state = { stack: [], update: null };\n    containerStates.set(container, state);\n  }\n\n  return state;\n};\n\nconst createToastRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#toast-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'toast-root');\n    rootEl.setAttribute('role', 'region');\n    rootEl.setAttribute('aria-label', 'Notifications');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'fixed';\n    rootEl.style.right = '0';\n    rootEl.style.bottom = '0';\n    rootEl.style.display = 'flex';\n    rootEl.style.flexDirection = 'column-reverse';\n    rootEl.style.gap = '8px';\n    rootEl.style.padding = '16px';\n    rootEl.style.pointerEvents = 'none';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst TYPE_ICONS: Record<ToastType, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  type,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || type) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (type && TYPE_ICONS[type])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          type=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label=\"Close\"\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps) => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      Toast.destroy(id);\n    }, 200);\n  };\n\n  useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    createToastRoot(container)!,\n  );\n};\n\nconst ToastStackRenderer = ({ container }: { container: HTMLElement }) => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    const state = getContainerState(container);\n    state.update = () => forceUpdate({});\n    return () => {\n      state.update = null;\n    };\n  }, [container]);\n\n  const { stack } = getContainerState(container);\n\n  return (\n    <>\n      {stack.map(({ id, ...props }) => (\n        <StaticToast key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst toastRoots = new Map<HTMLElement, Root>();\n\nconst renderToast = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createToastRoot(targetContainer)!;\n\n  if (!toastRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    toastRoots.set(targetContainer, root);\n    root.render(<ToastStackRenderer container={targetContainer} />);\n  }\n\n  const state = getContainerState(targetContainer);\n  const id = props.id || uuid();\n  state.stack.push({ ...props, id });\n  state.update?.();\n\n  return id;\n};\n\nToast.destroy = (id?: string) => {\n  if (!id) {\n    containerStates.forEach(state => {\n      state.stack = [];\n      state.update?.();\n    });\n    toastRoots.forEach(root => root.unmount());\n    toastRoots.clear();\n    containerStates.clear();\n    return;\n  }\n\n  containerStates.forEach((state, container) => {\n    if (!state.stack.some(toast => toast.id === id)) {\n      return;\n    }\n\n    state.stack = state.stack.filter(toast => toast.id !== id);\n    state.update?.();\n\n    if (!state.stack.length) {\n      toastRoots.get(container)?.unmount();\n      toastRoots.delete(container);\n      containerStates.delete(container);\n    }\n  });\n};\n\nToast.destroyAll = () => {\n  Toast.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'type' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  renderToast({ type: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":"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"}

package/dist/core/badge.d.mts

@@ -8,7 +8,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+  variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/button.d.mts

@@ -8,8 +8,8 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/core/radio-group.d.mts

@@ -12,8 +12,12 @@ declare function RadioGroup$1({
 }: React$1.ComponentProps<typeof RadioGroup.Root>): react_jsx_runtime0.JSX.Element;
 declare function RadioGroupItem({
   className,
+  asChild,
+  children,
   ...props
-}: React$1.ComponentProps<typeof RadioGroup.Item>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof RadioGroup.Item> & {
+  asChild?: boolean;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RadioGroup$1 as RadioGroup, radio_group_d_exports };
 //# sourceMappingURL=radio-group.d.mts.map

package/dist/core/radio-group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.mts","names":[],"sources":["../../src/core/radio-group.tsx"],"mappings":";;;;;;;;iBASS,YAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/C,cAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"radio-group.d.mts","names":[],"sources":["../../src/core/radio-group.tsx"],"mappings":";;;;;;;;iBASS,YAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/C,cAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAoB,IAAA;EACjD,OAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/radio-group.mjs

@@ -19,7 +19,13 @@ function RadioGroup$1({ className, ...props }) {
 		...props
 	});
 }
-function RadioGroupItem({ className, ...props }) {
+function RadioGroupItem({ className, asChild, children, ...props }) {
+	if (asChild) return /* @__PURE__ */ jsx(RadioGroup.Item, {
+		asChild: true,
+		"data-slot": "radio-group-item",
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(RadioGroup.Item, {
 		"data-slot": "radio-group-item",
 		className: cn(`border-input text-primary focus-visible:border-ring

package/dist/core/radio-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.mjs","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../src/core/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CircleIcon } from 'lucide-react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        `border-input text-primary focus-visible:border-ring\n        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border\n        shadow-xs transition-[color,box-shadow] outline-none\n        focus-visible:ring-[3px] disabled:cursor-not-allowed\n        disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon\n          className=\"fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;;;;;;;AASA,SAASA,aAAW,EAClB,WACA,GAAG,SACqD;AACxD,QACE,oBAACC,WAAoB;EACnB,aAAU;EACV,WAAW,GAAG,cAAc,UAAU;EACtC,GAAI;GACJ;;AAIN,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;AACxD,QACE,oBAACA,WAAoB;EACnB,aAAU;EACV,WAAW,GACT;;;;;;8BAOA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAoB;GACnB,aAAU;GACV,WAAU;aAEV,oBAAC,cACC,WAAU,iGAEV;IAC4B;GACP"}
+{"version":3,"file":"radio-group.mjs","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../src/core/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CircleIcon } from 'lucide-react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  asChild,\n  children,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  asChild?: boolean;\n}) {\n  // `asChild` hands the rendered element to `children` entirely (e.g. a\n  // `Button`), so the default dot indicator doesn't apply — Radix clones\n  // its own role/aria-checked/keyboard handling onto that single child\n  // instead of onto its own `<button>`.\n  if (asChild) {\n    return (\n      <RadioGroupPrimitive.Item asChild data-slot=\"radio-group-item\" {...props}>\n        {children}\n      </RadioGroupPrimitive.Item>\n    );\n  }\n\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        `border-input text-primary focus-visible:border-ring\n        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border\n        shadow-xs transition-[color,box-shadow] outline-none\n        focus-visible:ring-[3px] disabled:cursor-not-allowed\n        disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon\n          className=\"fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;;;;;;;AASA,SAASA,aAAW,EAClB,WACA,GAAG,SACqD;AACxD,QACE,oBAACC,WAAoB;EACnB,aAAU;EACV,WAAW,GAAG,cAAc,UAAU;EACtC,GAAI;GACJ;;AAIN,SAAS,eAAe,EACtB,WACA,SACA,UACA,GAAG,SAGF;AAKD,KAAI,QACF,QACE,oBAACA,WAAoB;EAAK;EAAQ,aAAU;EAAmB,GAAI;EAChE;GACwB;AAI/B,QACE,oBAACA,WAAoB;EACnB,aAAU;EACV,WAAW,GACT;;;;;;8BAOA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAoB;GACnB,aAAU;GACV,WAAU;aAEV,oBAAC,cACC,WAAU,iGAEV;IAC4B;GACP"}

package/dist/style.css

@@ -275,27 +275,15 @@
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
-  .right-full {
-    right: 100%;
-  }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
-  .bottom-full {
-    bottom: 100%;
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -893,6 +881,10 @@
     border-top-left-radius: 30px !important;
     border-top-right-radius: 30px !important;
   }
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
   .rounded-l-lg {
     border-top-left-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
@@ -917,6 +909,10 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  .rounded-b-lg {
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1621,42 +1617,6 @@
       position: absolute;
     }
   }
-  .before\:top-0 {
-    &::before {
-      content: var(--tw-content);
-      top: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:top-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      top: calc(1/2 * 100%);
-    }
-  }
-  .before\:right-0 {
-    &::before {
-      content: var(--tw-content);
-      right: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:bottom-0 {
-    &::before {
-      content: var(--tw-content);
-      bottom: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:left-0 {
-    &::before {
-      content: var(--tw-content);
-      left: calc(var(--spacing) * 0);
-    }
-  }
-  .before\:left-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      left: calc(1/2 * 100%);
-    }
-  }
   .before\:h-0 {
     &::before {
       content: var(--tw-content);
@@ -1669,20 +1629,6 @@
       width: calc(var(--spacing) * 0);
     }
   }
-  .before\:-translate-x-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .before\:-translate-y-1\/2 {
-    &::before {
-      content: var(--tw-content);
-      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .before\:border-t-\[9px\] {
     &::before {
       content: var(--tw-content);
@@ -1777,66 +1723,12 @@
       inset-block: calc(var(--spacing) * 0);
     }
   }
-  .after\:-top-px {
-    &::after {
-      content: var(--tw-content);
-      top: -1px;
-    }
-  }
-  .after\:top-1\/2 {
-    &::after {
-      content: var(--tw-content);
-      top: calc(1/2 * 100%);
-    }
-  }
-  .after\:top-px {
-    &::after {
-      content: var(--tw-content);
-      top: 1px;
-    }
-  }
-  .after\:-right-px {
-    &::after {
-      content: var(--tw-content);
-      right: -1px;
-    }
-  }
-  .after\:right-px {
-    &::after {
-      content: var(--tw-content);
-      right: 1px;
-    }
-  }
-  .after\:-bottom-px {
-    &::after {
-      content: var(--tw-content);
-      bottom: -1px;
-    }
-  }
-  .after\:bottom-px {
-    &::after {
-      content: var(--tw-content);
-      bottom: 1px;
-    }
-  }
-  .after\:-left-px {
-    &::after {
-      content: var(--tw-content);
-      left: -1px;
-    }
-  }
   .after\:left-1\/2 {
     &::after {
       content: var(--tw-content);
       left: calc(1/2 * 100%);
     }
   }
-  .after\:left-px {
-    &::after {
-      content: var(--tw-content);
-      left: 1px;
-    }
-  }
   .after\:h-0 {
     &::after {
       content: var(--tw-content);
@@ -1862,13 +1754,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .after\:-translate-y-1\/2 {
-    &::after {
-      content: var(--tw-content);
-      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .after\:border-t-8 {
     &::after {
       content: var(--tw-content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -126,7 +126,7 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@jbpark/use-hooks": "^2.6.0",
+    "@jbpark/use-hooks": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -146,7 +146,6 @@
     "react-colorful": "^5.6.1",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.10.0",
-    "react-use": "^17.6.0",
     "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.18",