@jbpark/ui-kit 10.2.0 → 10.4.0

package/dist/Table.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
-import Skeleton from "./components/atoms/skeleton/index.mjs";
+import Skeleton from "./Skeleton.mjs";
 import Pagination from "./Pagination.mjs";
-import Empty from "./components/templates/empty.mjs";
+import Empty from "./Empty.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/organisms/table.tsx

package/dist/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../src/components/organisms/table.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\nimport Pagination, {\n  type Props as PaginationProps,\n} from '../molecules/pagination';\nimport Empty from '../templates/empty';\n\nexport type PaginationOptions = Omit<PaginationProps, 'total'> &\n  ({ mode?: 'client'; total?: never } | { mode: 'server'; total: number });\n\nexport interface Column<T> {\n  key: React.Key;\n  title: React.ReactNode;\n  /** Field displayed when render is omitted. */\n  dataIndex?: keyof T;\n  render?: (record: T, index: number) => React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n  width?: string | number;\n  className?: string;\n  headerClassName?: string;\n}\n\nexport interface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'table'>,\n  'children'\n> {\n  columns: Column<T>[];\n  data?: T[];\n  /** Use a stable key when rows may be reordered or paged. */\n  rowKey?: (record: T, index: number) => React.Key;\n  caption?: React.ReactNode;\n  loading?: boolean;\n  empty?: React.ReactNode;\n  size?: 'small' | 'middle' | 'large';\n  bordered?: boolean;\n  striped?: boolean;\n  hoverable?: boolean;\n  /** true paginates data locally; server mode expects current-page data. */\n  pagination?: boolean | PaginationOptions;\n  classNames?: {\n    container?: string;\n    header?: string;\n    body?: string;\n    row?: string;\n    cell?: string;\n    empty?: string;\n    pagination?: string;\n  };\n}\n\nconst clampPage = (page: number, pageCount: number) =>\n  Math.min(\n    Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1),\n    Math.max(1, pageCount),\n  );\n\nconst normalizePageSize = (value: number) =>\n  Number.isFinite(value) && value >= 1 ? Math.floor(value) : 10;\n\nconst Table = <T,>({\n  columns,\n  data = [],\n  rowKey,\n  loading = false,\n  empty,\n  size,\n  bordered = false,\n  striped = false,\n  hoverable = true,\n  pagination = false,\n  caption,\n  className,\n  classNames,\n  ...props\n}: Props<T>) => {\n  const { componentSize } = useConfig();\n  const paginationOptions: PaginationOptions =\n    typeof pagination === 'object' ? pagination : {};\n  const {\n    mode = 'client',\n    total: serverTotal,\n    page: controlledPage,\n    defaultPage = 1,\n    pageSize: controlledPageSize,\n    defaultPageSize = 10,\n    onChange,\n    onPageSizeChange,\n    ...paginationProps\n  } = paginationOptions;\n  const [internal, setInternal] = useState(() => ({\n    page: defaultPage,\n    pageSize: normalizePageSize(defaultPageSize),\n    pageCount: 0,\n  }));\n  const pageSize = normalizePageSize(controlledPageSize ?? internal.pageSize);\n  const total = mode === 'server' ? (serverTotal ?? 0) : data.length;\n  const pageCount = Math.ceil(total / pageSize);\n\n  if (\n    pagination &&\n    controlledPage === undefined &&\n    internal.pageCount !== pageCount\n  ) {\n    setInternal(current => ({\n      ...current,\n      page: clampPage(current.page, pageCount),\n      pageCount,\n    }));\n  }\n\n  const page = clampPage(controlledPage ?? internal.page, pageCount);\n  const visibleData =\n    pagination && mode === 'client'\n      ? data.slice((page - 1) * pageSize, page * pageSize)\n      : data;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const cellPadding = {\n    small: 'px-3 py-2',\n    middle: 'px-4 py-3',\n    large: 'px-5 py-4',\n  }[resolvedSize];\n\n  const handlePageChange = (next: number) => {\n    if (controlledPage === undefined) {\n      setInternal(current => ({ ...current, page: next }));\n    }\n\n    onChange?.(next);\n  };\n\n  const handlePageSizeChange = (next: number) => {\n    if (controlledPageSize === undefined || controlledPage === undefined) {\n      setInternal(current => ({\n        ...current,\n        page: controlledPage === undefined ? 1 : current.page,\n        pageSize: controlledPageSize === undefined ? next : current.pageSize,\n        pageCount: Math.ceil(total / next),\n      }));\n    }\n\n    onPageSizeChange?.(next);\n  };\n\n  return (\n    <>\n      <div\n        data-slot=\"table-container\"\n        className={cn(\n          'w-full overflow-x-auto',\n          bordered && 'rounded-md border',\n          classNames?.container,\n          //\n        )}\n      >\n        <table\n          {...props}\n          data-slot=\"table\"\n          aria-busy={loading || undefined}\n          className={cn(\n            'w-full min-w-max border-collapse text-sm',\n            className,\n            //\n          )}\n        >\n          {caption && <caption className=\"mb-2 text-start\">{caption}</caption>}\n          <thead\n            data-slot=\"table-header\"\n            className={cn(\n              'bg-muted/50 border-b',\n              classNames?.header,\n              //\n            )}\n          >\n            <tr>\n              {columns.map(column => (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  style={{ width: column.width }}\n                  className={cn(\n                    'text-foreground font-medium',\n                    cellPadding,\n                    column.align === 'center' && 'text-center',\n                    column.align === 'right' && 'text-right',\n                    column.align === undefined && 'text-start',\n                    bordered && 'border-e last:border-e-0',\n                    classNames?.cell,\n                    column.headerClassName,\n                    //\n                  )}\n                >\n                  {column.title}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody data-slot=\"table-body\" className={classNames?.body}>\n            {loading ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cellPadding}\n                >\n                  <Skeleton count={3} className=\"py-2\" />\n                </td>\n              </tr>\n            ) : visibleData.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cn(cellPadding, classNames?.empty)}\n                >\n                  {empty ?? <Empty />}\n                </td>\n              </tr>\n            ) : (\n              visibleData.map((record, index) => (\n                <tr\n                  key={rowKey?.(record, index) ?? index}\n                  data-slot=\"table-row\"\n                  className={cn(\n                    'border-b last:border-b-0',\n                    striped && 'even:bg-muted/30',\n                    hoverable && 'hover:bg-muted/50',\n                    classNames?.row,\n                    //\n                  )}\n                >\n                  {columns.map(column => {\n                    const value =\n                      column.dataIndex === undefined\n                        ? undefined\n                        : record[column.dataIndex];\n\n                    return (\n                      <td\n                        key={column.key}\n                        data-slot=\"table-cell\"\n                        className={cn(\n                          cellPadding,\n                          column.align === 'center' && 'text-center',\n                          column.align === 'right' && 'text-right',\n                          bordered && 'border-e last:border-e-0',\n                          classNames?.cell,\n                          column.className,\n                          //\n                        )}\n                      >\n                        {column.render\n                          ? column.render(record, index)\n                          : value == null\n                            ? null\n                            : String(value)}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n      {pagination && (\n        <div\n          data-slot=\"table-pagination\"\n          className={cn(\n            'mt-4 flex justify-end',\n            classNames?.pagination,\n            //\n          )}\n        >\n          <Pagination\n            {...paginationProps}\n            total={total}\n            page={page}\n            pageSize={pageSize}\n            onChange={handlePageChange}\n            onPageSizeChange={handlePageSizeChange}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Table;\n"],"mappings":"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"}
+{"version":3,"file":"Table.mjs","names":[],"sources":["../src/components/organisms/table.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\nimport Empty from '../molecules/empty';\nimport Pagination, {\n  type Props as PaginationProps,\n} from '../molecules/pagination';\n\nexport type PaginationOptions = Omit<PaginationProps, 'total'> &\n  ({ mode?: 'client'; total?: never } | { mode: 'server'; total: number });\n\nexport interface Column<T> {\n  key: React.Key;\n  title: React.ReactNode;\n  /** Field displayed when render is omitted. */\n  dataIndex?: keyof T;\n  render?: (record: T, index: number) => React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n  width?: string | number;\n  className?: string;\n  headerClassName?: string;\n}\n\nexport interface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'table'>,\n  'children'\n> {\n  columns: Column<T>[];\n  data?: T[];\n  /** Use a stable key when rows may be reordered or paged. */\n  rowKey?: (record: T, index: number) => React.Key;\n  caption?: React.ReactNode;\n  loading?: boolean;\n  empty?: React.ReactNode;\n  size?: 'small' | 'middle' | 'large';\n  bordered?: boolean;\n  striped?: boolean;\n  hoverable?: boolean;\n  /** true paginates data locally; server mode expects current-page data. */\n  pagination?: boolean | PaginationOptions;\n  classNames?: {\n    container?: string;\n    header?: string;\n    body?: string;\n    row?: string;\n    cell?: string;\n    empty?: string;\n    pagination?: string;\n  };\n}\n\nconst clampPage = (page: number, pageCount: number) =>\n  Math.min(\n    Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1),\n    Math.max(1, pageCount),\n  );\n\nconst normalizePageSize = (value: number) =>\n  Number.isFinite(value) && value >= 1 ? Math.floor(value) : 10;\n\nconst Table = <T,>({\n  columns,\n  data = [],\n  rowKey,\n  loading = false,\n  empty,\n  size,\n  bordered = false,\n  striped = false,\n  hoverable = true,\n  pagination = false,\n  caption,\n  className,\n  classNames,\n  ...props\n}: Props<T>) => {\n  const { componentSize } = useConfig();\n  const paginationOptions: PaginationOptions =\n    typeof pagination === 'object' ? pagination : {};\n  const {\n    mode = 'client',\n    total: serverTotal,\n    page: controlledPage,\n    defaultPage = 1,\n    pageSize: controlledPageSize,\n    defaultPageSize = 10,\n    onChange,\n    onPageSizeChange,\n    ...paginationProps\n  } = paginationOptions;\n  const [internal, setInternal] = useState(() => ({\n    page: defaultPage,\n    pageSize: normalizePageSize(defaultPageSize),\n    pageCount: 0,\n  }));\n  const pageSize = normalizePageSize(controlledPageSize ?? internal.pageSize);\n  const total = mode === 'server' ? (serverTotal ?? 0) : data.length;\n  const pageCount = Math.ceil(total / pageSize);\n\n  if (\n    pagination &&\n    controlledPage === undefined &&\n    internal.pageCount !== pageCount\n  ) {\n    setInternal(current => ({\n      ...current,\n      page: clampPage(current.page, pageCount),\n      pageCount,\n    }));\n  }\n\n  const page = clampPage(controlledPage ?? internal.page, pageCount);\n  const visibleData =\n    pagination && mode === 'client'\n      ? data.slice((page - 1) * pageSize, page * pageSize)\n      : data;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const cellPadding = {\n    small: 'px-3 py-2',\n    middle: 'px-4 py-3',\n    large: 'px-5 py-4',\n  }[resolvedSize];\n\n  const handlePageChange = (next: number) => {\n    if (controlledPage === undefined) {\n      setInternal(current => ({ ...current, page: next }));\n    }\n\n    onChange?.(next);\n  };\n\n  const handlePageSizeChange = (next: number) => {\n    if (controlledPageSize === undefined || controlledPage === undefined) {\n      setInternal(current => ({\n        ...current,\n        page: controlledPage === undefined ? 1 : current.page,\n        pageSize: controlledPageSize === undefined ? next : current.pageSize,\n        pageCount: Math.ceil(total / next),\n      }));\n    }\n\n    onPageSizeChange?.(next);\n  };\n\n  return (\n    <>\n      <div\n        data-slot=\"table-container\"\n        className={cn(\n          'w-full overflow-x-auto',\n          bordered && 'rounded-md border',\n          classNames?.container,\n          //\n        )}\n      >\n        <table\n          {...props}\n          data-slot=\"table\"\n          aria-busy={loading || undefined}\n          className={cn(\n            'w-full min-w-max border-collapse text-sm',\n            className,\n            //\n          )}\n        >\n          {caption && <caption className=\"mb-2 text-start\">{caption}</caption>}\n          <thead\n            data-slot=\"table-header\"\n            className={cn(\n              'bg-muted/50 border-b',\n              classNames?.header,\n              //\n            )}\n          >\n            <tr>\n              {columns.map(column => (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  style={{ width: column.width }}\n                  className={cn(\n                    'text-foreground font-medium',\n                    cellPadding,\n                    column.align === 'center' && 'text-center',\n                    column.align === 'right' && 'text-right',\n                    column.align === undefined && 'text-start',\n                    bordered && 'border-e last:border-e-0',\n                    classNames?.cell,\n                    column.headerClassName,\n                    //\n                  )}\n                >\n                  {column.title}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody data-slot=\"table-body\" className={classNames?.body}>\n            {loading ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cellPadding}\n                >\n                  <Skeleton count={3} className=\"py-2\" />\n                </td>\n              </tr>\n            ) : visibleData.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={Math.max(columns.length, 1)}\n                  className={cn(cellPadding, classNames?.empty)}\n                >\n                  {empty ?? <Empty />}\n                </td>\n              </tr>\n            ) : (\n              visibleData.map((record, index) => (\n                <tr\n                  key={rowKey?.(record, index) ?? index}\n                  data-slot=\"table-row\"\n                  className={cn(\n                    'border-b last:border-b-0',\n                    striped && 'even:bg-muted/30',\n                    hoverable && 'hover:bg-muted/50',\n                    classNames?.row,\n                    //\n                  )}\n                >\n                  {columns.map(column => {\n                    const value =\n                      column.dataIndex === undefined\n                        ? undefined\n                        : record[column.dataIndex];\n\n                    return (\n                      <td\n                        key={column.key}\n                        data-slot=\"table-cell\"\n                        className={cn(\n                          cellPadding,\n                          column.align === 'center' && 'text-center',\n                          column.align === 'right' && 'text-right',\n                          bordered && 'border-e last:border-e-0',\n                          classNames?.cell,\n                          column.className,\n                          //\n                        )}\n                      >\n                        {column.render\n                          ? column.render(record, index)\n                          : value == null\n                            ? null\n                            : String(value)}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n      {pagination && (\n        <div\n          data-slot=\"table-pagination\"\n          className={cn(\n            'mt-4 flex justify-end',\n            classNames?.pagination,\n            //\n          )}\n        >\n          <Pagination\n            {...paginationProps}\n            total={total}\n            page={page}\n            pageSize={pageSize}\n            onChange={handlePageChange}\n            onPageSizeChange={handlePageSizeChange}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Table;\n"],"mappings":"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"}

package/dist/{components/molecules/tabs.d.mts → Tabs.d.mts}

@@ -1,9 +1,9 @@
-import { Tabs as Tabs$1 } from "../../core/tabs.mjs";
-import "../../core/index.mjs";
+import { Tabs as Tabs$1, tabs_d_exports } from "./core/tabs.mjs";
+import "./core/index.mjs";
 import { ReactNode } from "react";
 //#region src/components/molecules/tabs.d.ts
 declare const Core: typeof Tabs$1;
-interface Item {
+export interface Item {
   key: string;
   label: ReactNode;
   children: ReactNode;
@@ -11,7 +11,7 @@ interface Item {
   /** Decorative icon rendered before the label with consistent spacing. */
   icon?: ReactNode;
 }
-interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'onChange'> {
+export interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'onChange'> {
   items: Item[];
   /** Called when the selected tab changes. */
   onChange?: (value: string | number | null) => void;
@@ -37,5 +37,5 @@ interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'on
 }
 declare const Tabs: ({ items, listLabel, keepMounted, activateOnFocus, scrollable, fitted, extra, classNames, defaultValue, onChange, onValueChange, orientation, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Item, Props, Tabs as default };
-//# sourceMappingURL=tabs.d.mts.map
+export { Tabs as default };
+//# sourceMappingURL=Tabs.d.mts.map

package/dist/Tabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.mts","names":["tabs","tabs.Tabs"],"sources":["../src/components/molecules/tabs.tsx"],"mappings":";;;;cAQc,aAAIC;iBAED;EACf;EACA,OAAO;EACP,UAAU;EACV;;EAEA,OAAO;;iBAGQ,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,OAAO;;EAEP,YAAY;;EAEZ,gBAAgB,MAAM,sBAAsB;EAC5C;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;EACR;IACE;IACA;IACA;IACA;;;cAIE,SAAQ,OAAA,WAAA,aAAA,iBAAA,YAAA,QAAA,OAAA,YAAA,cAAA,UAAA,eAAA,gBAAA,SAcX,0BAAK,IAAA"}

package/dist/{components/molecules/tabs.mjs → Tabs.mjs}

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../../utils.mjs";
-import { tabs_exports } from "../../core/tabs.mjs";
+import { cn } from "./utils.mjs";
+import { tabs_exports } from "./core/tabs.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/tabs.tsx
 const { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs_exports;
@@ -52,4 +52,4 @@ const Tabs = ({ items, listLabel = "Tabs", keepMounted = false, activateOnFocus
 //#endregion
 export { Tabs as default };
 
-//# sourceMappingURL=tabs.mjs.map
+//# sourceMappingURL=Tabs.mjs.map

package/dist/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.mjs","names":["tabs"],"sources":["../src/components/molecules/tabs.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { tabs } from '../../core';\n\nconst { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs;\n\nexport interface Item {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  /** Decorative icon rendered before the label with consistent spacing. */\n  icon?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children' | 'onChange'\n> {\n  items: Item[];\n  /** Called when the selected tab changes. */\n  onChange?: (value: string | number | null) => void;\n  /** @deprecated Use `onChange` for the selected value. */\n  onValueChange?: React.ComponentProps<typeof Core>['onValueChange'];\n  listLabel?: string;\n  /** Preserve inactive panel DOM and local state. */\n  keepMounted?: boolean;\n  /** Select a tab when arrow-key focus moves to it. */\n  activateOnFocus?: boolean;\n  /** Scroll the tab list when its items exceed the available space. */\n  scrollable?: boolean;\n  /** Give tabs equal width in horizontal mode; ignored when scrollable. */\n  fitted?: boolean;\n  /** Content shown after the tab list, outside the tablist role. */\n  extra?: ReactNode;\n  classNames?: {\n    list?: string;\n    tab?: string;\n    panel?: string;\n    extra?: string;\n  };\n}\n\nconst Tabs = ({\n  items,\n  listLabel = 'Tabs',\n  keepMounted = false,\n  activateOnFocus = false,\n  scrollable = false,\n  fitted = false,\n  extra,\n  classNames,\n  defaultValue,\n  onChange,\n  onValueChange,\n  orientation = 'horizontal',\n  ...props\n}: Props) => {\n  const initialValue =\n    defaultValue === undefined\n      ? items.find(item => !item.disabled)?.key\n      : defaultValue;\n\n  return (\n    <Core\n      defaultValue={props.value === undefined ? initialValue : undefined}\n      orientation={orientation}\n      onValueChange={(value, eventDetails) => {\n        onChange?.(value);\n        onValueChange?.(value, eventDetails);\n      }}\n      {...props}\n    >\n      <div\n        data-slot=\"tabs-bar\"\n        className={cn(\n          'flex min-w-0 items-stretch',\n          orientation === 'vertical' && 'min-h-0 shrink-0 flex-col',\n          //\n        )}\n      >\n        <TabsList\n          aria-label={listLabel}\n          activateOnFocus={activateOnFocus}\n          className={cn(\n            'min-w-0 flex-1',\n            scrollable &&\n              (orientation === 'vertical'\n                ? 'min-h-0 overflow-y-auto'\n                : `[scrollbar-width:none] overflow-x-auto overflow-y-hidden\n                  [&::-webkit-scrollbar]:hidden`),\n            classNames?.list,\n            //\n          )}\n        >\n          {items.map(item => (\n            <TabsTab\n              key={item.key}\n              value={item.key}\n              disabled={item.disabled}\n              className={cn(\n                fitted &&\n                  !scrollable &&\n                  orientation === 'horizontal' &&\n                  'flex-1',\n                scrollable && 'shrink-0',\n                classNames?.tab,\n                //\n              )}\n            >\n              {item.icon != null && (\n                <span\n                  data-slot=\"tabs-icon\"\n                  aria-hidden=\"true\"\n                  className=\"inline-flex shrink-0 items-center\"\n                >\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </TabsTab>\n          ))}\n        </TabsList>\n        {extra != null && (\n          <div\n            data-slot=\"tabs-extra\"\n            className={cn(\n              `border-border flex shrink-0 items-center border-b px-3\n              data-[orientation=vertical]:border-r\n              data-[orientation=vertical]:border-b-0`,\n              classNames?.extra,\n              //\n            )}\n            data-orientation={orientation}\n          >\n            {extra}\n          </div>\n        )}\n      </div>\n      {items.map(item => (\n        <TabsPanel\n          key={item.key}\n          value={item.key}\n          keepMounted={keepMounted}\n          className={classNames?.panel}\n        >\n          {item.children}\n        </TabsPanel>\n      ))}\n    </Core>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;AAQA,MAAM,EAAE,MAAM,MAAM,UAAU,SAAS,cAAcA;AAuCrD,MAAM,QAAQ,EACZ,OACA,YAAY,QACZ,cAAc,OACd,kBAAkB,OAClB,aAAa,OACb,SAAS,OACT,OACA,YACA,cACA,UACA,eACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,eACJ,iBAAiB,KAAA,IACb,MAAM,MAAK,SAAQ,CAAC,KAAK,QAAQ,CAAC,EAAE,MACpC;CAEN,OACE,qBAAC,MAAD;EACE,cAAc,MAAM,UAAU,KAAA,IAAY,eAAe,KAAA;EAC5C;EACb,gBAAgB,OAAO,iBAAiB;GACtC,WAAW,KAAK;GAChB,gBAAgB,OAAO,YAAY;EACrC;EACA,GAAI;EAPN,UAAA,CASE,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,8BACA,gBAAgB,cAAc,2BAEhC;GANF,UAAA,CAQE,oBAAC,UAAD;IACE,cAAY;IACK;IACjB,WAAW,GACT,kBACA,eACG,gBAAgB,aACb,4BACA;mDAEN,YAAY,IAEd;IAEC,UAAA,MAAM,KAAI,SACT,qBAAC,SAAD;KAEE,OAAO,KAAK;KACZ,UAAU,KAAK;KACf,WAAW,GACT,UACE,CAAC,cACD,gBAAgB,gBAChB,UACF,cAAc,YACd,YAAY,GAEd;KAZF,UAAA,CAcG,KAAK,QAAQ,QACZ,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAU;MAET,UAAA,KAAK;KACF,CAAA,GAEP,KAAK,KACC;IAvBF,GAAA,KAAK,GAuBH,CACV;GACO,CAAA,GACT,SAAS,QACR,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT;;uDAGA,YAAY,KAEd;IACA,oBAAkB;IAEjB,UAAA;GACE,CAAA,CAEJ;EACJ,CAAA,GAAA,MAAM,KAAI,SACT,oBAAC,WAAD;GAEE,OAAO,KAAK;GACC;GACb,WAAW,YAAY;GAEtB,UAAA,KAAK;EACG,GANJ,KAAK,GAMD,CACZ,CACG;;AAEV"}

package/dist/Tag.d.mts

@@ -1,10 +1,10 @@
-import { Badge } from "./core/badge.mjs";
+import { Badge, badge_d_exports } from "./core/badge.mjs";
 import "./core/index.mjs";
 import { PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
 //#region src/components/atoms/tag.d.ts
 declare const Core: typeof Badge;
-interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'color'> {
+export interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'color'> {
   /**
    * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0
    * `'default'` spelling was removed — use `'filled'`, which renders
@@ -26,5 +26,5 @@ interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'c
 }
 declare const Tag: ({ className, variant, color, children, ...props }: Props) => React$1.JSX.Element;
 //#endregion
-export { Props, Tag as default };
+export { Tag as default };
 //# sourceMappingURL=Tag.d.mts.map

package/dist/Tag.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;;;cAUM,aAAI;UAEO,cAAc,KAC7B,QAAM,sBAAsB;;;;;;EAQ5B;;;;;;;;;;;;EAYA,mEAC6D;;cAuBzD,QAAO,WAAA,SAAA,OAAA,aAAA,SAAmD,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Tag.d.mts","names":["badge","badge.Badge","React"],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;;;cAUM,aAAIC;iBAEO,cAAc,KAC7BC,QAAM,sBAAsB;;;;;;EAQ5B;;;;;;;;;;;;EAYA,mEAC6D;;cAuBzD,QAAO,WAAA,SAAA,OAAA,aAAA,SAAmD,UAAKA,QAAA,IAAA"}

package/dist/TimePicker.d.mts

@@ -0,0 +1,26 @@
+import { ComponentSize } from "./providers/config/types.mjs";
+import * as React$1 from "react";
+//#region src/components/atoms/time-picker.d.ts
+export interface Props extends Omit<React$1.ComponentPropsWithRef<'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'step' | 'type' | 'value'> {
+  /** Visible label. An external label or aria-label can be used instead. */
+  label?: string;
+  /** A local time in 24-hour HH:mm form; null keeps a controlled field empty. */
+  value?: string | null;
+  defaultValue?: string;
+  /** Called with HH:mm, or null when the field is cleared. */
+  onChange?: (value: string | null) => void;
+  /** Positive whole-minute interval. Native time inputs use seconds for step. */
+  minuteStep?: number;
+  allowClear?: boolean;
+  clearLabel?: string;
+  size?: ComponentSize;
+  classNames?: {
+    label?: string;
+    input?: string;
+    clear?: string;
+  };
+}
+declare const TimePicker: ({ ref, id, label, value, defaultValue, onChange, minuteStep, allowClear, clearLabel, size, disabled, readOnly, className, classNames, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { TimePicker as default };
+//# sourceMappingURL=TimePicker.d.mts.map

package/dist/TimePicker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.mts","names":["React"],"sources":["../src/components/atoms/time-picker.tsx"],"mappings":";;;iBAmBiB,cAAc,KAC7BA,QAAM;;EAIN;;EAEA;EACA;;EAEA,YAAY;;EAEZ;EACA;EACA;EACA,OAAO;EACP;IACE;IACA;IACA;;;cAIE,eAAc,KAAA,IAAA,OAAA,OAAA,cAAA,UAAA,YAAA,YAAA,YAAA,MAAA,UAAA,UAAA,WAAA,eAAA,SAgBjB,UAAKA,QAAA,IAAA"}

package/dist/TimePicker.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import Input from "./Input.mjs";
+import * as React$1 from "react";
+import { useMergedRef } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleX } from "lucide-react";
+//#region src/components/atoms/time-picker.tsx
+const sizes = {
+	small: "h-8",
+	middle: "h-9",
+	large: "h-10"
+};
+const TimePicker = ({ ref, id, label, value, defaultValue, onChange, minuteStep = 1, allowClear = true, clearLabel = "Clear time", size, disabled, readOnly, className, classNames, ...props }) => {
+	const generatedId = React$1.useId();
+	const inputId = id ?? generatedId;
+	const inputRef = React$1.useRef(null);
+	const mergedRef = useMergedRef(inputRef, ref);
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = React$1.useState(defaultValue ?? "");
+	const currentValue = isControlled ? value ?? "" : uncontrolledValue;
+	const handleChange = (event) => {
+		const nextValue = event.currentTarget.value;
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onChange?.(nextValue || null);
+	};
+	const handleClear = () => {
+		if (!isControlled && inputRef.current) {
+			inputRef.current.value = "";
+			setUncontrolledValue("");
+		}
+		onChange?.(null);
+		inputRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "time-picker",
+		className: cn("w-full", className),
+		children: [label && /* @__PURE__ */ jsx("label", {
+			htmlFor: inputId,
+			className: cn("mb-1.5 block text-sm font-medium", classNames?.label),
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Input, {
+				...props,
+				ref: mergedRef,
+				id: inputId,
+				type: "time",
+				step: minuteStep * 60,
+				disabled,
+				readOnly,
+				value: isControlled ? value ?? "" : void 0,
+				defaultValue: isControlled ? void 0 : defaultValue,
+				onChange: handleChange,
+				className: cn("min-w-0 flex-1", sizes[resolvedSize], classNames?.input)
+			}), allowClear && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx(Button, {
+				htmlType: "button",
+				variant: "text",
+				shape: "circle",
+				size: resolvedSize,
+				icon: /* @__PURE__ */ jsx(CircleX, {}),
+				"aria-label": clearLabel,
+				"data-time-picker-clear": "",
+				className: cn(classNames?.clear),
+				onClick: handleClear
+			})]
+		})]
+	});
+};
+//#endregion
+export { TimePicker as default };
+
+//# sourceMappingURL=TimePicker.mjs.map

package/dist/TimePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.mjs","names":["React"],"sources":["../src/components/atoms/time-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX } from 'lucide-react';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\nimport Input from './input';\n\nconst sizes: Record<ComponentSize, string> = {\n  small: 'h-8',\n  middle: 'h-9',\n  large: 'h-10',\n};\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithRef<'input'>,\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'step' | 'type' | 'value'\n> {\n  /** Visible label. An external label or aria-label can be used instead. */\n  label?: string;\n  /** A local time in 24-hour HH:mm form; null keeps a controlled field empty. */\n  value?: string | null;\n  defaultValue?: string;\n  /** Called with HH:mm, or null when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Positive whole-minute interval. Native time inputs use seconds for step. */\n  minuteStep?: number;\n  allowClear?: boolean;\n  clearLabel?: string;\n  size?: ComponentSize;\n  classNames?: {\n    label?: string;\n    input?: string;\n    clear?: string;\n  };\n}\n\nconst TimePicker = ({\n  ref,\n  id,\n  label,\n  value,\n  defaultValue,\n  onChange,\n  minuteStep = 1,\n  allowClear = true,\n  clearLabel = 'Clear time',\n  size,\n  disabled,\n  readOnly,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const generatedId = React.useId();\n  const inputId = id ?? generatedId;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRef(inputRef, ref);\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(\n    defaultValue ?? '',\n  );\n  const currentValue = isControlled ? (value ?? '') : uncontrolledValue;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const nextValue = event.currentTarget.value;\n\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    onChange?.(nextValue || null);\n  };\n\n  const handleClear = () => {\n    if (!isControlled && inputRef.current) {\n      inputRef.current.value = '';\n      setUncontrolledValue('');\n    }\n\n    onChange?.(null);\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div data-slot=\"time-picker\" className={cn('w-full', className)}>\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={cn('mb-1.5 block text-sm font-medium', classNames?.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div className=\"flex items-center gap-1\">\n        <Input\n          {...props}\n          ref={mergedRef}\n          id={inputId}\n          type=\"time\"\n          step={minuteStep * 60}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={isControlled ? (value ?? '') : undefined}\n          defaultValue={isControlled ? undefined : defaultValue}\n          onChange={handleChange}\n          className={cn(\n            'min-w-0 flex-1',\n            sizes[resolvedSize],\n            classNames?.input,\n            //\n          )}\n        />\n        {allowClear && currentValue && !disabled && !readOnly && (\n          <Button\n            htmlType=\"button\"\n            variant=\"text\"\n            shape=\"circle\"\n            size={resolvedSize}\n            icon={<CircleX />}\n            aria-label={clearLabel}\n            data-time-picker-clear=\"\"\n            className={cn(classNames?.clear)}\n            onClick={handleClear}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default TimePicker;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,QAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,MAAM,cAAc,EAClB,KACA,IACA,OACA,OACA,cACA,UACA,aAAa,GACb,aAAa,MACb,aAAa,cACb,MACA,UACA,UACA,WACA,YACA,GAAG,YACQ;CACX,MAAM,cAAcA,QAAM,MAAM;CAChC,MAAM,UAAU,MAAM;CACtB,MAAM,WAAWA,QAAM,OAAyB,IAAI;CACpD,MAAM,YAAY,aAAa,UAAU,GAAG;CAC5C,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,mBAAmB,wBAAwBA,QAAM,SACtD,gBAAgB,EAClB;CACA,MAAM,eAAe,eAAgB,SAAS,KAAM;CAEpD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,YAAY,MAAM,cAAc;EAEtC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,WAAW,aAAa,IAAI;CAC9B;CAEA,MAAM,oBAAoB;EACxB,IAAI,CAAC,gBAAgB,SAAS,SAAS;GACrC,SAAS,QAAQ,QAAQ;GACzB,qBAAqB,EAAE;EACzB;EAEA,WAAW,IAAI;EACf,SAAS,SAAS,MAAM;CAC1B;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,UAAU,SAAS;EAA9D,UAAA,CACG,SACC,oBAAC,SAAD;GACE,SAAS;GACT,WAAW,GAAG,oCAAoC,YAAY,KAAK;GAElE,UAAA;EACI,CAAA,GAET,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IACE,GAAI;IACJ,KAAK;IACL,IAAI;IACJ,MAAK;IACL,MAAM,aAAa;IACT;IACA;IACV,OAAO,eAAgB,SAAS,KAAM,KAAA;IACtC,cAAc,eAAe,KAAA,IAAY;IACzC,UAAU;IACV,WAAW,GACT,kBACA,MAAM,eACN,YAAY,KAEd;GACD,CAAA,GACA,cAAc,gBAAgB,CAAC,YAAY,CAAC,YAC3C,oBAAC,QAAD;IACE,UAAS;IACT,SAAQ;IACR,OAAM;IACN,MAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,cAAY;IACZ,0BAAuB;IACvB,WAAW,GAAG,YAAY,KAAK;IAC/B,SAAS;GACV,CAAA,CAEA;EACF,CAAA,CAAA;;AAET"}

package/dist/Timeline.d.mts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithRef, Key, ReactNode } from "react";
+//#region src/components/molecules/timeline.d.ts
+export interface Timestamp {
+  /** Caller-formatted text. No locale or timezone conversion is performed. */
+  label: ReactNode;
+  /** A valid HTML time value, such as an ISO date or timestamp. */
+  dateTime?: string;
+}
+export interface Item {
+  key: Key;
+  title: ReactNode;
+  description?: ReactNode;
+  timestamp?: Timestamp;
+  /** Decorative marker treatment. Include meaningful status in the event text. */
+  status?: 'neutral' | 'primary' | 'error';
+  /** Decorative content, such as an icon; do not supply interactive elements. */
+  marker?: ReactNode;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'ol'>, 'children' | 'reversed' | 'start' | 'type'> {
+  /** Events render in this order; the component does not sort by timestamp. */
+  items: readonly Item[];
+  classNames?: {
+    item?: string;
+    marker?: string;
+    connector?: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    timestamp?: string;
+  };
+}
+declare const Timeline: ({ items, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Timeline as default };
+//# sourceMappingURL=Timeline.d.mts.map

package/dist/Timeline.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.mts","names":[],"sources":["../src/components/molecules/timeline.tsx"],"mappings":";;iBAIiB;;EAEf,OAAO;;EAEP;;iBAGe;EACf,KAAK;EACL,OAAO;EACP,cAAc;EACd,YAAY;;EAEZ;;EAEA,SAAS;;iBAGM,cAAc,KAC7B;;EAIA,gBAAgB;EAChB;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAIE,aAAY,OAAA,WAAA,eAAA,SAA4C,0BAAK,IAAA"}

package/dist/Timeline.mjs

@@ -0,0 +1,59 @@
+import { cn } from "./utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/timeline.tsx
+const Timeline = ({ items, className, classNames, ...props }) => {
+	return /* @__PURE__ */ jsx("ol", {
+		...props,
+		"data-slot": "timeline",
+		role: "list",
+		className: cn("text-foreground m-0 w-full min-w-0 list-none p-0", className),
+		children: items.map((item, index) => {
+			const TimestampElement = item.timestamp?.dateTime ? "time" : "span";
+			return /* @__PURE__ */ jsxs("li", {
+				"data-slot": "timeline-item",
+				"data-status": item.status ?? "neutral",
+				className: cn("relative m-0 flex min-w-0 gap-3", index < items.length - 1 && "pb-6", classNames?.item),
+				children: [/* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					className: "relative w-5 shrink-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-slot": "timeline-marker",
+						className: cn(`border-border bg-background text-muted-foreground relative
+                  z-10 flex size-5 items-center justify-center rounded-full
+                  border-2 [&>svg]:size-3`, item.status === "primary" && "border-primary text-primary", item.status === "error" && "border-destructive text-destructive", classNames?.marker),
+						children: item.marker
+					}), index < items.length - 1 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "timeline-connector",
+						className: cn(`bg-border absolute start-[calc(50%-0.5px)] top-5 -bottom-6
+                    w-px`, classNames?.connector)
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					"data-slot": "timeline-content",
+					className: cn("min-w-0 flex-1 text-sm [overflow-wrap:anywhere]", classNames?.content),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "timeline-title",
+							className: cn("leading-5 font-medium", classNames?.title),
+							children: item.title
+						}),
+						item.timestamp != null && /* @__PURE__ */ jsx(TimestampElement, {
+							"data-slot": "timeline-timestamp",
+							dateTime: TimestampElement === "time" ? item.timestamp.dateTime : void 0,
+							className: cn("text-muted-foreground mt-1 block text-xs", classNames?.timestamp),
+							children: item.timestamp.label
+						}),
+						item.description != null && /* @__PURE__ */ jsx("div", {
+							"data-slot": "timeline-description",
+							className: cn("text-muted-foreground mt-2", classNames?.description),
+							children: item.description
+						})
+					]
+				})]
+			}, item.key);
+		})
+	});
+};
+//#endregion
+export { Timeline as default };
+
+//# sourceMappingURL=Timeline.mjs.map

package/dist/Timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mjs","names":[],"sources":["../src/components/molecules/timeline.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, Key, ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Timestamp {\n  /** Caller-formatted text. No locale or timezone conversion is performed. */\n  label: ReactNode;\n  /** A valid HTML time value, such as an ISO date or timestamp. */\n  dateTime?: string;\n}\n\nexport interface Item {\n  key: Key;\n  title: ReactNode;\n  description?: ReactNode;\n  timestamp?: Timestamp;\n  /** Decorative marker treatment. Include meaningful status in the event text. */\n  status?: 'neutral' | 'primary' | 'error';\n  /** Decorative content, such as an icon; do not supply interactive elements. */\n  marker?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'ol'>,\n  'children' | 'reversed' | 'start' | 'type'\n> {\n  /** Events render in this order; the component does not sort by timestamp. */\n  items: readonly Item[];\n  classNames?: {\n    item?: string;\n    marker?: string;\n    connector?: string;\n    content?: string;\n    title?: string;\n    description?: string;\n    timestamp?: string;\n  };\n}\n\nconst Timeline = ({ items, className, classNames, ...props }: Props) => {\n  return (\n    <ol\n      {...props}\n      data-slot=\"timeline\"\n      role=\"list\"\n      className={cn(\n        'text-foreground m-0 w-full min-w-0 list-none p-0',\n        className, //\n      )}\n    >\n      {items.map((item, index) => {\n        const TimestampElement = item.timestamp?.dateTime ? 'time' : 'span';\n\n        return (\n          <li\n            key={item.key}\n            data-slot=\"timeline-item\"\n            data-status={item.status ?? 'neutral'}\n            className={cn(\n              'relative m-0 flex min-w-0 gap-3',\n              index < items.length - 1 && 'pb-6',\n              classNames?.item, //\n            )}\n          >\n            <div aria-hidden=\"true\" className=\"relative w-5 shrink-0\">\n              <span\n                data-slot=\"timeline-marker\"\n                className={cn(\n                  `border-border bg-background text-muted-foreground relative\n                  z-10 flex size-5 items-center justify-center rounded-full\n                  border-2 [&>svg]:size-3`,\n                  item.status === 'primary' && 'border-primary text-primary',\n                  item.status === 'error' &&\n                    'border-destructive text-destructive',\n                  classNames?.marker, //\n                )}\n              >\n                {item.marker}\n              </span>\n              {index < items.length - 1 && (\n                <span\n                  data-slot=\"timeline-connector\"\n                  className={cn(\n                    `bg-border absolute start-[calc(50%-0.5px)] top-5 -bottom-6\n                    w-px`,\n                    classNames?.connector, //\n                  )}\n                />\n              )}\n            </div>\n            <div\n              data-slot=\"timeline-content\"\n              className={cn(\n                'min-w-0 flex-1 text-sm [overflow-wrap:anywhere]',\n                classNames?.content, //\n              )}\n            >\n              <div\n                data-slot=\"timeline-title\"\n                className={cn(\n                  'leading-5 font-medium',\n                  classNames?.title, //\n                )}\n              >\n                {item.title}\n              </div>\n              {item.timestamp != null && (\n                <TimestampElement\n                  data-slot=\"timeline-timestamp\"\n                  dateTime={\n                    TimestampElement === 'time'\n                      ? item.timestamp.dateTime\n                      : undefined\n                  }\n                  className={cn(\n                    'text-muted-foreground mt-1 block text-xs',\n                    classNames?.timestamp, //\n                  )}\n                >\n                  {item.timestamp.label}\n                </TimestampElement>\n              )}\n              {item.description != null && (\n                <div\n                  data-slot=\"timeline-description\"\n                  className={cn(\n                    'text-muted-foreground mt-2',\n                    classNames?.description, //\n                  )}\n                >\n                  {item.description}\n                </div>\n              )}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\nexport default Timeline;\n"],"mappings":";;;AAuCA,MAAM,YAAY,EAAE,OAAO,WAAW,YAAY,GAAG,YAAmB;CACtE,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,aAAU;EACV,MAAK;EACL,WAAW,GACT,oDACA,SACF;EAEC,UAAA,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,mBAAmB,KAAK,WAAW,WAAW,SAAS;GAE7D,OACE,qBAAC,MAAD;IAEE,aAAU;IACV,eAAa,KAAK,UAAU;IAC5B,WAAW,GACT,mCACA,QAAQ,MAAM,SAAS,KAAK,QAC5B,YAAY,IACd;IARF,UAAA,CAUE,qBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAlC,UAAA,CACE,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,GACT;;4CAGA,KAAK,WAAW,aAAa,+BAC7B,KAAK,WAAW,WACd,uCACF,YAAY,MACd;MAEC,UAAA,KAAK;KACF,CAAA,GACL,QAAQ,MAAM,SAAS,KACtB,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,GACT;2BAEA,YAAY,SACd;KACD,CAAA,CAEA;IACL,CAAA,GAAA,qBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,mDACA,YAAY,OACd;KALF,UAAA;MAOE,oBAAC,OAAD;OACE,aAAU;OACV,WAAW,GACT,yBACA,YAAY,KACd;OAEC,UAAA,KAAK;MACH,CAAA;MACJ,KAAK,aAAa,QACjB,oBAAC,kBAAD;OACE,aAAU;OACV,UACE,qBAAqB,SACjB,KAAK,UAAU,WACf,KAAA;OAEN,WAAW,GACT,4CACA,YAAY,SACd;OAEC,UAAA,KAAK,UAAU;MACA,CAAA;MAEnB,KAAK,eAAe,QACnB,oBAAC,OAAD;OACE,aAAU;OACV,WAAW,GACT,8BACA,YAAY,WACd;OAEC,UAAA,KAAK;MACH,CAAA;KAEJ;IACH,CAAA,CAAA;GA/EG,GAAA,KAAK,GA+ER;EAER,CAAC;CACC,CAAA;AAER"}

package/dist/{components/organisms/toast.d.mts → Toast.d.mts}

@@ -1,6 +1,7 @@
 //#region src/components/organisms/toast.d.ts
-type ToastStatus = 'info' | 'success' | 'error' | 'warning';
-interface Props {
+type ToastStatus = 'info' | 'success' | 'error' | 'warning' | 'loading';
+export type Placement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+export interface Props {
   status?: ToastStatus;
   title: React.ReactNode;
   description?: React.ReactNode;
@@ -14,17 +15,26 @@ interface StaticProps extends Props {
   id?: string;
   duration?: number;
   container?: HTMLElement;
+  placement?: Placement;
+}
+export interface GlobalConfig {
+  placement?: Placement;
+  duration?: number;
+  maxCount?: number;
 }
 declare const Toast: {
   ({ status, title, description, icon, closable, action, className, onClose }: Props): import("react").JSX.Element;
   destroy: (id?: string) => void;
   destroyAll(): void;
+  config(config: GlobalConfig): void;
+  open(props: StaticProps): string | undefined;
   info(title: React.ReactNode, props?: TriggerOptions): string | undefined;
   success(title: React.ReactNode, props?: TriggerOptions): string | undefined;
   error(title: React.ReactNode, props?: TriggerOptions): string | undefined;
   warning(title: React.ReactNode, props?: TriggerOptions): string | undefined;
+  loading(title: React.ReactNode, props?: TriggerOptions): string | undefined;
 };
 type TriggerOptions = Omit<StaticProps, 'status' | 'title'>;
 //#endregion
-export { Props, type StaticProps as ToastOptions, Toast as default };
-//# sourceMappingURL=toast.d.mts.map
+export { type StaticProps as ToastOptions, Toast as default };
+//# sourceMappingURL=Toast.d.mts.map

package/dist/Toast.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.mts","names":[],"sources":["../src/components/organisms/toast.tsx"],"mappings":";KAyBK;YAEO;iBAGK;EACf,SAAS;EACT,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA;;UAGQ,oBAAoB;EAC5B;EACA;EACA,YAAY;EACZ,YAAY;;iBAGG;EACf,YAAY;EACZ;EAEA;;cAiBI;KASH,QAAA,OAAA,aAAA,MAAA,UAAA,QAAA,WAAA,WAAA,wBAAK,IAAA;EA0Mc,UAAA;;EAcE,OAAA,QAAA;EAMH,KAAA,OAAA;EACA,KAAA,OAAA,MAAM,WAAS,QAAU;EAEtB,QAAA,OAAA,MAAM,WAAS,QAAU;EAE3B,MAAA,OAAA,MAAM,WAAS,QAAU;EAEvB,QAAA,OAAA,MAAM,WAAS,QAAU;EAGzB,QAAA,OAAA,MAAM,WAAS,QAAU;;KAZ5C,iBAAiB,KAAK"}