@vygruppen/spor-react 13.3.1 → 13.4.0

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, AccordionItemProps, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
@@ -122,7 +122,7 @@ type AccordionItemContentProps = Accordion$1.ItemContentProps & {
 type ExpandableProps = Omit<AccordionProps & AccordionItemTriggerProps, "title"> & HeadingLevel & {
     title: ReactNode;
 };
-type ExpandableItemProps = HeadingLevel & {
+type ExpandableItemProps = HeadingLevel & Omit<AccordionItemProps, "title"> & {
     value: string;
     title: ReactNode;
     children?: React.ReactNode;
@@ -1117,7 +1117,38 @@ declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
+declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", {
+    size: {
+        sm: {
+            label: {
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+                paddingX: number;
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    top: number;
+                };
+                top: "0.5rem";
+            };
+            helperText: {
+                color: "text.subtle";
+                lineHeight: "normal";
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+            };
+        };
+        md: {
+            label: {
+                paddingX: number;
+                fontSize: ("mobile.sm" | "desktop.sm")[];
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    color: "text.subtle";
+                    top: "0.3rem";
+                };
+                top: "0.9rem";
+            };
+        };
+    };
+}>;
 
 type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
 type FieldBaseProps = {
@@ -1133,6 +1164,7 @@ type FieldBaseProps = {
     shouldFloat?: boolean;
     labelAsChild?: boolean;
     gap?: string | number;
+    size?: "sm" | "md";
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -2089,13 +2121,14 @@ declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps
 
 type ChakraInputProps = ComponentProps<typeof Input$1>;
 
-type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
+type InputProps = FieldProps & Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
     label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
+    /** Override the font size of the start and end elements */
     fontSize?: string;
 };
 /**
@@ -2127,7 +2160,7 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
  *
  * @see https://spor.vy.no/components/input
  */
-declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
+declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, size, ...props }: InputProps & {
     ref?: React__default.Ref<HTMLInputElement | null>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -2333,6 +2366,24 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
             };
         };
     };
+    size: {
+        sm: {
+            field: {
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "xs" | undefined;
+                paddingX?: number | undefined;
+            };
+        };
+        md: {
+            field: {
+                paddingX?: number | undefined;
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "mobile.md" | undefined;
+            };
+        };
+    };
 }>;
 
 type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
@@ -2602,8 +2653,9 @@ declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
 type SelectTriggerProps = Select$1.ControlProps & {
     clearable?: boolean;
     children?: React$1.ReactNode;
+    size: "sm" | "md";
 };
-declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
+declare const SelectTrigger: ({ ref, size, ...props }: SelectTriggerProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 type SelectContentProps = Select$1.ContentProps & {

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, AccordionItemProps, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, CheckboxCardRootProps, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
@@ -122,7 +122,7 @@ type AccordionItemContentProps = Accordion$1.ItemContentProps & {
 type ExpandableProps = Omit<AccordionProps & AccordionItemTriggerProps, "title"> & HeadingLevel & {
     title: ReactNode;
 };
-type ExpandableItemProps = HeadingLevel & {
+type ExpandableItemProps = HeadingLevel & Omit<AccordionItemProps, "title"> & {
     value: string;
     title: ReactNode;
     children?: React.ReactNode;
@@ -1117,7 +1117,38 @@ declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
+declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", {
+    size: {
+        sm: {
+            label: {
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+                paddingX: number;
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    top: number;
+                };
+                top: "0.5rem";
+            };
+            helperText: {
+                color: "text.subtle";
+                lineHeight: "normal";
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+            };
+        };
+        md: {
+            label: {
+                paddingX: number;
+                fontSize: ("mobile.sm" | "desktop.sm")[];
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    color: "text.subtle";
+                    top: "0.3rem";
+                };
+                top: "0.9rem";
+            };
+        };
+    };
+}>;
 
 type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
 type FieldBaseProps = {
@@ -1133,6 +1164,7 @@ type FieldBaseProps = {
     shouldFloat?: boolean;
     labelAsChild?: boolean;
     gap?: string | number;
+    size?: "sm" | "md";
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -2089,13 +2121,14 @@ declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps
 
 type ChakraInputProps = ComponentProps<typeof Input$1>;
 
-type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
+type InputProps = FieldProps & Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
     label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
+    /** Override the font size of the start and end elements */
     fontSize?: string;
 };
 /**
@@ -2127,7 +2160,7 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
  *
  * @see https://spor.vy.no/components/input
  */
-declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
+declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, size, ...props }: InputProps & {
     ref?: React__default.Ref<HTMLInputElement | null>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -2333,6 +2366,24 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
             };
         };
     };
+    size: {
+        sm: {
+            field: {
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "xs" | undefined;
+                paddingX?: number | undefined;
+            };
+        };
+        md: {
+            field: {
+                paddingX?: number | undefined;
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "mobile.md" | undefined;
+            };
+        };
+    };
 }>;
 
 type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
@@ -2602,8 +2653,9 @@ declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
 type SelectTriggerProps = Select$1.ControlProps & {
     clearable?: boolean;
     children?: React$1.ReactNode;
+    size: "sm" | "md";
 };
-declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
+declare const SelectTrigger: ({ ref, size, ...props }: SelectTriggerProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 type SelectContentProps = Select$1.ContentProps & {