@raystack/apsara 0.10.6 → 0.10.8

package/dist/index.css

@@ -14,7 +14,7 @@
   --background-inset-hover: #E6E8EB;
   --background-subtle: #F8F9FA;
   --background-highlight: #889096;
-  --background-invertedd: #3C4347;
+  --background-inverted: #3C4347;
   --background-accent: #E6EDFE;
   --background-accent-inverted: #3E63DD;
   --background-accent-inverted-hover: #3A5CCC;
@@ -33,7 +33,7 @@
   --border-accent: #AEC0F5;
   --border-accent-inverted: #3E63DD;
   --border-accent-inverted-hover: #3A5CCC;
-  --border-attention: #3A5CCC;
+  --border-attention: #F3BA63;
   --border-attention-inverted: #FFB224;
   --border-danger: #F3AEAF;
   --border-danger-inverted: #E5484D;
@@ -245,6 +245,7 @@
   font-size: var(--fs-100);
   font-weight: 500;
   line-height: var(--fs-600);
+  width: fit-content;
   transition: background-color var(--transition);
   padding:  var(--pd-4) var(--pd-12);
   border-radius: var(--br-4);  
@@ -589,10 +590,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-width: 200;
-  max-height: 85vh;
+  min-width: 200px;
+  min-height: 200px;
   padding: var(--pd-16);
-  margin-top: -5vh;
   z-index: 50;
   will-change: transform;
 
@@ -610,7 +610,7 @@
   position: fixed;
   inset: 0;
 
-  background-color: rgba(0, 0, 0, .15);
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
 .dialog-module_close__n9JNt {
@@ -620,7 +620,7 @@
   border-radius: 4px;
   padding: 4px;
   font-weight: 500;
-  
+
   position: absolute;
   top: 8px;
   right: 8px;
@@ -629,6 +629,7 @@
 .dialog-module_close__n9JNt:hover {
   background-color: var(--background-base-hover);
 }
+
 .container-module_container__gisZb {
   box-sizing: border-box;
   flex-shrink: 0;
@@ -1391,18 +1392,27 @@
   max-width: 220px;
   height: 100%;
   padding: var(--pd-16);
-  padding-right: 0;
   border-right: 1px solid var(--border-base);
-  overflow: hidden
+  background: var(--background-base)
+}
+
+.sidebar-module_navigations__z5B4k {
+  width: 100%;
+  gap: 2px;
+}
+
+.sidebar-module_navigationgroup__bBDHs {
+  gap: var(--pd-2);
 }
 
-.sidebar-module_logo__RaK-j {
+.sidebar-module_navigationgroupheading__MkRud {
+  gap: var(--pd-8);
   padding: var(--pd-8);
-  cursor: pointer;
+ 
 }
 
-.sidebar-module_navigations__z5B4k {
-  gap: 2px;
+.sidebar-module_navigationgroupcontent__q70dL {
+  padding-left: 24px;
 }
 
 .sidebar-module_cell__NHLSi {
@@ -1411,7 +1421,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--pd-8);
-  
+  cursor: pointer;
 }
 
 .sidebar-module_cell__NHLSi:hover,
@@ -1426,6 +1436,7 @@
 
 .sidebar-module_cellText__JV292 {
   font-weight: 500;
+  color: var(--foreground-base);
 }
 
 .sidebar-module_footer__wLl-f {
@@ -1577,10 +1588,10 @@
   font-size: 12px;
   line-height: 16px;
   caption-side: bottom;
-  color: var(--foreground-base)
+  color: var(--foreground-base);
 }
 
-.table-module_caption__xw-5e{
+.table-module_caption__xw-5e {
   margin-top: var(--mr-16);
   color: var(--foreground-muted);
 }
@@ -1597,16 +1608,18 @@
   padding-left: 1rem;
   padding-right: 1rem;
   vertical-align: middle;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .table-module_row__-1ieK {
-  border-bottom: 1px solid #000;
 }
 
 .table-module_cell__-FP3s {
   font-weight: 500;
   padding: 1rem;
+  border-bottom: 1px solid var(--border-subtle);
 }
+
 .tabs-module_root__nPU0r {
   display: flex;
 }

package/dist/index.js

@@ -5911,7 +5911,6 @@ var styles$m = {"dialogContent":"dialog-module_dialogContent__bljTL","overlay":"
 
 const dialogContent = cva(styles$m.dialogContent);
 const DialogContent = forwardRef(({ className, children, close, ...props }, forwardedRef) => {
-    console.log(close);
     return (jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [jsxRuntimeExports.jsx(Overlay$1, {}), jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ...props, ref: forwardedRef, className: dialogContent({ className }), children: [children, close && (jsxRuntimeExports.jsx(CloseButton$1, { children: jsxRuntimeExports.jsx(Cross1Icon, {}) }))] })] }));
 });
 const overlay$1 = cva(styles$m.overlay);
@@ -11568,18 +11567,20 @@ function Text({ children, className, size, ...props }) {
     return (jsxRuntimeExports.jsx("span", { className: text$1({ size, className }), ...props, children: children }));
 }
 
-var styles$6 = {"sidebar":"sidebar-module_sidebar__NXH3O","logo":"sidebar-module_logo__RaK-j","navigations":"sidebar-module_navigations__z5B4k","cell":"sidebar-module_cell__NHLSi","active":"sidebar-module_active__lfMUF","disabled":"sidebar-module_disabled__nYLU3","cellText":"sidebar-module_cellText__JV292","footer":"sidebar-module_footer__wLl-f"};
+var styles$6 = {"sidebar":"sidebar-module_sidebar__NXH3O","navigations":"sidebar-module_navigations__z5B4k","navigationgroup":"sidebar-module_navigationgroup__bBDHs","navigationgroupheading":"sidebar-module_navigationgroupheading__MkRud","navigationgroupcontent":"sidebar-module_navigationgroupcontent__q70dL","cell":"sidebar-module_cell__NHLSi","active":"sidebar-module_active__lfMUF","disabled":"sidebar-module_disabled__nYLU3","cellText":"sidebar-module_cellText__JV292","footer":"sidebar-module_footer__wLl-f"};
 
-const baseLogo = jsxRuntimeExports.jsx("img", { src: "./logo.svg", alt: "apsara", width: 16, height: 16 });
 const SidebarRoot = ({ children }) => {
     return (jsxRuntimeExports.jsx(Flex, { direction: "column", justify: "between", className: styles$6.sidebar, children: children }));
 };
-const SidebarLogo = ({ img = baseLogo, name = "Apsara", onClick, }) => {
-    return (jsxRuntimeExports.jsxs(Flex, { align: "center", direction: "row", gap: "small", className: styles$6.logo, onClick: onClick, children: [img, jsxRuntimeExports.jsx(Text, { children: name })] }));
+const SidebarLogo = ({ name = "Apsara", logo, onClick }) => {
+    return (jsxRuntimeExports.jsxs(Flex, { align: "center", direction: "row", gap: "small", onClick: onClick, className: styles$6.logo, children: [jsxRuntimeExports.jsx(Flex, { gap: "small", children: logo }), jsxRuntimeExports.jsx(Text, { children: name })] }));
 };
 const SidebarNavigations = ({ children, ...props }) => {
     return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$6.navigations, ...props, children: children }));
 };
+const SidebarNavigationsGroup = ({ icon, name, children, ...props }) => {
+    return (jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$6.navigationgroup, ...props, children: [jsxRuntimeExports.jsxs(Flex, { className: styles$6.navigationgroupheading, children: [icon && icon, jsxRuntimeExports.jsx(Text, { size: 2, style: { color: "var(--foreground-muted)" }, children: name })] }), jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$6.navigationgroupcontent, children: children })] }));
+};
 const cell$1 = cva(styles$6.cell, {
     variants: {
         active: {
@@ -11590,8 +11591,8 @@ const cell$1 = cva(styles$6.cell, {
         },
     },
 });
-const SidebarNavigationCell = ({ leadingIcon, trailingIcon, active, disabled, children, href = "#", }) => {
-    return (jsxRuntimeExports.jsxs(Link, { className: cell$1({ active, disabled }), href: href, children: [jsxRuntimeExports.jsxs(Flex, { gap: "small", children: [leadingIcon, jsxRuntimeExports.jsx(Text, { className: styles$6.cellText, children: children })] }), trailingIcon] }));
+const SidebarNavigationCell = ({ leadingIcon, trailingIcon, active, disabled, children, asChild = false, ...props }) => {
+    return (jsxRuntimeExports.jsx(Flex, { className: cell$1({ active, disabled }), ...props, children: asChild ? (children) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Flex, { gap: "small", children: [leadingIcon, jsxRuntimeExports.jsx(Text, { className: styles$6.cellText, children: children })] }), trailingIcon] })) }));
 };
 const SidebarFooter = ({ children, action }) => {
     return (jsxRuntimeExports.jsxs(Flex, { className: styles$6.footer, gap: "small", justify: "between", children: [jsxRuntimeExports.jsx(Text, { children: children }), action] }));
@@ -11599,6 +11600,7 @@ const SidebarFooter = ({ children, action }) => {
 const Sidebar = Object.assign(SidebarRoot, {
     Logo: SidebarLogo,
     Navigations: SidebarNavigations,
+    NavigationGroup: SidebarNavigationsGroup,
     NavigationCell: SidebarNavigationCell,
     Footer: SidebarFooter,
 });
@@ -15288,8 +15290,8 @@ function DataTableGloabalSearch(props) {
     return (jsxRuntimeExports.jsx(TextField, { placeholder: "Filter tasks...", value: globalFilter ?? "", onChange: (event) => onGlobalFilterChange(String(event.target.value)), ...props }));
 }
 
-function DataTableToolbar({ children, }) {
-    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$4.toolbar, children: children }));
+function DataTableToolbar({ children, ...props }) {
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$4.toolbar, ...props, children: children }));
 }
 
 function DataTableViewOptions({ children, ...props }) {
@@ -15410,13 +15412,17 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...pr
                 onGlobalFilterChange: setGlobalFilter,
                 onChange: () => ({}),
             }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { style: parentStyle, children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
-                                                    return (jsxRuntimeExports.jsx(Table.Head, { children: jsxRuntimeExports.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
+                                                    return (jsxRuntimeExports.jsx(Table.Head, { style: {
+                                                            ...(header.column.columnDef?.meta?.style ?? {}),
+                                                        }, children: jsxRuntimeExports.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
                                                                     ? null
                                                                     : flexRender(header.column.columnDef.header, header.getContext()), {
                                                                     asc: jsxRuntimeExports.jsx(ArrowUpIcon, {}),
                                                                     desc: jsxRuntimeExports.jsx(ArrowDownIcon, {}),
                                                                 }[header.column.getIsSorted()] ?? null] }) }, header.id));
-                                                }) }, headerGroup.id))) }), jsxRuntimeExports.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntimeExports.jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) })) })] }), detail] })] }), footer] }) }));
+                                                }) }, headerGroup.id))) }), jsxRuntimeExports.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntimeExports.jsx(Table.Cell, { style: {
+                                                        ...(cell.column.columnDef?.meta?.style ?? {}),
+                                                    }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) })) })] }), detail] })] }), footer] }) }));
 }
 const DataTable = Object.assign(DataTableRoot, {
     Toolbar: DataTableToolbar,