@obosbbl/grunnmuren-react 1.1.1 → 1.2.1

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface RadioProps extends React.ComponentPropsWithoutRef<'input'> {
+    children: React.ReactNode;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio/RadioContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const RadioContext: import("react").Context<{
+    defaultValue?: string | undefined;
+    isControlled: boolean;
+    name?: string | undefined;
+    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+    required?: boolean | undefined;
+    value?: string | undefined;
+}>;

package/dist/Radio/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** The value of the radio button to be initially selected. For uncontrolled usage */
+    defaultValue?: string;
+    /** Help text for the radio group. */
+    description?: string;
+    /** The `name` attribute for the radio buttons. */
+    name: string;
+    /** The label for the radio group. */
+    label?: string;
+    /** Event handler called when the value changes. */
+    onChange?(value: string): void;
+    /** Whether a value selection is required. */
+    required?: boolean;
+    /** The value of the selected radio button. For controlled usage */
+    value?: string;
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/dist/grunnmuren.es.js

@@ -324,7 +324,7 @@ const Button = forwardRef((props, ref) => {
   const colorFromContext = useContext(ButtonColorContext);
   const color = colorFromProp != null ? colorFromProp : colorFromContext;
   const buttonVariation = buttonVariations[`${color}-${variant}`];
-  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");
+  const classes = classNames(className, buttonVariation, "button");
   return /* @__PURE__ */ jsx(Fragment, {
     children: href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, rest), {
       href,
@@ -479,7 +479,7 @@ const Checkbox = forwardRef((props, ref) => {
       className: classNames(className, "inline-flex cursor-pointer items-center"),
       children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
         id,
-        className: classNames("checkbox checked:bg-green checked:border-green bg-whit mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid text-white focus:outline-none focus:ring-2", {
+        className: classNames("checkbox checked:bg-green checked:border-green mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
           "border-gray-dark focus:ring-black": !error,
           "border-red focus:ring-red": !!error
         }),
@@ -974,6 +974,103 @@ const NavbarExpandedMobileContent = (props) => {
     children: props.children
   });
 };
+const RadioContext = createContext({
+  defaultValue: void 0,
+  isControlled: false,
+  name: void 0,
+  onChange() {
+  },
+  required: false,
+  value: void 0
+});
+const Radio = forwardRef((props, ref) => {
+  const _a = props, {
+    children,
+    className
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "className"
+  ]);
+  const {
+    defaultValue,
+    isControlled,
+    name,
+    onChange,
+    required,
+    value
+  } = useContext(RadioContext);
+  return /* @__PURE__ */ jsxs("label", {
+    className: classNames(className, "cursor-pointer"),
+    children: [/* @__PURE__ */ jsx("input", __spreadValues({
+      className: "radio",
+      defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
+      checked: isControlled ? rest.value === value : void 0,
+      name,
+      onChange: isControlled ? onChange : void 0,
+      required,
+      type: "radio",
+      ref
+    }, rest)), children]
+  });
+});
+const RadioGroup = forwardRef((props, ref) => {
+  const isControlled = "value" in props;
+  const _a = props, {
+    className,
+    defaultValue,
+    description,
+    children,
+    label,
+    name,
+    onChange: onChangeProp,
+    required,
+    value
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "defaultValue",
+    "description",
+    "children",
+    "label",
+    "name",
+    "onChange",
+    "required",
+    "value"
+  ]);
+  const onChange = useCallback((event) => {
+    const nextValue = event.target.value;
+    onChangeProp == null ? void 0 : onChangeProp(nextValue);
+  }, [onChangeProp]);
+  const group = useMemo(() => ({
+    defaultValue,
+    isControlled,
+    name,
+    onChange,
+    required,
+    value
+  }), [defaultValue, isControlled, name, onChange, required, value]);
+  const groupId = useId();
+  const labelId = `${groupId}:label`;
+  const helpId = `${groupId}:help`;
+  return /* @__PURE__ */ jsx(RadioContext.Provider, {
+    value: group,
+    children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
+      "aria-describedby": description ? helpId : void 0,
+      "aria-labelledby": label ? labelId : void 0,
+      className: classNames(className, "flex flex-col gap-4"),
+      role: "radiogroup",
+      ref
+    }, rest), {
+      children: [label && /* @__PURE__ */ jsx(FormLabel, {
+        id: labelId,
+        isRequired: required,
+        children: label
+      }), children, /* @__PURE__ */ jsx(FormHelperText, {
+        id: helpId,
+        children: description
+      })]
+    }))
+  });
+});
 const Snackbar = (props) => {
   const {
     heading,
@@ -1172,4 +1269,4 @@ const Select = forwardRef((props, ref) => {
     })]
   });
 });
-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 };
+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, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './Hero';
 export * from './Input';
 export * from './Link';
 export * from './Navbar';
+export * from './Radio';
 export * from './Snackbar';
 export * from './StepList';
 export * from './TextArea';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,32 +17,33 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.18.6",
-    "@obosbbl/grunnmuren-tailwind": "^0.4.1",
-    "@storybook/addon-controls": "6.5.9",
-    "@storybook/addon-docs": "6.5.9",
+    "@babel/core": "7.18.10",
+    "@obosbbl/grunnmuren-tailwind": "0.5.1",
+    "@storybook/addon-controls": "6.5.10",
+    "@storybook/addon-docs": "6.5.10",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/react": "6.5.9",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@types/react": "18.0.17",
+    "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
-    "tailwindcss": "3.1.4",
-    "vite": "2.9.13",
-    "webpack": "5.73.0"
+    "rimraf": "3.0.2",
+    "tailwindcss": "3.1.8",
+    "vite": "2.9.15",
+    "webpack": "5.74.0"
   },
   "dependencies": {
     "@obosbbl/grunnmuren-icons": "^0.3.0",
-    "clsx": "1.2.0"
+    "clsx": "1.2.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "@obosbbl/grunnmuren-tailwind": "^0.4.1"
+    "@obosbbl/grunnmuren-tailwind": "^0.5.1",
+    "react": "^18"
   },
   "peerDependenciesMeta": {
     "@obosbbl/grunnmuren-tailwind": {
@@ -52,7 +53,7 @@
   "scripts": {
     "build": "pnpm run build:lib && pnpm run build:types",
     "build:lib": "vite build",
-    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "build:types": "tsc --emitDeclarationOnly --declaration && rimraf 'dist/**/stories/'",
     "dev": "start-storybook -p 6006 --ci",
     "build:storybook": "build-storybook"
   }