add: control over divider colors + Connected component

src/components.ts

@@ -59,3 +59,5 @@ export * from "./components/dapp/Countdown";
 export { default as Countdown } from "./components/dapp/Countdown";
 export * from "./components/primitives/Bar";
 export { default as Bar } from "./components/primitives/Bar";
+export * from "./components/dapp/Connected";
+export { default as Connected } from "./components/dapp/Connected";

src/components/dapp/Connected.tsx

@@ -0,0 +1,18 @@
+import { Modal, Button, WalletConnectors, type ButtonProps } from "../..";
+import { useWalletContext } from "../../context/Wallet.context";
+
+export type ConnectedProps = ButtonProps;
+
+export default function Connected({ children, ...props }: ConnectedProps) {
+  const { connected } = useWalletContext();
+
+  if (!connected)
+    return (
+      <Modal title="Connect Wallet" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
+        <Button look="hype" size="lg" {...props}>
+          Connect wallet
+        </Button>
+      </Modal>
+    );
+  return children;
+}

src/components/primitives/List.tsx

@@ -19,6 +19,7 @@ export const listStyles = tv({
     },
     index: {
       first: "",
+      alone: "",
       last: "",
     },
     look: {
@@ -109,17 +110,23 @@ export const listStyles = tv({
   ],
 });
 
-type ListElement = ReactElement<{ look: unknown; size: unknown; className?: string }>;
-export type ListProps = Component<Styled<typeof listStyles> & { indexOffset?: number }, HTMLDivElement>;
+type ListElement = ReactElement<{
+  look: unknown;
+  size: unknown;
+  className?: string;
+}>;
+export type ListProps = Component<Styled<typeof listStyles> & { indexOffset?: number, dividerClassName?: (index: number) => string; }, HTMLDivElement>;
 
-export default function List({ look, size, flex, content, className, children, indexOffset, ...props }: ListProps) {
+export default function List({ look, size, flex, content, className, children, indexOffset, dividerClassName, ...props }: ListProps) {
   const { base, item, divider } = listStyles({ look, size, content: size, flex });
 
   const definedChild = useMemo(() => {
     const [first, last] = getDefinedIndexesOfChildren(children);
 
+    //TODO: workaround for borders, might just need to update the coumpound styling
+    if (first === 0 && last === 0) return children;
     return Children.map(children as ListElement | ListElement[], (child, index) => {
-      let position: "first" | "last" | undefined = "first";
+      let position: "first" | "last" | "alone" | undefined = "first";
 
       if (index > (first ?? 0) + (indexOffset ?? 0)) position = undefined;
       if (index >= (last ?? 0) + (indexOffset ?? 0)) position = "last";
@@ -136,7 +143,7 @@ export default function List({ look, size, flex, content, className, children, i
               }),
             ),
           }),
-          index <= (last ?? 0) && <div className={divider()} />,
+          position !== "last" && <div className={mergeClass(divider(), dividerClassName?.(index))} />,
         ]
       );
     });

src/components/primitives/Table.tsx

@@ -6,7 +6,7 @@ import type { Component, Styled } from "../../utils/types";
 import Box from "./Box";
 import EventBlocker from "./EventBlocker";
 import Icon from "./Icon";
-import List from "./List";
+import List, { ListProps } from "./List";
 import Text from "./Text";
 
 export const tableStyles = tv({
@@ -144,6 +144,7 @@ export type TableProps<T extends Columns> = Component<
     header?: ReactNode;
     footer?: ReactNode;
     order?: Order;
+    hideLabels?: boolean;
     sort?: keyof T;
     loading?: boolean;
     sortable?: (keyof T)[];
@@ -197,12 +198,13 @@ export function Table<T extends Columns>({
   header,
   footer,
   order,
+  hideLabels,
   sort,
   onSort,
   className,
   children,
   ...props
-}: TableProps<T>) {
+}: TableProps<T> & { dividerClassName: ListProps["dividerClassName"] }) {
   const [_order, setOrder] = useState<"asc" | "desc">("desc");
   const [sortBy, setSortBy] = useState<keyof T | undefined>(sortable?.[0]);
 
@@ -221,7 +223,7 @@ export function Table<T extends Columns>({
     <List indexOffset={header ? 0 : 1} className={mergeClass(className)} look={look} {...props}>
       {!!header ? <Box className="bg-auto">{header}</Box> : undefined}
       {/* biome-ignore lint/suspicious/noExplicitAny: please forgive this one as well */}
-      <Row {...({ headers } as any)} columns={columns} />
+      {!hideLabels ? <Row {...(headers as any)} columns={columns} /> : undefined}
       {children}
       {!!footer ? <Box className="bg-auto">{footer}</Box> : undefined}
     </List>
@@ -230,7 +232,7 @@ export function Table<T extends Columns>({
 
 export function createTable<T extends Columns>(columns: T) {
   // biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors
-  const TemplateTable = (props: Omit<TableProps<T>, "columns">) => <Table {...(props as any)} columns={columns} />;
+  const TemplateTable = (props: Omit<TableProps<T>, "columns"> & ListProps) => <Table {...(props as any)} columns={columns} />;
 
   // biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors
   const TemplateRow = (props: Omit<RowProps<T>, "columns">) => <Row {...(props as any)} columns={columns} />;