@obosbbl/grunnmuren-react 2.0.0-canary.1 → 2.0.0-canary.2

package/dist/radiogroup/index.mjs

@@ -1,65 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from 'cva';
-import { RadioGroup as RadioGroup$1, Radio as Radio$1 } from 'react-aria-components';
-import { Label, Description, ErrorMessage } from '../label/index.mjs';
-
-function RadioGroup(props) {
-  const {
-    children,
-    className,
-    description,
-    errorMessage,
-    label,
-    isRequired,
-    isInvalid: _isInvalid,
-    ...restProps
-  } = props;
-  const isInvalid = _isInvalid || errorMessage != null;
-  return /* @__PURE__ */ jsxs(
-    RadioGroup$1,
-    {
-      ...restProps,
-      className: cx(className, "flex flex-col gap-2"),
-      isInvalid,
-      isRequired,
-      children: [
-        label && /* @__PURE__ */ jsx(Label, { children: label }),
-        description && /* @__PURE__ */ jsx(Description, { children: description }),
-        children,
-        errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
-      ]
-    }
-  );
-}
-
-const defaultClasses = cx([
-  "relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7",
-  // the radio button itself
-  "before:flex-none before:rounded-full before:border-2 before:border-black",
-  // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
-  // For the ::before psuedo element the line height of the label is always 1em.
-  // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
-  // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
-  "before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]",
-  // selected
-  "data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]",
-  // hover
-  "data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light",
-  // focus
-  "data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]",
-  // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
-  // so we use an inner outline to artifically pad the border
-  "data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red"
-]);
-function Radio(props) {
-  const { children, className, description, ...restProps } = props;
-  return /* @__PURE__ */ jsxs(Radio$1, { ...restProps, className: cx(className, defaultClasses), children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute -left-2.5 top-0 z-10 h-11 w-11 " }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      children,
-      description && /* @__PURE__ */ jsx(Description, { className: "mt-2 block", children: description })
-    ] })
-  ] });
-}
-
-export { Radio, RadioGroup };

package/dist/textfield/index.d.mts

@@ -1,31 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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 };