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

package/README.md

@@ -0,0 +1,27 @@
+# @obosbbl/grunnmuren-react
+
+[![npm canary version](https://img.shields.io/npm/v/@obosbbl%2Fgrunnmuren-react/canary.svg)](https://www.npmjs.com/package/@obosbbl/grunnmuren-react)
+
+Grunnmuren React components.
+
+## Install
+
+```sh
+# npm
+npm install @obosbbl/grunnmuren-react@canary
+
+# pnpm
+pnpm add @obosbbl/grunnmuren-react@canary
+```
+
+## Usage
+
+Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.
+
+```js
+import { Button } from '@obosbbl/grunnmuren-react/button';
+
+export default function () {
+  return <Button>Click me</Button>;
+}
+```

package/dist/button/Button.d.mts

@@ -7,6 +7,7 @@ import { VariantProps } from 'cva';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
     color?: "green" | "mint" | "white" | undefined;
+    isIconOnly?: boolean | undefined;
 } & ({
     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 | {
         [x: string]: any;

package/dist/button/Button.d.ts

@@ -7,6 +7,7 @@ import { VariantProps } from 'cva';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
     color?: "green" | "mint" | "white" | undefined;
+    isIconOnly?: boolean | undefined;
 } & ({
     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 | {
         [x: string]: any;

package/dist/button/Button.mjs

@@ -11,9 +11,7 @@ const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {
 
 const buttonVariants = cva({
   base: [
-    "inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-    // Spaccing when using the button with icons
-    "[&>svg]:first-of-type:mr-2.5 [&>svg]:last-of-type:ml-2.5"
+    "inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
   ],
   variants: {
     /**
@@ -34,6 +32,17 @@ const buttonVariants = cva({
       green: "focus-visible:ring-black",
       mint: "focus-visible:ring-mint focus-visible:ring-offset-green-dark",
       white: "focus-visible:ring-white focus-visible:ring-offset-blue"
+    },
+    /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */
+    isIconOnly: {
+      true: "p-2 [&>svg]:h-7 [&>svg]:w-7",
+      false: (
+        // The of-type classes takes care to add spacing when the button is used with icons
+        "px-4 py-2 [&>svg]:first-of-type:mr-2.5 [&>svg]:last-of-type:ml-2.5"
+      )
     }
   },
   compoundVariants: [
@@ -82,11 +91,21 @@ const buttonVariants = cva({
   ],
   defaultVariants: {
     variant: "primary",
-    color: "green"
+    color: "green",
+    isIconOnly: false
   }
 });
 function Button(props) {
-  const { children, className, color, loading, variant, style, ...restProps } = props;
+  const {
+    children,
+    className,
+    color,
+    isIconOnly,
+    loading,
+    variant,
+    style,
+    ...restProps
+  } = props;
   const buttonRef = useRef(null);
   const [widthOverride, setWidthOverride] = useState();
   useClientLayoutEffect(() => {
@@ -111,7 +130,7 @@ function Button(props) {
       Component,
       {
         "aria-busy": loading ? true : void 0,
-        className: buttonVariants({ className, color, variant }),
+        className: buttonVariants({ className, color, isIconOnly, variant }),
         ref: buttonRef,
         style: {
           ...style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.0",
+  "version": "2.0.0-canary.1",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"