@rozenite/vite-plugin 1.13.0 → 2.0.0

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

@@ -1,79 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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>
-  );
-};