fix: time and divider

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 { Button, type ButtonProps, Modal, WalletConnectors } 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/Divider.tsx

@@ -44,9 +44,7 @@ export type DividerProps = Component<
 >;
 
 export default function Divider({ vertical = false, horizontal = true, look, className, ...props }: DividerProps) {
-  if (horizontal) return <div className={mergeClass(dividerStyles({ look }), className)} {...props} />;
+  if (horizontal && !vertical) return <div className={mergeClass(dividerStyles({ look }), className)} {...props} />;
 
-  return (
-    <div className={mergeClass(dividerStyles({ look, vertical: vertical ?? !horizontal }), className)} {...props} />
-  );
+  return <div className={mergeClass(dividerStyles({ look, vertical: true }), className)} {...props} />;
 }

src/components/primitives/List.tsx

@@ -19,6 +19,7 @@ export const listStyles = tv({
     },
     index: {
       first: "",
+      alone: "",
       last: "",
     },
     look: {
@@ -109,17 +110,36 @@ 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,11 +156,11 @@ 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))} />,
         ]
       );
     });
-  }, [children, divider, item, look, size, indexOffset]);
+  }, [children, divider, item, look, size, indexOffset, dividerClassName]);
 
   return (
     <div className={mergeClass(base(), className)} {...props}>

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, { type 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,16 +223,18 @@ 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>
   );
 }
 
 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) => (
+    // biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors
+    <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} />;

src/components/primitives/Time.tsx

@@ -3,21 +3,23 @@ import { useMemo } from "react";
 
 export type TimeProps = {
   timestamp: number | bigint;
+  prefix?: string;
   relative?: "hours" | "day" | "auto";
 };
 
-export default function Time({ timestamp }: TimeProps) {
+export default function Time({ timestamp, prefix }: TimeProps) {
   const time = useMemo(() => {
     const then = moment(Number(timestamp)).fromNow();
 
     return then
+      .replace("in ", (prefix && `${prefix} `) ?? "in ")
       .replace("/ minute| minutes/g", "m")
       .replace(/\ba\b/, "1")
       .replace(/ seconds| second/g, "s")
-      .replace(/ hours| hour/g, "h")
-      .replace(/ days| day/g, "d")
-      .replace(/ months| month/g, "d");
-  }, [timestamp]);
+      .replace(/ hours| hour/g, "hours")
+      .replace(/ days| day/g, " days")
+      .replace(/ months| month/g, " months");
+  }, [timestamp, prefix]);
 
   return time;
 }