@knkcs/anker 1.5.0 → 1.7.0

package/dist/atoms/index.d.ts

@@ -12,14 +12,14 @@ 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, colorPalette, ...props }: ButtonProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 declare const IconButton: {
-    ({ ref, ...props }: IconButtonProps & {
+    ({ ref, colorPalette, ...props }: IconButtonProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }): react_jsx_runtime.JSX.Element;
     displayName: string;

package/dist/atoms/index.js

@@ -7,8 +7,8 @@ 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 { IconButton, Button } from '../chunk-JS7ZEZV3.js';
+export { Button, IconButton } from '../chunk-JS7ZEZV3.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';

package/dist/{chunk-SJ6YXNZW.js → chunk-JS7ZEZV3.js}

@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 // src/atoms/button/button.tsx
 var Button = ({
   ref,
+  colorPalette = "primary",
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
@@ -11,6 +12,7 @@ var Button = ({
     {
       size: "md",
       variant: "secondary",
+      colorPalette,
       ref,
       ...props
     }
@@ -19,12 +21,22 @@ var Button = ({
 Button.displayName = "Button";
 var IconButton = ({
   ref,
+  colorPalette = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(IconButton$1, { size: "md", variant: "ghost", ref, ...props });
+  return /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      size: "md",
+      variant: "ghost",
+      colorPalette,
+      ref,
+      ...props
+    }
+  );
 };
 IconButton.displayName = "IconButton";
 
 export { Button, IconButton };
-//# sourceMappingURL=chunk-SJ6YXNZW.js.map
-//# sourceMappingURL=chunk-SJ6YXNZW.js.map
+//# sourceMappingURL=chunk-JS7ZEZV3.js.map
+//# sourceMappingURL=chunk-JS7ZEZV3.js.map

package/dist/chunk-JS7ZEZV3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/button/button.tsx","../src/atoms/button/icon-button.tsx"],"names":["ChakraButton","jsx","ChakraIconButton"],"mappings":";;;;AAsBO,IAAM,SAAS,CAAC;AAAA,EACtB,GAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,GAAG;AACJ,CAAA,KAA4D;AAC3D,EAAA,uBACC,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,YAAA;AAAA,MACA,GAAA;AAAA,MACC,GAAI;AAAA;AAAA,GACN;AAEF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AC9Bd,IAAM,aAAa,CAAC;AAAA,EAC1B,GAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,GAAG;AACJ,CAAA,KAAgE;AAC/D,EAAA,uBACCC,GAAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAQ,OAAA;AAAA,MACR,YAAA;AAAA,MACA,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACL;AAEF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-JS7ZEZV3.js","sourcesContent":["import {\n\tButton as ChakraButton,\n\ttype ButtonProps as ChakraButtonProps,\n} from \"@chakra-ui/react\";\n\n// Extend ButtonProps to include custom variants defined in the @knkcs/anker\n// theme (primary, secondary, link-gray) that are not in Chakra's default types.\nexport type ButtonProps = Omit<ChakraButtonProps, \"variant\"> & {\n\tvariant?:\n\t\t| \"solid\"\n\t\t| \"subtle\"\n\t\t| \"surface\"\n\t\t| \"outline\"\n\t\t| \"ghost\"\n\t\t| \"plain\"\n\t\t| \"primary\"\n\t\t| \"secondary\"\n\t\t| \"link\"\n\t\t| \"link-gray\"\n\t\t| undefined;\n};\n\nexport const Button = ({\n\tref,\n\tcolorPalette = \"primary\",\n\t...props\n}: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) => {\n\treturn (\n\t\t<ChakraButton\n\t\t\tsize=\"md\"\n\t\t\tvariant={\"secondary\" as ChakraButtonProps[\"variant\"]}\n\t\t\tcolorPalette={colorPalette}\n\t\t\tref={ref}\n\t\t\t{...(props as ChakraButtonProps)}\n\t\t/>\n\t);\n};\nButton.displayName = \"Button\";\n","import {\n\tIconButton as ChakraIconButton,\n\ttype IconButtonProps,\n} from \"@chakra-ui/react\";\n\nexport type { IconButtonProps };\n\nexport const IconButton = ({\n\tref,\n\tcolorPalette = \"primary\",\n\t...props\n}: IconButtonProps & { ref?: React.Ref<HTMLButtonElement> }) => {\n\treturn (\n\t\t<ChakraIconButton\n\t\t\tsize=\"md\"\n\t\t\tvariant=\"ghost\"\n\t\t\tcolorPalette={colorPalette}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nIconButton.displayName = \"IconButton\";\n"]}

package/dist/components/index.d.ts

@@ -189,6 +189,8 @@ interface ContextRailSectionProps {
     id: string;
     icon?: React__default.ReactNode;
     label: string;
+    defaultOpen?: boolean;
+    action?: React__default.ReactNode;
     children: React__default.ReactNode;
 }
 declare const ContextRail: {
@@ -200,7 +202,7 @@ declare const ContextRail: {
         displayName: string;
     };
     Section: {
-        ({ id, icon, label, children, }: ContextRailSectionProps): react_jsx_runtime.JSX.Element;
+        ({ id, icon, label, defaultOpen, action, children, }: ContextRailSectionProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Footer: {

package/dist/components/index.js

@@ -3,10 +3,10 @@ import { formatRelativeDateTime, StatusBadge } from '../chunk-NQN6LXYU.js';
 import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Table } from '../chunk-2QFOWHTU.js';
 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';
-import { Button, IconButton } from '../chunk-SJ6YXNZW.js';
+import { Button, IconButton } from '../chunk-JS7ZEZV3.js';
 import { Box, Flex, Text, Heading, HStack, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { PanelRightOpen, PanelRightClose, Search, X, Ellipsis, Plus, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
+import { PanelRightOpen, PanelRightClose, ChevronRight, Search, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { createContext, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
 export { createTreeCollection } from '@chakra-ui/react';
 import React3, { createContext as createContext$1, useState, useEffect, Children, useMemo, useRef, useCallback, useContext } from 'react';
@@ -555,7 +555,7 @@ var ContextRailHeader = ({
   eyebrow,
   title,
   onClose: _onClose
-}) => /* @__PURE__ */ jsxs(Box, { mb: "4", children: [
+}) => /* @__PURE__ */ jsxs(Box, { mb: "4", pb: "3", borderBottomWidth: "1px", borderBottomColor: "border", children: [
   eyebrow && /* @__PURE__ */ jsx(
     Text,
     {
@@ -585,14 +585,72 @@ var ContextRailSection = ({
   id,
   icon,
   label,
+  defaultOpen = true,
+  action,
   children
-}) => /* @__PURE__ */ jsxs(Box, { mb: "4", "data-section-id": id, children: [
-  /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", mb: "2", children: [
-    icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", color: "muted", children: icon }),
-    /* @__PURE__ */ jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: "semibold", color: "default", children: label })
-  ] }),
-  /* @__PURE__ */ jsx(Box, { children })
-] });
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-section-id": id,
+      borderBottomWidth: "1px",
+      borderBottomColor: "border-muted",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { w: "full", align: "center", gap: "2", children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              as: "button",
+              ...{ type: "button" },
+              onClick: () => setOpen((o) => !o),
+              "aria-expanded": open,
+              flex: "1",
+              align: "center",
+              gap: "2",
+              px: "0",
+              py: "3",
+              bg: "transparent",
+              border: "none",
+              cursor: "pointer",
+              textAlign: "left",
+              _hover: { bg: "bg-subtle" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    color: "muted",
+                    transform: open ? "rotate(90deg)" : "none",
+                    transition: "transform 120ms ease-out",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, "aria-hidden": true })
+                  }
+                ),
+                icon && /* @__PURE__ */ jsx(Box, { display: "inline-flex", alignItems: "center", color: "muted", children: icon }),
+                /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    as: "h3",
+                    fontSize: "2xs",
+                    fontWeight: "semibold",
+                    letterSpacing: "wider",
+                    textTransform: "uppercase",
+                    color: "muted",
+                    flex: "1",
+                    children: label
+                  }
+                )
+              ]
+            }
+          ),
+          action && /* @__PURE__ */ jsx(Box, { py: "3", children: action })
+        ] }),
+        open && /* @__PURE__ */ jsx(Box, { pb: "3", children })
+      ]
+    }
+  );
+};
 ContextRailSection.displayName = "ContextRail.Section";
 var ContextRailFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "4", pt: "4", borderTopWidth: "1px", borderTopColor: "border-muted", children });
 ContextRailFooter.displayName = "ContextRail.Footer";
@@ -977,6 +1035,9 @@ function DataTableInner(props) {
   const selectionColumn = useMemo(
     () => ({
       id: "_select",
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
       header: ({ table: table2 }) => /* @__PURE__ */ jsxs(
         Checkbox.Root,
         {
@@ -1034,6 +1095,7 @@ function DataTableInner(props) {
       /* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const sorted = header.column.getIsSorted();
+        const isSelectCol = header.column.id === "_select";
         return /* @__PURE__ */ jsx(
           Table.ColumnHeader,
           {
@@ -1049,6 +1111,7 @@ function DataTableInner(props) {
                 header.column.getToggleSortingHandler()?.(e);
               }
             } : void 0,
+            style: isSelectCol ? { width: header.column.getSize() } : void 0,
             children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
               header.isPlaceholder ? null : flexRender(
                 header.column.columnDef.header,
@@ -1078,10 +1141,17 @@ function DataTableInner(props) {
                 onRowClick(row.original);
               }
             } : void 0,
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Cell, { children: flexRender(
-              cell.column.columnDef.cell,
-              cell.getContext()
-            ) }, cell.id))
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+              Table.Cell,
+              {
+                style: cell.column.id === "_select" ? { width: cell.column.getSize() } : void 0,
+                children: flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                )
+              },
+              cell.id
+            ))
           },
           row.id
         )),