@noya-app/noya-designsystem 0.1.24 → 0.1.25

package/dist/index.mjs

@@ -2240,6 +2240,35 @@ function InputFieldRoot({
     measuredWidth && /* @__PURE__ */ React18.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
+var PrimitiveInputField = styled12.input(({ theme, readOnly, disabled }) => {
+  return {
+    // placeholder
+    "&::placeholder": {
+      color: theme.colors.textDisabled
+    },
+    ...theme.textStyles.small,
+    color: readOnly ? theme.colors.textMuted : disabled ? theme.colors.textDisabled : theme.colors.text,
+    width: "0px",
+    // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    background: theme.colors.inputBackground,
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`
+    },
+    userSelect: "all",
+    pointerEvents: "all"
+  };
+});
 var InputField;
 ((InputField2) => {
   InputField2.Root = memo9(InputFieldRoot);
@@ -2249,6 +2278,7 @@ var InputField;
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
+  InputField2.PrimitiveElement = PrimitiveInputField;
 })(InputField || (InputField = {}));
 
 // src/contexts/DialogContext.tsx
@@ -2594,9 +2624,12 @@ var ChipElement = styled14.span(({ theme, $colorScheme, $size, $variant, $monosp
     // lineHeight: "1.4",
     lineHeight: "15px",
     whiteSpace: "pre",
-    ...$size === "medium" ? {
+    ...$size === "large" ? {
       fontSize: "11px",
       padding: "4px 8px"
+    } : $size === "medium" ? {
+      fontSize: "10px",
+      padding: "2px 6px"
     } : {
       fontSize: "9px",
       padding: "0px 4px"
@@ -2631,7 +2664,7 @@ var DeleteElement = styled14(Cross1Icon)(({ size: size2 }) => ({
   marginRight: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginLeft: "2px",
     // top: '-1px',
     transform: "scale(0.75)"
@@ -2650,7 +2683,7 @@ var AddElement = styled14(PlusIcon).withConfig({
   marginLeft: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginRight: "2px",
     top: "-1px",
     transform: "scale(0.75)"
@@ -2670,7 +2703,7 @@ var Chip = memo11(
     addable,
     clickable,
     style: style3,
-    size: size2 = "medium",
+    size: size2 = "large",
     variant = "solid",
     monospace = false,
     tabIndex,
@@ -4581,9 +4614,10 @@ var Sortable;
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = createContext9({
+var ListViewDraggingContext = createContext9({
   indentation: 12
 });
+ListViewDraggingContext.displayName = "ListViewDraggingContext";
 var ListRowContext = createContext9({
   marginType: "none",
   selectedPosition: "only",
@@ -4597,6 +4631,7 @@ var ListRowContext = createContext9({
   isSectionHeader: false,
   colorScheme: "primary"
 });
+ListRowContext.displayName = "ListRowContext";
 var ListViewRowTitle = styled23.span(({ theme }) => ({
   flex: "1 1 0",
   overflow: "hidden",
@@ -4784,7 +4819,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = useContext9(DraggingContext);
+  const { indentation, isDragging } = useContext9(ListViewDraggingContext);
   const handlePress = useCallback20(
     (event) => {
       event.preventDefault();
@@ -4886,6 +4921,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
 var RenderItemContext = createContext9(
   () => null
 );
+RenderItemContext.displayName = "RenderItemContext";
 var VirtualizedListRow = memo22(function VirtualizedListRow2({
   index,
   style: style3
@@ -5010,8 +5046,26 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
+  const defaultContextValue = useMemo18(
+    () => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
   const getItemContextValue = useCallback20(
     (i) => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
       const current = renderChild(i);
       if (!isValidElement3(current))
         return;
@@ -5058,6 +5112,8 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -5065,7 +5121,6 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap
     ]
@@ -5075,7 +5130,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback20(
-    (index) => /* @__PURE__ */ React35.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React35.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ React35.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React35.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback20(
@@ -5114,7 +5169,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     [data, keyExtractor]
   );
   const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ React35.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React35.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React35.createElement(
     RootContainer2,
     {
       id,
@@ -6117,6 +6172,10 @@ import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select3 from "@radix-ui/react-select";
 import React44, { memo as memo29 } from "react";
 import { styled as styled31 } from "styled-components";
+var readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
 var SelectMenu = memo29(function SelectMenu2({
   id,
   style: style3,
@@ -6124,13 +6183,29 @@ var SelectMenu = memo29(function SelectMenu2({
   menuItems,
   value,
   onSelect,
-  placeholder
+  placeholder,
+  disabled,
+  readOnly
 }) {
   const selectedItem = menuItems.find(
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  return /* @__PURE__ */ React44.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React44.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React44.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React44.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React44.createElement(DropdownChevronIcon, null))), /* @__PURE__ */ React44.createElement(Select3.Portal, null, /* @__PURE__ */ React44.createElement(SelectContent, null, /* @__PURE__ */ React44.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  if (readOnly) {
+    return /* @__PURE__ */ React44.createElement(
+      Button,
+      {
+        id,
+        style: style3,
+        contentStyle: readOnlyStyle,
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 8 })),
+      selectedItem?.title ?? value
+    );
+  }
+  return /* @__PURE__ */ React44.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React44.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React44.createElement(Button, { id, style: style3, className, disabled }, icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React44.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React44.createElement(DropdownChevronIcon, null))), /* @__PURE__ */ React44.createElement(Select3.Portal, null, /* @__PURE__ */ React44.createElement(SelectContent, null, /* @__PURE__ */ React44.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
       return /* @__PURE__ */ React44.createElement(StyledSeparator, null);
     }
@@ -6254,13 +6329,15 @@ var SwitchThumb = styled33(SwitchPrimitive.Thumb)({
 var Switch = function Switch2({
   value,
   onChange,
-  colorScheme = "normal"
+  colorScheme = "normal",
+  disabled
 }) {
   return /* @__PURE__ */ React46.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
       checked: value,
+      disabled,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       }