@rozenite/vite-plugin 1.12.0 → 1.13.0

package/src/dev-host/components/ui/Button.tsx

@@ -0,0 +1,91 @@
+import type { ComponentProps } from 'react';
+import { mergeOverrides } from 'baseui';
+import { Button as BaseButton, KIND, SHAPE, SIZE, WIDTH_TYPE, type ButtonOverrides } from 'baseui/button/index.js';
+
+type ButtonVariant = 'default' | 'primary' | 'pill';
+
+type BaseButtonProps = ComponentProps<typeof BaseButton>;
+
+export type ButtonProps = Omit<BaseButtonProps, 'kind' | 'shape' | 'size' | 'widthType'> & {
+  variant?: ButtonVariant;
+};
+
+const baseOverrides: ButtonOverrides = {
+  BaseButton: {
+    style: ({ $disabled, $isFocusVisible }) => ({
+      minHeight: 'auto',
+      minWidth: 'auto',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'rgba(255, 255, 255, 0.08)',
+      borderRadius: '4px',
+      backgroundColor: 'transparent',
+      color: 'rgba(255, 255, 255, 0.56)',
+      paddingTop: '0',
+      paddingRight: '0',
+      paddingBottom: '0',
+      paddingLeft: '0',
+      boxShadow: 'none',
+      cursor: $disabled ? 'default' : 'pointer',
+      opacity: $disabled ? 0.4 : 1,
+      outline: $isFocusVisible ? '2px solid rgba(130, 50, 255, 0.95)' : 'none',
+      outlineOffset: '-2px',
+    }),
+  },
+};
+
+const variantOverrides: Record<ButtonVariant, ButtonOverrides> = {
+  default: {
+    BaseButton: {
+      style: ({ $disabled, $isHovered }) => ({
+        borderColor: 'rgba(255, 255, 255, 0.08)',
+        backgroundColor: !$disabled && $isHovered ? 'rgba(255, 255, 255, 0.06)' : 'transparent',
+        color: 'rgba(255, 255, 255, 0.56)',
+      }),
+    },
+  },
+  primary: {
+    BaseButton: {
+      style: ({ $disabled, $isHovered }) => ({
+        borderColor: '#ffffff',
+        backgroundColor: '#ffffff',
+        color: '#000000',
+        opacity: $disabled ? 0.4 : 1,
+        ':hover': !$disabled && $isHovered ? { backgroundColor: 'rgba(255, 255, 255, 0.88)' } : undefined,
+      }),
+    },
+  },
+  pill: {
+    BaseButton: {
+      style: ({ $disabled, $isHovered, $isSelected }) => ({
+        borderColor: $isSelected ? 'rgba(130, 50, 255, 0.5)' : 'rgba(255, 255, 255, 0.08)',
+        borderRadius: '999px',
+        backgroundColor: $isSelected
+          ? 'rgba(130, 50, 255, 0.18)'
+          : !$disabled && $isHovered
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgba(255, 255, 255, 0.04)',
+        color: '#ffffff',
+        paddingTop: '6px',
+        paddingRight: '10px',
+        paddingBottom: '6px',
+        paddingLeft: '10px',
+        fontSize: '12px',
+        lineHeight: '1.4',
+      }),
+    },
+  },
+};
+
+export const Button = ({ overrides, variant = 'default', ...props }: ButtonProps) => {
+  return (
+    <BaseButton
+      kind={KIND.tertiary}
+      shape={variant === 'pill' ? SHAPE.pill : SHAPE.rectangular}
+      size={SIZE.compact}
+      widthType={WIDTH_TYPE.hug}
+      overrides={mergeOverrides(mergeOverrides(baseOverrides, variantOverrides[variant]), overrides)}
+      {...props}
+    />
+  );
+};

package/src/dev-host/components/ui/DropdownMenu.tsx

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import { StatefulMenu } from 'baseui/menu/index.js';
+import { StatefulPopover, TRIGGER_TYPE } from 'baseui/popover/index.js';
+
+export type DropdownMenuItem<T> = {
+  id: string;
+  label: string;
+  item: T;
+};
+
+type DropdownMenuProps<T> = {
+  items: DropdownMenuItem<T>[];
+  onSelect: (item: T) => void;
+  children: ReactNode;
+};
+
+export const DropdownMenu = <T,>({ items, onSelect, children }: DropdownMenuProps<T>) => {
+  return (
+    <StatefulPopover
+      triggerType={TRIGGER_TYPE.click}
+      placement="bottomRight"
+      accessibilityType="menu"
+      dismissOnClickOutside
+      dismissOnEsc
+      focusLock={false}
+      autoFocus={false}
+      showArrow={false}
+      content={({ close }: { close: () => void }) => (
+        <div className="rz-baseui-preset-menu">
+          <StatefulMenu
+            items={items}
+            onItemSelect={({ item }: { item: DropdownMenuItem<T> }) => {
+              onSelect(item.item);
+              close();
+            }}
+            overrides={{
+              List: {
+                style: {
+                  backgroundColor: '#111111',
+                  color: '#ffffff',
+                  borderRadius: '8px',
+                  minWidth: '220px',
+                  maxWidth: 'min(320px, calc(100vw - 24px))',
+                  paddingTop: '6px',
+                  paddingBottom: '6px',
+                  boxShadow: '0 12px 32px rgba(0, 0, 0, 0.35)',
+                },
+              },
+              Option: {
+                props: {
+                  getItemLabel: (menuItem: DropdownMenuItem<T>) => menuItem.label,
+                },
+                style: ({ $isHighlighted }: { $isHighlighted?: boolean }) => ({
+                  backgroundColor: $isHighlighted ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
+                  color: '#ffffff',
+                  fontSize: '13px',
+                  lineHeight: '1.4',
+                  paddingTop: '8px',
+                  paddingRight: '10px',
+                  paddingBottom: '8px',
+                  paddingLeft: '10px',
+                }),
+              },
+            }}
+          />
+        </div>
+      )}
+      overrides={{
+        Body: {
+          style: {
+            zIndex: 20,
+          },
+        },
+        Inner: {
+          style: {
+            backgroundColor: 'transparent',
+          },
+        },
+      }}
+    >
+      {children}
+    </StatefulPopover>
+  );
+};

package/src/dev-host/components/ui/IconButton.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { mergeOverrides } from 'baseui';
+import type { ButtonProps } from './Button.js';
+import { Button } from './Button.js';
+
+export type IconButtonProps = Omit<ButtonProps, 'children'> & {
+  children: ReactNode;
+};
+
+export const IconButton = ({ overrides, children, ...props }: IconButtonProps) => {
+  return (
+    <Button
+      overrides={mergeOverrides(
+        {
+          BaseButton: {
+            style: ({ $disabled, $isHovered, $isFocusVisible }: { $disabled?: boolean; $isHovered?: boolean; $isFocusVisible?: boolean }) => ({
+              width: '28px',
+              height: '28px',
+              minWidth: '28px',
+              minHeight: '28px',
+              borderWidth: '0',
+              borderRadius: '4px',
+              backgroundColor: !$disabled && $isHovered ? 'rgba(255, 255, 255, 0.06)' : 'transparent',
+              color: !$disabled && $isHovered ? '#ffffff' : 'rgba(255, 255, 255, 0.56)',
+              paddingTop: '0',
+              paddingRight: '0',
+              paddingBottom: '0',
+              paddingLeft: '0',
+              outline: $isFocusVisible ? '2px solid rgba(130, 50, 255, 0.95)' : 'none',
+              outlineOffset: '-2px',
+            }),
+          },
+        },
+        overrides,
+      )}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};

package/src/dev-host/components/ui/Input.tsx

@@ -0,0 +1,73 @@
+import type { ComponentProps } from 'react';
+import { mergeOverrides } from 'baseui';
+import { Input as BaseInput, SIZE } from 'baseui/input/index.js';
+
+type BaseInputProps = ComponentProps<typeof BaseInput>;
+
+export type InputProps = BaseInputProps & {
+  spellCheck?: boolean;
+};
+
+const inputOverrides = {
+  Root: {
+    style: {
+      width: '100%',
+      borderWidth: '0',
+      backgroundColor: 'transparent',
+      paddingLeft: '0',
+      paddingRight: '0',
+    },
+  },
+  InputContainer: {
+    style: ({ $isFocused }: { $isFocused?: boolean }) => ({
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'rgba(255, 255, 255, 0.08)',
+      borderRadius: '4px',
+      backgroundColor: 'rgba(255, 255, 255, 0.03)',
+      outline: $isFocused ? '2px solid rgba(130, 50, 255, 0.95)' : 'none',
+      outlineOffset: '-2px',
+    }),
+  },
+  Input: {
+    style: {
+      paddingTop: '10px',
+      paddingRight: '12px',
+      paddingBottom: '10px',
+      paddingLeft: '12px',
+      fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
+      fontWeight: 400,
+      color: 'rgba(255, 255, 255, 0.9)',
+      fontSize: '12px',
+      lineHeight: '1.5',
+      letterSpacing: '-0.02em',
+      '::placeholder': {
+        color: 'rgba(255, 255, 255, 0.36)',
+      },
+    },
+  },
+};
+
+export const Input = ({ overrides, spellCheck, ...props }: InputProps) => {
+  return (
+    <BaseInput
+      size={SIZE.compact}
+      overrides={mergeOverrides(
+        inputOverrides,
+        spellCheck === undefined
+          ? overrides
+          : mergeOverrides(
+              {
+                Input: {
+                  props: {
+                    spellCheck,
+                  },
+                },
+              },
+              overrides,
+            ),
+      )}
+      {...props}
+    />
+  );
+};

package/src/dev-host/components/ui/ScrollArea.tsx

@@ -0,0 +1,20 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from 'react';
+import { cn } from '../../utils.js';
+
+type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & {
+  children: ReactNode;
+};
+
+export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(({ className, children, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn('rz-scroll-area', className)} {...props}>
+      <div className="rz-scroll-viewport">{children}</div>
+    </div>
+  );
+});
+
+ScrollArea.displayName = 'ScrollArea';

package/src/dev-host/components/ui/Tabs.tsx

@@ -0,0 +1,166 @@
+import { Children, createContext, isValidElement, useContext, type ReactElement, type ReactNode } from 'react';
+import { Tab, Tabs as BaseTabs } from 'baseui/tabs/index.js';
+import { cn } from '../../utils.js';
+
+type TabsContextValue = {
+  activeKey: string;
+};
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+type TabsProps = {
+  className?: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  children: ReactNode;
+};
+
+type TabsListProps = {
+  className?: string;
+  children: ReactNode;
+  'aria-label'?: string;
+};
+
+type TabsTriggerProps = {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+};
+
+type TabsContentProps = {
+  value: string;
+  className?: string;
+  children: ReactNode;
+};
+
+type ElementWithChildren = ReactElement<{ children?: ReactNode }>;
+type TabTriggerElement = ReactElement<TabsTriggerProps>;
+type TabsContentElement = ReactElement<TabsContentProps>;
+
+const collectElements = <T,>(
+  children: ReactNode,
+  matcher: (element: ReactElement) => element is ReactElement<T>,
+): Array<ReactElement<T>> => {
+  const matches: Array<ReactElement<T>> = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    if (matcher(child)) {
+      matches.push(child);
+      return;
+    }
+
+    const childWithChildren = child as ElementWithChildren;
+
+    if (childWithChildren.props.children !== undefined) {
+      matches.push(...collectElements(childWithChildren.props.children, matcher));
+    }
+  });
+
+  return matches;
+};
+
+const tabsOverrides = {
+  Root: {
+    style: {
+      width: '100%',
+      minWidth: 0,
+    },
+  },
+  TabBar: {
+    style: {
+      display: 'inline-flex',
+      minHeight: '26px',
+      maxWidth: '100%',
+      alignItems: 'center',
+      gap: '2px',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      border: '1px solid rgba(255, 255, 255, 0.08)',
+      borderRadius: '4px',
+      background: 'rgba(255, 255, 255, 0.04)',
+      paddingTop: '2px',
+      paddingRight: '2px',
+      paddingBottom: '2px',
+      paddingLeft: '2px',
+      scrollbarWidth: 'none',
+    },
+  },
+  Tab: {
+    style: ({ $active, $disabled, $isFocusVisible }: { $active?: boolean; $disabled?: boolean; $isFocusVisible?: boolean }) => ({
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      whiteSpace: 'nowrap',
+      borderRadius: '2px',
+      backgroundColor: $active ? '#ffffff' : 'transparent',
+      minHeight: '22px',
+      paddingTop: '3px',
+      paddingRight: '9px',
+      paddingBottom: '3px',
+      paddingLeft: '9px',
+      color: $active ? '#000000' : 'rgba(255, 255, 255, 0.6)',
+      fontSize: '12px',
+      fontWeight: 500,
+      lineHeight: 1.2,
+      transitionProperty: 'background-color, color',
+      transitionDuration: '120ms',
+      outline: $isFocusVisible ? '2px solid rgba(130, 50, 255, 0.95)' : 'none',
+      outlineOffset: '-2px',
+      cursor: $disabled ? 'default' : 'pointer',
+      opacity: $disabled ? 0.4 : 1,
+      ':hover': $disabled || $active ? undefined : {
+        color: '#ffffff',
+      },
+    }),
+  },
+};
+
+export const Tabs = ({ className, value, onValueChange, children }: TabsProps) => {
+  const lists = collectElements(children, (child): child is ReactElement<TabsListProps> => child.type === TabsList);
+  const content = collectElements(children, (child): child is TabsContentElement => child.type === TabsContent);
+  const list = lists[0];
+
+  if (!list) {
+    return null;
+  }
+
+  const triggers = Children.toArray(list.props.children).filter(
+    (child): child is TabTriggerElement => isValidElement(child) && child.type === TabsTrigger,
+  );
+
+  return (
+    <TabsContext.Provider value={{ activeKey: value }}>
+      <div className={cn('rz-tabs-root', className)}>
+        <BaseTabs activeKey={value} onChange={({ activeKey }) => onValueChange(String(activeKey))} overrides={tabsOverrides}>
+          {triggers.map((trigger) => (
+            <Tab key={trigger.props.value} title={trigger.props.children} disabled={trigger.props.disabled} />
+          ))}
+        </BaseTabs>
+        {content}
+      </div>
+    </TabsContext.Provider>
+  );
+};
+
+export const TabsList = ({ children }: TabsListProps) => {
+  return <>{children}</>;
+};
+
+export const TabsTrigger: (_props: TabsTriggerProps) => null = () => {
+  return null;
+};
+
+export const TabsContent = ({ value, className, children }: TabsContentProps) => {
+  const context = useContext(TabsContext);
+  const isActive = context?.activeKey === value;
+
+  if (!isActive) {
+    return null;
+  }
+
+  return <div className={className}>{children}</div>;
+};

package/src/dev-host/components/ui/Textarea.tsx

@@ -0,0 +1,79 @@
+import type { ComponentProps } from 'react';
+import { mergeOverrides } from 'baseui';
+import { SIZE, Textarea as BaseTextarea } from 'baseui/textarea/index.js';
+
+type BaseTextareaProps = ComponentProps<typeof BaseTextarea>;
+
+export type TextareaProps = BaseTextareaProps & {
+  spellCheck?: boolean;
+};
+
+const textareaOverrides = {
+  Root: {
+    style: {
+      width: '100%',
+      borderWidth: '0',
+      backgroundColor: 'transparent',
+      paddingLeft: '0',
+      paddingRight: '0',
+    },
+  },
+  InputContainer: {
+    style: ({ $isFocused }: { $isFocused?: boolean }) => ({
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'rgba(255, 255, 255, 0.08)',
+      borderRadius: '4px',
+      backgroundColor: 'rgba(255, 255, 255, 0.03)',
+      outline: $isFocused ? '2px solid rgba(130, 50, 255, 0.95)' : 'none',
+      outlineOffset: '-2px',
+      alignItems: 'stretch',
+    }),
+  },
+  Input: {
+    style: {
+      minHeight: '112px',
+      display: 'block',
+      alignSelf: 'stretch',
+      resize: 'none',
+      paddingTop: '12px',
+      paddingRight: '12px',
+      paddingBottom: '12px',
+      paddingLeft: '12px',
+      fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
+      fontWeight: 400,
+      color: 'rgba(255, 255, 255, 0.9)',
+      fontSize: '12px',
+      lineHeight: '1.5',
+      letterSpacing: '-0.02em',
+      '::placeholder': {
+        color: 'rgba(255, 255, 255, 0.36)',
+      },
+    },
+  },
+};
+
+export const Textarea = ({ overrides, rows = 6, spellCheck, ...props }: TextareaProps) => {
+  return (
+    <BaseTextarea
+      rows={rows}
+      size={SIZE.compact}
+      overrides={mergeOverrides(
+        textareaOverrides,
+        spellCheck === undefined
+          ? overrides
+          : mergeOverrides(
+              {
+                Input: {
+                  props: {
+                    spellCheck,
+                  },
+                },
+              },
+              overrides,
+            ),
+      )}
+      {...props}
+    />
+  );
+};

package/src/dev-host/components/ui/ToggleGroup.tsx

@@ -0,0 +1,120 @@
+import type { Key, ReactNode } from 'react';
+import { mergeOverrides } from 'baseui';
+import { Segment } from 'baseui/segmented-control/segment.js';
+import { SegmentedControl } from 'baseui/segmented-control/index.js';
+
+export type ToggleGroupOption = {
+  key: Key;
+  label: ReactNode;
+  disabled?: boolean;
+};
+
+type ToggleGroupProps = {
+  value: Key;
+  options: ToggleGroupOption[];
+  onChange: (value: string) => void;
+  'aria-label'?: string;
+};
+
+const overrides = {
+  Root: {
+    style: {
+      display: 'inline-flex',
+      width: 'fit-content',
+      maxWidth: '100%',
+      paddingTop: '2px',
+      paddingRight: '2px',
+      paddingBottom: '2px',
+      paddingLeft: '2px',
+      border: '1px solid rgba(255, 255, 255, 0.08)',
+      borderRadius: '4px',
+      backgroundColor: 'rgba(255, 255, 255, 0.04)',
+      overflow: 'hidden',
+    },
+  },
+  SegmentList: {
+    style: {
+      display: 'inline-flex',
+      width: 'fit-content',
+      minHeight: '22px',
+      maxWidth: '100%',
+      alignItems: 'center',
+      gap: '2px',
+      overflow: 'hidden',
+      minWidth: 'unset',
+      backgroundColor: 'transparent',
+      zIndex: 0,
+    },
+  },
+  Active: {
+    style: {
+      backgroundColor: '#ffffff',
+      borderRadius: '2px',
+      zIndex: -1,
+    },
+  },
+};
+
+const segmentOverrides = {
+  Segment: {
+    style: ({ $isActive, $disabled, $isFocusVisible }: { $isActive?: boolean; $disabled?: boolean; $isFocusVisible?: boolean }) => ({
+      minHeight: '22px',
+      minWidth: 'auto',
+      paddingTop: '3px',
+      paddingRight: '9px',
+      paddingBottom: '3px',
+      paddingLeft: '9px',
+      borderRadius: '2px',
+      backgroundColor: 'transparent',
+      color: $isActive ? '#000000' : 'rgba(255, 255, 255, 0.6)',
+      fontSize: '12px',
+      fontWeight: 500,
+      lineHeight: 1.2,
+      transitionProperty: 'background-color, color',
+      transitionDuration: '120ms',
+      outline: $isFocusVisible ? '2px solid rgba(130, 50, 255, 0.95)' : 'none',
+      outlineOffset: '-2px',
+      cursor: $disabled ? 'default' : 'pointer',
+      opacity: $disabled ? 0.4 : 1,
+      ':hover': $disabled || $isActive ? undefined : {
+        color: '#ffffff',
+      },
+    }),
+  },
+  LabelBlock: {
+    style: {
+      paddingTop: '0',
+      paddingRight: '0',
+      paddingBottom: '0',
+      paddingLeft: '0',
+    },
+  },
+  Label: {
+    style: {
+      fontSize: '12px',
+      fontWeight: 500,
+      lineHeight: 1.2,
+      color: 'inherit',
+    },
+  },
+};
+
+export const ToggleGroup = ({ value, options, onChange, 'aria-label': ariaLabel }: ToggleGroupProps) => {
+  return (
+    <SegmentedControl
+      activeKey={value}
+      onChange={({ activeKey }) => onChange(String(activeKey))}
+      overrides={mergeOverrides(overrides, {
+        Root: {
+          props: {
+            'aria-label': ariaLabel,
+          },
+        },
+      })}
+    >
+      {options.map((option) => (
+        <Segment key={option.key} label={option.label} disabled={option.disabled} overrides={segmentOverrides} />
+      ))}
+    </SegmentedControl>
+  );
+};