@vygruppen/spor-react 12.14.2 → 12.16.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.14.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.16.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           298.93 KB
+ESM dist/index.mjs           299.81 KB
 ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       640.14 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       638.54 KB
-ESM ⚡️ Build success in 2541ms
-CJS dist/index.cjs           320.53 KB
+ESM ⚡️ Build success in 2526ms
 CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs           321.54 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS dist/index.cjs.map       638.54 KB
-CJS ⚡️ Build success in 2541ms
-DTS ⚡️ Build success in 18296ms
+CJS dist/index.cjs.map       640.14 KB
+CJS ⚡️ Build success in 2527ms
+DTS ⚡️ Build success in 19685ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        157.08 KB
+DTS dist/index.d.ts        157.18 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       157.08 KB
+DTS dist/index.d.cts       157.18 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.14.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.16.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }
+[dotenv@17.2.2] injecting env (0) from .env -- tip: 📡 auto-backup env with Radar: https://dotenvx.com/radar
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @vygruppen/spor-react
 
+## 12.16.0
+
+### Minor Changes
+
+- 8865c20: ## Breaking Changes
+  - **API Consistency**: Standardized event handler naming to `onValueChange` for DatePicker, TimePicker, DateRangePicker, ChoiceChip, and NumericStepper components (previously `onChange`)
+
+  ## Bug Fixes
+  - **TextInput**: Reverted color changes to restore original color styling
+
+  ## Improvements
+  - **PhoneNumberInput**: Updated styling for better visual consistency
+
+### Patch Changes
+
+- 5eae150: Add default text color for Text component
+
+## 12.15.0
+
+### Minor Changes
+
+- a07b8f6: Prevent calendar cell button from performing form submittion by setting type to button.
+
+### Patch Changes
+
+- 181fdcd: Update design of Alerts to support darkmode.
+- b422895: Add props showText to DrawerCloseTrigger and hideHandle to DrawerContent
+
 ## 12.14.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -783,9 +783,9 @@ function resolveTextProps({
 }
 var Text3 = React27.forwardRef(
   function Text4(props, ref) {
-    const { variant, lineHeight, fontSize, ...rest } = props;
+    const { variant, lineHeight, fontSize, color = "text", ...rest } = props;
     const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...resolvedProps, ...rest, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...resolvedProps, color, ...rest, ref });
   }
 );
 var ClipboardIcon = React27__namespace.forwardRef((props, ref) => {
@@ -962,46 +962,56 @@ var useScrollDirection = () => {
   return scrollDirection;
 };
 var AlertIcon = React27.forwardRef(
-  ({ variant, customIcon }, ref) => {
+  ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
-    const Icon3 = customIcon ?? getIcon(variant);
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Box,
       {
-        as: Icon3,
+        asChild: true,
         ref,
         "aria-label": t(texts5[variant]),
-        color: customIcon ? `alert.${variant}.icon` : void 0
+        children: CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant })
       }
     );
   }
 );
 AlertIcon.displayName = "AlertIcon";
-var getIcon = (variant) => {
+var BaseAlertIcon = ({ variant }) => {
+  const css = {
+    "& path:first-of-type": {
+      fill: `alert.${variant}.icon`
+    },
+    "& path:not(:first-of-type)": {
+      fill: `alert.${variant}.surface`
+    }
+  };
   switch (variant) {
     case "info": {
-      return sporIconReact.InformationFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill24Icon, { css });
     }
     case "success": {
-      return sporIconReact.SuccessFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.SuccessFill24Icon, { css });
     }
     case "important": {
-      return sporIconReact.WarningFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.WarningFill24Icon, {});
     }
     case "alt": {
-      return sporIconReact.AltTransportFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.AltTransportFill24Icon, { css });
     }
     case "error": {
-      return sporIconReact.ErrorFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorFill24Icon, { css });
     }
     case "error-secondary": {
-      return sporIconReact.ErrorOutline24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorOutline24Icon, { css });
     }
     case "neutral": {
-      return sporIconReact.QuestionFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.QuestionFill24Icon, { css });
     }
     case "service": {
-      return sporIconReact.ServiceFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ServiceFill24Icon, {});
+    }
+    default: {
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill24Icon, { css });
     }
   }
 };
@@ -1406,6 +1416,20 @@ var FieldErrorText = React27__namespace.forwardRef((props, ref) => {
 });
 FieldErrorText.displayName = "FieldErrorText";
 var FieldLabel = react.Field.Label;
+
+// src/util/slugify.tsx
+function slugify(text, maxLength = 50) {
+  if (!text) {
+    return text;
+  }
+  if (Array.isArray(text)) {
+    text = text.join(" ");
+  }
+  if (maxLength < 1) {
+    throw new Error("The maxLength parameter must be a positive number");
+  }
+  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
+}
 function CalendarCell({
   state,
   date: date$1,
@@ -1450,9 +1474,9 @@ function CalendarCell({
     );
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "td", ...cellProps, textAlign: "center", css: styles.cell, children: /* @__PURE__ */ jsxRuntime.jsx(
-    react.Box,
+    react.chakra.button,
     {
-      as: "button",
+      type: "button",
       ...buttonProps,
       ...stateProps,
       ref,
@@ -1929,6 +1953,7 @@ var DatePicker = React27.forwardRef(
     const state = reactStately.useDatePickerState({
       ...props,
       shouldCloseOnSelect: true,
+      onChange: props.onValueChange,
       errorMessage: errorText,
       isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
       validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
@@ -2051,7 +2076,7 @@ function RangeCalendar(props) {
   ] });
 }
 function DateRangePicker({
-  variant,
+  variant = "core",
   minHeight,
   startName,
   endName,
@@ -2065,6 +2090,7 @@ function DateRangePicker({
   const fieldContextPRops = react.useFieldContext();
   const state = reactStately.useDateRangePickerState({
     ...props,
+    onChange: props.onValueChange,
     shouldCloseOnSelect: true,
     isInvalid: invalid,
     errorMessage: errorText,
@@ -2159,20 +2185,6 @@ function DateRangePicker({
     ] })
   ] }) });
 }
-
-// src/util/slugify.tsx
-function slugify(text, maxLength = 50) {
-  if (!text) {
-    return text;
-  }
-  if (Array.isArray(text)) {
-    text = text.join(" ");
-  }
-  if (maxLength < 1) {
-    throw new Error("The maxLength parameter must be a positive number");
-  }
-  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
-}
 var TimeField = ({ state, ...props }) => {
   const ref = React27.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
@@ -2212,7 +2224,7 @@ var TimePicker = ({
   label: externalLabel,
   value,
   defaultValue = getCurrentTime(),
-  onChange = () => {
+  onValueChange = () => {
   },
   minuteInterval = 30,
   disabled: isDisabledExternally = false,
@@ -2227,7 +2239,7 @@ var TimePicker = ({
   const state = reactStately.useTimeFieldState({
     value,
     defaultValue,
-    onChange,
+    onChange: onValueChange,
     locale,
     isDisabled,
     label,
@@ -2394,7 +2406,13 @@ var [RootDrawerProvider, useRootDrawerProps] = react.createContext({
 });
 var DrawerContent = React27.forwardRef(
   (props, ref) => {
-    const { children, portalled = true, portalRef, ...rest } = props;
+    const {
+      children,
+      portalled = true,
+      portalRef,
+      hideHandle = false,
+      ...rest
+    } = props;
     const { size, placement } = useRootDrawerProps();
     const { setOpen } = react.useDialogContext();
     const handlers = reactSwipeable.useSwipeable({
@@ -2407,10 +2425,11 @@ var DrawerContent = React27.forwardRef(
       swipeDuration: 250
     });
     const sizeNotFull = size !== "full";
+    const showHandle = !hideHandle;
     return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.Positioner, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...handlers, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(react.Drawer.Content, { ref, ...rest, children: [
-      sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {}),
+      showHandle && sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {}),
       children,
-      sizeNotFull && placement === "top" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {})
+      showHandle && sizeNotFull && placement === "top" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {})
     ] }) }) }) });
   }
 );
@@ -2433,9 +2452,10 @@ var CloseDrawerLine = React27.forwardRef((props, ref) => {
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";
 var DrawerCloseTrigger = React27.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { ref, ...rest, asChild: true, children: showText || size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
     ResponsiveButton,
     {
       variant: "ghost",
@@ -3121,7 +3141,7 @@ var NumericStepper = React27__namespace.default.forwardRef((props, ref) => {
     id: idProp,
     value: valueProp,
     defaultValue = 1,
-    onChange: onChangeProp,
+    onValueChange,
     minValue = 0,
     maxValue = 99,
     disabled,
@@ -3136,7 +3156,7 @@ var NumericStepper = React27__namespace.default.forwardRef((props, ref) => {
   const styles = recipe();
   const [value, onChange] = react.useControllableState({
     value: valueProp,
-    onChange: onChangeProp,
+    onChange: onValueChange,
     defaultValue
   });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
@@ -3459,7 +3479,8 @@ var PhoneNumberInput = React27.forwardRef((props, ref) => {
         value: [value.countryCode],
         onValueChange: handleCountryCodeChange,
         height: "100%",
-        width: "6.25rem",
+        width: "100%",
+        minWidth: "6.25rem",
         variant,
         allowedCountryCodes,
         "data-state": "on",