@knkcs/anker 0.0.1 → 0.0.2

package/dist/atoms/index.d.ts

@@ -1,12 +1,27 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { IconButtonProps, BoxProps, useCheckboxGroup, StackProps, UseCheckboxGroupProps, Clipboard, InputProps, ButtonProps, DataList as DataList$1, HTMLChakraProps, TextProps, BadgeProps } from '@chakra-ui/react';
+import { ButtonProps, IconButtonProps, BoxProps, useCheckboxGroup, StackProps, UseCheckboxGroupProps, Clipboard, InputProps, DataList as DataList$1, HTMLChakraProps, TextProps, BadgeProps } from '@chakra-ui/react';
+export { ButtonProps, IconButtonProps } from '@chakra-ui/react';
 import { b as AvatarProps } from '../avatar-DhqkKdqc.js';
 export { S as SearchInput, a as SearchInputProps } from '../search-input-C_Cl2OEx.js';
 import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, SelectInstance, MenuListProps, OptionProps } from 'chakra-react-select';
 export { ActionMeta, Select as ChakraReactSelect, ChakraStylesConfig, CreatableSelect, GroupBase, MenuListProps, MultiValue, OptionProps, SelectInstance, SingleValue, SingleValueProps, StylesConfig, chakraComponents } from 'chakra-react-select';
 
+declare const Button: {
+    ({ ref, ...props }: ButtonProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const IconButton: {
+    ({ ref, ...props }: IconButtonProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ActionProps extends React__default.HTMLAttributes<HTMLButtonElement> {
     cursor?: string;
 }
@@ -393,22 +408,31 @@ interface PersonaAvatarOptions extends Pick<PersonaProps, "name" | "size"> {
 }
 interface PersonaAvatarProps extends PersonaAvatarOptions, Omit<AvatarProps, "size"> {
 }
-declare const PersonaAvatar: ({ ref, ...props }: PersonaAvatarProps & {
-    ref?: React__default.Ref<HTMLDivElement>;
-}) => react_jsx_runtime.JSX.Element;
-declare const PersonaDetails: ({ ref, ...props }: HTMLChakraProps<"div"> & {
-    ref?: React__default.Ref<HTMLDivElement>;
-}) => react_jsx_runtime.JSX.Element;
-declare const PersonaLabel: ({ ref, ...props }: HTMLChakraProps<"span"> & {
-    ref?: React__default.Ref<HTMLSpanElement>;
-}) => react_jsx_runtime.JSX.Element;
+declare const PersonaAvatar: {
+    ({ ref, ...props }: PersonaAvatarProps & {
+        ref?: React__default.Ref<HTMLDivElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const PersonaDetails: {
+    ({ ref, ...props }: HTMLChakraProps<"div"> & {
+        ref?: React__default.Ref<HTMLDivElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const PersonaLabel: {
+    ({ ref, ...props }: HTMLChakraProps<"span"> & {
+        ref?: React__default.Ref<HTMLSpanElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 interface BaseOption {
     id: string;
     label: string;
     avatar?: string;
     color?: string;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     data?: Record<string, unknown>;
 }
 
@@ -493,6 +517,18 @@ declare const createTableMenuComponents: <T extends BaseOption>(options: CreateT
     Option: (props: OptionProps<T, boolean, GroupBase<T>>) => react_jsx_runtime.JSX.Element;
 };
 
+interface SplitButtonMenuItem {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+    color?: string;
+}
+interface SplitButtonProps extends ButtonProps {
+    label: string;
+    menuItems?: SplitButtonMenuItem[];
+}
+declare const SplitButton: React__default.FC<SplitButtonProps>;
+
 interface StatProps extends BoxProps {
     /** An icon element rendered as React node (e.g., a lucide-react icon) */
     icon?: React__default.ReactNode;
@@ -533,4 +569,4 @@ interface TypeBadgeProps extends Omit<BadgeProps, "children"> {
 }
 declare const TypeBadge: React__default.FC<TypeBadgeProps>;
 
-export { Action, type ActionProps, type BaseOption, BaseSelect, type BaseSelectProps, CheckboxCard, CheckboxCardGroup, type CheckboxCardGroupProps, type CheckboxCardProps, ClipboardButton, type ClipboardButtonProps, ClipboardInput, type ClipboardInputProps, ClipboardLink, type ClipboardLinkProps, Collapse, type CollapseProps, Comment, CommentAction, type CommentActionProps, type CommentFooterProps, type CommentHeaderProps, type CommentProps, CommentReplyBox, type CommentReplyBoxProps, type CreateTableMenuComponentsOptions, DataList, DataListItem, DataListItemLabel, type DataListItemType, DataListItemValue, type DataListProps, type DataListRootProps, type DateFormat, DateInput, type DateInputProps, type DateType, Edit, type EditProps, EmptyState, type EmptyStateProps, Filter, type FilterProps, Handle, type HandleProps, Persona, PersonaAvatar, PersonaContainer, type PersonaContainerProps, PersonaDetails, PersonaLabel, type PersonaProps, RelativeDateTime, type RelativeDateTimeProps, Remove, type RemoveProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type TableMenuColumn, TableMenuList, type TableMenuListProps, TableOption, TextInput, type TextInputProps, TextOverflow, type TextOverflowProps, TypeBadge, type TypeBadgeProps, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime, formatTime, formatWeekdayDate };
+export { Action, type ActionProps, type BaseOption, BaseSelect, type BaseSelectProps, Button, CheckboxCard, CheckboxCardGroup, type CheckboxCardGroupProps, type CheckboxCardProps, ClipboardButton, type ClipboardButtonProps, ClipboardInput, type ClipboardInputProps, ClipboardLink, type ClipboardLinkProps, Collapse, type CollapseProps, Comment, CommentAction, type CommentActionProps, type CommentFooterProps, type CommentHeaderProps, type CommentProps, CommentReplyBox, type CommentReplyBoxProps, type CreateTableMenuComponentsOptions, DataList, DataListItem, DataListItemLabel, type DataListItemType, DataListItemValue, type DataListProps, type DataListRootProps, type DateFormat, DateInput, type DateInputProps, type DateType, Edit, type EditProps, EmptyState, type EmptyStateProps, Filter, type FilterProps, Handle, type HandleProps, IconButton, Persona, PersonaAvatar, PersonaContainer, type PersonaContainerProps, PersonaDetails, PersonaLabel, type PersonaProps, RelativeDateTime, type RelativeDateTimeProps, Remove, type RemoveProps, SplitButton, type SplitButtonMenuItem, type SplitButtonProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type TableMenuColumn, TableMenuList, type TableMenuListProps, TableOption, TextInput, type TextInputProps, TextOverflow, type TextOverflowProps, TypeBadge, type TypeBadgeProps, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime, formatTime, formatWeekdayDate };

package/dist/atoms/index.js

@@ -1,9 +1,11 @@
-import { Prose, Avatar } from '../chunk-YXTW5OAJ.js';
-import { Tooltip } from '../chunk-QSCNXHMU.js';
+import { Prose, Avatar, Spinner } from '../chunk-QU3FF5WI.js';
+import { IconButton, formatRelativeToCurrentWeekDateTime, formatRelativeDateTime, Button } from '../chunk-GJTQLZ4O.js';
+export { Button, IconButton, StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime } from '../chunk-GJTQLZ4O.js';
+import { Tooltip, MenuRoot, MenuTrigger, MenuContent, MenuItem } from '../chunk-NJFF6S77.js';
 export { SearchInput, text_input_default as TextInput } from '../chunk-PZCL4M6I.js';
-import { DataList as DataList$1, Text, Box, Icon, IconButton, Circle, useCheckboxGroup, Stack, Clipboard, Input, chakra, HStack, Button, Textarea, Flex, ButtonGroup, Heading, Table, Square, Spinner, Badge } from '@chakra-ui/react';
+import { DataList as DataList$1, Text, Box, Icon, Circle, useCheckboxGroup, Stack, Clipboard, IconButton as IconButton$1, Input, chakra, HStack, Textarea, Flex, ButtonGroup, Button as Button$1, Heading, Table, Square, Badge } from '@chakra-ui/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronRight, ChevronDown, Pencil, Filter as Filter$1, GripVertical, X, Clipboard as Clipboard$1, Check, Link } from 'lucide-react';
+import { ChevronRight, ChevronDown, Pencil, Filter as Filter$1, GripVertical, X, Clipboard as Clipboard$1, Check, Link, Plus } from 'lucide-react';
 import React, { createContext, memo, useRef, useState, useCallback, useEffect, useMemo, useContext } from 'react';
 import dayjs2 from 'dayjs';
 import calendarPlugin from 'dayjs/plugin/calendar.js';
@@ -11,7 +13,6 @@ import relativeTime from 'dayjs/plugin/relativeTime.js';
 import utcPlugin from 'dayjs/plugin/utc.js';
 import { Select, chakraComponents } from 'chakra-react-select';
 export { Select as ChakraReactSelect, CreatableSelect, chakraComponents } from 'chakra-react-select';
-import { readableColor } from 'color2k';
 
 var Action = ({
   ref,
@@ -61,7 +62,17 @@ var Filter = ({
 }) => {
   const { activeFilterCount, ...rest } = props;
   return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-    /* @__PURE__ */ jsx(IconButton, { cursor: "pointer", ref, "aria-label": filterLabel, ...rest, children: /* @__PURE__ */ jsx(Filter$1, {}) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        cursor: "pointer",
+        ref,
+        "aria-label": filterLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsx(Filter$1, {})
+      }
+    ),
     activeFilterCount && activeFilterCount > 0 ? /* @__PURE__ */ jsx(
       Circle,
       {
@@ -140,7 +151,7 @@ var ClipboardButton = function ClipboardButton2({
   ...props
 }) {
   const { label = "Copy", ...rest } = props;
-  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 16 }), children: /* @__PURE__ */ jsx(Clipboard$1, { size: 16 }) }) }) }) });
+  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton$1, { variant: "ghost", size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 16 }), children: /* @__PURE__ */ jsx(Clipboard$1, { size: 16 }) }) }) }) });
 };
 ClipboardButton.displayName = "ClipboardButton";
 var ClipboardInput = function ClipboardInput2({
@@ -150,7 +161,7 @@ var ClipboardInput = function ClipboardInput2({
   const { inputProps, label = "Copy", ...rest } = props;
   return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsxs(Clipboard.Control, { children: [
     /* @__PURE__ */ jsx(Clipboard.Input, { asChild: true, children: /* @__PURE__ */ jsx(Input, { readOnly: true, ...inputProps }) }),
-    /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 16 }), children: /* @__PURE__ */ jsx(Clipboard$1, { size: 16 }) }) }) })
+    /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton$1, { variant: "outline", size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 16 }), children: /* @__PURE__ */ jsx(Clipboard$1, { size: 16 }) }) }) })
   ] }) });
 };
 ClipboardInput.displayName = "ClipboardInput";
@@ -159,7 +170,7 @@ var ClipboardLink = function ClipboardLink2({
   ...props
 }) {
   const { label = "Copy Link", ...rest } = props;
-  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "xs", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 14 }), children: /* @__PURE__ */ jsx(Link, { size: 14 }) }) }) }) });
+  return /* @__PURE__ */ jsx(Clipboard.Root, { ref, ...rest, children: /* @__PURE__ */ jsx(Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton$1, { variant: "ghost", size: "xs", "aria-label": label, children: /* @__PURE__ */ jsx(Clipboard.Indicator, { copied: /* @__PURE__ */ jsx(Check, { size: 14 }), children: /* @__PURE__ */ jsx(Link, { size: 14 }) }) }) }) });
 };
 ClipboardLink.displayName = "ClipboardLink";
 dayjs2.extend(utcPlugin);
@@ -212,21 +223,6 @@ var formatWeekdayDate = (date) => {
 dayjs2.extend(utcPlugin);
 dayjs2.extend(relativeTime);
 dayjs2.extend(calendarPlugin);
-function formatRelativeDateTime(date, baseDate = /* @__PURE__ */ new Date()) {
-  return dayjs2(date).from(baseDate);
-}
-function formatRelativeToCurrentWeekDateTime(date, baseDate = /* @__PURE__ */ new Date()) {
-  const isToday = dayjs2(date).isSame(baseDate, "day");
-  if (!isToday) {
-    return dayjs2(date).calendar(baseDate, {
-      sameElse: "DD MMM YYYY"
-    });
-  }
-  return formatRelativeDateTime(date, baseDate);
-}
-dayjs2.extend(utcPlugin);
-dayjs2.extend(relativeTime);
-dayjs2.extend(calendarPlugin);
 var RelativeDateTime = (props) => {
   const { date, baseDate, isRelativeToCurrentWeek, ...otherProps } = props;
   const now = /* @__PURE__ */ new Date();
@@ -241,6 +237,7 @@ var RelativeDateTime = (props) => {
   }
   return /* @__PURE__ */ jsx("time", { dateTime: machineReadableDate, ...otherProps, children: relativeDate });
 };
+RelativeDateTime.displayName = "RelativeDateTime";
 var CommentStylesContext = createContext({});
 var useStyles = () => useContext(CommentStylesContext);
 var Comment = (props) => {
@@ -321,6 +318,7 @@ var CommentFooter = (props) => {
 var CommentAction = (props) => {
   return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xs", ...props });
 };
+CommentAction.displayName = "CommentAction";
 var CommentReplyBox = ({
   ref,
   ...props
@@ -390,7 +388,7 @@ var CommentReplyBox = ({
         justifyContent: "flex-end",
         children: /* @__PURE__ */ jsxs(ButtonGroup, { marginInlineStart: "auto", size: "sm", children: [
           /* @__PURE__ */ jsx(
-            Button,
+            Button$1,
             {
               variant: "outline",
               loading: isSubmitting,
@@ -398,7 +396,7 @@ var CommentReplyBox = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "solid", loading: isSubmitting, children: replyLabel })
+          /* @__PURE__ */ jsx(Button$1, { type: "submit", variant: "solid", loading: isSubmitting, children: replyLabel })
         ] })
       }
     )
@@ -518,6 +516,7 @@ var PersonaAvatar = ({
   const { name, size, ...rest } = props;
   return /* @__PURE__ */ jsx(Avatar, { ref, name, size, ...rest });
 };
+PersonaAvatar.displayName = "PersonaAvatar";
 var PersonaDetails = ({
   ref,
   ...props
@@ -536,6 +535,7 @@ var PersonaDetails = ({
     }
   );
 };
+PersonaDetails.displayName = "PersonaDetails";
 var PersonaLabel = ({
   ref,
   ...props
@@ -543,6 +543,7 @@ var PersonaLabel = ({
   const styles = usePersonaStyles();
   return /* @__PURE__ */ jsx(chakra.span, { ref, style: styles.label, ...props });
 };
+PersonaLabel.displayName = "PersonaLabel";
 var BaseSingleValue = ({
   data,
   ...props
@@ -745,6 +746,55 @@ var createTableMenuComponents = (options) => ({
   ),
   Option: (props) => /* @__PURE__ */ jsx(TableOption, { ...props, columns: options.columns })
 });
+var SplitButton = (props) => {
+  const { label, menuItems, onClick, ...rest } = props;
+  const hasMenuItems = menuItems && menuItems.length > 0;
+  return /* @__PURE__ */ jsxs(HStack, { gap: 0.5, children: [
+    onClick && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ...rest,
+        colorPalette: "blue",
+        onClick,
+        size: "lg",
+        borderEndRadius: hasMenuItems ? "none" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { size: 16 }),
+          label
+        ]
+      }
+    ),
+    hasMenuItems && /* @__PURE__ */ jsxs(MenuRoot, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          ...rest,
+          size: "lg",
+          colorPalette: "blue",
+          borderStartRadius: onClick ? "none" : void 0,
+          children: [
+            /* @__PURE__ */ jsx(ChevronDown, { size: 16 }),
+            onClick ? null : label
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuContent, { children: menuItems.map((menuItem) => /* @__PURE__ */ jsxs(
+        MenuItem,
+        {
+          value: menuItem.label,
+          onClick: menuItem.onClick,
+          color: menuItem.color,
+          children: [
+            menuItem.icon,
+            menuItem.label
+          ]
+        },
+        menuItem.label
+      )) })
+    ] })
+  ] });
+};
+SplitButton.displayName = "SplitButton";
 var Stat = (props) => {
   const { label, value, icon, loading, ...boxProps } = props;
   return /* @__PURE__ */ jsx(
@@ -767,28 +817,6 @@ var Stat = (props) => {
   );
 };
 Stat.displayName = "Stat";
-var StatusBadge = (props) => {
-  const { label, color } = props;
-  const textColor = useMemo(() => {
-    try {
-      return readableColor(color);
-    } catch {
-      return "black";
-    }
-  }, [color]);
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      bg: color,
-      color: textColor,
-      rounded: "base",
-      px: 2,
-      marginInlineStart: 1,
-      children: label
-    }
-  );
-};
-StatusBadge.displayName = "StatusBadge";
 var TextOverflow = memo((props) => {
   const { children, ...rest } = props;
   const textElementRef = useRef(null);
@@ -840,6 +868,6 @@ var TypeBadge = ({
 };
 TypeBadge.displayName = "TypeBadge";
 
-export { Action, BaseSelect, CheckboxCard, CheckboxCardGroup, ClipboardButton, ClipboardInput, ClipboardLink, Collapse, Comment, CommentAction, CommentReplyBox, DataList, DataListItem, DataListItemLabel, DataListItemValue, date_input_default as DateInput, Edit, EmptyState, Filter, Handle, Persona, PersonaAvatar, PersonaContainer, PersonaDetails, PersonaLabel, RelativeDateTime, Remove, Stat, StatusBadge, TableMenuList, TableOption, TextOverflow, TypeBadge, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime, formatTime, formatWeekdayDate };
+export { Action, BaseSelect, CheckboxCard, CheckboxCardGroup, ClipboardButton, ClipboardInput, ClipboardLink, Collapse, Comment, CommentAction, CommentReplyBox, DataList, DataListItem, DataListItemLabel, DataListItemValue, date_input_default as DateInput, Edit, EmptyState, Filter, Handle, Persona, PersonaAvatar, PersonaContainer, PersonaDetails, PersonaLabel, RelativeDateTime, Remove, SplitButton, Stat, TableMenuList, TableOption, TextOverflow, TypeBadge, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatTime, formatWeekdayDate };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map