@noya-app/noya-designsystem 0.1.14 → 0.1.16

package/src/components/ListView.tsx

@@ -163,53 +163,53 @@ function getPositionMargin(marginType: ListRowMarginType) {
  * ------------------------------------------------------------------------- */
 
 const RowContainer = styled.div<{
-  marginType: ListRowMarginType;
-  selected: boolean;
-  selectedPosition: ListRowPosition;
-  disabled: boolean;
-  hovered: boolean;
-  variant: ListViewVariant;
-  divider: boolean;
-  isSectionHeader: boolean;
-  showsActiveState: boolean;
-  sectionHeaderVariant: ListViewSectionHeaderVariant;
-  colorScheme: ListColorScheme;
-  gap: number;
-  backgroundColor?: CSSProperties["backgroundColor"];
+  $marginType: ListRowMarginType;
+  $selected: boolean;
+  $selectedPosition: ListRowPosition;
+  $disabled: boolean;
+  $hovered: boolean;
+  $variant: ListViewVariant;
+  $divider: boolean;
+  $isSectionHeader: boolean;
+  $showsActiveState: boolean;
+  $sectionHeaderVariant: ListViewSectionHeaderVariant;
+  $colorScheme: ListColorScheme;
+  $gap: number;
+  $backgroundColor?: CSSProperties["backgroundColor"];
 }>(
   ({
     theme,
-    marginType,
-    selected,
-    selectedPosition,
-    disabled,
-    hovered,
-    variant,
-    divider,
-    isSectionHeader,
-    showsActiveState,
-    sectionHeaderVariant,
-    colorScheme,
-    gap,
-    backgroundColor,
+    $marginType,
+    $selected,
+    $selectedPosition,
+    $disabled,
+    $hovered,
+    $variant,
+    $divider,
+    $isSectionHeader,
+    $showsActiveState,
+    $sectionHeaderVariant,
+    $colorScheme,
+    $gap,
+    $backgroundColor,
   }) => {
-    const margin = getPositionMargin(marginType);
+    const margin = getPositionMargin($marginType);
 
     return {
-      ...(isSectionHeader && sectionHeaderVariant === "label"
+      ...($isSectionHeader && $sectionHeaderVariant === "label"
         ? theme.textStyles.label
         : theme.textStyles.small),
-      ...(isSectionHeader && { fontWeight: 500 }),
-      gap,
+      ...($isSectionHeader && { fontWeight: 500 }),
+      gap: $gap,
       flex: "0 0 auto",
       userSelect: "none",
       cursor: "default",
-      ...(variant !== "bare" && {
+      ...($variant !== "bare" && {
         paddingTop: "6px",
         paddingRight: "12px",
         paddingBottom: "6px",
         paddingLeft: "12px",
-        ...(variant === "padded" && {
+        ...($variant === "padded" && {
           borderRadius: "2px",
           marginLeft: "8px",
           marginRight: "8px",
@@ -218,56 +218,56 @@ const RowContainer = styled.div<{
         }),
       }),
       color: theme.colors.textMuted,
-      ...(isSectionHeader && {
+      ...($isSectionHeader && {
         backgroundColor: theme.colors.listView.raisedBackground,
-        ...(sectionHeaderVariant === "label" && {
+        ...($sectionHeaderVariant === "label" && {
           color: theme.colors.textDisabled,
         }),
       }),
-      ...(disabled && {
+      ...($disabled && {
         color: theme.colors.textDisabled,
       }),
-      ...(selected && {
+      ...($selected && {
         color: "white",
-        backgroundColor: theme.colors[colorScheme],
+        backgroundColor: theme.colors[$colorScheme],
       }),
       display: "flex",
       alignItems: "center",
-      ...(selected &&
-        !isSectionHeader &&
-        (selectedPosition === "middle" || selectedPosition === "last") && {
+      ...($selected &&
+        !$isSectionHeader &&
+        ($selectedPosition === "middle" || $selectedPosition === "last") && {
           borderTopRightRadius: "0px",
           borderTopLeftRadius: "0px",
         }),
-      ...(selected &&
-        !isSectionHeader &&
-        (selectedPosition === "middle" || selectedPosition === "first") && {
+      ...($selected &&
+        !$isSectionHeader &&
+        ($selectedPosition === "middle" || $selectedPosition === "first") && {
           borderBottomRightRadius: "0px",
           borderBottomLeftRadius: "0px",
         }),
       position: "relative",
-      ...(hovered && {
-        boxShadow: `0 0 0 1px ${theme.colors[colorScheme]} inset`,
+      ...($hovered && {
+        boxShadow: `0 0 0 1px ${theme.colors[$colorScheme]} inset`,
       }),
-      ...(showsActiveState && {
+      ...($showsActiveState && {
         "&:active": {
-          backgroundColor: selected
-            ? colorScheme === "secondary"
+          backgroundColor: $selected
+            ? $colorScheme === "secondary"
               ? theme.colors.secondaryLight
               : theme.colors.primaryLight
             : theme.colors.activeBackground,
         },
       }),
-      ...(divider && {
+      ...($divider && {
         borderBottom: `1px solid ${theme.colors.dividerSubtle}`,
       }),
-      ...(backgroundColor && {
-        backgroundColor,
+      ...($backgroundColor && {
+        backgroundColor: $backgroundColor,
         "&:hover": {
-          backgroundColor,
+          backgroundColor: $backgroundColor,
         },
         "&:active": {
-          backgroundColor,
+          backgroundColor: $backgroundColor,
         },
       }),
     };
@@ -275,30 +275,30 @@ const RowContainer = styled.div<{
 );
 
 const ListViewDragIndicatorElement = styled.div<{
-  relativeDropPosition: RelativeDropPosition;
-  gap: number;
-  offsetLeft: number;
-  colorScheme: ListColorScheme;
-}>(({ theme, relativeDropPosition, offsetLeft, colorScheme, gap }) => ({
+  $relativeDropPosition: RelativeDropPosition;
+  $gap: number;
+  $offsetLeft: number;
+  $colorScheme: ListColorScheme;
+}>(({ theme, $relativeDropPosition, $offsetLeft, $colorScheme, $gap }) => ({
   zIndex: 1,
   position: "absolute",
   borderRadius: "3px",
-  ...(relativeDropPosition === "inside"
+  ...($relativeDropPosition === "inside"
     ? {
         inset: 2,
         boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-          colorScheme === "secondary"
+          $colorScheme === "secondary"
             ? theme.colors.secondary
             : theme.colors.dragOutline
         }`,
       }
     : {
-        top: relativeDropPosition === "above" ? -(3 + gap / 2) : undefined,
-        bottom: relativeDropPosition === "below" ? -(3 + gap / 2) : undefined,
-        left: offsetLeft,
+        top: $relativeDropPosition === "above" ? -(3 + $gap / 2) : undefined,
+        bottom: $relativeDropPosition === "below" ? -(3 + $gap / 2) : undefined,
+        left: $offsetLeft,
         right: 0,
         height: 6,
-        background: theme.colors[colorScheme],
+        background: theme.colors[$colorScheme],
         border: `2px solid white`,
         boxShadow: "0 0 2px rgba(0,0,0,0.5)",
       }),
@@ -424,47 +424,49 @@ const ListViewRow = forwardRef(function ListViewRow<
     },
     ref: Ref<HTMLElement>
   ) => {
+    const Component = RowContainer;
+
     const element = (
-      <RowContainer
-        ref={ref}
-        colorScheme={colorScheme}
+      <Component
+        ref={ref as any}
+        $colorScheme={colorScheme}
         onContextMenu={onContextMenu}
-        isSectionHeader={isSectionHeader}
+        $isSectionHeader={isSectionHeader}
         id={id}
-        gap={gap}
-        backgroundColor={backgroundColor}
+        $gap={gap ?? 0}
+        $backgroundColor={backgroundColor}
         {...hoverProps}
         onDoubleClick={handleDoubleClick}
-        marginType={marginType}
-        disabled={disabled}
-        hovered={hovered}
-        selected={selected}
-        variant={variant}
-        sectionHeaderVariant={sectionHeaderVariant}
-        selectedPosition={selectedPosition}
-        showsActiveState={pressEventName === "onClick"}
+        $marginType={marginType ?? "none"}
+        $disabled={disabled}
+        $hovered={hovered}
+        $selected={selected}
+        $variant={variant}
+        $sectionHeaderVariant={sectionHeaderVariant}
+        $selectedPosition={selectedPosition}
+        $showsActiveState={pressEventName === "onClick"}
         aria-selected={selected}
-        divider={!isDragging && divider}
+        $divider={!isDragging && divider}
         onKeyDown={onKeyDown}
         style={mergedStyle}
-        {...renderProps}
+        {...(renderProps as Partial<React.ComponentProps<typeof RowContainer>>)}
         {...mergeEventHandlers(
-          { onPointerDown: renderProps.onPointerDown },
+          { onPointerDown: renderProps.onPointerDown! },
           { [pressEventName]: handlePress }
         )}
         tabIndex={tabIndex}
       >
         {relativeDropPosition && (
           <ListViewDragIndicatorElement
-            colorScheme={colorScheme}
-            relativeDropPosition={relativeDropPosition}
-            offsetLeft={33 + depth * indentation}
-            gap={listGap}
+            $colorScheme={colorScheme}
+            $relativeDropPosition={relativeDropPosition}
+            $offsetLeft={33 + depth * indentation}
+            $gap={listGap}
           />
         )}
         {depth > 0 && <Spacer.Horizontal size={depth * indentation} />}
         {children}
-      </RowContainer>
+      </Component>
     );
 
     if (menuItems && onSelectMenuItem) {
@@ -486,13 +488,16 @@ const ListViewRow = forwardRef(function ListViewRow<
     return (
       <Sortable.Item<HTMLElement> id={id} disabled={overrideSortable === false}>
         {({ ref: sortableRef, ...sortableProps }) =>
-          renderContent(sortableProps, composeRefs(sortableRef, forwardedRef))
+          renderContent(
+            sortableProps as any,
+            composeRefs(sortableRef, forwardedRef)
+          )
         }
       </Sortable.Item>
     );
   }
 
-  return renderContent({}, forwardedRef);
+  return renderContent({} as any, forwardedRef);
 });
 
 /* ----------------------------------------------------------------------------
@@ -634,15 +639,15 @@ const VirtualizedList = memo(
  * ------------------------------------------------------------------------- */
 
 const RootContainer = styled.div<{
-  scrollable?: boolean;
-  gap?: number;
-}>(({ theme, scrollable, gap }) => ({
-  flex: scrollable ? "1 0 0" : "0 0 auto",
+  $scrollable?: boolean;
+  $gap?: number;
+}>(({ theme, $scrollable, $gap }) => ({
+  flex: $scrollable ? "1 0 0" : "0 0 auto",
   display: "flex",
   flexDirection: "column",
   flexWrap: "nowrap",
   color: theme.colors.textMuted,
-  gap,
+  gap: $gap,
 }));
 
 type ListViewItemInfo = {
@@ -893,8 +898,8 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
         {...{
           [pressEventName]: handleClick,
         }}
-        gap={gap}
-        scrollable={scrollable}
+        $gap={gap}
+        $scrollable={scrollable}
       >
         {withScrollable((scrollElementRef: HTMLDivElement | null) =>
           withSortable(

package/src/components/RadioGroup.tsx

@@ -1,6 +1,5 @@
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
-  ComponentProps,
   createContext,
   forwardRef,
   memo,
@@ -119,7 +118,7 @@ const RadioGroupContext = createContext<RadioGroupContextValue>({
 interface Props {
   id?: string;
   value?: string;
-  onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
+  onValueChange?: (value: string) => void;
   colorScheme?: RadioGroupColorScheme;
   allowEmpty?: boolean;
   children: ReactNode;

package/src/components/Select.tsx

@@ -43,31 +43,31 @@ export const SelectOption = memo(function SelectOption<T extends string>({
   return <option value={value}>{title ?? value}</option>;
 });
 
-const createChevronSVGString = memoize(
-  (color: string) => `
+const createChevronSVGString = memoize((color: string) =>
+  `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
     <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
   </svg>
-`
+`.replace(/\n/g, "")
 );
 
-const SelectContainer = styled.div<{ flex: CSSProperties["flex"] }>(
-  ({ flex }) => ({
-    flex: flex ?? "1 1 0px",
+const SelectContainer = styled.div<{ $flex: CSSProperties["flex"] }>(
+  ({ $flex }) => ({
+    flex: $flex ?? "1 1 0px",
     display: "flex",
     flexDirection: "row",
     position: "relative",
   })
 );
 
-const SelectElement = styled.select<{ flex: CSSProperties["flex"] }>(
-  ({ theme, flex }) => ({
+const SelectElement = styled.select<{ $flex: CSSProperties["flex"] }>(
+  ({ theme, $flex }) => ({
     appearance: "none",
     ...theme.textStyles.small,
     color: theme.colors.text,
     lineHeight: "19px",
     width: "0px", // Reset intrinsic width
-    flex: flex ?? "1 1 0px",
+    flex: $flex ?? "1 1 0px",
     position: "relative",
     border: "0",
     outline: "none",
@@ -162,10 +162,10 @@ export const Select = memo(function Select<T extends string>({
 
   return (
     <SelectContext.Provider value={contextValue}>
-      <SelectContainer flex={flex}>
+      <SelectContainer $flex={flex}>
         <SelectElement
           id={id}
-          flex={flex}
+          $flex={flex}
           value={value}
           onChange={useCallback(
             (event: React.ChangeEvent<HTMLSelectElement>) =>

package/src/components/Sortable.tsx

@@ -22,6 +22,7 @@ import React, {
   Ref,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -262,6 +263,12 @@ function SortableRoot({
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
 
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <SortableItemContext.Provider
       value={useMemo(
@@ -285,7 +292,8 @@ function SortableRoot({
         <SortableContext items={keys} strategy={verticalListSortingStrategy}>
           {children}
         </SortableContext>
-        {renderOverlay &&
+        {mounted &&
+          renderOverlay &&
           createPortal(
             <DragOverlay dropAnimation={null}>
               {activeIndex !== undefined &&

package/src/components/Spacer.tsx

@@ -1,28 +1,51 @@
-import styled from 'styled-components';
+/* 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_ = 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} />
+    );
+  }
+);
+
 /* ----------------------------------------------------------------------------
  * Horizontal
  * ------------------------------------------------------------------------- */
 
-const SpacerHorizontal = styled.span<Props>(({ size, inline }) => ({
-  display: inline ? 'inline-block' : 'block',
-  ...(size === undefined ? { flex: 1 } : { minWidth: size }),
+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} />
+    );
+  }
+);
+
 export namespace Spacer {
   export const Vertical = SpacerVertical;
   export const Horizontal = SpacerHorizontal;

package/src/components/Stack.tsx

@@ -81,11 +81,11 @@ interface Props extends StyleProps {
 }
 
 const Element = styled.div<{
-  styleProps: StyleProps;
-  breakpoints?: StackBreakpointList | null | false;
-}>(({ styleProps, breakpoints }) => ({
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || []),
+  $styleProps: StyleProps;
+  $breakpoints?: StackBreakpointList | null | false;
+}>(({ $styleProps, $breakpoints }) => ({
+  ...$styleProps,
+  ...mergeBreakpoints($breakpoints || []),
 }));
 
 const StackBase = forwardRef(function StackBase(
@@ -105,11 +105,11 @@ const StackBase = forwardRef(function StackBase(
 
   return (
     <Element
-      ref={forwardedRef}
+      ref={forwardedRef as any}
       id={id}
       as={as}
-      styleProps={styleProps}
-      breakpoints={breakpoints}
+      $styleProps={styleProps}
+      $breakpoints={breakpoints}
       tabIndex={tabIndex}
       {...(href && { href })}
     >

package/src/components/Switch.tsx

@@ -5,8 +5,8 @@ import styled from "styled-components";
 type SwitchColorScheme = "normal" | "primary" | "secondary";
 
 const SwitchRoot = styled(SwitchPrimitive.Root)<{
-  colorScheme: SwitchColorScheme;
-}>(({ theme, colorScheme: variant }) => ({
+  $colorScheme: SwitchColorScheme;
+}>(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -15,16 +15,15 @@ const SwitchRoot = styled(SwitchPrimitive.Root)<{
   position: "relative",
   WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
   cursor: "pointer",
-  // '&:focus': {
-  //   boxShadow: `0 0 0 1px ${
-  //     variant === 'secondary' ? theme.colors.secondary : theme.colors.primary
-  //   }`,
-  // },
+  "&:focus": {
+    outline: `2px solid ${theme.colors.primary}`,
+    outlineOffset: "1px",
+  },
   '&[data-state="checked"]': {
     backgroundColor:
-      variant === "primary"
+      $colorScheme === "primary"
         ? theme.colors.primary
-        : variant === "secondary"
+        : $colorScheme === "secondary"
           ? theme.colors.secondary
           : undefined,
   },
@@ -55,7 +54,7 @@ export const Switch = function Switch({
 }: Props) {
   return (
     <SwitchRoot
-      colorScheme={colorScheme}
+      $colorScheme={colorScheme}
       checked={value}
       onCheckedChange={(newValue) => {
         onChange(newValue);

package/src/components/Text.tsx

@@ -63,16 +63,16 @@ interface Props extends StyleProps {
   onDoubleClick?: () => void;
 }
 
-const StyledElement = styled.span<
-  {
-    variant: keyof Theme["textStyles"];
-    styleProps: StyleProps;
-  } & Pick<Props, "variant" | "breakpoints" | "color">
->(({ theme, variant, styleProps, breakpoints, color }) => ({
-  ...(theme.textStyles as any)[variant],
-  color: color ? theme.colors[color] : undefined,
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || []),
+const StyledElement = styled.span<{
+  $variant: keyof Theme["textStyles"];
+  $styleProps: StyleProps;
+  $color: ThemeColorName;
+  $breakpoints: BreakpointCollection<StyleProps> | null | false;
+}>(({ theme, $variant, $styleProps, $breakpoints, $color }) => ({
+  ...(theme.textStyles as any)[$variant],
+  color: $color ? theme.colors[$color] : undefined,
+  ...$styleProps,
+  ...mergeBreakpoints($breakpoints || []),
 }));
 
 export const Text = forwardRef(function Text(
@@ -96,12 +96,12 @@ export const Text = forwardRef(function Text(
       ref={forwardedRef}
       as={element}
       className={className}
-      variant={variant}
-      breakpoints={breakpoints}
-      styleProps={rest}
-      color={color}
+      $variant={variant}
+      $breakpoints={breakpoints}
+      $styleProps={rest}
+      $color={color}
       onClick={onClick}
-      {...(href && { href })}
+      {...((href && { href }) as any)}
     >
       {children}
     </StyledElement>

package/src/components/internal/Menu.tsx

@@ -171,17 +171,13 @@ export function getKeyboardShortcutsForMenuItems<T extends string>(
   );
 }
 
-const ShortcutElement = styled.kbd(
-  ({
-    theme,
-    fixedWidth,
-  }: {
-    theme: Theme;
-    fixedWidth?: boolean;
-  }): CSSObject => ({
+const ShortcutElement = styled.kbd<{
+  $fixedWidth?: boolean;
+}>(
+  ({ theme, $fixedWidth }): CSSObject => ({
     ...theme.textStyles.small,
     color: theme.colors.textDisabled,
-    ...(fixedWidth && {
+    ...($fixedWidth && {
       width: "0.9rem",
       textAlign: "center",
     }),
@@ -200,7 +196,7 @@ export const KeyboardShortcut = memo(function KeyboardShortcut({
   const keyElements = keys.map((key) => (
     <ShortcutElement
       key={key}
-      fixedWidth={platform === "mac" && key.length === 1}
+      $fixedWidth={platform === "mac" && key.length === 1}
     >
       {key}
     </ShortcutElement>

package/src/contexts/DesignSystemConfiguration.tsx

@@ -23,7 +23,14 @@ export const DesignSystemThemeProvider = memo(
     children: ReactNode;
     theme?: Theme;
   }) {
-    const parentTheme = useTheme();
+    let parentTheme: Theme | undefined;
+
+    try {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      parentTheme = useTheme();
+    } catch (e) {
+      // console.error(e);
+    }
 
     if (theme) {
       return <ThemeProvider theme={theme}>{children}</ThemeProvider>;