@vygruppen/spor-react 13.4.5 → 13.5.0

package/dist/index.d.cts

@@ -924,7 +924,7 @@ declare const PressableCard: ({ ref, ...props }: PressableCardProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription" | "itemControl", {
+declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "itemIndicator" | "label" | "itemText" | "itemDescription" | "itemControl", {
     variant: {
         core: {
             item: {
@@ -1006,8 +1006,9 @@ type RadioCardVariantProps$1 = RecipeVariantProps<typeof radioCardSlotRecipe>;
 type RadioCardItemProps$1 = Exclude<RadioCard$1.ItemProps, "colorPalette" | "indicator" | "variant" | "size" | "addon"> & RadioCardVariantProps$1 & {
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
     ariaLabel?: string;
+    showIndicator?: boolean;
 };
-declare const RadioCard: ({ ref, ...props }: RadioCardItemProps$1 & {
+declare const RadioCard: ({ ref, showIndicator, ...props }: RadioCardItemProps$1 & {
     ref?: React__default.Ref<HTMLInputElement>;
 }) => react_jsx_runtime.JSX.Element;
 type RadioCardRootProps$1 = RadioCardVariantProps$1 & Exclude<RadioCard$1.RootProps, "variant"> & {
@@ -1272,10 +1273,25 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
             };
         };
     };
+    size: {
+        sm: {
+            wrapper: {
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+                paddingX: number;
+                gap: number;
+            };
+        };
+        md: {
+            wrapper: {
+                fontSize: ("mobile.sm" | "desktop.sm")[];
+            };
+        };
+    };
 }>;
 
 type CalendarVariants = {
     variant?: ConditionalValue<"core" | "floating" | "ghost">;
+    size?: ConditionalValue<"sm" | "md">;
 };
 
 type DatePickerVariantProps = RecipeVariantProps<typeof datePickerSlotRecipe>;
@@ -1296,12 +1312,13 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<B
  * A date picker component.
  *
  * There are three different variants –`core`, `floating` and `ghost`.
+ * There are two different sizes - `sm` and `md`
  *
  * ```tsx
  * <DatePicker label="Dato" variant="core" />
  * ```
  */
-declare const DatePicker: ({ ref: externalRef, variant, errorText, minHeight, showYearNavigation, withPortal, width, invalid, helperText, positioning, css, ...props }: DatePickerProps & {
+declare const DatePicker: ({ ref: externalRef, variant, size, errorText, minHeight, showYearNavigation, withPortal, width, invalid, helperText, positioning, css, ...props }: DatePickerProps & {
     ref?: React__default.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -1321,11 +1338,12 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange"
  * A date range picker component.
  *
  * There are three variants to choose from – `core`, `floating` and `ghost`.
+ * There are two different sizes - `sm` and `md`
  *
  * ```tsx
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
- */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, positioning, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+ */ declare function DateRangePicker({ variant, size, minHeight, startName, endName, withPortal, errorText, helperText, invalid, positioning, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 type RangeCalendarProps = RangeCalendarProps$1<DateValue$1> & CalendarVariants;
 declare function RangeCalendar(props: RangeCalendarProps): react_jsx_runtime.JSX.Element;
@@ -1364,6 +1382,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBasePr
      * Defaults to "core".
      */
     variant?: "core" | "floating" | "ghost";
+    /**
+     * The size of the time picker.
+     * Defaults to "md".
+     */
+    size?: "sm" | "md";
 };
 /** A time picker component.
  *
@@ -1822,7 +1845,7 @@ type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1>
  */
 declare const CheckboxGroup: (props: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
 
-declare const choiceChipSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription" | "itemControl", {
+declare const choiceChipSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "itemIndicator" | "label" | "itemText" | "itemDescription" | "itemControl", {
     size: {
         xs: {
             item: {
@@ -4257,13 +4280,19 @@ declare enum Brand {
 }
 
 type Variant = "info" | "success" | "error";
+type ToastAction = {
+    label: string;
+    onClick: () => void;
+};
 type ToastProps = {
     duration?: number;
     text: string;
     variant: Variant;
     id?: string;
+    action?: ToastAction;
+    closable?: boolean;
 } & Pick<BoxProps, "width">;
-declare const createToast: ({ text, variant, id, duration, width, }: ToastProps) => string;
+declare const createToast: ({ text, variant, id, duration, width, action, closable, }: ToastProps) => string;
 
 declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
 declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {

package/dist/index.d.ts

@@ -924,7 +924,7 @@ declare const PressableCard: ({ ref, ...props }: PressableCardProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription" | "itemControl", {
+declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "itemIndicator" | "label" | "itemText" | "itemDescription" | "itemControl", {
     variant: {
         core: {
             item: {
@@ -1006,8 +1006,9 @@ type RadioCardVariantProps$1 = RecipeVariantProps<typeof radioCardSlotRecipe>;
 type RadioCardItemProps$1 = Exclude<RadioCard$1.ItemProps, "colorPalette" | "indicator" | "variant" | "size" | "addon"> & RadioCardVariantProps$1 & {
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
     ariaLabel?: string;
+    showIndicator?: boolean;
 };
-declare const RadioCard: ({ ref, ...props }: RadioCardItemProps$1 & {
+declare const RadioCard: ({ ref, showIndicator, ...props }: RadioCardItemProps$1 & {
     ref?: React__default.Ref<HTMLInputElement>;
 }) => react_jsx_runtime.JSX.Element;
 type RadioCardRootProps$1 = RadioCardVariantProps$1 & Exclude<RadioCard$1.RootProps, "variant"> & {
@@ -1272,10 +1273,25 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
             };
         };
     };
+    size: {
+        sm: {
+            wrapper: {
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+                paddingX: number;
+                gap: number;
+            };
+        };
+        md: {
+            wrapper: {
+                fontSize: ("mobile.sm" | "desktop.sm")[];
+            };
+        };
+    };
 }>;
 
 type CalendarVariants = {
     variant?: ConditionalValue<"core" | "floating" | "ghost">;
+    size?: ConditionalValue<"sm" | "md">;
 };
 
 type DatePickerVariantProps = RecipeVariantProps<typeof datePickerSlotRecipe>;
@@ -1296,12 +1312,13 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<B
  * A date picker component.
  *
  * There are three different variants –`core`, `floating` and `ghost`.
+ * There are two different sizes - `sm` and `md`
  *
  * ```tsx
  * <DatePicker label="Dato" variant="core" />
  * ```
  */
-declare const DatePicker: ({ ref: externalRef, variant, errorText, minHeight, showYearNavigation, withPortal, width, invalid, helperText, positioning, css, ...props }: DatePickerProps & {
+declare const DatePicker: ({ ref: externalRef, variant, size, errorText, minHeight, showYearNavigation, withPortal, width, invalid, helperText, positioning, css, ...props }: DatePickerProps & {
     ref?: React__default.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -1321,11 +1338,12 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange"
  * A date range picker component.
  *
  * There are three variants to choose from – `core`, `floating` and `ghost`.
+ * There are two different sizes - `sm` and `md`
  *
  * ```tsx
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
- */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, positioning, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+ */ declare function DateRangePicker({ variant, size, minHeight, startName, endName, withPortal, errorText, helperText, invalid, positioning, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 type RangeCalendarProps = RangeCalendarProps$1<DateValue$1> & CalendarVariants;
 declare function RangeCalendar(props: RangeCalendarProps): react_jsx_runtime.JSX.Element;
@@ -1364,6 +1382,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBasePr
      * Defaults to "core".
      */
     variant?: "core" | "floating" | "ghost";
+    /**
+     * The size of the time picker.
+     * Defaults to "md".
+     */
+    size?: "sm" | "md";
 };
 /** A time picker component.
  *
@@ -1822,7 +1845,7 @@ type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1>
  */
 declare const CheckboxGroup: (props: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
 
-declare const choiceChipSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription" | "itemControl", {
+declare const choiceChipSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "itemIndicator" | "label" | "itemText" | "itemDescription" | "itemControl", {
     size: {
         xs: {
             item: {
@@ -4257,13 +4280,19 @@ declare enum Brand {
 }
 
 type Variant = "info" | "success" | "error";
+type ToastAction = {
+    label: string;
+    onClick: () => void;
+};
 type ToastProps = {
     duration?: number;
     text: string;
     variant: Variant;
     id?: string;
+    action?: ToastAction;
+    closable?: boolean;
 } & Pick<BoxProps, "width">;
-declare const createToast: ({ text, variant, id, duration, width, }: ToastProps) => string;
+declare const createToast: ({ text, variant, id, duration, width, action, closable, }: ToastProps) => string;
 
 declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
 declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {

package/dist/index.mjs

@@ -1553,6 +1553,7 @@ var PressableCard = ({
 };
 var RadioCard = ({
   ref,
+  showIndicator = false,
   ...props
 }) => {
   const { inputProps, children } = props;
@@ -1568,7 +1569,10 @@ var RadioCard = ({
         ...inputProps
       }
     ),
-    /* @__PURE__ */ jsx(RadioCard$1.ItemControl, { id: itemControlId, "aria-hidden": true, children })
+    /* @__PURE__ */ jsxs(RadioCard$1.ItemControl, { id: itemControlId, "aria-hidden": true, children: [
+      showIndicator && /* @__PURE__ */ jsx(RadioCard$1.ItemIndicator, {}),
+      children
+    ] })
   ] });
 };
 var RadioCardGroup = ({
@@ -2486,7 +2490,6 @@ var DateTimeSegment = ({
       textAlign: "center",
       outline: "none",
       borderRadius: "xs",
-      fontSize: ["mobile.sm", "desktop.sm"],
       css: styles.dateTimeSegment,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
@@ -2609,6 +2612,7 @@ var StyledField = function StyledField2({
     isDisabled,
     isActive,
     overrideBorderColor,
+    size,
     ...otherProps
   } = props;
   const { invalid } = useFieldContext() ?? {
@@ -2616,7 +2620,7 @@ var StyledField = function StyledField2({
   const recipe = useSlotRecipe({
     key: "datePicker"
   });
-  const styles = recipe({ variant });
+  const styles = recipe({ variant, size });
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -2629,7 +2633,6 @@ var StyledField = function StyledField2({
       ref,
       "aria-invalid": invalid,
       "aria-disabled": isDisabled,
-      fontSize: ["mobile.md", "desktop.md"],
       children
     }
   );
@@ -2637,6 +2640,7 @@ var StyledField = function StyledField2({
 var DatePicker = ({
   ref: externalRef,
   variant,
+  size,
   errorText,
   minHeight,
   showYearNavigation,
@@ -2701,12 +2705,13 @@ var DatePicker = ({
             invalid,
             helperText,
             required: props.required,
+            size,
             children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
               StyledField,
               {
                 variant,
+                size,
                 onClick: onFieldClick,
-                paddingX: 3,
                 minHeight,
                 isDisabled: props.isDisabled,
                 isActive: props.isActive,
@@ -2715,8 +2720,7 @@ var DatePicker = ({
                   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,
-                      paddingRight: 1,
+                      marginLeft: 1,
                       variant,
                       ref,
                       ...buttonProps
@@ -2772,6 +2776,7 @@ function RangeCalendar(props) {
 }
 function DateRangePicker({
   variant = "core",
+  size,
   minHeight,
   startName,
   endName,
@@ -2831,6 +2836,7 @@ function DateRangePicker({
               alignItems: "center",
               paddingX: 3,
               variant,
+              size,
               onClick: onFieldClick,
               minHeight,
               children: [
@@ -2895,8 +2901,6 @@ var TimeField = ({ state, ...props }) => {
         color: "text.subtle",
         top: 0,
         cursor: "text",
-        left: "50%",
-        transform: "translateX(-50%)",
         position: "absolute",
         paddingTop: "2px",
         whiteSpace: "nowrap",
@@ -3032,10 +3036,8 @@ var TimePicker = ({
     StyledField,
     {
       width: "fit-content",
-      paddingX: 2,
       alignItems: "center",
       justifyContent: "space-between",
-      gap: 2,
       opacity: isDisabled ? 0.5 : 1,
       pointerEvents: isDisabled ? "none" : "auto",
       "aria-disabled": isDisabled,
@@ -6675,13 +6677,17 @@ var createToast = ({
   variant,
   id,
   duration = 6e3,
-  width = "sm"
+  width = "sm",
+  action,
+  closable = false
 }) => toaster.create({
   description: text,
   type: variant,
   id: id ?? crypto.randomUUID(),
   duration,
-  meta: { width }
+  action,
+  meta: { width },
+  closable
 });
 var Toaster = () => {
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Toaster$1, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
@@ -6696,7 +6702,9 @@ var Toaster = () => {
         role: "alert",
         children: [
           /* @__PURE__ */ jsx(AlertIcon, { variant: toast.type }),
-          /* @__PURE__ */ jsx(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsx(Toast.Description, { children: toast.description }) })
+          /* @__PURE__ */ jsx(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsx(Toast.Description, { children: toast.description }) }),
+          toast.action && /* @__PURE__ */ jsx(Toast.ActionTrigger, { onClick: toast.action.onClick, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", children: toast.action.label }) }),
+          toast.closable && /* @__PURE__ */ jsx(Toast.CloseTrigger, { children: /* @__PURE__ */ jsx(CloseButton, { size: "xs" }) })
         ]
       }
     );
@@ -7945,7 +7953,8 @@ var radioCardAnatomy = createAnatomy("radio-card").parts(
   "itemText",
   "itemDescription",
   "itemContent",
-  "itemControl"
+  "itemControl",
+  "itemIndicator"
 );
 var radioAnatomy = createAnatomy("radio").parts(
   "root",
@@ -8970,6 +8979,8 @@ var datePickerSlotRecipe = defineSlotRecipe({
       display: "flex",
       flex: 1,
       paddingY: 0.5,
+      paddingX: 2,
+      gap: 1.5,
       alignItems: "center",
       _hover: {
         zIndex: "docked"
@@ -9185,10 +9196,25 @@ var datePickerSlotRecipe = defineSlotRecipe({
           }
         }
       }
+    },
+    size: {
+      sm: {
+        wrapper: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          paddingX: 1,
+          gap: 1
+        }
+      },
+      md: {
+        wrapper: {
+          fontSize: ["mobile.sm", "desktop.sm"]
+        }
+      }
     }
   },
   defaultVariants: {
-    variant: "core"
+    variant: "core",
+    size: "md"
   }
 });
 var dialogSlotRecipe = defineSlotRecipe({
@@ -11226,6 +11252,54 @@ var radioCardSlotRecipe = defineSlotRecipe({
       _disabled: { opacity: 0.4 },
       fontWeight: "bold",
       fontSize: "inherit"
+    },
+    itemControl: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "flex-start"
+    },
+    itemIndicator: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: "2px",
+      borderColor: "outline.core",
+      borderRadius: "xl",
+      width: 3,
+      height: 3,
+      marginRight: 2,
+      marginTop: 0.5,
+      _checked: {
+        borderColor: "surface.brand"
+      },
+      _hover: {
+        borderColor: "surface.brand.hover",
+        "& .dot": {
+          backgroundColor: "surface.brand.hover"
+        }
+      },
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "surface.disabled",
+        borderColor: "outline.disabled",
+        "& .dot": {
+          backgroundColor: "outline.disabled"
+        }
+      },
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: "outline.focus",
+        outlineStyle: "solid",
+        outlineOffset: "1px"
+      },
+      "& .dot": {
+        height: "full",
+        width: "full",
+        borderRadius: "xl",
+        backgroundColor: "surface.brand",
+        scale: "0.5"
+      }
     }
   },
   variants: {
@@ -11368,6 +11442,12 @@ var selectSlotRecipe = defineSlotRecipe({
       listStyle: "none",
       borderBottomRadius: "sm",
       marginTop: -1,
+      "&[data-placement^='top']": {
+        borderTopRadius: "sm",
+        borderBottomRadius: 0,
+        marginTop: 0,
+        marginBottom: -1
+      },
       _open: {
         animationStyle: "slide-fade-in",
         animationDuration: "fast",
@@ -11436,6 +11516,10 @@ var selectSlotRecipe = defineSlotRecipe({
       _open: {
         borderBottomRadius: 0
       },
+      "&:has([data-placement^='top'][data-state='open'])": {
+        borderTopRadius: 0,
+        borderBottomRadius: "sm"
+      },
       _invalid: {
         outline: "2px solid",
         outlineColor: "outline.error"