@bioturing/components 0.16.0 → 0.17.0

package/dist/index.js

@@ -1,197 +1,221 @@
 import { componentMetadata as r, getComponentsByCategory as t } from "./metadata.js";
-import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as n, Avatar as x, BackTop as l, Calendar as i, Card as c, Carousel as u, Cascader as d, Col as C, ColorPicker as T, ConfigProvider as g, DatePicker as h, Descriptions as k, Divider as S, Drawer as P, Dropdown as y, Flex as A, FloatButton as B, Grid as D, InputNumber as R, Layout as b, List as v, Mentions as M, Menu as F, Pagination as w, Popconfirm as E, Progress as I, QRCode as U, Rate as K, Result as L, Row as W, Skeleton as q, Space as G, Statistic as N, Steps as V, Tabs as O, TimePicker as Q, Timeline as j, Transfer as z, TreeSelect as H, Typography as J, Watermark as X, message as Y, notification as Z, theme as _, unstableSetRender as $, version as oo } from "antd";
+import { Affix as p, Alert as m, Anchor as s, App as l, AutoComplete as f, Avatar as n, BackTop as x, Calendar as i, Card as C, Carousel as c, Cascader as T, Col as u, ColorPicker as d, ConfigProvider as g, DatePicker as S, Descriptions as h, Divider as A, Drawer as E, Dropdown as k, Flex as P, FloatButton as R, Grid as D, InputNumber as b, Layout as B, List as y, Mentions as L, Menu as v, Pagination as I, Popconfirm as M, Progress as F, QRCode as N, Rate as U, Result as w, Row as _, Skeleton as O, Space as q, Statistic as G, Steps as W, Tabs as K, TimePicker as Q, Timeline as V, Transfer as H, TreeSelect as j, Typography as z, Watermark as J, message as X, notification as Y, theme as Z, unstableSetRender as $, version as oo } from "antd";
 import { Select as ro } from "./components/Select/component.js";
 import { Modal as ao } from "./components/Modal/index.js";
 import { IconButton as mo } from "./components/IconButton/component.js";
-import { Switch as fo } from "./components/Switch/component.js";
-import { Checkbox as xo } from "./components/Checkbox/component.js";
+import { Switch as lo } from "./components/Switch/component.js";
+import { Checkbox as no } from "./components/Checkbox/component.js";
 import { Segmented as io } from "./components/Segmented/component.js";
-import { Table as uo } from "./components/Table/component.js";
-import { Tag as To } from "./components/Tag/component.js";
-import { ThemeProvider as ho } from "./components/ThemeProvider/component.js";
-import { Split as So, Splitter as Po } from "./components/Splitter/component.js";
-import { Truncate as Ao } from "./components/Truncate/component.js";
+import { Table as co } from "./components/Table/component.js";
+import { Tag as uo } from "./components/Tag/component.js";
+import { ThemeProvider as So } from "./components/ThemeProvider/component.js";
+import { Split as Ao, Splitter as Eo } from "./components/Splitter/component.js";
+import { Truncate as Po } from "./components/Truncate/component.js";
 import { DropdownMenu as Do } from "./components/DropdownMenu/component.js";
-import { clsx as bo, cn as vo, cx as Mo } from "./components/utils/cn.js";
-import { reactNodeToString as wo } from "./components/utils/reactToString.js";
-import { isTracebackError as Io } from "./components/utils/isTracebackError.js";
-import { parseAntdPlacement as Ko, useAntdCssVarClassname as Lo, useCls as Wo, useGetPrefixCls as qo } from "./components/utils/antdUtils.js";
-import { WithAntdTokens as No } from "./components/utils/WithAntdTokens.js";
-import { Transition as Oo } from "./components/Transition/component.js";
+import { clsx as Bo, cn as yo, cx as Lo } from "./components/utils/cn.js";
+import { reactNodeToString as Io } from "./components/utils/reactToString.js";
+import { isTracebackError as Fo } from "./components/utils/isTracebackError.js";
+import { isValidHexColor as Uo } from "./components/utils/colors.js";
+import { parseAntdPlacement as _o, useAntdCssVarClassname as Oo, useCls as qo, useGetPrefixCls as Go } from "./components/utils/antdUtils.js";
+import { WithAntdTokens as Ko } from "./components/utils/WithAntdTokens.js";
+import { Transition as Vo } from "./components/Transition/component.js";
 import { DefaultUpload as jo, Upload as zo } from "./components/Upload/component.js";
-import { useUploadItemRender as Jo } from "./components/Upload/hooks.js";
-import { ScrollArea as Yo } from "./components/ScrollArea/component.js";
-import { Popover as _o } from "./components/Popover/component.js";
-import { Slider as oe } from "./components/Slider/component.js";
-import { Tooltip as re } from "./components/Tooltip/component.js";
-import { Breadcrumb as ae } from "./components/Breadcrumb/component.js";
-import { useUniqueKeysTree as me } from "./components/Tree/useUniqueKeysTree.js";
-import { getUniqueKeysFromOriginals as fe, processTreeData as ne } from "./components/Tree/helpers.js";
-import { Tree as le } from "./components/Tree/components.js";
-import { Spin as ce } from "./components/Spin/component.js";
-import { Empty as de, EmptyIcon as Ce } from "./components/Empty/component.js";
-import { Form as ge } from "./components/Form/component.js";
-import { Field as ke } from "./components/Field/component.js";
+import { useUploadItemRender as Xo } from "./components/Upload/hooks.js";
+import { ScrollArea as Zo } from "./components/ScrollArea/component.js";
+import { Popover as oe } from "./components/Popover/component.js";
+import { Slider as re } from "./components/Slider/component.js";
+import { Tooltip as ae } from "./components/Tooltip/component.js";
+import { Breadcrumb as me } from "./components/Breadcrumb/component.js";
+import { useUniqueKeysTree as le } from "./components/Tree/useUniqueKeysTree.js";
+import { getUniqueKeysFromOriginals as ne, processTreeData as xe } from "./components/Tree/helpers.js";
+import { Tree as Ce } from "./components/Tree/components.js";
+import { Spin as Te } from "./components/Spin/component.js";
+import { Empty as de, EmptyIcon as ge } from "./components/Empty/component.js";
+import { Form as he } from "./components/Form/component.js";
+import { Field as Ee } from "./components/Field/component.js";
 import { Tour as Pe } from "./components/Tour/component.js";
-import { Toast as Ae } from "./components/Toast/component.js";
-import { toast as De, toastManager as Re } from "./components/Toast/function.js";
+import { Toast as De } from "./components/Toast/component.js";
+import { toast as Be, toastManager as ye } from "./components/Toast/function.js";
 import { VerticalCollapsiblePanel as ve } from "./components/VerticalCollapsiblePanel/component.js";
-import { PopupPanel as Fe } from "./components/PopupPanel/component.js";
-import { CodeBlock as Ee } from "./components/CodeBlock/component.js";
-import { StackChild as Ue } from "./components/Stack/StackChild.js";
-import { Stack as Le } from "./components/Stack/index.js";
-import { Collapse as qe } from "./components/Collapse/component.js";
-import { Input as Ne } from "./components/Input/component.js";
-import { Badge as Oe, InternalBadge as Qe } from "./components/Badge/component.js";
+import { PopupPanel as Me } from "./components/PopupPanel/component.js";
+import { CodeBlock as Ne } from "./components/CodeBlock/component.js";
+import { StackChild as we } from "./components/Stack/StackChild.js";
+import { Stack as Oe } from "./components/Stack/index.js";
+import { Collapse as Ge } from "./components/Collapse/component.js";
+import { Input as Ke } from "./components/Input/component.js";
+import { Badge as Ve, InternalBadge as He } from "./components/Badge/component.js";
 import { Radio as ze } from "./components/Radio/component.js";
-import { Button as Je } from "./components/Button/component.js";
-import { DSRoot as Ye } from "./components/DSRoot/component.js";
-import { DSRootContextProvider as _e, useDS as $e } from "./components/DSRoot/context.js";
-import { useForm as er, useWatch as rr } from "antd/es/form/Form";
-import { useBreakpoint as ar, useMessage as pr, useModal as mr, useToken as sr } from "./components/hooks/antd.js";
-import { default as nr } from "antd/es/app/useApp";
-import { useAnimationsFinished as lr, useEnhancedEffect as ir, useEventCallback as cr, useLatestRef as ur } from "./components/hooks/base-ui.js";
-import { useControlledState as Cr } from "./components/hooks/useControlledState.js";
-import { useCharts as gr } from "./components/hooks/useCharts.js";
-import { antdColorTokens as kr, darkTheme as Sr, lightTheme as Pr } from "./tokens/and-theme/tokens.js";
-import { categoricalChartColorKeys as Ar, categoricalChartColorTokens as Br, categoricalChartsColors as Dr } from "./tokens/charts/index.js";
-import { chartColorTokens as br, rawChartColorTokens as vr } from "./tokens/charts/tokens.js";
-import { getColorsByTheme as Fr, getTokensByTheme as wr, resolveColorTokens as Er } from "./tokens/utils.js";
+import { Button as Xe } from "./components/Button/component.js";
+import { DSRoot as Ze } from "./components/DSRoot/component.js";
+import { DSRootContextProvider as or, useDS as er } from "./components/DSRoot/context.js";
+import { DragDrop as tr, DragDropRoot as ar } from "./components/DragDrop/index.js";
+import { ColorSelect as mr } from "./components/ColorSelect/component.js";
+import { Nav as lr } from "./components/Nav/index.js";
+import { useForm as nr, useWatch as xr } from "antd/es/form/Form";
+import { useBreakpoint as Cr, useMessage as cr, useModal as Tr, useToken as ur } from "./components/hooks/antd.js";
+import { default as gr } from "antd/es/app/useApp";
+import { useAnimationsFinished as hr, useEnhancedEffect as Ar, useEventCallback as Er, useLatestRef as kr } from "./components/hooks/base-ui.js";
+import { useControlledState as Rr } from "./components/hooks/useControlledState.js";
+import { useCharts as br } from "./components/hooks/useCharts.js";
+import { antdColorTokens as yr, darkTheme as Lr, lightTheme as vr } from "./tokens/and-theme/tokens.js";
+import { categoricalChartColorKeys as Mr, categoricalChartColorTokens as Fr, categoricalChartsColors as Nr, chartColorTokens as Ur, rawChartColorTokens as wr } from "./tokens/charts/palettes/cloudscape.js";
+import { COLORBREWER as Or } from "./tokens/charts/palettes/colorbrewer.js";
+import { tab10 as Gr, tab20 as Wr, tab20b as Kr, tab20c as Qr } from "./tokens/charts/palettes/tableau.js";
+import { CATEGORICAL_PALETTES as Hr, CATEGORICAL_PALETTE_NAMES as jr, SEQUENTIAL_PALETTES as zr, SEQUENTIAL_PALETTE_NAMES as Jr, getAllCategoricalChartColors as Xr, getAllSequentialChartColors as Yr, getCategoricalChartColors as Zr, getSequentialChartColors as $r } from "./tokens/charts/palettes/index.js";
+import { getColorsByTheme as et, getTokensByTheme as rt, resolveColorTokens as tt } from "./tokens/utils.js";
 export {
   p as Affix,
   m as Alert,
   s as Anchor,
-  f as App,
-  n as AutoComplete,
-  x as Avatar,
-  l as BackTop,
-  Oe as Badge,
-  ae as Breadcrumb,
-  Je as Button,
+  l as App,
+  f as AutoComplete,
+  n as Avatar,
+  x as BackTop,
+  Ve as Badge,
+  me as Breadcrumb,
+  Xe as Button,
+  Hr as CATEGORICAL_PALETTES,
+  jr as CATEGORICAL_PALETTE_NAMES,
+  Or as COLORBREWER,
   i as Calendar,
-  c as Card,
-  u as Carousel,
-  d as Cascader,
-  xo as Checkbox,
-  Ee as CodeBlock,
-  C as Col,
-  qe as Collapse,
-  T as ColorPicker,
+  C as Card,
+  c as Carousel,
+  T as Cascader,
+  no as Checkbox,
+  Ne as CodeBlock,
+  u as Col,
+  Ge as Collapse,
+  d as ColorPicker,
+  mr as ColorSelect,
   g as ConfigProvider,
-  Ye as DSRoot,
-  _e as DSRootContextProvider,
-  h as DatePicker,
+  Ze as DSRoot,
+  or as DSRootContextProvider,
+  S as DatePicker,
   jo as DefaultUpload,
-  k as Descriptions,
-  S as Divider,
-  P as Drawer,
-  y as Dropdown,
+  h as Descriptions,
+  A as Divider,
+  tr as DragDrop,
+  ar as DragDropRoot,
+  E as Drawer,
+  k as Dropdown,
   Do as DropdownMenu,
   de as Empty,
-  Ce as EmptyIcon,
-  ke as Field,
-  A as Flex,
-  B as FloatButton,
-  ge as Form,
+  ge as EmptyIcon,
+  Ee as Field,
+  P as Flex,
+  R as FloatButton,
+  he as Form,
   D as Grid,
   mo as IconButton,
-  Ne as Input,
-  R as InputNumber,
-  Qe as InternalBadge,
-  b as Layout,
-  v as List,
-  M as Mentions,
-  F as Menu,
+  Ke as Input,
+  b as InputNumber,
+  He as InternalBadge,
+  B as Layout,
+  y as List,
+  L as Mentions,
+  v as Menu,
   ao as Modal,
-  w as Pagination,
-  E as Popconfirm,
-  _o as Popover,
-  Fe as PopupPanel,
-  I as Progress,
-  U as QRCode,
+  lr as Nav,
+  I as Pagination,
+  M as Popconfirm,
+  oe as Popover,
+  Me as PopupPanel,
+  F as Progress,
+  N as QRCode,
   ze as Radio,
-  K as Rate,
-  L as Result,
-  W as Row,
-  Yo as ScrollArea,
+  U as Rate,
+  w as Result,
+  _ as Row,
+  zr as SEQUENTIAL_PALETTES,
+  Jr as SEQUENTIAL_PALETTE_NAMES,
+  Zo as ScrollArea,
   io as Segmented,
   ro as Select,
-  q as Skeleton,
-  oe as Slider,
-  G as Space,
-  ce as Spin,
-  So as Split,
-  Po as Splitter,
-  Le as Stack,
-  Ue as StackChild,
-  N as Statistic,
-  V as Steps,
-  fo as Switch,
-  uo as Table,
-  O as Tabs,
-  To as Tag,
-  ho as ThemeProvider,
+  O as Skeleton,
+  re as Slider,
+  q as Space,
+  Te as Spin,
+  Ao as Split,
+  Eo as Splitter,
+  Oe as Stack,
+  we as StackChild,
+  G as Statistic,
+  W as Steps,
+  lo as Switch,
+  co as Table,
+  K as Tabs,
+  uo as Tag,
+  So as ThemeProvider,
   Q as TimePicker,
-  j as Timeline,
-  Ae as Toast,
-  re as Tooltip,
+  V as Timeline,
+  De as Toast,
+  ae as Tooltip,
   Pe as Tour,
-  z as Transfer,
-  Oo as Transition,
-  le as Tree,
-  H as TreeSelect,
-  Ao as Truncate,
-  J as Typography,
+  H as Transfer,
+  Vo as Transition,
+  Ce as Tree,
+  j as TreeSelect,
+  Po as Truncate,
+  z as Typography,
   zo as Upload,
   ve as VerticalCollapsiblePanel,
-  X as Watermark,
-  No as WithAntdTokens,
-  kr as antdColorTokens,
-  Ar as categoricalChartColorKeys,
-  Br as categoricalChartColorTokens,
-  Dr as categoricalChartsColors,
-  br as chartColorTokens,
-  bo as clsx,
-  vo as cn,
+  J as Watermark,
+  Ko as WithAntdTokens,
+  yr as antdColorTokens,
+  Mr as categoricalChartColorKeys,
+  Fr as categoricalChartColorTokens,
+  Nr as categoricalChartsColors,
+  Ur as chartColorTokens,
+  Bo as clsx,
+  yo as cn,
   r as componentMetadata,
-  Mo as cx,
-  Sr as darkTheme,
-  Fr as getColorsByTheme,
+  Lo as cx,
+  Lr as darkTheme,
+  Xr as getAllCategoricalChartColors,
+  Yr as getAllSequentialChartColors,
+  Zr as getCategoricalChartColors,
+  et as getColorsByTheme,
   t as getComponentsByCategory,
-  wr as getTokensByTheme,
-  fe as getUniqueKeysFromOriginals,
-  Io as isTracebackError,
-  Pr as lightTheme,
-  Y as message,
-  Z as notification,
-  Ko as parseAntdPlacement,
-  ne as processTreeData,
-  vr as rawChartColorTokens,
-  wo as reactNodeToString,
-  Er as resolveColorTokens,
-  _ as theme,
-  De as toast,
-  Re as toastManager,
+  $r as getSequentialChartColors,
+  rt as getTokensByTheme,
+  ne as getUniqueKeysFromOriginals,
+  Fo as isTracebackError,
+  Uo as isValidHexColor,
+  vr as lightTheme,
+  X as message,
+  Y as notification,
+  _o as parseAntdPlacement,
+  xe as processTreeData,
+  wr as rawChartColorTokens,
+  Io as reactNodeToString,
+  tt as resolveColorTokens,
+  Gr as tab10,
+  Wr as tab20,
+  Kr as tab20b,
+  Qr as tab20c,
+  Z as theme,
+  Be as toast,
+  ye as toastManager,
   $ as unstableSetRender,
-  lr as useAnimationsFinished,
-  Lo as useAntdCssVarClassname,
-  nr as useApp,
-  ar as useBreakpoint,
-  gr as useCharts,
-  Wo as useCls,
-  Cr as useControlledState,
-  $e as useDS,
-  ir as useEnhancedEffect,
-  cr as useEventCallback,
-  er as useForm,
-  qo as useGetPrefixCls,
-  ur as useLatestRef,
-  pr as useMessage,
-  mr as useModal,
-  sr as useToken,
-  me as useUniqueKeysTree,
-  Jo as useUploadItemRender,
-  rr as useWatch,
+  hr as useAnimationsFinished,
+  Oo as useAntdCssVarClassname,
+  gr as useApp,
+  Cr as useBreakpoint,
+  br as useCharts,
+  qo as useCls,
+  Rr as useControlledState,
+  er as useDS,
+  Ar as useEnhancedEffect,
+  Er as useEventCallback,
+  nr as useForm,
+  Go as useGetPrefixCls,
+  kr as useLatestRef,
+  cr as useMessage,
+  Tr as useModal,
+  ur as useToken,
+  le as useUniqueKeysTree,
+  Xo as useUploadItemRender,
+  xr as useWatch,
   oo as version
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/metadata.js

@@ -1,4 +1,18 @@
 const i = {
+  DragDrop: {
+    name: "DragDrop",
+    link: "/drag-drop",
+    base: "custom",
+    refinements: [
+      "Custom implementation for drag and drop functionality",
+      "Type-safe with TypeScript generics",
+      "Supports custom styling and rendering",
+      "Provides Draggable and Droppable subcomponents",
+      "Handles drag events with proper context management"
+    ],
+    category: "Data Entry",
+    description: "A component for creating drag and drop interfaces with customizable draggable items and drop zones."
+  },
   Badge: {
     name: "Badge",
     link: "/badge",
@@ -80,6 +94,19 @@ const i = {
     originalDocUrl: "https://base-ui.com/react/components/menu",
     description: "A menu that appears when a user interacts with a button or other control."
   },
+  Nav: {
+    name: "Nav",
+    link: "/nav",
+    base: "custom",
+    refinements: [
+      "Supports icon and label via a render prop pattern",
+      "Manages hover state to reveal label when collapsed",
+      "Supports active and collapsed/expanded (currentPanel) states",
+      "Uses component-level CSS imports and custom transition classes"
+    ],
+    category: "Navigation",
+    description: "A navigation item with icon and label, supporting active highlighting and hover reveal."
+  },
   Empty: {
     name: "Empty",
     link: "/empty",
@@ -170,12 +197,7 @@ const i = {
     link: "/popover",
     base: "antd",
     // Retains AntD as 'base' because it aims for API compatibility
-    refinements: [
-      "Refactored to use `@base-ui-components/react/popover` internally",
-      "Maintains Ant Design API compatibility",
-      "Custom prop mapping for placement and trigger to align with Base UI Popover",
-      "Combined title and content props into a single node for Base UI Popover's content area"
-    ],
+    refinements: [],
     category: "Overlay",
     originalDocUrl: "https://ant.design/components/popover",
     // Original AntD doc for API reference
@@ -324,12 +346,28 @@ const i = {
       "Defaults to using the `X` icon (bold) from `@bioturing/assets` as the `closeIcon` if the tag is `closable` and no custom icon is provided.",
       "Introduces an `active` boolean prop (defaults to false).",
       "When `active={true}`, applies specific styling (background, border, text color using `--ds-color-primary` tokens) via a `data-active` attribute and `style.css`.",
-      "Applies BioTuring Design System specific styling via `./style.css`, including base styles for alignment and consistent close icon coloring (`--ds-color-icon`)."
+      "Applies BioTuring Design System specific styling via `./style.css`, including base styles for alignment and consistent close icon coloring (`--ds-color-icon`).",
+      "Introduces a `size` prop with options `small`, `medium`, and `large` to control tag dimensions."
     ],
     category: "Data Display",
     originalDocUrl: "https://ant.design/components/tag",
     description: "Small UI elements for categorization, filtering, or highlighting items."
   },
+  ColorSelect: {
+    name: "ColorSelect",
+    link: "/color-select",
+    base: "antd",
+    refinements: [
+      "Combines Ant Design `ColorPicker` with a `Select`-like input for color selection.",
+      "Supports preset colors via the `presetColors` prop and freeform hex input.",
+      "Displays selected colors as closable `Tag`s with color swatches.",
+      "Provides controlled/uncontrolled APIs (`value`/`defaultValue`, `open`/`defaultOpen`).",
+      "Emits a `toast` notification on invalid color entries.",
+      "Uses `Stack` for layout and `style.css` for BioTuring styling."
+    ],
+    category: "Data Entry",
+    description: "A combined color picker and selector allowing preset and custom color selection with tag display."
+  },
   ThemeProvider: {
     name: "ThemeProvider",
     link: "/theme-provider",