@blenx-dev/core 0.1.0

package/src/components/Switch/switch.css.ts

@@ -0,0 +1,46 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  width: tokenVars.spacing.xxl,
+  height: tokenVars.spacing.lg,
+  display: "inline-flex",
+  alignItems: "center",
+  padding: tokenVars.spacing.xxs,
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.border.default,
+  cursor: "pointer",
+  transitionProperty: "background-color",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: semanticVars.border.strong,
+    },
+  },
+});
+
+export const rootChecked = style({
+  backgroundColor: semanticVars.interactive.primary.default,
+});
+
+export const rootDisabled = style({
+  cursor: "not-allowed",
+  opacity: 0.35,
+});
+
+export const thumb = style({
+  width: tokenVars.spacing.lg,
+  height: tokenVars.spacing.lg,
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.interactive.primary.default,
+  transitionProperty: "transform, background-color",
+  transitionDuration: "150ms",
+  transform: "translateX(0)",
+});
+
+export const thumbChecked = style({
+  backgroundColor: semanticVars.surface.default,
+  transform: `translateX(${tokenVars.spacing.lg})`,
+});

package/src/components/Switch/switch.tsx

@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import clsx from "clsx";
+import { root, rootChecked, rootDisabled, thumb, thumbChecked } from "./switch.css";
+
+type Props = Omit<SwitchPrimitive.Root.Props, "style" | "className"> & {
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export function Switch({ className, style, ...props }: Props) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      render={(renderProps, { checked, disabled }) => (
+        <span
+          {...renderProps}
+          className={clsx(root, checked && rootChecked, disabled && rootDisabled, className)}
+          style={style}
+        >
+          <SwitchPrimitive.Thumb className={clsx(thumb, checked && thumbChecked)} />
+        </span>
+      )}
+    />
+  );
+}

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export type { Column, TableProps } from "./table";
+export { Table } from "./table";

package/src/components/Table/table.css.ts

@@ -0,0 +1,71 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  width: "100%",
+  borderCollapse: "collapse",
+  color: semanticVars.text.secondary,
+  boxSizing: "border-box",
+});
+
+export const head = style({
+  backgroundColor: semanticVars.background.subtle,
+});
+
+export const header = style({
+  paddingTop: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.md,
+  paddingRight: tokenVars.spacing.md,
+  fontSize: tokenVars.fontSize.md,
+  fontWeight: 600,
+  color: semanticVars.text.secondary,
+  textAlign: "left",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.border.default,
+  whiteSpace: "nowrap",
+  userSelect: "none",
+});
+
+export const row = style({
+  transition: "background-color 0.15s ease",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+  },
+});
+
+export const cell = style({
+  paddingTop: tokenVars.spacing.sm,
+  paddingBottom: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.md,
+  paddingRight: tokenVars.spacing.md,
+  fontSize: tokenVars.fontSize.md,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.border.subtle,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});
+
+export const wrapper = style({
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  borderRadius: tokenVars.borderRadius.default,
+  maxWidth: "100%",
+  overflowX: "auto",
+});
+
+export const alignLeft = style({ textAlign: "left" });
+export const alignCenter = style({ textAlign: "center" });
+export const alignRight = style({ textAlign: "right" });
+
+export const colorSecondary = style({
+  color: semanticVars.text.secondary,
+});

package/src/components/Table/table.tsx

@@ -0,0 +1,117 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import {
+  root,
+  head,
+  header,
+  cell,
+  wrapper,
+  alignLeft,
+  alignCenter,
+  alignRight,
+  colorSecondary,
+} from "./table.css";
+import * as tableCss from "./table.css";
+import { Box } from "../Box";
+
+export interface Column<TData> {
+  key: keyof TData;
+  header: ReactNode;
+  cell?: (row: TData) => ReactNode;
+  width?: string;
+  align?: "left" | "center" | "right";
+  cellProps?: Record<string, unknown>;
+}
+
+export interface TableProps<TData> {
+  columnData: Column<TData>[];
+  rowData: TData[];
+  rowKey?: keyof TData & string;
+  getRowProps?: (
+    row: TData,
+    index: number,
+  ) => {
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    style?: React.CSSProperties;
+    [key: string]: unknown;
+  };
+  style?: React.CSSProperties;
+  className?: string;
+  color?: "secondary";
+}
+
+const cellAlignMap = {
+  left: alignLeft,
+  center: alignCenter,
+  right: alignRight,
+} as const;
+
+function getCellValue<TData>(col: Column<TData>, row: TData): React.ReactNode {
+  if (col?.cell) {
+    return col.cell(row);
+  }
+  return row[col.key] as React.ReactNode;
+}
+
+export function Table<TData>({
+  columnData,
+  rowData,
+  rowKey,
+  getRowProps,
+  style,
+  className,
+  color,
+}: TableProps<TData>) {
+  return (
+    <Box className={clsx(wrapper, color && colorSecondary, className)} style={style}>
+      <table className={clsx(root, color && colorSecondary)}>
+        <thead className={head}>
+          <tr>
+            {columnData.map((col) => (
+              <th
+                key={col.key.toString()}
+                style={col.width ? { width: col.width } : undefined}
+                className={clsx(header, col.align && cellAlignMap[col.align])}
+              >
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rowData.map((dataRow, index) => {
+            const key = rowKey ? (dataRow[rowKey] as string) : index.toString();
+            const rowProps = getRowProps?.(dataRow, index);
+            return (
+              <tr
+                key={key}
+                {...rowProps}
+                className={clsx(
+                  tableCss.row,
+                  (rowProps as Record<string, unknown> | undefined)?.className as
+                    | string
+                    | undefined,
+                )}
+              >
+                {columnData.map((col) => (
+                  <td
+                    key={col.key.toString()}
+                    {...col.cellProps}
+                    className={clsx(
+                      cell,
+                      col.align && cellAlignMap[col.align],
+                      (col.cellProps?.className as string | undefined) || undefined,
+                    )}
+                  >
+                    {getCellValue(col, dataRow)}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Box>
+  );
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export * from "./tabs";

package/src/components/Tabs/tabs.css.ts

@@ -0,0 +1,250 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: tokenVars.spacing.md,
+  width: "100%",
+  border: "none",
+  backgroundColor: "transparent",
+  padding: 0,
+  borderRadius: 0,
+  outline: "none",
+});
+
+export const rootVertical = style({
+  flexDirection: "row",
+  alignItems: "flex-start",
+  gap: tokenVars.spacing.lg,
+});
+
+export const list = style({
+  position: "relative",
+  display: "flex",
+  overflow: "hidden",
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  padding: 0,
+  borderRadius: 0,
+});
+
+export const listDefault = style({
+  flexDirection: "row",
+  alignItems: "stretch",
+  gap: 0,
+  padding: 0,
+  backgroundColor: "transparent",
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.border.subtle,
+  borderRadius: 0,
+});
+
+export const listUnderline = style({
+  display: "flex",
+  alignItems: "stretch",
+  gap: tokenVars.spacing.lg,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.border.subtle,
+  padding: 0,
+});
+
+export const listUnderlineVertical = style({
+  flexDirection: "column",
+  alignSelf: "auto",
+  alignItems: "stretch",
+  gap: 0,
+  padding: 0,
+  paddingRight: tokenVars.spacing.sm,
+  backgroundColor: "transparent",
+  borderRightWidth: 1,
+  borderRightStyle: "solid",
+  borderRightColor: semanticVars.border.subtle,
+  borderRadius: 0,
+});
+
+export const listVertical = style({
+  flexDirection: "column",
+  alignItems: "stretch",
+  minWidth: 220,
+  borderRightWidth: 1,
+  borderRightStyle: "solid",
+  borderRightColor: semanticVars.border.subtle,
+});
+
+export const tabActiveVertical = style({
+  color: semanticVars.text.primary,
+  fontWeight: tokenVars.fontWeight.semibold,
+  backgroundColor: semanticVars.background.subtle,
+  borderRightWidth: 2,
+  borderRightStyle: "solid",
+  borderRightColor: semanticVars.interactive.secondary.default,
+});
+
+export const tabUnderlineActive = style({
+  color: semanticVars.text.primary,
+  fontWeight: tokenVars.fontWeight.semibold,
+  borderBottomWidth: 2,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.text.primary,
+});
+
+export const listGhost = style({
+  display: "flex",
+  gap: tokenVars.spacing.sm,
+});
+
+export const tabGhost = style({
+  padding: `${tokenVars.spacing.sm} ${tokenVars.spacing.md}`,
+  borderRadius: tokenVars.borderRadius.md,
+  color: semanticVars.text.secondary,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+  },
+});
+
+export const tabGhostActive = style({
+  backgroundColor: semanticVars.background.subtle,
+  color: semanticVars.text.primary,
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const listSegmented = style({
+  display: "flex",
+  gap: tokenVars.spacing.xxs,
+  padding: tokenVars.spacing.xxs,
+  backgroundColor: semanticVars.background.subtle,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.subtle,
+  borderRadius: tokenVars.borderRadius.lg,
+});
+
+export const tabSegmented = style({
+  padding: `${tokenVars.spacing.sm} ${tokenVars.spacing.md}`,
+  borderRadius: tokenVars.borderRadius.md,
+  color: semanticVars.text.secondary,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.surface.default,
+    },
+  },
+});
+
+export const tabSegmentedActive = style({
+  backgroundColor: semanticVars.surface.default,
+  color: semanticVars.interactive.primaryFg,
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const tab = style({
+  position: "relative",
+  zIndex: 1,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: tokenVars.spacing.xs,
+  minHeight: 36,
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  appearance: "none",
+  outline: "none",
+  borderWidth: 0,
+  border: "none",
+  textDecoration: "none",
+  whiteSpace: "nowrap",
+  userSelect: "none",
+  font: "inherit",
+  fontFamily: tokenVars.font.body,
+  WebkitTapHighlightColor: "transparent",
+  transition: `color ${tokenVars.duration.normal} ${tokenVars.easing.standard}, background-color ${tokenVars.duration.normal} ${tokenVars.easing.standard}, box-shadow ${tokenVars.duration.normal} ${tokenVars.easing.standard}`,
+});
+
+export const tabDefault = style({
+  position: "relative",
+  padding: `${tokenVars.spacing.sm} ${tokenVars.spacing.md}`,
+  borderRadius: 0,
+  color: semanticVars.text.secondary,
+  fontSize: tokenVars.fontSize.sm,
+  fontWeight: tokenVars.fontWeight.medium,
+  lineHeight: 1.2,
+  minHeight: 40,
+  backgroundColor: "transparent",
+  selectors: {
+    "&:hover": {
+      color: semanticVars.text.primary,
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `inset 0 -2px 0 ${semanticVars.interactive.secondary}`,
+    },
+  },
+});
+
+export const tabVertical = style({
+  width: "100%",
+  justifyContent: "flex-start",
+});
+
+export const tabActive = style({
+  color: semanticVars.text.primary,
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const tabDisabled = style({
+  opacity: 0.45,
+  cursor: "not-allowed",
+});
+
+export const tabActiveDefault = style({
+  color: semanticVars.text.primary,
+  fontWeight: tokenVars.fontWeight.semibold,
+  backgroundColor: "transparent",
+  borderBottomWidth: 2,
+  borderBottomStyle: "solid",
+  borderBottomColor: semanticVars.interactive.secondary.default,
+});
+
+export const tabUnderline = style({
+  padding: `${tokenVars.spacing.sm} 0`,
+  borderRadius: 0,
+  color: semanticVars.text.secondary,
+  fontSize: tokenVars.fontSize.sm,
+  fontWeight: tokenVars.fontWeight.medium,
+  backgroundColor: "transparent",
+  selectors: {
+    "&:hover": {
+      color: semanticVars.text.primary,
+    },
+  },
+});
+
+export const indicator = style({
+  position: "absolute",
+  pointerEvents: "none",
+});
+
+export const indicatorDefault = style({
+  display: "none",
+});
+
+export const indicatorUnderline = style({
+  zIndex: 0,
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.interactive.secondary.default,
+});
+
+export const panel = style({
+  minWidth: 0,
+  paddingTop: tokenVars.spacing.lg,
+  outline: "none",
+});
+
+export const panelVertical = style({
+  flex: 1,
+});

package/src/components/Tabs/tabs.tsx

@@ -0,0 +1,119 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import clsx from "clsx";
+import * as React from "react";
+import {
+  root,
+  rootVertical,
+  list,
+  listUnderline,
+  listGhost,
+  listSegmented,
+  tab,
+  tabUnderline,
+  tabGhost,
+  tabSegmented,
+  tabVertical,
+  tabUnderlineActive,
+  tabGhostActive,
+  tabSegmentedActive,
+  tabDisabled,
+  panel,
+  panelVertical,
+} from "./tabs.css";
+
+type TabsVariant = "underline" | "ghost" | "segmented";
+
+type TabsRootProps = TabsPrimitive.Root.Props & {
+  variant?: TabsVariant;
+};
+
+type TabsListProps = TabsPrimitive.List.Props;
+
+type TabsTabProps = TabsPrimitive.Tab.Props;
+
+type TabsPanelProps = TabsPrimitive.Panel.Props;
+
+type TabsContextValue = {
+  variant: TabsVariant;
+};
+
+const DEFAULT_VARIANT: TabsVariant = "underline";
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+function useTabsContext(): TabsContextValue {
+  return React.useContext(TabsContext) ?? { variant: DEFAULT_VARIANT };
+}
+
+export function Tabs({ children, variant = DEFAULT_VARIANT, ...props }: TabsRootProps) {
+  const contextValue = React.useMemo(() => ({ variant }), [variant]);
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <TabsPrimitive.Root
+        className={(state) => clsx(root, state.orientation === "vertical" && rootVertical)}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.Root>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ className, ...props }: TabsListProps) {
+  const { variant } = useTabsContext();
+
+  return (
+    <TabsPrimitive.List
+      className={clsx(
+        list,
+        variant === "underline" && listUnderline,
+        variant === "ghost" && listGhost,
+        variant === "segmented" && listSegmented,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsTab({ className, ...props }: TabsTabProps) {
+  const { variant } = useTabsContext();
+
+  return (
+    <TabsPrimitive.Tab
+      className={(state) =>
+        clsx(
+          tab,
+          variant === "underline" && tabUnderline,
+          variant === "ghost" && tabGhost,
+          variant === "segmented" && tabSegmented,
+          state.orientation === "vertical" && tabVertical,
+          state.active && variant === "underline" && tabUnderlineActive,
+          state.active && variant === "ghost" && tabGhostActive,
+          state.active && variant === "segmented" && tabSegmentedActive,
+          state.disabled && tabDisabled,
+          className,
+        )
+      }
+      {...props}
+    />
+  );
+}
+
+export function TabsIndicator() {
+  return null;
+}
+
+function TabsPanel({ className, ...props }: TabsPanelProps) {
+  return (
+    <TabsPrimitive.Panel
+      className={(state) =>
+        clsx(panel, state.orientation === "vertical" && panelVertical, className)
+      }
+      {...props}
+    />
+  );
+}
+
+export { TabsPanel };

package/src/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from "./text";
+export type { TextProps } from "./text";