fix: versoning

Author: pyadav

packages/raystack/box/box.tsx

@@ -5,7 +5,7 @@ import styles from "./box.module.css";
 const box = cva(styles.box);
 
 type BoxProps = PropsWithChildren<VariantProps<typeof box>> &
-  HTMLAttributes<HTMLElement>;
+  HTMLAttributes<HTMLDivElement>;
 
 export function Box({ children, className, ...props }: BoxProps) {
   return (

packages/raystack/flex/flex.tsx

@@ -45,7 +45,7 @@ const flex = cva(styles.flex, {
 });
 
 type BoxProps = PropsWithChildren<VariantProps<typeof flex>> &
-  HTMLAttributes<HTMLElement>;
+  HTMLAttributes<HTMLDivElement>;
 
 export function Flex({
   children,

packages/raystack/label/label.tsx

@@ -16,12 +16,12 @@ const label = cva(styles.label, {
 });
 
 type LabelProps = PropsWithChildren<VariantProps<typeof label>> &
-  HTMLAttributes<HTMLSpanElement>;
+  HTMLAttributes<HTMLLabelElement>;
 
 export function Label({ children, className, size, ...props }: LabelProps) {
   return (
-    <span className={label({ size, className })} {...props}>
+    <label className={label({ size, className })} {...props}>
       {children}
-    </span>
+    </label>
   );
 }

packages/raystack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/apsara",
-  "version": "0.0.1",
+  "version": "0.10.0",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "engines": {
@@ -42,6 +42,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.1",
     "@tanstack/match-sorter-utils": "^8.8.4",

packages/raystack/rollup.config.mjs

@@ -1,29 +1,35 @@
+import commonjs from "@rollup/plugin-commonjs";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
 import postcss from "rollup-plugin-postcss";
 
+const defaultGlobals = {
+  react: "React",
+  "react-dom": "ReactDOM",
+};
+
 export default {
   input: "index.tsx",
   output: [
     {
       dir: "dist",
       format: "es",
-      preserveModules: true,
-      preserveModulesRoot: "src",
+
       sourcemap: true,
+      exports: "named",
     },
     {
       dir: "dist",
       format: "cjs",
-      preserveModules: true,
-      preserveModulesRoot: "src",
       sourcemap: true,
+      exports: "named",
       entryFileNames: "[name].cjs",
     },
   ],
-  external: [/node_modules/],
+  external: ["react", "react-dom"],
   plugins: [
     nodeResolve(),
+    commonjs(),
     postcss({
       extract: true,
       modules: true,

packages/raystack/sidebar/sidebar.tsx

@@ -5,7 +5,7 @@ import { Link } from "~/link";
 import { Text } from "~/text";
 import styles from "./sidebar.module.css";
 
-type SidebarRootProps = VariantProps<typeof Flex> & { children: ReactNode };
+type SidebarRootProps = VariantProps<typeof Flex> & { children?: ReactNode };
 const baseLogo = <img src="./logo.svg" alt="apsara" width={16} height={16} />;
 
 const SidebarRoot = ({ children }: SidebarRootProps) => {
@@ -18,13 +18,13 @@ const SidebarRoot = ({ children }: SidebarRootProps) => {
 
 type SidebarLogoProps = {
   img?: ReactNode;
-  brandName?: string;
+  name?: string;
   onClick?: () => void;
 };
 
 const SidebarLogo = ({
   img = baseLogo,
-  brandName = "Apsara",
+  name = "Apsara",
   onClick,
 }: SidebarLogoProps) => {
   return (
@@ -36,7 +36,7 @@ const SidebarLogo = ({
       onClick={onClick}
     >
       {img}
-      <Text>{brandName}</Text>
+      <Text>{name}</Text>
     </Flex>
   );
 };

packages/raystack/table/datatable.tsx

@@ -13,7 +13,12 @@ import {
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
-import React, { Children, ReactElement, ReactNode } from "react";
+import React, {
+  Children,
+  ComponentProps,
+  ReactElement,
+  ReactNode,
+} from "react";
 import { Flex } from "~/flex";
 import { Text } from "~/text";
 import styles from "./datatable.module.css";
@@ -29,17 +34,20 @@ import { Table } from "./table";
 import { TableContext } from "./TableContext";
 import { TableDetailContainer } from "./TableDetailContainer";
 
-interface DataTableProps<TData, TValue> {
+type DataTableProps<TData, TValue> = {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   multiRowSelectionEnabled?: boolean;
   children?: ReactNode;
-}
+  emptyState?: ReactNode;
+} & ComponentProps<typeof Table>;
 
 function DataTableRoot<TData, TValue>({
   columns,
   data,
+  emptyState,
   children,
+  ...props
 }: DataTableProps<TData, TValue>) {
   const convertedChildren = Children.toArray(children) as ReactElement[];
   const header = convertedChildren.find(
@@ -104,7 +112,7 @@ function DataTableRoot<TData, TValue>({
       >
         <Flex direction="column" className={styles.datatable}>
           {header}
-          <Table>
+          <Table {...props}>
             <Table.Header>
               {table.getHeaderGroups().map((headerGroup) => (
                 <Table.Row key={headerGroup.id}>
@@ -148,7 +156,9 @@ function DataTableRoot<TData, TValue>({
                 ))
               ) : (
                 <Table.Row>
-                  <Table.Cell colSpan={columns.length}>No results.</Table.Cell>
+                  <Table.Cell colSpan={columns.length}>
+                    {emptyState || "No results."}
+                  </Table.Cell>
                 </Table.Row>
               )}
             </Table.Body>

packages/raystack/table/table.module.css

@@ -31,6 +31,5 @@
 
 .cell {
   font-weight: 500;
-  vertical-align: middle;
   padding: 1rem;
 }