@vygruppen/spor-react 12.13.2 → 12.13.4

package/dist/index.d.cts

@@ -543,6 +543,7 @@ type FieldBaseProps = {
     helperText?: React$1.ReactNode;
     errorText?: React$1.ReactNode;
     floatingLabel?: boolean;
+    shouldFloat?: boolean;
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -581,6 +582,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
                         outline: "1px solid";
                         outlineColor: "core.outline";
                     };
+                    "&[data-active]": {
+                        outline: "2px solid";
+                        outlineColor: "outline.focus";
+                        _hover: {
+                            outlineColor: "outline.focus";
+                        };
+                    };
                 };
                 _invalid: {
                     outline: "2px solid";
@@ -605,6 +613,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
                         outline: "1px solid";
                         outlineColor: "core.outline";
                     };
+                    "&[data-active]": {
+                        outline: "2px solid";
+                        outlineColor: "outline.focus";
+                        _hover: {
+                            outlineColor: "outline.focus";
+                        };
+                    };
                 };
                 _invalid: {
                     outline: "2px solid";
@@ -622,6 +637,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
                         outline: "1px solid";
                         outlineColor: "core.outline";
                     };
+                    "&[data-active]": {
+                        outline: "2px solid";
+                        outlineColor: "outline.focus";
+                        _hover: {
+                            outlineColor: "outline.focus";
+                        };
+                    };
                 };
                 _invalid: {
                     outline: "2px solid";
@@ -656,6 +678,10 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
     positioning?: PopoverRootProps["positioning"];
+    noCalendar?: boolean;
+    overrideBorderColor?: string;
+    isActive?: boolean;
+    onClick?: () => void;
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {

package/dist/index.d.ts

@@ -543,6 +543,7 @@ type FieldBaseProps = {
     helperText?: React$1.ReactNode;
     errorText?: React$1.ReactNode;
     floatingLabel?: boolean;
+    shouldFloat?: boolean;
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -581,6 +582,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
                         outline: "1px solid";
                         outlineColor: "core.outline";
                     };
+                    "&[data-active]": {
+                        outline: "2px solid";
+                        outlineColor: "outline.focus";
+                        _hover: {
+                            outlineColor: "outline.focus";
+                        };
+                    };
                 };
                 _invalid: {
                     outline: "2px solid";
@@ -605,6 +613,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
                         outline: "1px solid";
                         outlineColor: "core.outline";
                     };
+                    "&[data-active]": {
+                        outline: "2px solid";
+                        outlineColor: "outline.focus";
+                        _hover: {
+                            outlineColor: "outline.focus";
+                        };
+                    };
                 };
                 _invalid: {
                     outline: "2px solid";
@@ -622,6 +637,13 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
                         outline: "1px solid";
                         outlineColor: "core.outline";
                     };
+                    "&[data-active]": {
+                        outline: "2px solid";
+                        outlineColor: "outline.focus";
+                        _hover: {
+                            outlineColor: "outline.focus";
+                        };
+                    };
                 };
                 _invalid: {
                     outline: "2px solid";
@@ -656,6 +678,10 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
     positioning?: PopoverRootProps["positioning"];
+    noCalendar?: boolean;
+    overrideBorderColor?: string;
+    isActive?: boolean;
+    onClick?: () => void;
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress,
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React27 from 'react';
-import React27__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, isValidElement, useState, useMemo, useLayoutEffect, useContext } from 'react';
+import React27__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
@@ -1311,24 +1311,17 @@ FloatingLabel.displayName = "FloatingLabel";
 var floatingLabelStyles = defineStyle({
   paddingX: 3,
   fontWeight: "normal",
-  fontSize: ["mobile.xs", "desktop.xs"],
-  color: "text",
   pointerEvents: "none",
   zIndex: "docked",
   _disabled: {
     opacity: 0.4
   },
   pos: "absolute",
-  top: "0.3rem",
   transition: "position",
-  _peerPlaceholderShown: {
-    /* For when input is not in focus */
-    top: "0.9rem",
-    color: "text",
-    fontSize: ["mobile.sm", "desktop.sm"]
-  },
-  _peerFocusVisible: {
-    /* For when input is in focus */
+  top: "0.9rem",
+  color: "text",
+  fontSize: ["mobile.sm", "desktop.sm"],
+  "&[data-float]": {
     fontSize: ["mobile.xs", "desktop.xs"],
     color: "text",
     top: "0.3rem"
@@ -1361,6 +1354,7 @@ var Field3 = React27.forwardRef(
       required,
       direction,
       id,
+      shouldFloat,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
@@ -1382,7 +1376,7 @@ var Field3 = React27.forwardRef(
               /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
             ] }),
             children,
-            label && floatingLabel && /* @__PURE__ */ jsxs(FloatingLabel, { children: [
+            label && floatingLabel && /* @__PURE__ */ jsxs(FloatingLabel, { "data-float": shouldFloat ? true : void 0, children: [
               label,
               /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
             ] }),
@@ -1874,7 +1868,14 @@ var getAriaLabel = (segmentType) => {
 };
 var StyledField = forwardRef(
   function StyledField2(props, ref) {
-    const { children, variant, isDisabled, ...otherProps } = props;
+    const {
+      children,
+      variant,
+      isDisabled,
+      isActive,
+      overrideBorderColor,
+      ...otherProps
+    } = props;
     const { invalid } = useFieldContext() ?? {
       };
     const recipe = useSlotRecipe({
@@ -1885,7 +1886,11 @@ var StyledField = forwardRef(
       Box,
       {
         ...otherProps,
-        css: styles.wrapper,
+        css: {
+          ...styles.wrapper,
+          outlineColor: overrideBorderColor || void 0
+        },
+        "data-active": isActive ? "" : void 0,
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
@@ -1928,8 +1933,13 @@ var DatePicker = forwardRef(
     });
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
+    const shouldShowCalendar = state.isOpen && !props.isDisabled && !props.noCalendar;
     const onFieldClick = () => {
-      state.setOpen(true);
+      var _a5;
+      if (!props.noCalendar) {
+        state.setOpen(true);
+      }
+      (_a5 = props.onClick) == null ? void 0 : _a5.call(props);
     };
     const popoverContent = /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsx(
       Calendar,
@@ -1964,8 +1974,10 @@ var DatePicker = forwardRef(
                   paddingX: 3,
                   minHeight,
                   isDisabled: props.isDisabled,
+                  isActive: props.isActive,
+                  overrideBorderColor: props.overrideBorderColor,
                   children: [
-                    /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    props.noCalendar ? /* @__PURE__ */ jsx(Box, { pr: 3, pl: 0.5, mr: 0.5, children: /* @__PURE__ */ jsx(CalendarOutline24Icon, {}) }) : /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                       CalendarTriggerButton,
                       {
                         paddingLeft: 1,
@@ -1989,8 +2001,7 @@ var DatePicker = forwardRef(
               ) })
             }
           ),
-          state.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ jsx(Portal, { children: popoverContent }),
-          state.isOpen && !props.isDisabled && !withPortal && popoverContent
+          shouldShowCalendar && (withPortal ? /* @__PURE__ */ jsx(Portal, { children: popoverContent }) : popoverContent)
         ] })
       }
     ) });
@@ -2799,6 +2810,13 @@ var Input = forwardRef(
     const recipe = useRecipe({ key: "input" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
+    const [focused, setFocused] = useState(false);
+    const isControlled = props.value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      props.defaultValue ? String(props.defaultValue) : ""
+    );
+    const inputValue = isControlled ? String(props.value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
     return /* @__PURE__ */ jsxs(
       Field3,
       {
@@ -2808,14 +2826,12 @@ var Input = forwardRef(
         hidden,
         errorText,
         id: props.id,
-        label: (
-          // Render startElement invisibly to align label text with input content when an icon is present
-          /* @__PURE__ */ jsxs(Flex, { children: [
-            /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
-            label
-          ] })
-        ),
+        label: /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
+          label
+        ] }),
         floatingLabel: true,
+        shouldFloat,
         children: [
           startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
           /* @__PURE__ */ jsx(
@@ -2829,6 +2845,24 @@ var Input = forwardRef(
               paddingRight: endElement ? "2.6rem" : void 0,
               ...restProps,
               className: `peer ${props.className}`,
+              value: isControlled ? props.value : void 0,
+              onFocus: (e) => {
+                var _a5;
+                (_a5 = props.onFocus) == null ? void 0 : _a5.call(props, e);
+                setFocused(true);
+              },
+              onBlur: (e) => {
+                var _a5;
+                (_a5 = props.onBlur) == null ? void 0 : _a5.call(props, e);
+                setFocused(false);
+              },
+              onChange: (e) => {
+                var _a5;
+                (_a5 = props.onChange) == null ? void 0 : _a5.call(props, e);
+                if (!isControlled) {
+                  setUncontrolledValue(e.target.value);
+                }
+              },
               placeholder: "",
               css: styles
             }
@@ -2993,6 +3027,7 @@ var NativeSelect = React27.forwardRef(function NativeSelect2(props, ref) {
       errorText,
       id: rest.id,
       floatingLabel: true,
+      shouldFloat: true,
       children: /* @__PURE__ */ jsxs(
         NativeSelect$1.Root,
         {
@@ -3666,11 +3701,23 @@ var Textarea = forwardRef(
       readOnly,
       helperText,
       floatingLabel,
+      value,
+      defaultValue,
+      onFocus,
+      onBlur,
+      onChange,
       ...restProps
     } = props;
     const recipe = useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
     const { labelRef, labelHeight } = useLabelHeight(label);
+    const [focused, setFocused] = useState(false);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ? String(defaultValue) : ""
+    );
+    const inputValue = isControlled ? String(value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
     return /* @__PURE__ */ jsxs(
       Field3,
       {
@@ -3680,6 +3727,7 @@ var Textarea = forwardRef(
         required,
         readOnly,
         floatingLabel,
+        shouldFloat,
         position: "relative",
         children: [
           /* @__PURE__ */ jsx(
@@ -3689,11 +3737,33 @@ var Textarea = forwardRef(
               css: styles,
               className: "peer",
               ref,
+              value: isControlled ? value : void 0,
+              defaultValue,
+              onFocus: (e) => {
+                onFocus == null ? void 0 : onFocus(e);
+                setFocused(true);
+              },
+              onBlur: (e) => {
+                onBlur == null ? void 0 : onBlur(e);
+                setFocused(false);
+              },
+              onChange: (e) => {
+                onChange == null ? void 0 : onChange(e);
+                if (!isControlled)
+                  setUncontrolledValue(e.target.value);
+              },
               style: { "--label-height": `${labelHeight}px` },
               placeholder: " "
             }
           ),
-          /* @__PURE__ */ jsx(FloatingLabel, { ref: labelRef, children: label })
+          /* @__PURE__ */ jsx(
+            FloatingLabel,
+            {
+              ref: labelRef,
+              "data-float": shouldFloat ? true : void 0,
+              children: label
+            }
+          )
         ]
       }
     );
@@ -7086,6 +7156,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
       _focusWithin: {
         outline: "2px solid",
         outlineColor: "outline.focus"
+      },
+      "&[data-active]": {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        "&:hover": {
+          outlineColor: "outline.focus"
+        }
       }
     },
     inputLabel: {
@@ -7212,6 +7289,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
               backgroundColor: "ghost.surface.active",
               outline: "1px solid",
               outlineColor: "core.outline"
+            },
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus"
+              }
             }
           },
           _invalid: {
@@ -7236,6 +7320,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
               backgroundColor: "ghost.surface.active",
               outline: "1px solid",
               outlineColor: "core.outline"
+            },
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus"
+              }
             }
           },
           _invalid: {
@@ -7253,6 +7344,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
               backgroundColor: "ghost.surface.active",
               outline: "1px solid",
               outlineColor: "core.outline"
+            },
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus"
+              }
             }
           },
           _invalid: {