@noya-app/noya-designsystem 0.1.15 → 0.1.17

package/src/components/InputField.tsx

@@ -1,5 +1,4 @@
 import { CaretDownIcon } from "@noya-app/noya-icons";
-import { memoize } from "@noya-app/noya-utils";
 import { assignRef } from "@noya-app/react-utils";
 import { Property } from "csstype";
 import React, {
@@ -59,26 +58,26 @@ const InputFieldContext = createContext<InputFieldContextValue>({
 
 const LabelContainer = styled.label<{
   pointerEvents: Property.PointerEvents;
-  labelPosition: LabelPosition;
-  hasDropdown: boolean;
-}>(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
+  $labelPosition: LabelPosition;
+  $hasDropdown: boolean;
+}>(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
   ...theme.textStyles.label,
   fontWeight: "bold",
   color: theme.colors.textDisabled,
   position: "absolute",
   top: 0,
-  right: labelPosition === "end" ? 0 : undefined,
+  right: $labelPosition === "end" ? 0 : undefined,
   bottom: 0,
-  left: labelPosition === "start" ? 0 : undefined,
+  left: $labelPosition === "start" ? 0 : undefined,
   display: "flex",
   alignItems: "center",
   pointerEvents,
   userSelect: "none",
-  ...(labelPosition === "start"
+  ...($labelPosition === "start"
     ? { justifyContent: "flex-start", paddingLeft: "6px" }
     : {
         justifyContent: "flex-end",
-        paddingRight: hasDropdown ? "16px" : "6px",
+        paddingRight: $hasDropdown ? "16px" : "6px",
       }),
 }));
 
@@ -115,8 +114,8 @@ const InputFieldLabel = memo(
           assignRef(forwardedRef, element);
         }}
         pointerEvents={pointerEvents}
-        labelPosition={labelPosition}
-        hasDropdown={hasDropdown}
+        $labelPosition={labelPosition}
+        $hasDropdown={hasDropdown}
         style={style}
       >
         {children}
@@ -175,11 +174,11 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
  * Button
  * ------------------------------------------------------------------------- */
 
-const ButtonContainer = styled.span<{ size: InputFieldSize }>(
-  ({ theme, size }) => ({
+const ButtonContainer = styled.span<{ $size: InputFieldSize }>(
+  ({ theme, $size }) => ({
     position: "absolute",
-    right: size === "large" ? "9px" : size === "medium" ? "4px" : "2px",
-    top: size === "large" ? "8px" : size === "medium" ? "4px" : "2px",
+    right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
+    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px",
   })
 );
 
@@ -212,7 +211,7 @@ const InputFieldButton = memo(function InputFieldButton({
   }, []);
 
   return (
-    <ButtonContainer size={size}>
+    <ButtonContainer $size={size}>
       <Button
         variant="floating"
         onClick={onClick ?? defaultHandleClick}
@@ -229,50 +228,38 @@ const InputFieldButton = memo(function InputFieldButton({
  * Input
  * ------------------------------------------------------------------------- */
 
-const createCrossSVGString = memoize(
-  (color: string) =>
-    `<svg width='15' height='15' viewBox='0 0 15 15' fill='${color}' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z' fill-rule='evenodd' clip-rule='evenodd'></path>
-    </svg>`
-);
+// const createCrossSVGString = memoize(
+//   (color: string) =>
+//     `<svg width='15' height='15' viewBox='0 0 15 15' fill='${color}' xmlns='http://www.w3.org/2000/svg'>
+//       <path d='M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z' fill-rule='evenodd' clip-rule='evenodd'></path>
+//     </svg>`
+// );
 
 type InputFieldVariant = "normal" | "bare";
 
-const ignoredProps = new Set([
-  "labelPosition",
-  "labelSize",
-  "hasLabel",
-  "hasDropdown",
-  "textAlign",
-  "variant",
-  "onNudge",
-]);
-
-export const InputElement = styled(TextInput).withConfig({
-  shouldForwardProp: (prop) => (ignoredProps.has(prop) ? false : true),
-})<{
-  labelPosition: LabelPosition;
-  labelSize: number;
-  hasLabel: boolean;
-  hasDropdown: boolean;
-  textAlign?: Property.TextAlign;
+export const InputElement = styled(TextInput)<{
   disabled?: boolean;
-  variant?: InputFieldVariant;
   readOnly?: boolean;
-  size: InputFieldSize;
-}>(
-  ({
-    theme,
-    labelPosition,
-    labelSize,
-    hasDropdown,
-    textAlign,
-    disabled,
-    hasLabel,
-    readOnly,
-    variant = "normal",
-    size,
-  }) => ({
+  $labelPosition: LabelPosition;
+  $labelSize: number;
+  $hasLabel: boolean;
+  $hasDropdown: boolean;
+  $textAlign?: Property.TextAlign;
+  $variant?: InputFieldVariant;
+  $size: InputFieldSize;
+}>(({
+  theme,
+  $labelPosition,
+  $labelSize,
+  $hasDropdown,
+  $textAlign,
+  disabled,
+  $hasLabel,
+  readOnly,
+  $variant = "normal",
+  $size,
+}) => {
+  return {
     // placeholder
     "&::placeholder": {
       color: theme.colors.textDisabled,
@@ -283,7 +270,7 @@ export const InputElement = styled(TextInput).withConfig({
       : disabled
         ? theme.colors.textDisabled
         : theme.colors.text,
-    ...(size === "small" && {
+    ...($size === "small" && {
       fontSize: "11px",
     }),
     width: "0px", // Reset intrinsic width
@@ -292,26 +279,26 @@ export const InputElement = styled(TextInput).withConfig({
     border: "0",
     outline: "none",
     minWidth: "0",
-    textAlign: textAlign ?? "left",
+    textAlign: $textAlign ?? "left",
     alignSelf: "stretch",
     borderRadius: "4px",
-    paddingTop: size === "large" ? "10px" : size === "medium" ? "4px" : "1px",
+    paddingTop: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
     paddingBottom:
-      size === "large" ? "10px" : size === "medium" ? "4px" : "1px",
+      $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
     paddingLeft:
-      (size === "large" ? 10 : size === "medium" ? 6 : 4) +
-      (hasLabel && labelPosition === "start" ? 6 + labelSize : 0) +
+      ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
+      ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) +
       "px",
     paddingRight:
-      (size === "large" ? 10 : size === "medium" ? 6 : 4) +
-      (hasLabel && labelPosition === "end" ? 6 + labelSize : 0) +
-      (hasDropdown ? 11 : 0) +
+      ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
+      ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) +
+      ($hasDropdown ? 11 : 0) +
       "px",
     background: theme.colors.inputBackground,
     "&:focus": {
       boxShadow: `0 0 0 2px ${theme.colors.primary}`,
     },
-    ...(variant === "bare" && {
+    ...($variant === "bare" && {
       paddingTop: "4px",
       paddingRight: "4px",
       paddingBottom: "4px",
@@ -322,16 +309,16 @@ export const InputElement = styled(TextInput).withConfig({
       marginLeft: "-4px",
     }),
 
-    '&[type="search"]::-webkit-search-cancel-button': {
-      appearance: "none",
-      height: "15px",
-      width: "15px",
-      background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
-        theme.colors.icon
-      )}") no-repeat`,
-    },
-  })
-);
+    // '&[type="search"]::-webkit-search-cancel-button': {
+    //   appearance: "none",
+    //   height: "15px",
+    //   width: "15px",
+    //   background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
+    //     theme.colors.icon
+    //   )}") no-repeat`,
+    // },
+  };
+});
 
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
@@ -365,11 +352,11 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   return (
     <InputElement
       ref={forwardedRef}
-      labelPosition={labelPosition}
-      labelSize={labelSize}
-      hasLabel={hasLabel}
-      hasDropdown={hasDropdown}
-      size={size}
+      $labelPosition={labelPosition}
+      $labelSize={labelSize}
+      $hasLabel={hasLabel}
+      $hasDropdown={hasDropdown}
+      $size={size}
       onFocusChange={handleFocusChange}
       {...props}
     />
@@ -388,11 +375,11 @@ const InputFieldTypeahead = (props: { value: string }) => {
 
   return (
     <InputElement
-      labelPosition={labelPosition}
-      labelSize={labelSize}
-      hasLabel={hasLabel}
-      hasDropdown={hasDropdown}
-      size={size}
+      $labelPosition={labelPosition}
+      $labelSize={labelSize}
+      $hasLabel={hasLabel}
+      $hasDropdown={hasDropdown}
+      $size={size}
       onFocusChange={onFocusChange}
       readOnly
       placeholder={props.value}
@@ -438,7 +425,7 @@ function parseNumber(value: string) {
 }
 
 function InputFieldNumberInput(props: InputFieldNumberInputProps) {
-  const { value, placeholder, onNudge } = props;
+  const { value, placeholder, onNudge, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : undefined;
   const onChange = "onChange" in props ? props.onChange : undefined;
 
@@ -476,7 +463,7 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
 
   return (
     <InputFieldInput
-      {...props}
+      {...rest}
       value={value === undefined ? "" : String(value)}
       placeholder={placeholder}
       onKeyDown={handleKeyDown}
@@ -491,13 +478,13 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
  * Root
  * ------------------------------------------------------------------------- */
 
-const RootContainer = styled.div<{ width?: number; flex?: string }>(
-  ({ theme, flex, width }) => ({
-    flex: flex ?? "1",
+const RootContainer = styled.div<{ $width?: number; $flex?: string }>(
+  ({ theme, $flex, $width }) => ({
+    flex: $flex ?? "1",
     display: "flex",
     flexDirection: "row",
     position: "relative",
-    maxWidth: typeof width === "number" ? `${width}px` : undefined,
+    maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
   })
 );
 
@@ -586,7 +573,7 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer id={id} width={width} flex={flex}>
+    <RootContainer id={id} $width={width} $flex={flex}>
       {children}
     </RootContainer>
   );

package/src/components/InputFieldWithCompletions.tsx

@@ -66,9 +66,9 @@ function filterWithGroupedSections(
   });
 }
 
-export const CompletionToken = styled.span<{ type: IToken["type"] }>(
-  ({ type }) => ({
-    fontWeight: type === "match" ? "bold" : "normal",
+export const CompletionToken = styled.span<{ $type: IToken["type"] }>(
+  ({ $type }) => ({
+    fontWeight: $type === "match" ? "bold" : "normal",
     whiteSpace: "pre",
   })
 );
@@ -127,7 +127,7 @@ export const CompletionMenu = memo(
               }}
             >
               {tokens.map((token, j) => (
-                <CompletionToken key={j} type={token.type}>
+                <CompletionToken key={j} $type={token.type}>
                   {token.text}
                 </CompletionToken>
               ))}

package/src/components/InspectorPrimitives.tsx

@@ -3,14 +3,14 @@ import styled, { useTheme } from "styled-components";
 import { Spacer } from "./Spacer";
 
 export const Section = styled.div<{
-  padding?: CSSProperties["padding"];
-  gap?: CSSProperties["gap"];
-}>(({ theme, padding = "10px", gap }) => ({
+  $padding?: CSSProperties["padding"];
+  $gap?: CSSProperties["gap"];
+}>(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
-  padding,
-  gap,
+  padding: $padding,
+  gap: $gap,
 }));
 
 export const SectionHeader = styled.div(({ theme }) => ({
@@ -19,14 +19,14 @@ export const SectionHeader = styled.div(({ theme }) => ({
 }));
 
 export const Title = styled.div<{
-  textStyle?: "small" | "heading5" | "heading4" | "heading3";
-}>(({ theme, textStyle }) => ({
+  $textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}>(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
-  ...(textStyle
+  ...($textStyle
     ? {
-        ...theme.textStyles[textStyle],
+        ...theme.textStyles[$textStyle],
         color: theme.colors.text,
       }
     : {
@@ -36,13 +36,13 @@ export const Title = styled.div<{
       }),
 }));
 
-export const Row = styled.div<{ gap?: CSSProperties["gap"] }>(
-  ({ theme, gap }) => ({
+export const Row = styled.div<{ $gap?: CSSProperties["gap"] }>(
+  ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    gap,
+    gap: $gap,
   })
 );
 
@@ -76,13 +76,13 @@ const SliderRowLabel = styled.span(({ theme }) => ({
 }));
 
 export const RowLabel = styled.span<{
-  textStyle?: "small" | "heading5" | "heading4" | "heading3";
-}>(({ theme, textStyle }) => ({
+  $textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}>(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
-  ...(textStyle
+  ...($textStyle
     ? {
-        ...theme.textStyles[textStyle],
+        ...theme.textStyles[$textStyle],
       }
     : {
         ...theme.textStyles.label,
@@ -111,12 +111,12 @@ export const LabeledRow = memo(function LabeledRow({
   return (
     <Row id={id}>
       <Column>
-        <RowLabel textStyle={labelTextStyle}>
+        <RowLabel $textStyle={labelTextStyle}>
           {label}
           {right && <Spacer.Horizontal />}
           {right}
         </RowLabel>
-        <Row gap={gap}>{children}</Row>
+        <Row $gap={gap}>{children}</Row>
       </Column>
     </Row>
   );

package/src/components/Label.tsx

@@ -1,24 +1,24 @@
-import React, { memo, ReactNode } from 'react';
-import styled from 'styled-components';
-import { Spacer } from './Spacer';
+import React, { memo, ReactNode } from "react";
+import styled from "styled-components";
+import { Spacer } from "./Spacer";
 
 /* ----------------------------------------------------------------------------
  * Label
  * ------------------------------------------------------------------------- */
 
-const LabelLabel = styled.label<{ selected?: boolean }>(
-  ({ theme, selected }) => ({
+const LabelLabel = styled.label<{ $selected?: boolean }>(
+  ({ theme, $selected }) => ({
     ...theme.textStyles.small,
     color: theme.colors.textMuted,
-    ...(selected && {
+    ...($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
-  }),
+    fontSize: "11px",
+    flex: "0 0 auto",
+    minWidth: "0",
+    letterSpacing: "0.4px",
+    whiteSpace: "pre", // prevent breaking - may need to make this an option
+  })
 );
 
 /* ----------------------------------------------------------------------------
@@ -26,15 +26,15 @@ const LabelLabel = styled.label<{ selected?: boolean }>(
  * ------------------------------------------------------------------------- */
 
 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',
+  flex: "0 0 auto",
+  position: "relative",
+  border: "0",
+  outline: "none",
+  minWidth: "0",
+  textAlign: "left",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
 }));
 
 interface LabelRootProps {