@obosbbl/grunnmuren-react 1.14.11 → 2.0.0-canary.0

package/dist/textfield/index.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
+
+type TextFieldProps = {
+    /** Additional CSS className for the element. */
+    className?: string;
+    /** Help text for the form control. */
+    description?: React.ReactNode;
+    /** Error message for the form control. Automatically sets `isInvalid` to true */
+    errorMessage?: React.ReactNode;
+    /** Element to be rendered in the left side of the input. */
+    leftAddon?: React.ReactNode;
+    /** Label for the form control. */
+    label?: React.ReactNode;
+    /** Element to be rendered in the right side of the input. */
+    rightAddon?: React.ReactNode;
+    /** Placeholder text. Only visible when the input value is empty. */
+    placeholder?: string;
+    /**
+     * Text alignment of the input
+     * @default left
+     */
+    textAlign?: 'left' | 'right';
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
+    /** Add a divider between the left/right addons and the input */
+    withAddonDivider?: boolean;
+} & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
+declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
+
+export { TextField, type TextFieldProps };

package/dist/textfield/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
+
+type TextFieldProps = {
+    /** Additional CSS className for the element. */
+    className?: string;
+    /** Help text for the form control. */
+    description?: React.ReactNode;
+    /** Error message for the form control. Automatically sets `isInvalid` to true */
+    errorMessage?: React.ReactNode;
+    /** Element to be rendered in the left side of the input. */
+    leftAddon?: React.ReactNode;
+    /** Label for the form control. */
+    label?: React.ReactNode;
+    /** Element to be rendered in the right side of the input. */
+    rightAddon?: React.ReactNode;
+    /** Placeholder text. Only visible when the input value is empty. */
+    placeholder?: string;
+    /**
+     * Text alignment of the input
+     * @default left
+     */
+    textAlign?: 'left' | 'right';
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
+    /** Add a divider between the left/right addons and the input */
+    withAddonDivider?: boolean;
+} & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
+declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
+
+export { TextField, type TextFieldProps };

package/dist/textfield/index.mjs

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx, cva } from 'cva';
+import { TextField as TextField$1, Input } from 'react-aria-components';
+import { Label, Description, ErrorMessage } from '../label/index.mjs';
+
+const classes = {
+  base: cx("group flex flex-col gap-2"),
+  inputWrapper: cva({
+    base: [
+      "relative inline-flex flex-row items-center rounded-md border border-black py-2.5 text-sm font-normal leading-6",
+      // prevent icons in addons from being flexed and affected by the text size of the input
+      "[&>svg]:flex-none [&>svg]:text-base",
+      // focus
+      "focus-within:ring-2 focus-within:ring-blue-dark",
+      // invalid
+      "group-data-[invalid]:border-red group-data-[invalid]:outline group-data-[invalid]:outline-1 group-data-[invalid]:outline-red"
+    ],
+    variants: {
+      leftAddon: {
+        true: "pl-3"
+      },
+      rightAddon: {
+        true: "pr-3"
+      }
+    }
+  }),
+  input: cva({
+    base: "relative w-full px-3 font-normal leading-6 placeholder-[#727070] !outline-none",
+    variants: {
+      textAlign: {
+        right: "text-right",
+        left: ""
+      }
+    }
+  }),
+  divider: cx("block h-6 w-px flex-none bg-black")
+};
+function TextField(props) {
+  const {
+    className,
+    description,
+    errorMessage,
+    label,
+    leftAddon,
+    isRequired,
+    isInvalid: _isInvalid,
+    textAlign,
+    rightAddon,
+    withAddonDivider,
+    ...restProps
+  } = props;
+  const isInvalid = _isInvalid || errorMessage != null;
+  return /* @__PURE__ */ jsxs(
+    TextField$1,
+    {
+      ...restProps,
+      className: cx(className, classes.base),
+      isInvalid,
+      isRequired,
+      children: [
+        label && /* @__PURE__ */ jsx(Label, { children: label }),
+        description && /* @__PURE__ */ jsx(Description, { children: description }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classes.inputWrapper({
+              leftAddon: !!leftAddon,
+              rightAddon: !!rightAddon
+            }),
+            children: [
+              leftAddon,
+              withAddonDivider && leftAddon && /* @__PURE__ */ jsx(Divider, { className: "ml-3" }),
+              /* @__PURE__ */ jsx(Input, { className: classes.input({ textAlign }) }),
+              withAddonDivider && rightAddon && /* @__PURE__ */ jsx(Divider, { className: "mr-3" }),
+              rightAddon
+            ]
+          }
+        ),
+        errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
+      ]
+    }
+  );
+}
+function Divider({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: cx(className, classes.divider) });
+}
+
+export { TextField };

package/package.json

@@ -1,63 +1,62 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.11",
-  "description": "OBOS Grunnmuren design system React components",
-  "license": "MIT",
+  "version": "2.0.0-canary.0",
+  "description": "Grunnmuren components in React",
   "repository": {
-    "url": "https://github.com/code-obos/grunnmuren",
-    "directory": "packages/react"
+    "url": "https://github.com/code-obos/grunnmuren"
   },
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/grunnmuren.mjs"
+    "./button": {
+      "types": "./dist/button/Button.d.ts",
+      "default": "./dist/button/Button.mjs"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "default": "./dist/checkbox/index.mjs"
+    },
+    "./label": {
+      "types": "./dist/label/index.d.ts",
+      "default": "./dist/label/index.mjs"
+    },
+    "./radiogroup": {
+      "types": "./dist/radiogroup/index.d.ts",
+      "default": "./dist/radiogroup/index.mjs"
+    },
+    "./textfield": {
+      "types": "./dist/textfield/index.d.ts",
+      "default": "./dist/textfield/index.mjs"
+    }
   },
   "files": [
     "dist"
   ],
-  "types": "./dist/index.d.ts",
-  "devDependencies": {
-    "@storybook/addon-controls": "7.4.5",
-    "@storybook/addon-docs": "7.4.5",
-    "@storybook/addon-styling": "1.3.7",
-    "@storybook/builder-vite": "7.4.4",
-    "@storybook/react": "7.4.5",
-    "@storybook/react-vite": "7.4.4",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
-    "@vitejs/plugin-react": "4.0.4",
-    "autoprefixer": "10.4.16",
-    "postcss": "8.4.30",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "require-from-string": "2.0.2",
-    "rimraf": "5.0.1",
-    "storybook": "7.4.5",
-    "tailwindcss": "3.3.3",
-    "type-fest": "4.3.1",
-    "vite": "4.4.9",
-    "@obosbbl/grunnmuren-tailwind": "0.9.1"
-  },
   "dependencies": {
-    "@react-hookz/web": "23.1.0",
-    "clsx": "2.0.0",
-    "react-collapsed": "4.0.4",
-    "react-merge-refs": "2.0.2",
-    "@obosbbl/grunnmuren-icons": "^0.7.0"
+    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.0",
+    "cva": "1.0.0-beta.1",
+    "react-aria-components": "1.0.0-rc.0"
   },
   "peerDependencies": {
-    "@obosbbl/grunnmuren-tailwind": "^0.9.1",
     "react": "^18"
   },
-  "peerDependenciesMeta": {
-    "@obosbbl/grunnmuren-tailwind": {
-      "optional": true
+  "unbuild": {
+    "entries": [
+      "./src/button/Button.tsx",
+      "./src/checkbox/index.ts",
+      "./src/label/index.ts",
+      "./src/radiogroup/index.ts",
+      "./src/textfield/index.ts"
+    ],
+    "declaration": true,
+    "rollup": {
+      "esbuild": {
+        "jsx": "automatic"
+      }
     }
   },
   "scripts": {
-    "build": "pnpm run build:lib && pnpm run build:types",
-    "build:lib": "vite build",
-    "build:types": "tsc --emitDeclarationOnly --declaration && rimraf 'dist/**/stories/'",
-    "dev": "storybook dev -p 6006 --ci",
-    "build:storybook": "storybook build"
+    "build": "unbuild"
   }
 }

package/README.md

@@ -1,45 +0,0 @@
-# @obosbbl/grunnmuren-react
-
-Grunnmuren React components
-
-## Install
-
-```sh
-npm install @obosbbl/grunnmuren-react
-```
-
-You need to setup and configure [`@obosbbl/grunnmuren-tailwind`](../tailwind/) as well.
-
-## Develop
-
-Install packages in the root folder
-
-```
-cd ../..
-pnpm install
-```
-
-Build the icons
-
-```
-cd packages/icons
-pnpm run build
-```
-
-Finally, start up development server from this folder
-
-```
-pnpm dev
-```
-
-### Changeset
-
-All updates should be marked with a changeset.
-
-In the root folder, run
-
-```
-pnpm changeset
-```
-
-an followed the steps.

package/dist/Accordion/Accordion.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-interface AccordionProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const Accordion: {
-    (props: AccordionProps): import("react/jsx-runtime").JSX.Element;
-    Item: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-    Header: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
-};
-export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onChange?: (open: boolean) => void;
-}
-export declare const AccordionItem: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-interface AccordionHeaderProps<T extends React.ElementType> {
-    /**
-     * The heading element that wraps the accordion item's button. Should always be an element with `role="heading"`
-     * or a HTML heading tag. Change this to an appropriate heading level for your page.
-     * @default h3 */
-    as?: T;
-}
-export declare const AccordionHeader: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => import("react/jsx-runtime").JSX.Element;
-interface AccordionContentProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const AccordionContent: (props: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Accordion/index.d.ts

@@ -1 +0,0 @@
-export * from './Accordion';

package/dist/Accordion/stories/Accordion.stories.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
-export declare const Uncontrolled: () => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface AlertProps {
-    className?: string;
-    children?: React.ReactNode;
-    heading: string;
-    /** @default alert */
-    severity?: 'alert' | 'info';
-}
-export declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/index.d.ts

@@ -1 +0,0 @@
-export * from './Alert';

package/dist/Alert/stories/Alert.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/Banner/Banner.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { BlockBackgroundColor } from '../hooks';
-interface BannerProps {
-    bgColor?: BlockBackgroundColor;
-    className?: string;
-    children: React.ReactNode;
-    heading: string;
-    image: React.ReactNode;
-}
-export declare const Banner: (props: BannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Banner/BannerImage.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface BannerImageProps extends React.ComponentPropsWithoutRef<'img'> {
-    width: number;
-    height: number;
-}
-export declare const BannerImage: (props: BannerImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Banner/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Banner';
-export * from './BannerImage';

package/dist/Banner/stories/Banner.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export type ButtonColor = 'standard' | 'white' | 'light-green' | 'mint';
-export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
-    children: React.ReactNode;
-    className?: string;
-    color?: 'standard' | 'white' | 'light-green' | 'mint';
-    disabled?: boolean;
-    href?: string;
-    /** Renders the button in a loading state */
-    loading?: boolean;
-    /** @default button */
-    type?: 'button' | 'submit' | 'reset';
-    /** @default primary */
-    variant?: 'primary' | 'secondary';
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/Button/ButtonColorContext.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { ButtonColor } from '.';
-export declare const ButtonColorContext: import("react").Context<ButtonColor>;

package/dist/Button/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Button';
-export * from './ButtonColorContext';

package/dist/Button/stories/Button.stories.d.ts

@@ -1,31 +0,0 @@
-declare const Composition: {
-    readonly Text: "Text";
-    readonly Icon: "Icon";
-    readonly TextIcon: "Text Icon";
-    readonly IconText: "Icon Text";
-};
-type CompositionValue = (typeof Composition)[keyof typeof Composition];
-declare const _default: {
-    title: string;
-    argTypes: {
-        composition: {
-            options: ("Text" | "Icon" | "Text Icon" | "Icon Text")[];
-            control: string;
-            defaultValue: "Text";
-        };
-        disabled: {
-            control: string;
-            defaultValue: boolean;
-        };
-        loading: {
-            control: string;
-            defaultValue: boolean;
-        };
-    };
-};
-export default _default;
-export declare const Default: (props: {
-    composition: CompositionValue;
-    disabled: boolean;
-    loading: boolean;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/Campaign/Campaign.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-export interface CampaignProps<T extends React.ElementType> {
-    /** @default div */
-    as?: T;
-    body: React.ReactElement;
-    /** Use the `body` and `image` props. */
-    children?: never;
-    image: React.ReactElement;
-    /**
-     * Setting this to false changes the ordering of the body and the image on >= medium sceens.
-     * Use this to alternate the image's positon with lists of Campaigns.
-     * @default true
-     */
-    rightAlignBody?: boolean;
-}
-export interface CampaignBodyProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const CampaignBody: import("react").ForwardRefExoticComponent<CampaignBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface CampaignImageProps extends React.ComponentPropsWithoutRef<'img'> {
-}
-export declare const CampaignImage: import("react").ForwardRefExoticComponent<CampaignImageProps & import("react").RefAttributes<HTMLImageElement>>;
-declare const Campaign: import("react").ForwardRefExoticComponent<Omit<CampaignProps<import("react").ElementType<any>> & Omit<Omit<any, "ref">, keyof CampaignProps<T>>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Body: import("react").ForwardRefExoticComponent<CampaignBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-    Image: import("react").ForwardRefExoticComponent<CampaignImageProps & import("react").RefAttributes<HTMLImageElement>>;
-};
-export { Campaign };

package/dist/Campaign/index.d.ts

@@ -1 +0,0 @@
-export * from './Campaign';

package/dist/Campaign/stories/Campaign.stories.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithCustomImageComponent: () => import("react/jsx-runtime").JSX.Element;

package/dist/Card/Card.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface CardProps<T extends React.ElementType> {
-    /** @default div */
-    as?: T;
-    /** @default white */
-    bgColor?: 'white' | 'gray';
-}
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps<import("react").ElementType<any>> & Omit<Omit<any, "ref">, keyof CardProps<T>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/CardContent.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-interface CardContentProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const CardContent: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/Card/CardImage.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface CardImageProps extends React.ComponentPropsWithoutRef<'img'> {
-    width: number;
-    height: number;
-}
-export declare const CardImage: import("react").ForwardRefExoticComponent<CardImageProps & import("react").RefAttributes<HTMLImageElement>>;
-export {};

package/dist/Card/CardLinkOverlay.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export interface CardLinkOverlayProps extends React.ComponentPropsWithoutRef<'a'> {
-}
-export declare const CardLinkOverlay: import("react").ForwardRefExoticComponent<CardLinkOverlayProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Card/CardList.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { BlockBackgroundColor } from '../hooks';
-interface CardListProps extends React.ComponentPropsWithoutRef<'div'> {
-    bgColor?: BlockBackgroundColor;
-}
-export declare const CardList: import("react").ForwardRefExoticComponent<CardListProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/Card/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Card';
-export * from './CardImage';
-export * from './CardList';
-export * from './CardContent';
-export * from './CardLinkOverlay';

package/dist/Card/stories/Card.stories.d.ts

@@ -1,34 +0,0 @@
-import { CardProps } from '../../';
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-    argTypes: {
-        bgColor: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    (props: CardProps<'div'>): import("react/jsx-runtime").JSX.Element;
-    args: {
-        bgColor: string;
-    };
-};
-export declare const Link: {
-    (props: CardProps<'div'>): import("react/jsx-runtime").JSX.Element;
-    args: {
-        bgColor: string;
-    };
-};
-export declare const CardList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-};

package/dist/Checkbox/Checkbox.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-/**
- * CSS inspired by https://moderncss.dev/pure-css-custom-checkbox-style/
- */
-export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
-    children: React.ReactNode;
-    className?: string;
-    /** Error message for the form control */
-    error?: string;
-    /** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
-    disableValidation?: boolean;
-}
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export * from './Checkbox';

package/dist/Checkbox/stories/Checkbox.stories.d.ts

@@ -1,8 +0,0 @@
-declare const metadata: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default metadata;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/Chip/Chip.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type ChipColor = 'sky' | 'mint' | 'red-light' | 'orange-light' | 'green-light' | 'blue-light';
-export interface ChipProps {
-    icon?: React.ReactNode;
-    color?: ChipColor;
-    className?: string;
-    children: React.ReactNode;
-    variant?: 'outline' | 'filled';
-}
-export declare const Chip: (props: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Chip/index.d.ts

@@ -1 +0,0 @@
-export * from './Chip';

package/dist/Chip/stories/Chip.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/Footer/Footer.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface FooterProps {
-    className?: string;
-    children: React.ReactNode;
-}
-export declare const Footer: (props: FooterProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Footer/index.d.ts

@@ -1 +0,0 @@
-export * from './Footer';

package/dist/Footer/stories/Footer.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;