@obosbbl/grunnmuren-react 2.0.0-canary.34 → 2.0.0-canary.35

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.
Files changed (3) hide show
  1. package/dist/index.d.mts +128 -2
  2. package/dist/index.mjs +48 -6
  3. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -43,12 +43,136 @@ type AccordionItemProps = {
43
43
  declare const _Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
44
44
  declare const _AccordionItem: react__default.ForwardRefExoticComponent<AccordionItemProps & react__default.RefAttributes<HTMLDivElement>>;
45
45
 
46
+ type BadgeProps = VariantProps<typeof badgeVariants> & {
47
+ children?: React.ReactNode;
48
+ className?: string;
49
+ };
50
+ declare const badgeVariants: (props?: ({
51
+ color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
52
+ size?: "small" | "medium" | "large" | undefined;
53
+ } & ({
54
+ class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
55
+ [x: string]: any;
56
+ } | null | undefined)[] | {
57
+ [x: string]: any;
58
+ } | null | undefined)[] | {
59
+ [x: string]: any;
60
+ } | null | undefined)[] | {
61
+ [x: string]: any;
62
+ } | null | undefined)[] | {
63
+ [x: string]: any;
64
+ } | null | undefined)[] | {
65
+ [x: string]: any;
66
+ } | null | undefined)[] | {
67
+ [x: string]: any;
68
+ } | null | undefined)[] | {
69
+ [x: string]: any;
70
+ } | null | undefined)[] | {
71
+ [x: string]: any;
72
+ } | null | undefined)[] | {
73
+ [x: string]: any;
74
+ } | null | undefined)[] | {
75
+ [x: string]: any;
76
+ } | null | undefined)[] | {
77
+ [x: string]: any;
78
+ } | null | undefined;
79
+ className?: never;
80
+ } | {
81
+ class?: never;
82
+ className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
83
+ [x: string]: any;
84
+ } | null | undefined)[] | {
85
+ [x: string]: any;
86
+ } | null | undefined)[] | {
87
+ [x: string]: any;
88
+ } | null | undefined)[] | {
89
+ [x: string]: any;
90
+ } | null | undefined)[] | {
91
+ [x: string]: any;
92
+ } | null | undefined)[] | {
93
+ [x: string]: any;
94
+ } | null | undefined)[] | {
95
+ [x: string]: any;
96
+ } | null | undefined)[] | {
97
+ [x: string]: any;
98
+ } | null | undefined)[] | {
99
+ [x: string]: any;
100
+ } | null | undefined)[] | {
101
+ [x: string]: any;
102
+ } | null | undefined)[] | {
103
+ [x: string]: any;
104
+ } | null | undefined)[] | {
105
+ [x: string]: any;
106
+ } | null | undefined;
107
+ })) | undefined) => string;
108
+ declare const _Badge: react.ForwardRefExoticComponent<VariantProps<(props?: ({
109
+ color?: "gray-dark" | "mint" | "sky" | "white" | "blue-dark" | "green-dark" | undefined;
110
+ size?: "small" | "medium" | "large" | undefined;
111
+ } & ({
112
+ class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
113
+ [x: string]: any;
114
+ } | null | undefined)[] | {
115
+ [x: string]: any;
116
+ } | null | undefined)[] | {
117
+ [x: string]: any;
118
+ } | null | undefined)[] | {
119
+ [x: string]: any;
120
+ } | null | undefined)[] | {
121
+ [x: string]: any;
122
+ } | null | undefined)[] | {
123
+ [x: string]: any;
124
+ } | null | undefined)[] | {
125
+ [x: string]: any;
126
+ } | null | undefined)[] | {
127
+ [x: string]: any;
128
+ } | null | undefined)[] | {
129
+ [x: string]: any;
130
+ } | null | undefined)[] | {
131
+ [x: string]: any;
132
+ } | null | undefined)[] | {
133
+ [x: string]: any;
134
+ } | null | undefined)[] | {
135
+ [x: string]: any;
136
+ } | null | undefined;
137
+ className?: never;
138
+ } | {
139
+ class?: never;
140
+ className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
141
+ [x: string]: any;
142
+ } | null | undefined)[] | {
143
+ [x: string]: any;
144
+ } | null | undefined)[] | {
145
+ [x: string]: any;
146
+ } | null | undefined)[] | {
147
+ [x: string]: any;
148
+ } | null | undefined)[] | {
149
+ [x: string]: any;
150
+ } | null | undefined)[] | {
151
+ [x: string]: any;
152
+ } | null | undefined)[] | {
153
+ [x: string]: any;
154
+ } | null | undefined)[] | {
155
+ [x: string]: any;
156
+ } | null | undefined)[] | {
157
+ [x: string]: any;
158
+ } | null | undefined)[] | {
159
+ [x: string]: any;
160
+ } | null | undefined)[] | {
161
+ [x: string]: any;
162
+ } | null | undefined)[] | {
163
+ [x: string]: any;
164
+ } | null | undefined;
165
+ })) | undefined) => string> & {
166
+ children?: React.ReactNode;
167
+ className?: string;
168
+ } & react.RefAttributes<HTMLSpanElement>>;
169
+
46
170
  /**
47
171
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
48
172
  */
49
173
  declare const buttonVariants: (props?: ({
50
174
  variant?: "primary" | "secondary" | "tertiary" | undefined;
51
- color?: "green" | "mint" | "white" | undefined;
175
+ color?: "mint" | "white" | "green" | undefined;
52
176
  isIconOnly?: boolean | undefined;
53
177
  } & ({
54
178
  class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
@@ -557,6 +681,7 @@ declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
557
681
  type BreadcrumbProps = {
558
682
  /** Additional CSS className for the element. */
559
683
  className?: string;
684
+ children?: React.ReactNode;
560
685
  /** Additional style properties for the element. */
561
686
  style?: React.CSSProperties;
562
687
  /** The URL to navigate to when clicking the breadcrumb. */
@@ -565,6 +690,7 @@ type BreadcrumbProps = {
565
690
  declare const _Breadcrumb: react.ForwardRefExoticComponent<{
566
691
  /** Additional CSS className for the element. */
567
692
  className?: string;
693
+ children?: React.ReactNode;
568
694
  /** Additional style properties for the element. */
569
695
  style?: React.CSSProperties;
570
696
  /** The URL to navigate to when clicking the breadcrumb. */
@@ -598,4 +724,4 @@ type ButtonOrLinkProps = {
598
724
  type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
599
725
  declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
600
726
 
601
- export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxItem as SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };
727
+ export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Badge as Badge, type BadgeProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxItem as SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };
package/dist/index.mjs CHANGED
@@ -148,6 +148,44 @@ function AccordionItem(props, ref) {
148
148
  const _Accordion = /*#__PURE__*/ forwardRef(Accordion);
149
149
  const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
150
150
 
151
+ const badgeVariants = cva({
152
+ base: [
153
+ 'inline-flex w-fit items-center justify-center gap-1.5 rounded-lg [&_svg]:shrink-0'
154
+ ],
155
+ variants: {
156
+ color: {
157
+ 'gray-dark': 'bg-gray-dark text-white',
158
+ mint: 'bg-mint',
159
+ sky: 'bg-sky',
160
+ white: 'bg-white',
161
+ 'blue-dark': 'bg-blue-dark text-white',
162
+ 'green-dark': 'bg-green-dark text-white'
163
+ },
164
+ size: {
165
+ small: 'description px-2 py-0.5 [&_svg]:h-4 [&_svg]:w-4',
166
+ medium: 'description px-2.5 py-1.5 [&_svg]:h-4 [&_svg]:w-4',
167
+ large: 'paragraph px-3 py-2 [&_svg]:h-5 [&_svg]:w-5'
168
+ }
169
+ },
170
+ defaultVariants: {
171
+ size: 'medium'
172
+ }
173
+ });
174
+ function Badge(props, ref) {
175
+ const { className: _className, color, size, ...restProps } = props;
176
+ const className = badgeVariants({
177
+ className: _className,
178
+ color,
179
+ size
180
+ });
181
+ return /*#__PURE__*/ jsx("span", {
182
+ className: className,
183
+ ...restProps,
184
+ ref: ref
185
+ });
186
+ }
187
+ const _Badge = /*#__PURE__*/ forwardRef(Badge);
188
+
151
189
  /**
152
190
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
153
191
  */ const buttonVariants = cva({
@@ -286,7 +324,11 @@ const formField = cx('group flex flex-col gap-2');
286
324
  const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
287
325
  const input = cva({
288
326
  base: [
289
- 'min-h-11 rounded-md py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
327
+ // Use box-content to enable auto width based on number of characters (size)
328
+ // Setting min-height to prevent the input from collapsing in Safari
329
+ // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
330
+ 'box-content min-h-6 py-2.5',
331
+ 'rounded-md text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
290
332
  // invalid styles
291
333
  'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
292
334
  // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -689,7 +731,7 @@ const inputVariants$1 = compose(input, cva({
689
731
  left: ''
690
732
  },
691
733
  autoWidth: {
692
- true: 'box-content max-w-fit',
734
+ true: 'max-w-fit',
693
735
  false: ''
694
736
  }
695
737
  }
@@ -754,7 +796,7 @@ const inputVariants = compose(input, cva({
754
796
  left: ''
755
797
  },
756
798
  autoWidth: {
757
- true: 'box-content max-w-fit',
799
+ true: 'max-w-fit',
758
800
  false: ''
759
801
  }
760
802
  }
@@ -894,14 +936,14 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
894
936
  /*#__PURE__*/ jsx(Icon, {}),
895
937
  firstChild,
896
938
  isDismissable && /*#__PURE__*/ jsx("button", {
897
- className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus:outline-none focus:-outline-offset-8 focus:outline-black'),
939
+ className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-none focus-visible:-outline-offset-8 focus-visible:outline-black'),
898
940
  onClick: close,
899
941
  "aria-label": translations.close[locale],
900
942
  children: /*#__PURE__*/ jsx(Close, {})
901
943
  }),
902
944
  isExpandable && /*#__PURE__*/ jsxs("button", {
903
945
  className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
904
- 'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus:after:h-[1px] focus:after:bg-black'),
946
+ 'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
905
947
  onClick: ()=>setIsExpanded((prevState)=>!prevState),
906
948
  "aria-expanded": isExpanded,
907
949
  "aria-controls": id,
@@ -980,4 +1022,4 @@ function Backlink(props, ref) {
980
1022
  }
981
1023
  const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
982
1024
 
983
- export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };
1025
+ export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-react",
3
- "version": "2.0.0-canary.34",
3
+ "version": "2.0.0-canary.35",
4
4
  "description": "Grunnmuren components in React",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"