@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/src/components/RadioGroup.tsx

@@ -8,74 +8,9 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import styled from "styled-components";
 import { Tooltip } from "./Tooltip";
 
 type RadioGroupColorScheme = "primary" | "secondary";
-
-const ignoredProps = new Set(["colorScheme"]);
-
-const StyledRoot = styled(ToggleGroupPrimitive.Root).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps.has(prop),
-})<{
-  colorScheme?: RadioGroupColorScheme;
-}>(({ theme, colorScheme }) => ({
-  appearance: "none",
-  width: "0px", // Reset intrinsic width
-  flex: "1 1 0px",
-  position: "relative",
-  border: "0",
-  outline: "none",
-  minWidth: "0",
-  textAlign: "left",
-  alignSelf: "stretch",
-  borderRadius: "4px",
-  background: theme.colors.inputBackground,
-  "&:focus": {
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-      theme.colors[colorScheme ?? "primary"]
-    }`,
-  },
-  display: "flex",
-  alignItems: "stretch",
-  minHeight: "27px",
-  padding: colorScheme === undefined ? "2px" : 0,
-}));
-
-const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps.has(prop),
-})<{
-  colorScheme?: RadioGroupColorScheme;
-}>(({ theme, colorScheme }) => ({
-  ...theme.textStyles.small,
-  position: "relative",
-  flex: "1 1 0",
-  appearance: "none",
-  border: "none",
-  background: "none",
-  color: "rgb(139, 139, 139)",
-  padding: 0,
-  margin: 0,
-  borderRadius: "4px",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  verticalAlign: "middle",
-  '&[aria-checked="true"]': {
-    backgroundColor: colorScheme
-      ? theme.colors[colorScheme]
-      : theme.colors.radioGroup.background,
-    color: colorScheme ? theme.colors.radioGroup.background : theme.colors.text,
-    boxShadow: colorScheme ? undefined : `0 1px 1px rgba(0,0,0,0.1)`,
-  },
-  "&:focus": {
-    outline: "none",
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-      theme.colors[colorScheme ?? "primary"]
-    }`,
-  },
-}));
-
 interface ItemProps {
   value: string;
   tooltip?: ReactNode;
@@ -90,14 +25,14 @@ const ToggleGroupItem = forwardRef(function ToggleGroupItem(
   const { colorScheme } = useContext(RadioGroupContext);
 
   const itemElement = (
-    <StyledItem
+    <ToggleGroupPrimitive.Item
       ref={forwardedRef}
       value={value}
       disabled={disabled}
-      colorScheme={colorScheme}
+      className={`font-sans text-heading5 font-normal relative flex-1 appearance-none border-none bg-none text-radio-group-item p-0 m-0 rounded inline-flex items-center justify-center align-middle focus:outline-none focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] aria-checked:bg-${colorScheme ? colorScheme : "radio-group-background"} aria-checked:text-${colorScheme ? "radio-group-background" : "text"} aria-checked:shadow-${colorScheme ? "none" : "0_1px_1px_rgba(0,0,0,0.1)"}`}
     >
       {children}
-    </StyledItem>
+    </ToggleGroupPrimitive.Item>
   );
 
   return tooltip ? (
@@ -146,15 +81,15 @@ function ToggleGroupRoot({
 
   return (
     <RadioGroupContext.Provider value={contextValue}>
-      <StyledRoot
+      <ToggleGroupPrimitive.Root
         id={id}
         type="single"
         value={value}
-        colorScheme={colorScheme}
         onValueChange={handleValueChange}
+        className={`appearance-none w-0 flex-1 relative border-0 outline-none min-w-0 min-h-[27px] text-left self-stretch rounded bg-input-background items-stretch focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] ${colorScheme ? "p-0" : "p-0.5"}`}
       >
         {children}
-      </StyledRoot>
+      </ToggleGroupPrimitive.Root>
     </RadioGroupContext.Provider>
   );
 }

package/src/components/ScrollArea.tsx

@@ -1,37 +1,5 @@
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
 import React, { memo, ReactNode, useCallback, useState } from "react";
-import styled from "styled-components";
-
-const SCROLLBAR_SIZE = 10;
-
-const StyledViewport = styled(RadixScrollArea.Viewport)({
-  width: "100%",
-  height: "100%",
-  // Override the `display: table` in the child, since this allows
-  // elements to expand beyond the width of the viewport.
-  "& > div": {
-    display: "block !important",
-  },
-});
-
-const StyledScrollbar = styled(RadixScrollArea.Scrollbar)({
-  display: "flex",
-  padding: "3px",
-  '&[data-orientation="vertical"]': {
-    width: SCROLLBAR_SIZE,
-  },
-});
-
-const StyledThumb = styled(RadixScrollArea.Thumb)(({ theme }) => ({
-  flex: 1,
-  borderRadius: SCROLLBAR_SIZE,
-  backgroundColor: theme.colors.scrollbar,
-}));
-
-const Container = styled.div({
-  flex: "1 1 0px",
-  minHeight: 0,
-});
 
 interface Props {
   children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
@@ -42,9 +10,10 @@ export const ScrollArea = memo(function ScrollArea({ children }: Props) {
     useState<HTMLDivElement | null>(null);
 
   return (
-    <Container>
+    <div className="flex-1 min-h-0">
       <RadixScrollArea.Root style={{ width: "100%", height: "100%" }}>
-        <StyledViewport
+        <RadixScrollArea.Viewport
+          className="w-full h-full [&>div]:block"
           ref={useCallback(
             (ref: HTMLDivElement | null) => setScrollElementRef(ref),
             []
@@ -55,11 +24,14 @@ export const ScrollArea = memo(function ScrollArea({ children }: Props) {
               ? children(scrollElementRef)
               : null
             : children}
-        </StyledViewport>
-        <StyledScrollbar orientation="vertical" className="scroll-component">
-          <StyledThumb className="scroll-component" />
-        </StyledScrollbar>
+        </RadixScrollArea.Viewport>
+        <RadixScrollArea.Scrollbar
+          orientation="vertical"
+          className="scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
+        >
+          <RadixScrollArea.Thumb className="scroll-component flex-1 rounded-[10px] bg-scrollbar" />
+        </RadixScrollArea.Scrollbar>
       </RadixScrollArea.Root>
-    </Container>
+    </div>
   );
 });

package/src/components/SelectMenu.tsx

@@ -1,7 +1,7 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React, { CSSProperties, memo } from "react";
-import { styled } from "styled-components";
+import { type SelectProps } from "@radix-ui/react-select";
+import React, { CSSProperties, memo, useMemo } from "react";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
@@ -17,17 +17,20 @@ type Props<T extends string> = {
   placeholder?: string;
   disabled?: boolean;
   readOnly?: boolean;
-};
+  label?: React.ReactNode;
+} & Pick<SelectProps, "open">;
 
 const readOnlyStyle: CSSProperties = {
   justifyContent: "flex-start",
   textAlign: "left",
 };
 
-const flexStyle: CSSProperties = {
-  flex: 1,
+const textStyle: CSSProperties = {
+  fontSize: "0.85rem",
 };
 
+const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] absolute inset-0 font-bold text-[60%] pointer-events-none flex items-center justify-end pr-6`;
+
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   id,
   style,
@@ -38,6 +41,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   placeholder,
   disabled,
   readOnly,
+  label,
+  open,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -45,13 +50,13 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   );
   const icon = selectedItem?.icon;
 
-  if (readOnly) {
-    return (
+  const readOnlyButton = useMemo(
+    () => (
       <Button
         id={id}
         style={style}
         contentStyle={readOnlyStyle}
-        className={className}
+        className={`${className ?? ""} flex-1`}
         disabled={disabled}
       >
         {icon && (
@@ -60,34 +65,76 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
             <Spacer.Horizontal inline size={6} />
           </>
         )}
-        <span style={flexStyle}>{selectedItem?.title ?? value}</span>
+        <span style={{ ...textStyle }} className="flex flex-1">
+          {selectedItem?.title ?? value}
+        </span>
       </Button>
-    );
-  }
+    ),
+    [icon, id, style, className, disabled, value, selectedItem]
+  );
 
-  return (
-    <Select.Root value={value} onValueChange={onSelect}>
+  const trigger = useMemo(
+    () => (
       <Select.SelectTrigger asChild>
-        <Button id={id} style={style} className={className} disabled={disabled}>
+        <Button
+          id={id}
+          style={{ ...textStyle, ...style }}
+          className={`${className ?? "w-full"} flex-1`}
+          disabled={disabled}
+        >
           {icon && (
             <>
               {renderIcon(icon)}
               <Spacer.Horizontal inline size={6} />
             </>
           )}
-          <span style={flexStyle}>
+          <span className="flex flex-1">
             <Select.Value placeholder={placeholder} />
           </span>
           <Spacer.Horizontal inline size={6} />
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>
+    ),
+    [icon, id, style, className, disabled, placeholder]
+  );
+
+  if (readOnly) {
+    return label ? (
+      <div className="flex flex-col relative">
+        {readOnlyButton}
+        <label
+          className={labelStyles}
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      </div>
+    ) : (
+      readOnlyButton
+    );
+  }
+
+  return (
+    <Select.Root value={value} onValueChange={onSelect} open={open}>
+      {label ? (
+        <div className="flex-1 flex-col relative">
+          {trigger}
+          {label && (
+            <label className={labelStyles} htmlFor={id}>
+              {label}
+            </label>
+          )}
+        </div>
+      ) : (
+        trigger
+      )}
       <Select.Portal>
-        <SelectContent>
-          <SelectViewport>
+        <Select.Content className={styles.contentStyle}>
+          <Select.Viewport>
             {menuItems.map((menuItem) => {
               if (typeof menuItem === "string") {
-                return <StyledSeparator />;
+                return <Select.Separator className={styles.separatorStyle} />;
               }
 
               const value = menuItem.value ?? "";
@@ -98,39 +145,32 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
                 </SelectItem>
               );
             })}
-          </SelectViewport>
-        </SelectContent>
+          </Select.Viewport>
+        </Select.Content>
       </Select.Portal>
     </Select.Root>
   );
 });
 
-const SelectContent = styled(Select.Content)(styles.contentStyle);
-
-const SelectViewport = styled(Select.Viewport)({});
-
 const SelectItem = React.forwardRef(
   (
     {
       children,
-      icon,
+      icon, disabled,
       ...props
     }: Select.SelectItemProps & { icon?: React.ReactNode },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => {
     return (
-      <StyledItem {...props} ref={forwardedRef}>
+      <Select.Item className={styles.itemStyle({disabled})} disabled={disabled} {...props} ref={forwardedRef}>
         {icon && (
           <>
             {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}
-        <Select.ItemText>{children}</Select.ItemText>
-      </StyledItem>
+        <Select.ItemText style={textStyle}>{children}</Select.ItemText>
+      </Select.Item>
     );
   }
-);
-
-const StyledItem = styled(Select.Item)(styles.itemStyle);
-const StyledSeparator = styled(Select.Separator)(styles.separatorStyle);
+);

package/src/components/Slider.tsx

@@ -1,42 +1,5 @@
 import * as RadixSlider from '@radix-ui/react-slider';
 import React, { useCallback, useMemo } from 'react';
-import styled from 'styled-components';
-
-const StyledSlider = styled(RadixSlider.Root)({
-  flex: '1',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  userSelect: 'none',
-  touchAction: 'none',
-  height: '16px',
-});
-
-const StyledTrack = styled(RadixSlider.Track)(({ theme }) => ({
-  backgroundColor: theme.colors.divider,
-  position: 'relative',
-  flexGrow: 1,
-  height: '2px',
-}));
-
-const StyledRange = styled(RadixSlider.Range)(({ theme }) => ({
-  position: 'absolute',
-  backgroundColor: theme.colors.primary,
-  borderRadius: '9999px',
-  height: '100%',
-}));
-
-const StyledThumb = styled(RadixSlider.Thumb)(({ theme }) => ({
-  display: 'block',
-  width: '12px',
-  height: '12px',
-  backgroundColor: theme.colors.slider.background,
-  border: `1px solid ${theme.colors.slider.border}`,
-  borderRadius: '20px',
-  ':focus': {
-    outline: 'none',
-  },
-}));
 
 interface Props {
   id?: string;
@@ -66,17 +29,18 @@ export const Slider = function Slider({
   );
 
   return (
-    <StyledSlider
+    <RadixSlider.Root
       min={min}
       max={max}
       id={id}
       value={arrayValue}
       onValueChange={handleValueChange}
+      className="flex-1 flex relative items-center select-none touch-none h-4"
     >
-      <StyledTrack>
-        <StyledRange />
-      </StyledTrack>
-      <StyledThumb />
-    </StyledSlider>
+      <RadixSlider.Track className="bg-divider relative flex-grow h-[2px]">
+        <RadixSlider.Range className="absolute bg-primary rounded-full h-full" />
+      </RadixSlider.Track>
+      <RadixSlider.Thumb className="block w-3 h-3 bg-slider-background border border-solid border-slider-border rounded-[20px] focus:outline-none" />
+    </RadixSlider.Root>
   );
 };

package/src/components/Spacer.tsx

@@ -1,30 +1,21 @@
 /* eslint-disable react/jsx-pascal-case */
 import React, { ForwardedRef, forwardRef } from "react";
-import styled from "styled-components";
 
 interface Props {
   size?: number | string;
   inline?: boolean;
 }
 
-interface Props_ {
-  $size?: number | string;
-  $inline?: boolean;
-}
-
 /* ----------------------------------------------------------------------------
  * Vertical
  * ------------------------------------------------------------------------- */
 
-const SpacerVertical_ = styled.span<Props_>(({ $size, $inline }) => ({
-  display: $inline ? "inline-block" : "block",
-  ...($size === undefined ? { flex: 1 } : { minHeight: $size }),
-}));
-
 const SpacerVertical = forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
-      <SpacerVertical_ $size={size} $inline={inline} {...props} ref={ref} />
+      <span className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`} style={size ? {
+        minHeight: `${size}px`,
+      } : undefined} {...props} ref={ref} />
     );
   }
 );
@@ -33,15 +24,12 @@ const SpacerVertical = forwardRef<HTMLSpanElement, Props>(
  * Horizontal
  * ------------------------------------------------------------------------- */
 
-const SpacerHorizontal_ = styled.span<Props_>(({ $size, $inline }) => ({
-  display: $inline ? "inline-block" : "block",
-  ...($size === undefined ? { flex: 1 } : { minWidth: $size }),
-}));
-
 const SpacerHorizontal = forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
-      <SpacerHorizontal_ $size={size} $inline={inline} {...props} ref={ref} />
+      <span className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`} style={size ? {
+        minWidth: `${size}px`,
+      } : undefined} {...props} ref={ref} />
     );
   }
 );

package/src/components/Switch.tsx

@@ -1,46 +1,8 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import React from "react";
-import styled from "styled-components";
 
 type SwitchColorScheme = "normal" | "primary" | "secondary";
 
-const SwitchRoot = styled(SwitchPrimitive.Root)<{
-  $colorScheme: SwitchColorScheme;
-}>(({ theme, $colorScheme }) => ({
-  all: "unset",
-  width: 32,
-  height: 19,
-  backgroundColor: theme.colors.activeBackground,
-  borderRadius: "9999px",
-  position: "relative",
-  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
-  cursor: "pointer",
-  "&:focus": {
-    outline: `2px solid ${theme.colors.primary}`,
-    outlineOffset: "1px",
-  },
-  '&[data-state="checked"]': {
-    backgroundColor:
-      $colorScheme === "primary"
-        ? theme.colors.primary
-        : $colorScheme === "secondary"
-          ? theme.colors.secondary
-          : undefined,
-  },
-}));
-
-const SwitchThumb = styled(SwitchPrimitive.Thumb)({
-  display: "block",
-  width: 15,
-  height: 15,
-  backgroundColor: "white",
-  borderRadius: "9999px",
-  transition: "transform 100ms",
-  transform: "translateX(2px)",
-  willChange: "transform",
-  '&[data-state="checked"]': { transform: "translateX(15px)" },
-});
-
 interface Props {
   value: boolean;
   onChange: (value: boolean) => void;
@@ -56,15 +18,15 @@ export const Switch = function Switch({
   disabled,
 }: Props) {
   return (
-    <SwitchRoot
-      $colorScheme={colorScheme}
+    <SwitchPrimitive.Root
       checked={value}
       disabled={disabled}
       onCheckedChange={(newValue) => {
         onChange(newValue);
       }}
+      className={`all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:outline-primary focus:ring-offset-[1px] data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`}
     >
-      <SwitchThumb />
-    </SwitchRoot>
+      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]"/>
+    </SwitchPrimitive.Root>
   );
 };