@vygruppen/spor-react 13.1.4 → 13.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +12 -12
- package/.turbo/turbo-postinstall.log +3 -4
- package/CHANGELOG.md +19 -0
- package/dist/index.cjs +496 -150
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +252 -41
- package/dist/index.d.ts +252 -41
- package/dist/index.mjs +494 -151
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/alert/Alert.tsx +42 -1
- package/src/input/ChoiceChip.tsx +133 -71
- package/src/input/Field.tsx +4 -1
- package/src/input/FilterChip.tsx +85 -0
- package/src/input/NumericStepper.tsx +6 -1
- package/src/input/index.ts +1 -0
- package/src/theme/recipes/badge.ts +19 -3
- package/src/theme/recipes/pressable-card.ts +3 -3
- package/src/theme/slot-recipes/anatomy.ts +1 -0
- package/src/theme/slot-recipes/choice-chip.ts +77 -49
- package/src/theme/slot-recipes/filter-chip.ts +197 -0
- package/src/theme/slot-recipes/index.ts +3 -1
- package/src/theme/slot-recipes/numeric-stepper.ts +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React$1 from 'react';
|
|
|
2
2
|
import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as _chakra_ui_react from '@chakra-ui/react';
|
|
5
|
-
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,
|
|
5
|
+
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';
|
|
6
6
|
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';
|
|
7
7
|
import { IconComponent } from '@vygruppen/spor-icon-react';
|
|
8
8
|
import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
|
|
@@ -877,12 +877,12 @@ declare const pressableCardRecipe: _chakra_ui_react.RecipeDefinition<{
|
|
|
877
877
|
accent: {
|
|
878
878
|
boxShadow: "0px 1px 3px 0px var(--shadow-color)";
|
|
879
879
|
shadowColor: "surface.disabled";
|
|
880
|
-
background: "surface.
|
|
880
|
+
background: "surface.accent";
|
|
881
881
|
_hover: {
|
|
882
|
-
background: "surface.
|
|
882
|
+
background: "surface.accent.hover";
|
|
883
883
|
boxShadow: "0px 2px 6px 0px var(--shadow-color)";
|
|
884
884
|
_active: {
|
|
885
|
-
background: "surface.
|
|
885
|
+
background: "surface.accent.active";
|
|
886
886
|
boxShadow: "none";
|
|
887
887
|
};
|
|
888
888
|
};
|
|
@@ -924,7 +924,7 @@ declare const PressableCard: ({ ref, ...props }: PressableCardProps & {
|
|
|
924
924
|
ref?: React.Ref<HTMLButtonElement>;
|
|
925
925
|
}) => react_jsx_runtime.JSX.Element;
|
|
926
926
|
|
|
927
|
-
declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription", {
|
|
927
|
+
declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription" | "itemControl", {
|
|
928
928
|
variant: {
|
|
929
929
|
core: {
|
|
930
930
|
item: {
|
|
@@ -1002,21 +1002,21 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
|
|
|
1002
1002
|
*
|
|
1003
1003
|
* @see Docs https://spor.vy.no/components/radiocard
|
|
1004
1004
|
*/
|
|
1005
|
-
type RadioCardVariantProps = RecipeVariantProps<typeof radioCardSlotRecipe>;
|
|
1006
|
-
type RadioCardItemProps = Exclude<RadioCard$1.ItemProps, "colorPalette" | "indicator" | "variant" | "size" | "addon"> & RadioCardVariantProps & {
|
|
1005
|
+
type RadioCardVariantProps$1 = RecipeVariantProps<typeof radioCardSlotRecipe>;
|
|
1006
|
+
type RadioCardItemProps$1 = Exclude<RadioCard$1.ItemProps, "colorPalette" | "indicator" | "variant" | "size" | "addon"> & RadioCardVariantProps$1 & {
|
|
1007
1007
|
inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
|
|
1008
1008
|
ariaLabel?: string;
|
|
1009
1009
|
};
|
|
1010
|
-
declare const RadioCard: ({ ref, ...props }: RadioCardItemProps & {
|
|
1010
|
+
declare const RadioCard: ({ ref, ...props }: RadioCardItemProps$1 & {
|
|
1011
1011
|
ref?: React__default.Ref<HTMLInputElement>;
|
|
1012
1012
|
}) => react_jsx_runtime.JSX.Element;
|
|
1013
|
-
type RadioCardRootProps = RadioCardVariantProps & Exclude<RadioCard$1.RootProps, "variant"> & {
|
|
1013
|
+
type RadioCardRootProps$1 = RadioCardVariantProps$1 & Exclude<RadioCard$1.RootProps, "variant"> & {
|
|
1014
1014
|
children: React__default.ReactNode;
|
|
1015
1015
|
gap?: string | number;
|
|
1016
1016
|
direction?: "row" | "column";
|
|
1017
1017
|
display?: string;
|
|
1018
1018
|
};
|
|
1019
|
-
declare const RadioCardGroup: ({ ref, ...props }: RadioCardRootProps & {
|
|
1019
|
+
declare const RadioCardGroup: ({ ref, ...props }: RadioCardRootProps$1 & {
|
|
1020
1020
|
ref?: React__default.Ref<HTMLDivElement>;
|
|
1021
1021
|
}) => react_jsx_runtime.JSX.Element;
|
|
1022
1022
|
declare const RadioCardLabel: React__default.ForwardRefExoticComponent<RadioCard$1.LabelProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
@@ -1132,6 +1132,7 @@ type FieldBaseProps = {
|
|
|
1132
1132
|
floatingLabel?: boolean;
|
|
1133
1133
|
shouldFloat?: boolean;
|
|
1134
1134
|
labelAsChild?: boolean;
|
|
1135
|
+
gap?: string | number;
|
|
1135
1136
|
};
|
|
1136
1137
|
type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
|
|
1137
1138
|
/**
|
|
@@ -1775,49 +1776,222 @@ type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1>
|
|
|
1775
1776
|
*/
|
|
1776
1777
|
declare const CheckboxGroup: (props: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
|
|
1777
1778
|
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
};
|
|
1779
|
+
declare const choiceChipSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "itemText" | "itemDescription" | "itemControl", {
|
|
1780
|
+
size: {
|
|
1781
|
+
xs: {
|
|
1782
|
+
item: {
|
|
1783
|
+
borderRadius: "xl";
|
|
1784
|
+
_checked: {
|
|
1785
|
+
borderRadius: "9px";
|
|
1786
|
+
};
|
|
1787
|
+
};
|
|
1788
|
+
itemControl: {
|
|
1789
|
+
height: number;
|
|
1790
|
+
paddingX: number;
|
|
1791
|
+
};
|
|
1792
|
+
label: {
|
|
1793
|
+
fontSize: {
|
|
1794
|
+
base: "mobile.sm";
|
|
1795
|
+
sm: "desktop.sm";
|
|
1796
|
+
};
|
|
1797
|
+
fontWeight: "regular";
|
|
1798
|
+
};
|
|
1799
|
+
};
|
|
1800
|
+
sm: {
|
|
1801
|
+
item: {
|
|
1802
|
+
borderRadius: "xl";
|
|
1803
|
+
_checked: {
|
|
1804
|
+
borderRadius: "sm";
|
|
1805
|
+
};
|
|
1806
|
+
};
|
|
1807
|
+
itemControl: {
|
|
1808
|
+
height: number;
|
|
1809
|
+
paddingX: number;
|
|
1810
|
+
};
|
|
1811
|
+
label: {
|
|
1812
|
+
fontSize: {
|
|
1813
|
+
base: "mobile.sm";
|
|
1814
|
+
sm: "desktop.sm";
|
|
1815
|
+
};
|
|
1816
|
+
fontWeight: "bold";
|
|
1817
|
+
};
|
|
1818
|
+
};
|
|
1819
|
+
md: {
|
|
1820
|
+
item: {
|
|
1821
|
+
borderRadius: "xl";
|
|
1822
|
+
_checked: {
|
|
1823
|
+
borderRadius: "sm";
|
|
1824
|
+
};
|
|
1825
|
+
};
|
|
1826
|
+
itemControl: {
|
|
1827
|
+
height: number;
|
|
1828
|
+
paddingX: number;
|
|
1829
|
+
};
|
|
1830
|
+
label: {
|
|
1831
|
+
fontSize: {
|
|
1832
|
+
base: "mobile.md";
|
|
1833
|
+
sm: "desktop.md";
|
|
1834
|
+
};
|
|
1835
|
+
fontWeight: "bold";
|
|
1836
|
+
};
|
|
1837
|
+
};
|
|
1838
|
+
lg: {
|
|
1839
|
+
item: {
|
|
1840
|
+
borderRadius: "xl";
|
|
1841
|
+
_checked: {
|
|
1842
|
+
borderRadius: "md";
|
|
1843
|
+
};
|
|
1844
|
+
};
|
|
1845
|
+
itemControl: {
|
|
1846
|
+
height: number;
|
|
1847
|
+
paddingX: number;
|
|
1848
|
+
};
|
|
1849
|
+
label: {
|
|
1850
|
+
fontSize: {
|
|
1851
|
+
base: "mobile.md";
|
|
1852
|
+
sm: "desktop.md";
|
|
1853
|
+
};
|
|
1854
|
+
fontWeight: "bold";
|
|
1855
|
+
};
|
|
1856
|
+
};
|
|
1857
|
+
};
|
|
1858
|
+
variant: {
|
|
1859
|
+
core: {
|
|
1860
|
+
itemControl: {
|
|
1861
|
+
_checked: {
|
|
1862
|
+
backgroundColor: "surface.brand";
|
|
1863
|
+
color: "text.brand";
|
|
1864
|
+
outline: "none";
|
|
1865
|
+
_hover: {
|
|
1866
|
+
backgroundColor: "surface.brand.hover";
|
|
1867
|
+
_active: {
|
|
1868
|
+
backgroundColor: "surface.brand.active";
|
|
1869
|
+
};
|
|
1870
|
+
};
|
|
1871
|
+
};
|
|
1872
|
+
_hover: {
|
|
1873
|
+
outline: "2px solid";
|
|
1874
|
+
outlineColor: "outline.core.hover";
|
|
1875
|
+
_active: {
|
|
1876
|
+
outline: "1px solid";
|
|
1877
|
+
outlineColor: "outline.core";
|
|
1878
|
+
backgroundColor: "surface.core.active";
|
|
1879
|
+
};
|
|
1880
|
+
};
|
|
1881
|
+
};
|
|
1882
|
+
};
|
|
1883
|
+
accent: {
|
|
1884
|
+
itemControl: {
|
|
1885
|
+
backgroundColor: "surface.accent";
|
|
1886
|
+
color: "text.accent";
|
|
1887
|
+
outline: "none";
|
|
1888
|
+
border: "none";
|
|
1889
|
+
_checked: {
|
|
1890
|
+
backgroundColor: "surface.brand";
|
|
1891
|
+
color: "text.brand";
|
|
1892
|
+
outline: "none";
|
|
1893
|
+
_hover: {
|
|
1894
|
+
backgroundColor: "surface.brand.hover";
|
|
1895
|
+
_active: {
|
|
1896
|
+
backgroundColor: "surface.brand.active";
|
|
1897
|
+
};
|
|
1898
|
+
};
|
|
1899
|
+
};
|
|
1900
|
+
_hover: {
|
|
1901
|
+
backgroundColor: "surface.accent.hover";
|
|
1902
|
+
_active: {
|
|
1903
|
+
backgroundColor: "surface.accent.active";
|
|
1904
|
+
};
|
|
1905
|
+
};
|
|
1906
|
+
};
|
|
1907
|
+
};
|
|
1908
|
+
floating: {
|
|
1909
|
+
itemControl: {
|
|
1910
|
+
backgroundColor: "surface.floating";
|
|
1911
|
+
outline: "1px solid";
|
|
1912
|
+
outlineColor: "outline.floating";
|
|
1913
|
+
color: "text.floating";
|
|
1914
|
+
boxShadow: "sm";
|
|
1915
|
+
_checked: {
|
|
1916
|
+
backgroundColor: "surface.brand";
|
|
1917
|
+
color: "text.brand";
|
|
1918
|
+
outline: "none";
|
|
1919
|
+
_hover: {
|
|
1920
|
+
backgroundColor: "surface.brand.hover";
|
|
1921
|
+
_active: {
|
|
1922
|
+
backgroundColor: "surface.brand.active";
|
|
1923
|
+
};
|
|
1924
|
+
};
|
|
1925
|
+
};
|
|
1926
|
+
_hover: {
|
|
1927
|
+
backgroundColor: "surface.floating.hover";
|
|
1928
|
+
outline: "1px solid";
|
|
1929
|
+
outlineColor: "outline.floating.hover";
|
|
1930
|
+
_active: {
|
|
1931
|
+
backgroundColor: "surface.floating.active";
|
|
1932
|
+
outline: "1px solid";
|
|
1933
|
+
outlineColor: "outline.floating";
|
|
1934
|
+
};
|
|
1935
|
+
};
|
|
1936
|
+
};
|
|
1937
|
+
};
|
|
1938
|
+
};
|
|
1939
|
+
}>;
|
|
1940
|
+
|
|
1787
1941
|
/**
|
|
1788
|
-
* Choice chips are
|
|
1942
|
+
* Choice chips are radio buttons that look like selectable buttons, allowing only one selection at a time.
|
|
1789
1943
|
*
|
|
1790
1944
|
* Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
|
|
1791
1945
|
*
|
|
1792
1946
|
* ```tsx
|
|
1793
|
-
* <
|
|
1794
|
-
*
|
|
1795
|
-
*
|
|
1796
|
-
* </
|
|
1947
|
+
* <ChoiceChipGroup defaultValue="economy">
|
|
1948
|
+
* <ChoiceChip value="economy">Economy</ChoiceChip>
|
|
1949
|
+
* <ChoiceChip value="business">Business</ChoiceChip>
|
|
1950
|
+
* <ChoiceChip value="first-class">First Class</ChoiceChip>
|
|
1951
|
+
* </ChoiceChipGroup>
|
|
1797
1952
|
* ```
|
|
1798
1953
|
*
|
|
1799
|
-
* There are also three different chipType - `icon`, `choice` and `filter`.
|
|
1800
|
-
*
|
|
1801
|
-
* ```tsx
|
|
1802
|
-
* <Stack flexDirection="row">
|
|
1803
|
-
* <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
|
|
1804
|
-
* <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
|
|
1805
|
-
* <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
|
|
1806
|
-
* </Stack>
|
|
1807
|
-
*
|
|
1808
1954
|
* There are also three different variants - `core`, `accent` and `floating`.
|
|
1809
1955
|
*
|
|
1810
1956
|
* ```tsx
|
|
1811
|
-
*
|
|
1812
|
-
*
|
|
1813
|
-
* <ChoiceChip
|
|
1814
|
-
*
|
|
1815
|
-
*
|
|
1957
|
+
* <>
|
|
1958
|
+
* <ChoiceChipGroup defaultValue="bus" variant="core">
|
|
1959
|
+
* <ChoiceChip value="bus">Bus</ChoiceChip>
|
|
1960
|
+
* </ChoiceChipGroup>
|
|
1961
|
+
* <ChoiceChipGroup defaultValue="bus" variant="accent">
|
|
1962
|
+
* <ChoiceChip value="bus">Bus</ChoiceChip>
|
|
1963
|
+
* </ChoiceChipGroup>
|
|
1964
|
+
* <ChoiceChipGroup defaultValue="bus" variant="floating">
|
|
1965
|
+
* <ChoiceChip value="bus">Bus</ChoiceChip>
|
|
1966
|
+
* </ChoiceChipGroup>
|
|
1967
|
+
* </>
|
|
1816
1968
|
* ```
|
|
1969
|
+
*
|
|
1970
|
+
* @see https://spor.vy.no/components/choice-chip
|
|
1817
1971
|
*/
|
|
1818
|
-
|
|
1819
|
-
|
|
1972
|
+
type RadioCardVariantProps = RecipeVariantProps<typeof choiceChipSlotRecipe>;
|
|
1973
|
+
type CheckBoxIcon$1 = {
|
|
1974
|
+
default: React.ReactNode;
|
|
1975
|
+
checked: React.ReactNode;
|
|
1976
|
+
};
|
|
1977
|
+
type RadioCardItemProps = Exclude<RadioCard$1.ItemProps, "colorPalette" | "indicator" | "variant" | "size" | "addon"> & RadioCardVariantProps & {
|
|
1978
|
+
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
1979
|
+
ariaLabel?: string;
|
|
1980
|
+
icon?: CheckBoxIcon$1;
|
|
1981
|
+
};
|
|
1982
|
+
declare const ChoiceChip: ({ ref, ...props }: RadioCardItemProps & {
|
|
1983
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
1820
1984
|
}) => react_jsx_runtime.JSX.Element;
|
|
1985
|
+
type RadioCardRootProps = Exclude<RadioCard$1.RootProps, "variant" | "size"> & RadioCardVariantProps & {
|
|
1986
|
+
children: React.ReactNode;
|
|
1987
|
+
gap?: string | number;
|
|
1988
|
+
direction?: "row" | "column";
|
|
1989
|
+
display?: string;
|
|
1990
|
+
};
|
|
1991
|
+
declare const ChoiceChipGroup: ({ ref, ...props }: RadioCardRootProps & {
|
|
1992
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
1993
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
1994
|
+
declare const ChoiceChipLabel: React$1.ForwardRefExoticComponent<RadioCard$1.LabelProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1821
1995
|
|
|
1822
1996
|
type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size"> & AriaComboBoxProps<T> & {
|
|
1823
1997
|
/** The label of the combobox */
|
|
@@ -1865,6 +2039,43 @@ declare const FieldsetContent: React$1.ForwardRefExoticComponent<Fieldset$1.Cont
|
|
|
1865
2039
|
declare const FieldsetHelperText: React$1.ForwardRefExoticComponent<Fieldset$1.HelperTextProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1866
2040
|
declare const FieldsetErrorText: React$1.ForwardRefExoticComponent<Fieldset$1.ErrorTextProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1867
2041
|
|
|
2042
|
+
type CheckBoxIcon = {
|
|
2043
|
+
default: React__default.ReactNode;
|
|
2044
|
+
checked: React__default.ReactNode;
|
|
2045
|
+
};
|
|
2046
|
+
type FilterChipProps = Omit<CheckboxCardRootProps, "onCheckedChange" | "checked"> & {
|
|
2047
|
+
icon?: CheckBoxIcon;
|
|
2048
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
2049
|
+
checked?: boolean;
|
|
2050
|
+
};
|
|
2051
|
+
/**
|
|
2052
|
+
* Filter chips are checkboxes that look like selectable buttons.
|
|
2053
|
+
*
|
|
2054
|
+
* Filter chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
|
|
2055
|
+
*
|
|
2056
|
+
* ```tsx
|
|
2057
|
+
* <Stack flexDirection="row">
|
|
2058
|
+
* <FilterChip size="lg">Bus</FilterChip>
|
|
2059
|
+
* <FilterChip size="lg">Train</FilterChip>
|
|
2060
|
+
* </Stack>
|
|
2061
|
+
* ```
|
|
2062
|
+
*
|
|
2063
|
+
* There are also three different variants - `core`, `accent` and `floating`.
|
|
2064
|
+
*
|
|
2065
|
+
* ```tsx
|
|
2066
|
+
* <Stack flexDirection="row">
|
|
2067
|
+
* <FilterChip variant="core">Bus</FilterChip>
|
|
2068
|
+
* <FilterChip variant="accent">Boat</FilterChip>
|
|
2069
|
+
* <FilterChip variant="floating">Train</FilterChip>
|
|
2070
|
+
* </Stack>
|
|
2071
|
+
* ```
|
|
2072
|
+
*
|
|
2073
|
+
* @see https://spor.vy.no/components/filter-chip
|
|
2074
|
+
*/
|
|
2075
|
+
declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps }: FilterChipProps & {
|
|
2076
|
+
ref?: React__default.Ref<HTMLInputElement>;
|
|
2077
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
2078
|
+
|
|
1868
2079
|
type ChakraInputProps = ComponentProps<typeof Input$1>;
|
|
1869
2080
|
|
|
1870
2081
|
type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
|
|
@@ -4118,4 +4329,4 @@ declare const Text: ({ ref, ...props }: TextProps & {
|
|
|
4118
4329
|
**/
|
|
4119
4330
|
declare function slugify(text: string | string[], maxLength?: number): string;
|
|
4120
4331
|
|
|
4121
|
-
export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, Calendar, CalendarCell, CalendarGrid, CalendarHeader, type CalendarMode, CalendarProvider, type CalendarValue, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip,
|
|
4332
|
+
export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, Calendar, CalendarCell, CalendarGrid, CalendarHeader, type CalendarMode, CalendarProvider, type CalendarValue, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, ChoiceChipGroup, ChoiceChipLabel, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, type FieldBaseProps, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FilterChip, type FilterChipProps, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, InputChip, type InputChipProps, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, type MenuItemGroupProps, type MenuItemProps, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, type MenuTriggerItemProps, type MenuTriggerProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, RangeCalendar, ScrollCalendar, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableColumnHeader, type TableColumnHeaderProps, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
|