@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/src/components/InputFieldWithCompletions.tsx

@@ -13,18 +13,16 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styled from "styled-components";
 import {
   CompletionItem,
   CompletionListItem,
   CompletionSectionHeader,
 } from "../utils/completions";
-import { IToken, fuzzyFilter, fuzzyTokenize } from "../utils/fuzzyScorer";
+import { fuzzyFilter, fuzzyTokenize } from "../utils/fuzzyScorer";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { InputField, InputFieldSize } from "./InputField";
 import { IVirtualizedList, ListView } from "./ListView";
 import { Spacer } from "./Spacer";
-import { Stack } from "./Stack";
 import { Small } from "./Text";
 
 function filterWithGroupedSections(
@@ -66,13 +64,6 @@ function filterWithGroupedSections(
   });
 }
 
-export const CompletionToken = styled.span<{ $type: IToken["type"] }>(
-  ({ $type }) => ({
-    fontWeight: $type === "match" ? "bold" : "normal",
-    whiteSpace: "pre",
-  })
-);
-
 interface CompletionMenuProps {
   items: CompletionListItem[];
   selectedIndex: number;
@@ -127,9 +118,12 @@ export const CompletionMenu = memo(
               }}
             >
               {tokens.map((token, j) => (
-                <CompletionToken key={j} $type={token.type}>
+                <span
+                  key={j}
+                  className={`${token.type === "match" ? "font-bold" : "font-normal"} whitespace-pre`}
+                >
                   {token.text}
-                </CompletionToken>
+                </span>
               ))}
               {item.icon && (
                 <>
@@ -145,7 +139,7 @@ export const CompletionMenu = memo(
   })
 );
 
-type Props = {
+export type InputFieldWithCompletionsProps = {
   loading?: boolean;
   initialValue?: string;
   placeholder?: string;
@@ -164,7 +158,7 @@ type Props = {
   hideMenuWhenEmptyValue?: boolean;
 };
 
-export interface IInputFieldWithCompletions {
+export interface InputFieldWithCompletionsRef {
   focus(): void;
   setValue(value: string): void;
   selectAllInputText(): void;
@@ -189,8 +183,8 @@ export const InputFieldWithCompletions = memo(
       children,
       hideChildrenWhenFocused = false,
       hideMenuWhenEmptyValue = false,
-    }: Props,
-    forwardedRef: ForwardedRef<IInputFieldWithCompletions>
+    }: InputFieldWithCompletionsProps,
+    forwardedRef: ForwardedRef<InputFieldWithCompletionsRef>
   ) {
     const ref = useRef<HTMLInputElement>(null);
 
@@ -416,12 +410,16 @@ export const InputFieldWithCompletions = memo(
     return (
       <InputField.Root
         size={size}
-        labelSize={16}
         renderPopoverContent={({ width }) => {
           const listSize = { width, height };
 
           return (
-            <Stack.V flex={`0 0 ${height}px`} display={display}>
+            <div
+              className={`flex flex-col ${!filter && hideMenuWhenEmptyValue ? "none" : "flex"}`}
+              style={{
+                flex: `0 0 ${height}px`
+              }}
+            >
               {filteredItems.length > 0 ? (
                 <CompletionMenu
                   ref={listRef}
@@ -432,18 +430,13 @@ export const InputFieldWithCompletions = memo(
                   listSize={listSize}
                 />
               ) : (
-                <Stack.V
-                  height="100px"
-                  padding="20px"
-                  alignItems="center"
-                  justifyContent="center"
-                >
-                  <Small color="textDisabled">
+                <div className="flex flex-col h-[100px] p-5 items-center justify-center">
+                  <Small className="text-text-disabled">
                     {loading ? "Loading" : "No results"}
                   </Small>
-                </Stack.V>
+                </div>
               )}
-            </Stack.V>
+            </div>
           );
         }}
       >

package/src/components/InspectorContainer.tsx

@@ -1,8 +1,6 @@
 import {
   Divider,
   ScrollArea,
-  Stack,
-  useDesignSystemTheme,
   withSeparatorElements,
 } from "@noya-app/noya-designsystem";
 import React, { forwardRef, memo } from "react";
@@ -28,7 +26,6 @@ export const InspectorContainer = memo(
     },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) {
-    const theme = useDesignSystemTheme();
 
     return (
       <div
@@ -39,23 +36,21 @@ export const InspectorContainer = memo(
           display: "flex",
           flexDirection: "column",
           position: "relative",
-          background: theme.colors.sidebar.background,
+          background: "var(--sidebar-background)",
           ...style,
         }}
       >
         {header}
         {children ? (
           <ScrollArea>
-            <Stack.V position="relative">
+            <div className="flex flex-col relative">
               {showDividers
                 ? withSeparatorElements(children, <Divider />)
                 : children}
-            </Stack.V>
+            </div>
           </ScrollArea>
         ) : fallback ? (
-          <Stack.V position="relative" height="100%">
-            {fallback}
-          </Stack.V>
+          <div className="flex flex-col relative h-full">{fallback}</div>
         ) : null}
       </div>
     );

package/src/components/InspectorPrimitives.tsx

@@ -1,140 +1,166 @@
-import React, { CSSProperties, memo, ReactNode } from "react";
-import styled, { useTheme } from "styled-components";
+import React, { memo, ReactNode, forwardRef } from "react";
+import { cn } from "../utils/tailwind";
 import { Spacer } from "./Spacer";
+import { textStyles } from "./Text";
 
-export const Section = styled.div<{
-  $padding?: CSSProperties["padding"];
-  $gap?: CSSProperties["gap"];
-}>(({ theme, $padding = "10px", $gap }) => ({
-  flex: "0 0 auto",
-  display: "flex",
-  flexDirection: "column",
-  padding: $padding,
-  gap: $gap,
-}));
-
-export const SectionHeader = styled.div(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-}));
-
-export const Title = styled.div<{
-  $textStyle?: "small" | "heading5" | "heading4" | "heading3";
-}>(({ theme, $textStyle }) => ({
-  display: "flex",
-  flexDirection: "row",
-  userSelect: "none",
-  ...($textStyle
-    ? {
-        ...theme.textStyles[$textStyle],
-        color: theme.colors.text,
-      }
-    : {
-        ...theme.textStyles.label,
-        color: theme.colors.textMuted,
-        fontWeight: "bold",
-      }),
-}));
-
-export const Row = styled.div<{ $gap?: CSSProperties["gap"] }>(
-  ({ theme, $gap }) => ({
-    flex: "1",
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: $gap,
-  })
-);
+export const Section = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-none flex flex-col", className)}
+    {...props}
+  />
+));
+
+export const SectionHeader = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+
+type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
+
+export const Title = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    $textStyle?: TitleTextStyle;
+  }
+>(({ className, $textStyle, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex select-none ${$textStyle ? `${textStyles[$textStyle]} text-text` : "font-sans text-label uppercase text-text-muted font-bold"} ${className ?? ""}`}
+    {...props}
+  />
+));
 
-export const Column = styled.div(({ theme }) => ({
-  flex: "1",
-  display: "flex",
-  flexDirection: "column",
-  gap: "4px",
-}));
+export const Row = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-1 flex flex-row items-center", className)}
+    {...props}
+  />
+));
 
-export const Checkbox = styled.input(({ theme }) => ({
-  margin: 0,
-}));
+export const Column = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-1 flex flex-col gap-1", className)}
+    {...props}
+  />
+));
 
-export const Text = styled.span(({ theme }) => ({
-  ...theme.textStyles.small,
-}));
+export const Checkbox = forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => (
+  <input
+    ref={ref}
+    type="checkbox"
+    className={cn("m-0", className)}
+    {...props}
+  />
+));
+
+export const Text = forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={cn("font-sans text-heading5 font-normal", className)}
+    {...props}
+  />
+));
 
 export const VerticalSeparator = () => (
-  <Spacer.Vertical size={useTheme().sizes.inspector.verticalSeparator} />
+  <Spacer.Vertical size="inspector-v-separator" />
 );
 
 export const HorizontalSeparator = () => (
-  <Spacer.Horizontal size={useTheme().sizes.inspector.horizontalSeparator} />
+  <Spacer.Horizontal size="inspector-h-separator" />
 );
 
-const SliderRowLabel = styled.span(({ theme }) => ({
-  ...theme.textStyles.small,
-  color: theme.colors.textMuted,
-  marginBottom: "-6px",
-}));
-
-export const RowLabel = styled.span<{
-  $textStyle?: "small" | "heading5" | "heading4" | "heading3";
-}>(({ theme, $textStyle }) => ({
-  // marginBottom: '6px',
-  display: "flex",
-  ...($textStyle
-    ? {
-        ...theme.textStyles[$textStyle],
-      }
-    : {
-        ...theme.textStyles.label,
-        color: theme.colors.textSubtle,
-        fontWeight: "bold",
-      }),
-  lineHeight: "19px", // Button height
-  alignItems: "center",
-}));
+// const SliderRowLabel = forwardRef<
+//   HTMLSpanElement,
+//   React.HTMLAttributes<HTMLSpanElement>
+// >(({ className, ...props }, ref) => (
+//   <span
+//     ref={ref}
+//     className={`font-sans text-heading5 font-normal text-text-muted -mb-[6px] ${className ?? ""}`}
+//     {...props}
+//   />
+// ));
+
+export const RowLabel = forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement> & {
+    $textStyle?: TitleTextStyle | "label";
+  }
+>(function RowLabel({ className, $textStyle, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      className={`font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle ${$textStyle && textStyles[$textStyle]} ${className ?? ""}`}
+      {...props}
+    />
+  );
+});
+
+interface LabeledRowProps {
+  id?: string;
+  children: ReactNode;
+  label: ReactNode;
+  labelTextStyle?: TitleTextStyle;
+  right?: ReactNode;
+  className?: string;
+}
 
 export const LabeledRow = memo(function LabeledRow({
   id,
   children,
   label,
   labelTextStyle,
-  gap,
   right,
-}: {
-  id?: string;
-  children: ReactNode;
-  label: ReactNode;
-  labelTextStyle?: "small" | "heading5" | "heading4" | "heading3";
-  gap?: CSSProperties["gap"];
-  right?: ReactNode;
-}) {
+  className,
+}: LabeledRowProps) {
   return (
-    <Row id={id}>
+    <Row id={id} className={className ?? ""}>
       <Column>
         <RowLabel $textStyle={labelTextStyle}>
           {label}
           {right && <Spacer.Horizontal />}
           {right}
         </RowLabel>
-        <Row $gap={gap}>{children}</Row>
-      </Column>
-    </Row>
-  );
-});
-
-export const LabeledSliderRow = memo(function LabeledRow({
-  children,
-  label,
-}: {
-  children: ReactNode;
-  label: string;
-}) {
-  return (
-    <Row>
-      <Column>
-        <SliderRowLabel>{label}</SliderRowLabel>
         <Row>{children}</Row>
       </Column>
     </Row>
   );
 });
+
+// interface LabeledSliderRowProps {
+//   children: ReactNode;
+//   label: string;
+// }
+
+// export const LabeledSliderRow = memo(function LabeledSliderRow({
+//   children,
+//   label,
+// }: LabeledSliderRowProps) {
+//   return (
+//     <Row>
+//       <Column>
+//         <SliderRowLabel>{label}</SliderRowLabel>
+//         <Row>{children}</Row>
+//       </Column>
+//     </Row>
+//   );
+// });

package/src/components/Label.tsx

@@ -1,42 +1,11 @@
 import React, { memo, ReactNode } from "react";
-import styled from "styled-components";
 import { Spacer } from "./Spacer";
-
-/* ----------------------------------------------------------------------------
- * Label
- * ------------------------------------------------------------------------- */
-
-const LabelLabel = styled.label<{ $selected?: boolean }>(
-  ({ theme, $selected }) => ({
-    ...theme.textStyles.small,
-    color: theme.colors.textMuted,
-    ...($selected && {
-      color: theme.colors.text,
-    }),
-    fontSize: "11px",
-    flex: "0 0 auto",
-    minWidth: "0",
-    letterSpacing: "0.4px",
-    whiteSpace: "pre", // prevent breaking - may need to make this an option
-  })
-);
+import { textStyles } from "./Text";
 
 /* ----------------------------------------------------------------------------
  * Root
  * ------------------------------------------------------------------------- */
 
-const LabelContainer = styled.span(({ theme }) => ({
-  flex: "0 0 auto",
-  position: "relative",
-  border: "0",
-  outline: "none",
-  minWidth: "0",
-  textAlign: "left",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-}));
-
 interface LabelRootProps {
   label: ReactNode;
   children: ReactNode;
@@ -44,19 +13,19 @@ interface LabelRootProps {
 
 function LabelRoot({ label, children }: LabelRootProps) {
   return (
-    <LabelContainer>
+    <span className={`flex-none relative outline-none border-0 min-w-0 text-left flex flex-col items-center`}>
       {children}
       {label && (
         <>
           <Spacer.Vertical size={2} />
-          <LabelLabel>{label}</LabelLabel>
+          <span className={`${textStyles.small} text-text-muted text-xs flex-none min-w-0 tracking-[0.4px] whitespace-pre`}>{label}</span>
+
         </>
       )}
-    </LabelContainer>
+    </span>
   );
 }
 
 export namespace Label {
-  export const Label = memo(LabelLabel);
   export const Root = memo(LabelRoot);
 }

package/src/components/LabeledElementView.tsx

@@ -10,27 +10,6 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import styled from 'styled-components';
-
-const Container = styled.div(({ theme }) => ({
-  display: 'flex',
-  flex: '1',
-  flexDirection: 'column',
-  position: 'relative',
-}));
-
-const Tools = styled.div(({ theme }) => ({
-  display: 'flex',
-  flex: '1',
-  alignItems: 'center',
-}));
-
-const Labels = styled.div(({ theme }) => ({
-  height: 'var(--height)',
-  position: 'relative',
-  overflow: 'hidden',
-  userSelect: 'none',
-}));
 
 interface ContainerProps {
   children: ReactNode;
@@ -177,9 +156,9 @@ export const LabeledElementView = memo(function LabeledElementView({
   }, [refs, labelElements]);
 
   return (
-    <Container ref={containerRef}>
-      <Tools>{children}</Tools>
-      <Labels>{labelElements}</Labels>
-    </Container>
+    <div className="flex flex-1 flex-col relative" ref={containerRef}>
+      <div className="flex flex-1 items-center">{children}</div>
+      <div className="relative overflow-hidden select-none">{labelElements}</div>
+    </div>
   );
-});
+});