@obosbbl/grunnmuren-react 1.1.2 → 1.3.0

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.
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  export declare type ButtonColor = 'standard' | 'white' | 'light-green';
3
3
  export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
4
4
  children: React.ReactNode;
@@ -6,9 +6,11 @@ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
6
6
  color?: 'standard' | 'white' | 'light-green';
7
7
  disabled?: boolean;
8
8
  href?: string;
9
+ /** Renders the button in a loading state */
10
+ loading?: boolean;
9
11
  /** @default button */
10
12
  type?: 'button' | 'submit' | 'reset';
11
13
  /** @default primary */
12
14
  variant?: 'primary' | 'secondary';
13
15
  }
14
- export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
16
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -8,4 +8,4 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
8
8
  /** Error message for the form control */
9
9
  error?: string;
10
10
  }
11
- export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "className" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "role" | "error" | "key" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size"> & import("react").RefAttributes<HTMLInputElement>>;
11
+ export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "className" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "role" | "color" | "error" | "key" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size"> & import("react").RefAttributes<HTMLInputElement>>;
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ export declare type ChipColor = 'blue-light' | 'green-light' | 'red-light' | 'orange-light';
3
+ export interface ChipProps {
4
+ icon?: React.ReactNode;
5
+ color?: ChipColor;
6
+ className?: string;
7
+ children: React.ReactNode;
8
+ variant?: 'outline' | 'filled';
9
+ }
10
+ export declare const Chip: (props: ChipProps) => JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './Chip';
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ export interface RadioProps extends React.ComponentPropsWithoutRef<'input'> {
3
+ children: React.ReactNode;
4
+ }
5
+ export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ export declare const RadioContext: import("react").Context<{
3
+ defaultValue?: string | undefined;
4
+ isControlled: boolean;
5
+ name?: string | undefined;
6
+ onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
7
+ required?: boolean | undefined;
8
+ value?: string | undefined;
9
+ }>;
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
3
+ /** The value of the radio button to be initially selected. For uncontrolled usage */
4
+ defaultValue?: string;
5
+ /** Help text for the radio group. */
6
+ description?: string;
7
+ /** The `name` attribute for the radio buttons. */
8
+ name: string;
9
+ /** The label for the radio group. */
10
+ label?: string;
11
+ /** Event handler called when the value changes. */
12
+ onChange?(value: string): void;
13
+ /** Whether a value selection is required. */
14
+ required?: boolean;
15
+ /** The value of the selected radio button. For controlled usage */
16
+ value?: string;
17
+ }
18
+ export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,2 @@
1
+ export * from './Radio';
2
+ export * from './RadioGroup';
@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import classNames from "clsx";
33
33
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
34
- import { useCallback, useState, useEffect, useId, forwardRef, useContext, createContext, isValidElement, Children, cloneElement, useMemo, useRef } from "react";
34
+ import { useCallback, useState, useEffect, useId, forwardRef, useContext, Children, isValidElement, cloneElement, createContext, useMemo, useRef } from "react";
35
35
  var __defProp2 = Object.defineProperty;
36
36
  var __defProps2 = Object.defineProperties;
37
37
  var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
@@ -165,6 +165,41 @@ const AlertIcon = ({
165
165
  className: classNames(className, "text-orange")
166
166
  });
167
167
  };
168
+ const chipVariations = {
169
+ "blue-light": "bg-blue-light border-blue-light",
170
+ "red-light": "bg-red-light border-red-light",
171
+ "green-light": "bg-green-light border-green-light",
172
+ "orange-light": "bg-orange-light border-orange-light"
173
+ };
174
+ const iconColors = {
175
+ "blue-light": "text-blue-dark",
176
+ "red-light": "text-red",
177
+ "green-light": "text-green",
178
+ "orange-light": "text-black"
179
+ };
180
+ const Chip = (props) => {
181
+ const {
182
+ className,
183
+ color,
184
+ icon,
185
+ children,
186
+ variant = "filled"
187
+ } = props;
188
+ const chipVariation = color && chipVariations[color];
189
+ const iconColor = color && iconColors[color];
190
+ return /* @__PURE__ */ jsxs("div", {
191
+ className: classNames("inline-flex items-center overflow-hidden rounded-lg border-2 font-medium", chipVariation, className),
192
+ children: [icon && /* @__PURE__ */ jsx("div", {
193
+ className: classNames("px-3 py-2", iconColor),
194
+ children: icon
195
+ }), /* @__PURE__ */ jsx("div", {
196
+ className: classNames("flex-1 py-2 px-3", {
197
+ "bg-white": variant === "outline"
198
+ }),
199
+ children
200
+ })]
201
+ });
202
+ };
168
203
  function assignRef(ref, value) {
169
204
  if (ref == null)
170
205
  return;
@@ -309,34 +344,92 @@ const buttonVariations = {
309
344
  };
310
345
  const Button = forwardRef((props, ref) => {
311
346
  const _a = props, {
347
+ children: childrenFromProp,
312
348
  className,
313
349
  color: colorFromProp,
314
350
  href,
351
+ loading,
315
352
  type = "button",
316
353
  variant = "primary"
317
354
  } = _a, rest = __objRest(_a, [
355
+ "children",
318
356
  "className",
319
357
  "color",
320
358
  "href",
359
+ "loading",
321
360
  "type",
322
361
  "variant"
323
362
  ]);
324
363
  const colorFromContext = useContext(ButtonColorContext);
325
364
  const color = colorFromProp != null ? colorFromProp : colorFromContext;
326
365
  const buttonVariation = buttonVariations[`${color}-${variant}`];
327
- const classes = classNames(className, buttonVariation, "button relative no-underline inline-block border-solid border-2 px-6 py-2 rounded-xl transition-all duration-200 font-medium w-fit disabled:pointer-events-none disabled:text-black disabled:bg-gray-light disabled:border-gray-light hover:rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-black ring-offset-2");
366
+ const classes = classNames(className, buttonVariation, "button");
367
+ const children = loading ? /* @__PURE__ */ jsx(Loader, {
368
+ children: childrenFromProp
369
+ }) : childrenFromProp;
328
370
  return /* @__PURE__ */ jsx(Fragment, {
329
- children: href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, rest), {
371
+ children: href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({
372
+ "aria-busy": loading ? true : void 0
373
+ }, rest), {
330
374
  href,
331
375
  ref,
332
- className: classes
333
- })) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({}, rest), {
376
+ className: classes,
377
+ children
378
+ })) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({
379
+ "aria-busy": loading ? true : void 0
380
+ }, rest), {
334
381
  type,
335
382
  ref,
336
- className: classes
383
+ className: classes,
384
+ children
337
385
  }))
338
386
  });
339
387
  });
388
+ const Loader = (props) => {
389
+ return /* @__PURE__ */ jsxs(Fragment, {
390
+ children: [deeplyWrapStrings(props.children), /* @__PURE__ */ jsx("span", {
391
+ className: "!visible absolute top-1 bottom-1 left-1 right-1 grid place-items-center overflow-hidden bg-inherit",
392
+ "aria-hidden": true,
393
+ children: /* @__PURE__ */ jsx(LoadingIcon, {
394
+ className: "animate-spin"
395
+ })
396
+ })]
397
+ });
398
+ };
399
+ const LoadingIcon = (props) => /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadValues({
400
+ width: "1.25em",
401
+ height: "1.25em",
402
+ fill: "none",
403
+ viewBox: "0 0 24 24"
404
+ }, props), {
405
+ children: [/* @__PURE__ */ jsx("path", {
406
+ stroke: "currentColor",
407
+ strokeLinecap: "round",
408
+ strokeWidth: 4,
409
+ d: "M22 12C22 10.2897 21.5613 8.60798 20.726 7.11558C19.8906 5.62318 18.6864 4.36998 17.2285 3.47575C15.7706 2.58152 14.1077 2.07615 12.3988 2.00795C10.6898 1.93975 8.99195 2.311 7.46743 3.0862C5.9429 3.86141 4.64268 5.01466 3.69102 6.43575C2.73937 7.85683 2.1681 9.49824 2.0318 11.2031C1.89551 12.908 2.19875 14.6193 2.91255 16.1735C3.62634 17.7277 4.72684 19.0729 6.10884 20.0805"
410
+ }), /* @__PURE__ */ jsx("circle", {
411
+ cx: 21,
412
+ cy: 18,
413
+ r: 2,
414
+ fill: "currentColor"
415
+ })]
416
+ }));
417
+ function deeplyWrapStrings(children) {
418
+ return Children.map(children, (child) => {
419
+ if (!isValidElement(child)) {
420
+ return typeof child === "string" ? /* @__PURE__ */ jsx("span", {
421
+ children: child
422
+ }) : child;
423
+ }
424
+ if (child.props.children) {
425
+ const props = {
426
+ children: deeplyWrapStrings(child.props.children)
427
+ };
428
+ child = cloneElement(child, props);
429
+ }
430
+ return child;
431
+ });
432
+ }
340
433
  const ButtonColorContext = createContext("standard");
341
434
  const CampaignContext = createContext(true);
342
435
  const Campaign = (props) => {
@@ -974,6 +1067,103 @@ const NavbarExpandedMobileContent = (props) => {
974
1067
  children: props.children
975
1068
  });
976
1069
  };
1070
+ const RadioContext = createContext({
1071
+ defaultValue: void 0,
1072
+ isControlled: false,
1073
+ name: void 0,
1074
+ onChange() {
1075
+ },
1076
+ required: false,
1077
+ value: void 0
1078
+ });
1079
+ const Radio = forwardRef((props, ref) => {
1080
+ const _a = props, {
1081
+ children,
1082
+ className
1083
+ } = _a, rest = __objRest(_a, [
1084
+ "children",
1085
+ "className"
1086
+ ]);
1087
+ const {
1088
+ defaultValue,
1089
+ isControlled,
1090
+ name,
1091
+ onChange,
1092
+ required,
1093
+ value
1094
+ } = useContext(RadioContext);
1095
+ return /* @__PURE__ */ jsxs("label", {
1096
+ className: classNames(className, "cursor-pointer"),
1097
+ children: [/* @__PURE__ */ jsx("input", __spreadValues({
1098
+ className: "radio",
1099
+ defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
1100
+ checked: isControlled ? rest.value === value : void 0,
1101
+ name,
1102
+ onChange: isControlled ? onChange : void 0,
1103
+ required,
1104
+ type: "radio",
1105
+ ref
1106
+ }, rest)), children]
1107
+ });
1108
+ });
1109
+ const RadioGroup = forwardRef((props, ref) => {
1110
+ const isControlled = "value" in props;
1111
+ const _a = props, {
1112
+ className,
1113
+ defaultValue,
1114
+ description,
1115
+ children,
1116
+ label,
1117
+ name,
1118
+ onChange: onChangeProp,
1119
+ required,
1120
+ value
1121
+ } = _a, rest = __objRest(_a, [
1122
+ "className",
1123
+ "defaultValue",
1124
+ "description",
1125
+ "children",
1126
+ "label",
1127
+ "name",
1128
+ "onChange",
1129
+ "required",
1130
+ "value"
1131
+ ]);
1132
+ const onChange = useCallback((event) => {
1133
+ const nextValue = event.target.value;
1134
+ onChangeProp == null ? void 0 : onChangeProp(nextValue);
1135
+ }, [onChangeProp]);
1136
+ const group = useMemo(() => ({
1137
+ defaultValue,
1138
+ isControlled,
1139
+ name,
1140
+ onChange,
1141
+ required,
1142
+ value
1143
+ }), [defaultValue, isControlled, name, onChange, required, value]);
1144
+ const groupId = useId();
1145
+ const labelId = `${groupId}:label`;
1146
+ const helpId = `${groupId}:help`;
1147
+ return /* @__PURE__ */ jsx(RadioContext.Provider, {
1148
+ value: group,
1149
+ children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
1150
+ "aria-describedby": description ? helpId : void 0,
1151
+ "aria-labelledby": label ? labelId : void 0,
1152
+ className: classNames(className, "flex flex-col gap-4"),
1153
+ role: "radiogroup",
1154
+ ref
1155
+ }, rest), {
1156
+ children: [label && /* @__PURE__ */ jsx(FormLabel, {
1157
+ id: labelId,
1158
+ isRequired: required,
1159
+ children: label
1160
+ }), children, /* @__PURE__ */ jsx(FormHelperText, {
1161
+ id: helpId,
1162
+ children: description
1163
+ })]
1164
+ }))
1165
+ });
1166
+ });
977
1167
  const Snackbar = (props) => {
978
1168
  const {
979
1169
  heading,
@@ -1172,4 +1362,4 @@ const Select = forwardRef((props, ref) => {
1172
1362
  })]
1173
1363
  });
1174
1364
  });
1175
- export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
1365
+ export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Chip, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './Alert';
2
+ export * from './Chip';
2
3
  export * from './Banner';
3
4
  export * from './Button';
4
5
  export * from './Campaign';
@@ -10,6 +11,7 @@ export * from './Hero';
10
11
  export * from './Input';
11
12
  export * from './Link';
12
13
  export * from './Navbar';
14
+ export * from './Radio';
13
15
  export * from './Snackbar';
14
16
  export * from './StepList';
15
17
  export * from './TextArea';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-react",
3
- "version": "1.1.2",
3
+ "version": "1.3.0",
4
4
  "description": "OBOS Grunnmuren design system React components",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -17,32 +17,33 @@
17
17
  ],
18
18
  "types": "./dist/index.d.ts",
19
19
  "devDependencies": {
20
- "@babel/core": "7.18.6",
21
- "@obosbbl/grunnmuren-tailwind": "^0.4.2",
22
- "@storybook/addon-controls": "6.5.9",
23
- "@storybook/addon-docs": "6.5.9",
20
+ "@babel/core": "7.18.10",
21
+ "@obosbbl/grunnmuren-tailwind": "0.6.0",
22
+ "@storybook/addon-controls": "6.5.10",
23
+ "@storybook/addon-docs": "6.5.10",
24
24
  "@storybook/addon-postcss": "2.0.0",
25
- "@storybook/builder-webpack5": "6.5.9",
26
- "@storybook/manager-webpack5": "6.5.9",
27
- "@storybook/react": "6.5.9",
28
- "@types/react": "18.0.14",
29
- "@types/react-dom": "18.0.5",
25
+ "@storybook/builder-webpack5": "6.5.10",
26
+ "@storybook/manager-webpack5": "6.5.10",
27
+ "@storybook/react": "6.5.10",
28
+ "@types/react": "18.0.17",
29
+ "@types/react-dom": "18.0.6",
30
30
  "@vitejs/plugin-react": "1.3.2",
31
- "postcss": "8.4.14",
31
+ "postcss": "8.4.16",
32
32
  "react": "18.2.0",
33
33
  "react-dom": "18.2.0",
34
34
  "require-from-string": "2.0.2",
35
- "tailwindcss": "3.1.4",
36
- "vite": "2.9.13",
37
- "webpack": "5.73.0"
35
+ "rimraf": "3.0.2",
36
+ "tailwindcss": "3.1.8",
37
+ "vite": "2.9.15",
38
+ "webpack": "5.74.0"
38
39
  },
39
40
  "dependencies": {
40
- "@obosbbl/grunnmuren-icons": "^0.3.0",
41
- "clsx": "1.2.0"
41
+ "@obosbbl/grunnmuren-icons": "^0.4.0",
42
+ "clsx": "1.2.1"
42
43
  },
43
44
  "peerDependencies": {
44
- "react": "^18",
45
- "@obosbbl/grunnmuren-tailwind": "^0.4.2"
45
+ "@obosbbl/grunnmuren-tailwind": "^0.6.0",
46
+ "react": "^18"
46
47
  },
47
48
  "peerDependenciesMeta": {
48
49
  "@obosbbl/grunnmuren-tailwind": {
@@ -52,7 +53,7 @@
52
53
  "scripts": {
53
54
  "build": "pnpm run build:lib && pnpm run build:types",
54
55
  "build:lib": "vite build",
55
- "build:types": "tsc --emitDeclarationOnly --declaration",
56
+ "build:types": "tsc --emitDeclarationOnly --declaration && rimraf 'dist/**/stories/'",
56
57
  "dev": "start-storybook -p 6006 --ci",
57
58
  "build:storybook": "build-storybook"
58
59
  }