@vygruppen/spor-react 13.0.2 → 13.0.3

package/.turbo/turbo-build.log

@@ -1,28 +1,28 @@
 
-> @vygruppen/spor-react@13.0.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.0.3 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
-CLI Building entry: src/index.tsx, src/icons/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v7.3.0
-CLI Using tsup config: /home/runner/work/spor/spor/packages/spor-react/tsup.config.ts
-CLI Target: node16
-CLI Cleaning output folder
-ESM Build start
-CJS Build start
-DTS Build start
-CJS dist/index.cjs           356.43 KB
-CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       708.66 KB
-CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2510ms
-ESM dist/index.mjs           332.54 KB
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       708.66 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2510ms
-DTS ⚡️ Build success in 19366ms
-DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        143.13 KB
-DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       143.13 KB
+CLI Building entry: src/index.tsx, src/icons/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v7.3.0
+CLI Using tsup config: /home/runner/work/spor/spor/packages/spor-react/tsup.config.ts
+CLI Target: node16
+CLI Cleaning output folder
+ESM Build start
+CJS Build start
+DTS Build start
+CJS dist/index.cjs           360.47 KB
+CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       716.33 KB
+CJS dist/icons/index.cjs.map 157.00 B
+CJS ⚡️ Build success in 3000ms
+ESM dist/index.mjs           336.37 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       716.33 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM ⚡️ Build success in 3001ms
+DTS ⚡️ Build success in 22707ms
+DTS dist/icons/index.d.ts  44.00 B
+DTS dist/index.d.ts        143.54 KB
+DTS dist/icons/index.d.cts 44.00 B
+DTS dist/index.d.cts       143.54 KB

package/.turbo/turbo-postinstall.log

@@ -1,21 +1,22 @@
 
-> @vygruppen/spor-react@13.0.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.0.3 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.3.1] injecting env (0) from .env -- tip: ⚙️  suppress all logs with { quiet: true }
+◇ injected env (0) from .env // tip: ◈ encrypted .env [www.dotenvx.com]
 ┌  Chakra CLI ⚡️
 [?25l│
-◇  ✅ Generated conditions typings
+◒  Generating conditions types...
+◇  ✅ Generated conditions typings
 [?25h[?25l│
 ◒  Generating recipe types...
-◇  ✅ Generated recipe typings
+◇  ✅ Generated recipe typings
 [?25h[?25l│
 ◇  ✅ Generated utility typings
 [?25h[?25l│
 ◇  ✅ Generated token typings
 [?25h[?25l│
 ◒  Generating system types...
-◇  ✅ Generated system types
+◇  ✅ Generated system types
 [?25h│
 └  🎉 Done!
 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 13.0.3
+
+### Patch Changes
+
+- d10648c: Add InputChip component, and style adjustments to Select
+
 ## 13.0.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -3953,6 +3953,19 @@ var FieldsetLegend = react.Fieldset.Legend;
 var FieldsetContent = react.Fieldset.Content;
 var FieldsetHelperText = react.Fieldset.HelperText;
 var FieldsetErrorText = react.Fieldset.ErrorText;
+var InputChip = ({
+  startIcon,
+  endIcon,
+  children,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Tag.Root, { ref, ...rest, as: "button", children: [
+    startIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Tag.StartElement, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: startIcon }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Tag.Label, { children }),
+    endIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Tag.EndElement, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: endIcon }) })
+  ] });
+};
 var ListBox = (props) => {
   const { loading, listBoxRef, state, maxWidth, variant, children } = props;
   const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
@@ -4790,7 +4803,7 @@ var Select = ({
           css: styles.root,
           position: "relative",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: !!label }) }),
             label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
             /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, baseStyle: css, children })
           ]
@@ -4805,7 +4818,7 @@ var SelectLabel = (props) => {
     react.Select.Label,
     {
       ...props,
-      "data-selected": value.length > 0 ? true : void 0
+      "data-selected": value.length > 0 || void 0
     }
   );
 };
@@ -4816,14 +4829,19 @@ var SelectItem = ({
   const { item, children, description, ...rest } = props;
   const recipe = react.useSlotRecipe({ key: "select" });
   const styles = recipe();
+  const selectContext = react.useSelectContext();
+  const multiple = selectContext.multiple;
+  const isSelected = selectContext.value.includes(item.value);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Item, { item, ...rest, ref, css: styles.item, children: [
+    multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Indicator, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemText, { display: "flex", children }),
       description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-part": "item-description", css: styles.itemDescription, children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CheckmarkFill18Icon, {}) })
+    !multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CheckmarkFill18Icon, {}) })
   ] });
 };
+SelectItem.displayName = "SelectItem";
 var SelectItemGroup = function SelectItemGroup2({
   ref,
   ...props
@@ -4882,6 +4900,8 @@ var SelectValueText = function SelectValueText2({
   ...props
 }) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
+  const selectContext = react.useSelectContext();
+  const multiple = selectContext.multiple;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Select.ValueText,
     {
@@ -4895,9 +4915,20 @@ var SelectValueText = function SelectValueText2({
           return placeholder;
         if (children)
           return children(items);
-        if (items.length === 1)
+        if (multiple) {
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: 0.5, marginBottom: 1, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              size: "sm",
+              colorPalette: "green",
+              children: select.collection.stringifyItem(item)
+            },
+            select.collection.stringifyItem(item)
+          )) });
+        }
+        if (items.length === 1) {
           return select.collection.stringifyItem(items[0]);
-        return `${items.length} selected`;
+        }
       } })
     }
   );
@@ -7789,6 +7820,7 @@ var comboboxAnatomy = react$1.comboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty"
 );
+var tagAnatomy = anatomy.createAnatomy("tag").parts("root");
 var menuAnatomy = anatomy.createAnatomy("menu").parts(
   "trigger",
   "content",
@@ -9739,6 +9771,120 @@ var infoTagSlotRecipe = react.defineSlotRecipe({
     size: "md"
   }
 });
+var inputChipSlotRecipe = react.defineSlotRecipe({
+  slots: tagAnatomy.keys(),
+  className: "chakra-tag",
+  base: {
+    root: {
+      display: "flex",
+      direction: "row",
+      width: "fit-content",
+      height: "fit-content",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      outline: "none",
+      "&:focus": {
+        outline: "2px solid",
+        outlineColor: "outline.focus"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        root: {
+          backgroundColor: "surface",
+          border: "1px solid",
+          borderColor: "outline",
+          "&:hover": {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover"
+          },
+          "&:active": {
+            outline: "none",
+            backgroundColor: "core.surface.active"
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "text.highlight",
+          "& svg": {
+            color: "icon.highlight"
+          },
+          "&:hover": {
+            backgroundColor: "accent.surface.hover"
+          },
+          "&:active": {
+            backgroundColor: "accent.surface.active",
+            outline: "none"
+          }
+        }
+      },
+      brand: {
+        root: {
+          backgroundColor: "brand.surface",
+          color: "text.inverted",
+          "& svg": {
+            color: "icon.inverted"
+          },
+          "&:hover": {
+            backgroundColor: "brand.surface.hover"
+          },
+          "&:active": {
+            backgroundColor: "brand.surface.active",
+            outline: "none"
+          }
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          fontSize: "desktop.xs",
+          paddingX: "1.5",
+          paddingY: "0",
+          fontWeight: "normal",
+          borderRadius: "xs"
+        }
+      },
+      sm: {
+        root: {
+          fontSize: "desktop.sm",
+          paddingX: "2",
+          paddingY: "0.5",
+          fontWeight: "bold",
+          borderRadius: "9px"
+        }
+      },
+      md: {
+        root: {
+          padding: 5,
+          fontSize: "desktop.md",
+          paddingX: "2",
+          paddingY: "1",
+          fontWeight: "bold",
+          borderRadius: "sm"
+        }
+      },
+      lg: {
+        root: {
+          fontSize: "desktop.md",
+          paddingX: "2",
+          paddingY: "3",
+          fontWeight: "bold",
+          borderRadius: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core",
+    size: "sm"
+  }
+});
 var lineIconSlotRecipe = react.defineSlotRecipe({
   slots: linjetagAnatomy.keys(),
   className: "spor-line-icon",
@@ -10766,7 +10912,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineOffset: "2px",
         outline: "2px solid",
         outlineColor: "outline.focus",
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "accent.surface.hover"
       },
       "&[data-highlighted]": {
         outlineOffset: "2px",
@@ -10774,7 +10920,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "accent.surface.active"
       },
       _highlighted: {
         _active: {
@@ -10782,12 +10928,12 @@ var selectSlotRecipe = react.defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "accent.surface.hover",
         outline: "2px solid core.outline",
         outlineOffset: "2px"
       },
       _selected: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "accent.surface"
       },
       _icon: {
         width: 3,
@@ -11555,6 +11701,7 @@ var slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  tag: inputChipSlotRecipe,
   menu: menuSlotRecipe
 };
 var animations = react.defineTokens.animations({
@@ -12734,6 +12881,7 @@ exports.Heading = Heading;
 exports.IconButton = IconButton;
 exports.InfoTag = InfoTag;
 exports.Input = Input;
+exports.InputChip = InputChip;
 exports.ItemDescription = ItemDescription;
 exports.ItemLabel = ItemLabel;
 exports.JumpButton = JumpButton;