@knkcs/anker 0.0.3 → 0.0.5

package/dist/atoms/index.d.ts

@@ -1,13 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode } from '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 { ButtonProps as ButtonProps$1, IconButtonProps, BoxProps, useCheckboxGroup, StackProps, UseCheckboxGroupProps, Clipboard, InputProps, DataList as DataList$1, HTMLChakraProps, TextProps, BadgeProps } from '@chakra-ui/react';
+export { 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';
 
+type ButtonProps = Omit<ButtonProps$1, "variant"> & {
+    variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain" | "primary" | "secondary" | "link" | "link-gray" | undefined;
+};
 declare const Button: {
     ({ ref, ...props }: ButtonProps & {
         ref?: React.Ref<HTMLButtonElement>;
@@ -141,6 +144,16 @@ declare const ClipboardLink: {
     displayName: string;
 };
 
+interface ColorSwatchPickerProps {
+    value?: string;
+    onChange: (color: string) => void;
+    presets?: string[];
+    showHexInput?: boolean;
+    showPreview?: boolean;
+    size?: "sm" | "md" | "lg";
+}
+declare const ColorSwatchPicker: React__default.FC<ColorSwatchPickerProps>;
+
 type DateType = Date | string | number;
 type DateFormat = "fullWithSeconds" | "full" | "time" | "day" | "weekday";
 
@@ -569,4 +582,4 @@ interface TypeBadgeProps extends Omit<BadgeProps, "children"> {
 }
 declare const TypeBadge: React__default.FC<TypeBadgeProps>;
 
-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 };
+export { Action, type ActionProps, type BaseOption, BaseSelect, type BaseSelectProps, Button, type ButtonProps, CheckboxCard, CheckboxCardGroup, type CheckboxCardGroupProps, type CheckboxCardProps, ClipboardButton, type ClipboardButtonProps, ClipboardInput, type ClipboardInputProps, ClipboardLink, type ClipboardLinkProps, Collapse, type CollapseProps, ColorSwatchPicker, type ColorSwatchPickerProps, 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,10 +1,17 @@
-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, 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 { Prose, Avatar } from '../chunk-ZFBDVERP.js';
+import { formatRelativeToCurrentWeekDateTime, formatRelativeDateTime } from '../chunk-NQN6LXYU.js';
+export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime } from '../chunk-NQN6LXYU.js';
+import { Tooltip, Table, MenuRoot, MenuTrigger, MenuContent, MenuItem, Badge } from '../chunk-2QFOWHTU.js';
+export { SearchInput } from '../chunk-E7KRPPCQ.js';
+import { Textarea } from '../chunk-NFZMG6ZL.js';
+import { text_input_default } from '../chunk-OU6H3KU4.js';
+export { text_input_default as TextInput } from '../chunk-OU6H3KU4.js';
+import { Spinner } from '../chunk-5YDCDC4B.js';
+import { IconButton, Button } from '../chunk-SJ6YXNZW.js';
+export { Button, IconButton } from '../chunk-SJ6YXNZW.js';
+import { Text, Box, Stack as Stack$1, Flex, HStack, Heading } from '../chunk-G4QMIXLC.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { DataList as DataList$1, Icon, Circle, useCheckboxGroup, Stack, Box as Box$1, Clipboard, IconButton as IconButton$1, Input, chakra, ButtonGroup, Button as Button$1, Square } from '@chakra-ui/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';
@@ -128,7 +135,7 @@ var CheckboxCard = (props) => {
   const { checkboxProps, children, ...rest } = props;
   const id = React.useId();
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       cursor: "pointer",
       css: {
@@ -140,7 +147,7 @@ var CheckboxCard = (props) => {
       asChild: true,
       children: /* @__PURE__ */ jsxs("label", { children: [
         /* @__PURE__ */ jsx("input", { type: "checkbox", "aria-labelledby": id, ...checkboxProps }),
-        /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(Stack, { direction: "row", children: /* @__PURE__ */ jsx(Box, { flex: "1", id, children }) }) })
+        /* @__PURE__ */ jsx(Box$1, { ...rest, children: /* @__PURE__ */ jsx(Stack, { direction: "row", children: /* @__PURE__ */ jsx(Box$1, { flex: "1", id, children }) }) })
       ] })
     }
   );
@@ -173,6 +180,84 @@ var ClipboardLink = function ClipboardLink2({
   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";
+var DEFAULT_PRESETS = [
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6",
+  "#ec4899",
+  "#14b8a6",
+  "#6b7280"
+];
+var SWATCH_SIZES = { sm: 4, md: 5, lg: 7 };
+var ColorSwatchPicker = ({
+  value,
+  onChange,
+  presets = DEFAULT_PRESETS,
+  showHexInput = false,
+  showPreview = false,
+  size = "md"
+}) => {
+  const [hexInput, setHexInput] = useState(value ?? "");
+  useEffect(() => {
+    setHexInput(value ?? "");
+  }, [value]);
+  const swatchSize = SWATCH_SIZES[size];
+  const handleHexSubmit = () => {
+    const trimmed = hexInput.trim();
+    if (/^#[0-9a-fA-F]{6}$/.test(trimmed)) {
+      onChange(trimmed);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 2, children: presets.map((color) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        w: swatchSize,
+        h: swatchSize,
+        rounded: "sm",
+        bg: color,
+        cursor: "pointer",
+        borderWidth: "2px",
+        borderColor: value === color ? "border.emphasized" : "transparent",
+        onClick: () => onChange(color),
+        _hover: { transform: "scale(1.1)" },
+        transition: "transform 0.1s"
+      },
+      color
+    )) }),
+    (showHexInput || showPreview) && /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+      showPreview && /* @__PURE__ */ jsx(
+        Box,
+        {
+          w: 9,
+          h: 9,
+          rounded: "md",
+          bg: value || "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          flexShrink: 0
+        }
+      ),
+      showHexInput && /* @__PURE__ */ jsx(
+        text_input_default,
+        {
+          value: hexInput,
+          onChange: (e) => setHexInput(e.target.value),
+          onBlur: handleHexSubmit,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleHexSubmit();
+          },
+          placeholder: "#000000",
+          size: "sm",
+          maxW: "120px"
+        }
+      )
+    ] })
+  ] });
+};
+ColorSwatchPicker.displayName = "ColorSwatchPicker";
 dayjs2.extend(utcPlugin);
 function formatDateAndTime(date, format = "full") {
   let template;
@@ -263,8 +348,8 @@ var Comment = (props) => {
   };
   return /* @__PURE__ */ jsx(chakra.div, { css: styles.container, "data-id": id, ...rest, children: /* @__PURE__ */ jsxs(CommentStylesContext.Provider, { value: styles, children: [
     avatar && /* @__PURE__ */ jsx(AvatarSlot, { children: avatar }),
-    (content || isDeleted) && /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-      /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+    (content || isDeleted) && /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(Stack$1, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
         /* @__PURE__ */ jsx(CommentHeader, { ...headerProps }),
         /* @__PURE__ */ jsx(
           Prose,
@@ -286,7 +371,7 @@ var Comment = (props) => {
       ] }),
       /* @__PURE__ */ jsx(CommentFooter, { ...footerProps })
     ] }) }),
-    children && /* @__PURE__ */ jsx(Stack, { gap: 4, css: styles.children, children })
+    children && /* @__PURE__ */ jsx(Stack$1, { gap: 4, css: styles.children, children })
   ] }) });
 };
 Comment.displayName = "Comment";
@@ -396,7 +481,16 @@ var CommentReplyBox = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx(Button$1, { type: "submit", variant: "solid", loading: isSubmitting, children: replyLabel })
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              type: "submit",
+              variant: "solid",
+              colorPalette: "primary",
+              loading: isSubmitting,
+              children: replyLabel
+            }
+          )
         ] })
       }
     )
@@ -456,7 +550,7 @@ var date_input_default = DateInput;
 var EmptyState = (props) => {
   const { header, description, icon, actions } = props;
   return /* @__PURE__ */ jsxs(
-    Stack,
+    Stack$1,
     {
       justifyContent: "center",
       alignItems: "center",
@@ -468,7 +562,7 @@ var EmptyState = (props) => {
         icon,
         /* @__PURE__ */ jsx(Heading, { size: "lg", children: header }),
         description && /* @__PURE__ */ jsx(Text, { color: "muted", fontSize: "sm", children: description }),
-        actions && /* @__PURE__ */ jsx(Stack, { pt: 4, gap: 2, children: actions })
+        actions && /* @__PURE__ */ jsx(Stack$1, { pt: 4, gap: 2, children: actions })
       ]
     }
   );
@@ -806,12 +900,12 @@ var Stat = (props) => {
       borderRadius: "lg",
       boxShadow: "sm",
       ...boxProps,
-      children: /* @__PURE__ */ jsxs(Stack, { gap: { base: "5", md: "6" }, children: [
-        /* @__PURE__ */ jsx(Stack, { direction: "row", justify: "space-between", children: /* @__PURE__ */ jsxs(HStack, { gap: "4", children: [
+      children: /* @__PURE__ */ jsxs(Stack$1, { gap: { base: "5", md: "6" }, children: [
+        /* @__PURE__ */ jsx(Stack$1, { direction: "row", justify: "space-between", children: /* @__PURE__ */ jsxs(HStack, { gap: "4", children: [
           icon && /* @__PURE__ */ jsx(Square, { size: "8", bg: "bg-accent-subtle", borderRadius: "md", children: icon }),
           /* @__PURE__ */ jsx(Text, { fontWeight: "medium", children: label })
         ] }) }),
-        /* @__PURE__ */ jsx(Stack, { gap: "4", children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Heading, { size: { base: "sm", md: "md" }, children: value ?? 0 }) })
+        /* @__PURE__ */ jsx(Stack$1, { gap: "4", children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Heading, { size: { base: "sm", md: "md" }, children: value ?? 0 }) })
       ] })
     }
   );
@@ -868,6 +962,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, SplitButton, Stat, TableMenuList, TableOption, TextOverflow, TypeBadge, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatTime, formatWeekdayDate };
+export { Action, BaseSelect, CheckboxCard, CheckboxCardGroup, ClipboardButton, ClipboardInput, ClipboardLink, Collapse, ColorSwatchPicker, 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