@vygruppen/spor-react 12.2.0 → 12.2.1

package/.turbo/turbo-build.log

@@ -1,12 +1,30 @@
 
-> @vygruppen/spor-react@12.2.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.2.1 build /home/runner/work/spor/spor/packages/spor-react
 > pnpm typegen && tsup
 
 
-> @vygruppen/spor-react@12.2.0 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.2.1 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    ../spor-design-tokens/package.json:15:6:
+      15 │       "types": "./dist/tokens.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    ../spor-design-tokens/package.json:13:6:
+      13 │       "import": "./dist/tokens.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    ../spor-design-tokens/package.json:14:6:
+      14 │       "require": "./dist/tokens.js",
+         ╵       ~~~~~~~~~
+
 [?25l│
 ◒  Generating conditions types...
 ◇  ✅ Generated conditions typings
@@ -16,7 +34,8 @@
 [?25h[?25l│
 ◇  ✅ Generated utility typings
 [?25h[?25l│
-◇  ✅ Generated token typings
+◒  Generating token types...
+◇  ✅ Generated token typings
 [?25h[?25l│
 ◒  Generating system types...
 ◇  ✅ Generated system types
@@ -31,12 +50,12 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js     312.95 KB
-CJS dist/index.js.map 629.56 KB
-CJS ⚡️ Build success in 2012ms
-ESM dist/index.mjs     292.49 KB
-ESM dist/index.mjs.map 629.56 KB
-ESM ⚡️ Build success in 2013ms
-DTS ⚡️ Build success in 22093ms
-DTS dist/index.d.ts  132.32 KB
-DTS dist/index.d.mts 132.32 KB
+CJS dist/index.js     313.49 KB
+CJS dist/index.js.map 630.43 KB
+CJS ⚡️ Build success in 2275ms
+ESM dist/index.mjs     292.98 KB
+ESM dist/index.mjs.map 630.43 KB
+ESM ⚡️ Build success in 2276ms
+DTS ⚡️ Build success in 25335ms
+DTS dist/index.d.ts  130.88 KB
+DTS dist/index.d.mts 130.88 KB

package/.turbo/turbo-typegen.log

@@ -1,8 +1,26 @@
 
-> @vygruppen/spor-react@12.2.0 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.2.1 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    ../spor-design-tokens/package.json:15:6:
+      15 │       "types": "./dist/tokens.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    ../spor-design-tokens/package.json:13:6:
+      13 │       "import": "./dist/tokens.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    ../spor-design-tokens/package.json:14:6:
+      14 │       "require": "./dist/tokens.js",
+         ╵       ~~~~~~~~~
+
 [?25l│
 ◒  Generating conditions types...
 ◇  ✅ Generated conditions typings

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 12.2.1
+
+### Patch Changes
+
+- 9bc98dd: Rewrite choice-chip. Fixes error where it stalls applications. No breaking changes to props.
+- Updated dependencies [04498c3]
+  - @vygruppen/spor-icon-react@4.0.4
+
 ## 12.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, ReactNode, ChangeEvent } from 'react';
+import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Dialog, Drawer as Drawer$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, Field as Field$1, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, 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, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Dialog, Drawer as Drawer$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Field as Field$1, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, 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, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -1058,98 +1058,47 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size"
  */
 declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const choiceChipRecipe: _chakra_ui_react.RecipeDefinition<{
-    variant: {
-        core: {
-            color: "core.text";
-            outlineColor: "core.outline";
-            _hover: {
-                outline: "2px solid";
-                outlineColor: "core.outline.hover";
-                _active: {
-                    outline: "1px solid";
-                    outlineColor: "core.outline";
-                    backgroundColor: "core.surface.active";
-                };
-            };
-        };
-        accent: {
-            backgroundColor: "accent.surface";
-            color: "accent.text";
-            outline: "none";
-            _hover: {
-                backgroundColor: "accent.surface.hover";
-                _active: {
-                    backgroundColor: "accent.surface.active";
-                };
-            };
-        };
-        floating: {
-            backgroundColor: "floating.surface";
-            outline: "1px solid";
-            outlineColor: "floating.outline";
-            color: "floating.text";
-            boxShadow: "sm";
-            _hover: {
-                backgroundColor: "floating.surface.hover";
-                outline: "1px solid";
-                outlineColor: "floating.outline.hover";
-                _active: {
-                    backgroundColor: "floating.surface.active";
-                    outline: "1px solid";
-                    outlineColor: "floating.outline";
-                };
-            };
-        };
-    };
-    size: {
-        xs: {
-            _checked: {
-                borderRadius: "0.563rem";
-            };
-            height: number;
-            paddingX: number;
-        };
-        sm: {
-            _checked: {
-                borderRadius: "sm";
-            };
-            height: number;
-            paddingX: number;
-        };
-        md: {
-            _checked: {
-                borderRadius: "sm";
-            };
-            height: number;
-            paddingX: number;
-        };
-        lg: {
-            _checked: {
-                borderRadius: "md";
-            };
-            height: number;
-            paddingX: number;
-        };
-    };
-}>;
-
-type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
-type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
-    onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    defaultChecked?: boolean;
-    /** The button text */
-    children: React__default.ReactNode;
-    icon?: {
-        default: React__default.ReactNode;
-        checked: React__default.ReactNode;
-    };
-    chipType?: "icon" | "choice" | "filter";
-    "aria-label"?: string;
+type CheckBoxIcon = {
+    default: React__default.ReactNode;
+    checked: React__default.ReactNode;
+};
+type ChoiceChipProps = CheckboxCardRootProps & {
+    icon?: CheckBoxIcon;
 };
-declare const ChoiceChip: ({ children, icon, size, chipType, variant, ...props }: ChoiceChipProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Choice chips are checkboxes that look like selectable buttons.
+ *
+ * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <ChoiceChip size="lg">Bus</ChoiceChip>
+ *   <ChoiceChip size="lg">Train</ChoiceChip>
+ * </Stack>
+ * ```
+ *
+ * There are also three different chipType - `icon`, `choice` and `filter`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ * </Stack>
+ *
+ * There are also three different variants - `core`, `accent` and `floating`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <ChoiceChip variant="core">Bus</ChoiceChip>
+ *   <ChoiceChip variant="accent">Boat</ChoiceChip>
+ *   <ChoiceChip variant="floating">Train</ChoiceChip>
+ * </Stack>
+ * ```
+ */
+declare const ChoiceChip: React__default.ForwardRefExoticComponent<CheckboxCard.RootProps & {
+    icon?: CheckBoxIcon;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size"> & AriaComboBoxProps<T> & {
     /** The label of the combobox */
@@ -3677,7 +3626,7 @@ type ToastProps = {
     variant: Variant;
     id?: string;
 };
-declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string | undefined;
+declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconComponent;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, ReactNode, ChangeEvent } from 'react';
+import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Dialog, Drawer as Drawer$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, Field as Field$1, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, 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, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Dialog, Drawer as Drawer$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Field as Field$1, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, 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, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -1058,98 +1058,47 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size"
  */
 declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const choiceChipRecipe: _chakra_ui_react.RecipeDefinition<{
-    variant: {
-        core: {
-            color: "core.text";
-            outlineColor: "core.outline";
-            _hover: {
-                outline: "2px solid";
-                outlineColor: "core.outline.hover";
-                _active: {
-                    outline: "1px solid";
-                    outlineColor: "core.outline";
-                    backgroundColor: "core.surface.active";
-                };
-            };
-        };
-        accent: {
-            backgroundColor: "accent.surface";
-            color: "accent.text";
-            outline: "none";
-            _hover: {
-                backgroundColor: "accent.surface.hover";
-                _active: {
-                    backgroundColor: "accent.surface.active";
-                };
-            };
-        };
-        floating: {
-            backgroundColor: "floating.surface";
-            outline: "1px solid";
-            outlineColor: "floating.outline";
-            color: "floating.text";
-            boxShadow: "sm";
-            _hover: {
-                backgroundColor: "floating.surface.hover";
-                outline: "1px solid";
-                outlineColor: "floating.outline.hover";
-                _active: {
-                    backgroundColor: "floating.surface.active";
-                    outline: "1px solid";
-                    outlineColor: "floating.outline";
-                };
-            };
-        };
-    };
-    size: {
-        xs: {
-            _checked: {
-                borderRadius: "0.563rem";
-            };
-            height: number;
-            paddingX: number;
-        };
-        sm: {
-            _checked: {
-                borderRadius: "sm";
-            };
-            height: number;
-            paddingX: number;
-        };
-        md: {
-            _checked: {
-                borderRadius: "sm";
-            };
-            height: number;
-            paddingX: number;
-        };
-        lg: {
-            _checked: {
-                borderRadius: "md";
-            };
-            height: number;
-            paddingX: number;
-        };
-    };
-}>;
-
-type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
-type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
-    onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    defaultChecked?: boolean;
-    /** The button text */
-    children: React__default.ReactNode;
-    icon?: {
-        default: React__default.ReactNode;
-        checked: React__default.ReactNode;
-    };
-    chipType?: "icon" | "choice" | "filter";
-    "aria-label"?: string;
+type CheckBoxIcon = {
+    default: React__default.ReactNode;
+    checked: React__default.ReactNode;
+};
+type ChoiceChipProps = CheckboxCardRootProps & {
+    icon?: CheckBoxIcon;
 };
-declare const ChoiceChip: ({ children, icon, size, chipType, variant, ...props }: ChoiceChipProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Choice chips are checkboxes that look like selectable buttons.
+ *
+ * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <ChoiceChip size="lg">Bus</ChoiceChip>
+ *   <ChoiceChip size="lg">Train</ChoiceChip>
+ * </Stack>
+ * ```
+ *
+ * There are also three different chipType - `icon`, `choice` and `filter`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ * </Stack>
+ *
+ * There are also three different variants - `core`, `accent` and `floating`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <ChoiceChip variant="core">Bus</ChoiceChip>
+ *   <ChoiceChip variant="accent">Boat</ChoiceChip>
+ *   <ChoiceChip variant="floating">Train</ChoiceChip>
+ * </Stack>
+ * ```
+ */
+declare const ChoiceChip: React__default.ForwardRefExoticComponent<CheckboxCard.RootProps & {
+    icon?: CheckBoxIcon;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size"> & AriaComboBoxProps<T> & {
     /** The label of the combobox */
@@ -3677,7 +3626,7 @@ type ToastProps = {
     variant: Variant;
     id?: string;
 };
-declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string | undefined;
+declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconComponent;