@rebasepro/ui 0.6.0 → 0.7.0

package/dist/views/Kanban/board_types.d.ts

@@ -0,0 +1,61 @@
+import { CSSProperties } from "react";
+export type ChipColorKey = "primary" | "secondary" | "success" | "warning" | "error" | "info" | "neutral" | string;
+export type ChipColorScheme = "filled" | "outlined" | "tinted" | string;
+/**
+ * Item wrapper for elements in the Board component
+ */
+export interface BoardItem<T = any> {
+    id: string;
+    data: T;
+}
+/**
+ * Map of column keys to arrays of board items
+ */
+export interface BoardItemMap<T = any> {
+    [columnKey: string]: BoardItem<T>[];
+}
+/**
+ * Props passed to custom item render components
+ */
+export interface BoardItemViewProps<T = any> {
+    item: BoardItem<T>;
+    isDragging: boolean;
+    isClone?: boolean;
+    isGroupedOver?: boolean;
+    style?: CSSProperties;
+    index?: number;
+}
+/**
+ * Per-column loading state
+ */
+export interface ColumnLoadingState {
+    [columnKey: string]: {
+        loading: boolean;
+        hasMore: boolean;
+        itemCount: number;
+        totalCount?: number;
+    };
+}
+/**
+ * Props for the Board component
+ */
+export interface BoardProps<T, COLUMN extends string> {
+    data: BoardItem<T>[];
+    columns: COLUMN[];
+    columnLabels?: Record<COLUMN, string>;
+    columnColors?: Record<COLUMN, any>;
+    className?: string;
+    assignColumn: (item: BoardItem<T>) => COLUMN;
+    allowColumnReorder?: boolean;
+    onColumnReorder?: (columns: COLUMN[]) => void;
+    onItemsReorder?: (items: BoardItem<T>[], moveInfo?: {
+        itemId: string;
+        sourceColumn: COLUMN;
+        targetColumn: COLUMN;
+    }) => void;
+    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
+    columnLoadingState?: ColumnLoadingState;
+    onLoadMoreColumn?: (column: COLUMN) => void;
+    onAddItemToColumn?: (column: COLUMN) => void;
+    AddColumnComponent?: React.ReactNode;
+}

package/dist/views/Kanban/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./board_types";
+export * from "./BoardColumnTitle";
+export * from "./BoardSortableList";
+export * from "./BoardColumn";
+export * from "./Board";

package/dist/views/KanbanView.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./Kanban/board_types";
+export type KanbanViewProps<T, COLUMN extends string> = {
+    columns: COLUMN[];
+    columnLabels?: Record<COLUMN, string>;
+    columnColors?: Record<COLUMN, any>;
+    className?: string;
+    assignColumn: (item: BoardItem<T>) => COLUMN;
+    allowColumnReorder?: boolean;
+    onColumnReorder?: (columns: COLUMN[]) => void;
+    onItemsReorder?: (items: BoardItem<T>[], moveInfo?: {
+        itemId: string;
+        sourceColumn: COLUMN;
+        targetColumn: COLUMN;
+    }) => void;
+    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
+    columnLoadingState?: ColumnLoadingState;
+    onLoadMoreColumn?: (column: COLUMN) => void;
+    onAddItemToColumn?: (column: COLUMN) => void;
+    AddColumnComponent?: React.ReactNode;
+    data: BoardItem<T>[];
+};
+export declare function KanbanView<T, COLUMN extends string>(props: KanbanViewProps<T, COLUMN>): React.JSX.Element;
+export type { BoardItem, BoardItemViewProps, ColumnLoadingState };

package/dist/views/ListView.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+export type CollectionSize = "xs" | "s" | "m" | "l" | "xl";
+export type ListViewColumnDef<T> = {
+    key: string;
+    label: string;
+    align?: "left" | "center" | "right";
+    width?: string;
+    renderCell: (item: T) => React.ReactNode;
+    isTitle?: boolean;
+};
+export type ListViewProps<T> = {
+    data: T[];
+    dataLoading?: boolean;
+    noMoreToLoad?: boolean;
+    dataLoadingError?: Error;
+    itemCount?: number;
+    setItemCount?: (itemCount: number) => void;
+    pageSize?: number;
+    paginationEnabled?: boolean;
+    onItemClick?: (item: T) => void;
+    selectedIds?: Set<string | number>;
+    highlightedIds?: Set<string | number>;
+    selectionEnabled?: boolean;
+    onSelectionChange?: (item: T, selected: boolean) => void;
+    emptyComponent?: React.ReactNode;
+    size?: CollectionSize;
+    selectedEntityId?: string | number;
+    renderRow: (params: {
+        item: T;
+        index: number;
+        style: React.CSSProperties;
+        className: string;
+        selected: boolean;
+        highlighted: boolean;
+        isLast: boolean;
+        onClick: (e: React.MouseEvent) => void;
+        onSelectionChange: (selected: boolean) => void;
+    }) => React.ReactNode;
+};
+export declare function ListView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, emptyComponent, size, selectedEntityId, renderRow }: ListViewProps<T>): React.JSX.Element;

package/dist/views/TableView.d.ts

@@ -0,0 +1,6 @@
+export { VirtualTable as TableView } from "../components/VirtualTable/VirtualTable";
+export type { VirtualTableProps as TableViewProps } from "../components/VirtualTable/VirtualTableProps";
+export type OnColumnResizeParams = {
+    width: number;
+    key: string;
+};

package/dist/views/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./ListView";
+export * from "./CardView";
+export * from "./KanbanView";
+export * from "./TableView";
+export * from "./CollectionView";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Alert.tsx

@@ -58,7 +58,7 @@ export const Alert: React.FC<AlertProps> = ({
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",
-                "rounded-md flex items-center gap-2",
+                "rounded-lg flex items-center gap-2",
                 classes,
                 outerClassName)}>
             <div className={cls("grow", className)}>{children}</div>

package/src/components/BooleanSwitchWithLabel.tsx

@@ -69,7 +69,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 !invisible && fieldBackgroundMixin,
                 !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin),
                 disabled ? "cursor-default" : "cursor-pointer",
-                "rounded-md max-w-full justify-between box-border relative inline-flex items-center",
+                "rounded-lg max-w-full justify-between box-border relative inline-flex items-center",
                 !invisible && focus && !disabled ? focusedClasses : "",
                 error ? "text-red-500 dark:text-red-600" : (focus && !disabled ? "text-primary" : (!disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark")),
                 {

package/src/components/Button.tsx

@@ -32,17 +32,17 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<React.ElementType>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]";
+        "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
         "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants

package/src/components/Chip.tsx

@@ -25,10 +25,10 @@ export interface ChipProps {
 }
 
 const sizeClassNames = {
-    smallest: "px-1.5 text-xs",
-    small: "px-2 py-0.5 text-sm",
-    medium: "px-3 py-1 text-sm",
-    large: "px-4 py-1.5 text-sm"
+    smallest: "px-1.5 py-px text-[10px]",
+    small: "px-2 py-0.5 text-xs",
+    medium: "px-2.5 py-0.5 text-xs",
+    large: "px-3 py-1 text-xs"
 }
 
 /**
@@ -40,6 +40,21 @@ function isDarkMode(): boolean {
         document.documentElement.classList.contains("dark");
 }
 
+/**
+ * Helper to generate rgba from hex or standard colors.
+ */
+function getRgba(hex: string, alpha: number): string {
+    if (!hex || !hex.startsWith("#")) return hex;
+    let color = hex.slice(1);
+    if (color.length === 3) {
+        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+    }
+    const r = parseInt(color.slice(0, 2), 16);
+    const g = parseInt(color.slice(2, 4), 16);
+    const b = parseInt(color.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 /**
  * @group Preview components
  */
@@ -50,28 +65,15 @@ export function Chip({
                          outlined,
                          onClick,
                          icon,
-                         size = "large",
+                         size = "medium",
                          className,
                          style
                      }: ChipProps) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
-
-    // Resolve theme-aware colors
     const dark = isDarkMode();
 
-    // Helper to generate rgba from hex or standard colors
-    const getRgba = (hex: string, alpha: number): string => {
-        if (!hex || !hex.startsWith("#")) return hex;
-        let color = hex.slice(1);
-        if (color.length === 3) {
-            color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-        }
-        const r = parseInt(color.slice(0, 2), 16);
-        const g = parseInt(color.slice(2, 4), 16);
-        const b = parseInt(color.slice(4, 6), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    };
+    const hasScheme = error || usedColorScheme;
 
     let textColor = "";
     let bgColor = "";
@@ -81,44 +83,44 @@ export function Chip({
         textColor = dark ? "#f87171" : "#dc2626";
     } else if (usedColorScheme) {
         textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
-    } else {
-        textColor = dark ? "#d4d4d4" : "#404040";
     }
 
-    if (outlined) {
-        bgColor = getRgba(textColor, dark ? 0.12 : 0.06);
-        border = `1px solid ${getRgba(textColor, dark ? 0.25 : 0.18)}`;
-    } else {
-        if (error) {
-            bgColor = dark ? "rgba(220, 38, 38, 0.2)" : "rgba(239, 68, 68, 0.15)";
-            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.4)" : "rgba(239, 68, 68, 0.3)"}`;
+    if (hasScheme) {
+        if (outlined) {
+            bgColor = getRgba(textColor, dark ? 0.1 : 0.06);
+            border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;
+        } else if (error) {
+            bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
         } else if (usedColorScheme) {
             bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
-        } else {
-            bgColor = dark ? "#1f1f1f" : "#f4f4f5";
-            border = `1px solid ${dark ? "#2e2e30" : "#e4e4e7"}`;
         }
     }
 
     return (
         <div
-            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
-                onClick ? "cursor-pointer hover:bg-surface-accent-300 dark:hover:bg-surface-accent-700" : "",
+                "transition-colors duration-150",
+                !hasScheme && "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark border border-surface-200 dark:border-surface-700",
+                !hasScheme && outlined && "bg-transparent dark:bg-transparent",
+                onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "",
                 sizeClassNames[size],
                 className)}
             onClick={onClick}
             style={{
-                backgroundColor: bgColor,
-                color: textColor,
-                border: border || undefined,
+                ...(hasScheme ? {
+                    backgroundColor: bgColor,
+                    color: textColor,
+                    border: border || undefined,
+                } : {}),
                 overflow: "hidden",
                 ...style
             }}
         >
-            {children}
             {icon}
+            {children}
         </div>
     );
 }

package/src/components/DateTimeField.tsx

@@ -225,7 +225,7 @@ hour12: false,
             <style>{inputStyles}</style>
             <div
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     {
@@ -272,7 +272,7 @@ hour12: false,
                     className={cls(
                         "w-full outline-hidden bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
-                        "rounded-md",
+                        "rounded-lg",
                         {
                             "min-h-[28px]": size === "smallest",
                             "min-h-[32px]": size === "small",

package/src/components/Dialog.tsx

@@ -127,7 +127,7 @@ export const Dialog = ({
                                 fullHeight && !fullScreen ? "h-full" : undefined,
                                 "text-surface-accent-900 dark:text-white",
                                 "justify-center items-center",
-                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
+                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg",
                                 "ease-in-out duration-200",
                                 scrollable && "overflow-y-auto",
                                 displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]",

package/src/components/ExpandablePanel.tsx

@@ -82,7 +82,7 @@ export function ExpandablePanel({
             <Collapsible.Root
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md",
+                    "rounded-lg",
                     "w-full",
                     className
                 )}

package/src/components/FileUpload.tsx

@@ -70,7 +70,7 @@ export function FileUpload({
         className={cls(
             fieldBackgroundMixin,
             "flex gap-2",
-            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
+            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
             {
                 "h-44": size === "large",
                 "h-28": size === "medium",

package/src/components/FilterChip.tsx

@@ -58,14 +58,14 @@ export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(f
             className={cls(
                 "inline-flex items-center gap-1 rounded-full",
                 "font-medium whitespace-nowrap select-none shrink-0",
-                "transition-all duration-150",
+                "transition-colors duration-150",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                 sizeClasses[size],
                 active
                     ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]"
                     : cls(
                         "bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark",
-                        !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"
+                        !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"
                     ),
                 disabled && "opacity-50 cursor-not-allowed",
                 className

package/src/components/IconButton.tsx

@@ -21,7 +21,7 @@ const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 da
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    smallest: "w-7 !h-7 min-w-7 min-h-7",
     large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {

package/src/components/MultiSelect.tsx

@@ -235,7 +235,7 @@ export const MultiSelect = React.forwardRef<
                                     "px-2": size === "small" || size === "smallest",
                                     "px-4": size === "medium" || size === "large"
                                 },
-                                "select-none rounded-md text-sm",
+                                "select-none rounded-lg text-sm",
                                 "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,

package/src/components/Select.tsx

@@ -139,7 +139,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {...props}>
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
             <div className={cls(
-                "select-none rounded-md text-sm",
+                "select-none rounded-lg text-sm",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 "relative flex items-center",
@@ -169,7 +169,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         } : "",
                         "outline-hidden focus:outline-hidden",
                         "outline-none focus:outline-none",
-                        "select-none rounded-md text-sm",
+                        "select-none rounded-lg text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
                         disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",

package/src/components/Sheet.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { usePortalContainer } from "../hooks/PortalContainerContext";
+import { usePortalContainer, PortalContainerProvider } from "../hooks/PortalContainerContext";
 
 interface SheetProps {
     children: React.ReactNode;
@@ -45,6 +45,7 @@ export const Sheet: React.FC<SheetProps> = ({
     ...props
 }) => {
     const [displayed, setDisplayed] = useState(false);
+    const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
 
     // Get the portal container from context
     const contextContainer = usePortalContainer();
@@ -90,7 +91,8 @@ export const Sheet: React.FC<SheetProps> = ({
                 />}
                 <DialogPrimitive.Content
                     {...props}
-                    onFocusCapture={(event) => event.preventDefault()}
+                    ref={setContentEl}
+                    onOpenAutoFocus={(event) => event.preventDefault()}
                     onPointerDownOutside={onPointerDownOutside}
                     onInteractOutside={onInteractOutside}
                     className={cls(
@@ -112,10 +114,12 @@ export const Sheet: React.FC<SheetProps> = ({
                     )}
                     style={style}
                 >
-                    <DialogPrimitive.Title autoFocus tabIndex={0} className="sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0">
+                    <DialogPrimitive.Title className="sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0">
                         {title ?? "Sheet"}
                     </DialogPrimitive.Title>
-                    {children}
+                    <PortalContainerProvider container={contentEl}>
+                        {children}
+                    </PortalContainerProvider>
                 </DialogPrimitive.Content>
             </DialogPrimitive.Portal>
         </DialogPrimitive.Root>

package/src/components/Table.tsx

@@ -19,7 +19,7 @@ export const Table = React.memo(({
                           ...rest
                       }: TableProps) => (
     <table
-        className={cls("text-left text-surface-900 dark:text-white rounded-md overflow-x-auto", className)}
+        className={cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className)}
         style={style}
         {...rest}
     >
@@ -88,7 +88,7 @@ export const TableRow = React.memo(({
         style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
-            onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "",
+            onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "",
             className
         )}
         {...rest}

package/src/components/TextField.tsx

@@ -131,7 +131,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     invisible ? focusedInvisibleMixin : "",
-                    "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
+                    "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
                     label ? "pt-8 pb-2" : "py-2",
                     disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
                     inputClassName
@@ -149,7 +149,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     "w-full outline-none bg-transparent leading-normal px-3",
-                    "rounded-md",
+                    "rounded-lg",
                     "focused:text-text-primary focused:dark:text-text-primary-dark",
                     invisible ? focusedInvisibleMixin : "",
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -187,7 +187,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             <div
                 ref={ref}
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     error ? "border border-red-500 dark:border-red-600" : "",

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -31,7 +31,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<Record<string, un
                     "flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800",
                     rowClassName ? rowClassName(rowData) : "",
                     {
-                        "hover:!bg-surface-50/75 dark:hover:!bg-surface-800/75": hoverRow,
+                        "hover:!bg-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
                         "cursor-pointer ": onRowClick
                     }
                 )}

package/src/icons/index.ts

@@ -74,7 +74,9 @@ export {
     LanguagesIcon,
     LayoutGridIcon,
     LinkIcon,
+    Link2Icon,
     ListIcon,
+    LockIcon,
     ListOrderedIcon,
     LoaderIcon,
     LogOutIcon,
@@ -121,6 +123,7 @@ export {
     UploadIcon,
     UserCheckIcon,
     UserIcon,
+    UserPlus,
     VideoIcon,
     VoteIcon,
     Wand2Icon,

package/src/index.css

@@ -65,51 +65,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-normal;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
-    @apply text-base;
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {

package/src/index.ts

@@ -3,3 +3,5 @@ export * from "./styles";
 export * from "./util";
 export * from "./icons";
 export * from "./hooks";
+export * from "./views";
+