@obosbbl/grunnmuren-react 2.3.4 → 3.0.0

package/dist/index.d.mts

@@ -80,7 +80,7 @@ declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
  */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    color?: "mint" | "white" | "green" | undefined;
+    color?: "mint" | "white" | "blue" | undefined;
     isIconOnly?: boolean | undefined;
     isPending?: boolean | undefined;
 } & ({
@@ -93,12 +93,6 @@ declare const buttonVariants: (props?: ({
 type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     children?: React.ReactNode;
     href?: LinkProps['href'];
-    /**
-     * Display the button in a loading state
-     * @deprecated Use isPending instead.
-     * @default false
-     */
-    isLoading?: boolean;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
     /** Ref to the element. */
@@ -158,11 +152,6 @@ type ComboboxProps<T extends object> = {
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
     errorMessage?: React.ReactNode;
-    /**
-     * Display the dropdown button trigger in a pending state
-     * @deprecated Use isPending instead.
-     */
-    isLoading?: boolean;
     /**
      * Display the dropdown button trigger in a pending state
      * @default false

package/dist/index.mjs

@@ -291,14 +291,14 @@ const translations$1 = {
      */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
-            secondary: 'no-underline shadow-[inset_0_0_0_2px]',
+            secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
      * Adjusts the color of the button for usage on different backgrounds.
-     * @default green
+     * @default blue
      */ color: {
-            green: 'focus-visible:outline-focus',
+            blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
@@ -317,18 +317,18 @@ const translations$1 = {
     },
     compoundVariants: [
         {
-            color: 'green',
+            color: 'blue',
             variant: 'primary',
             // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white'
+            className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
         },
         {
-            color: 'green',
+            color: 'blue',
             variant: 'secondary',
-            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-black'
+            className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
         },
         {
-            color: 'green',
+            color: 'blue',
             variant: 'tertiary',
             className: '[&_[role="progressbar"]]:text-black'
         },
@@ -341,7 +341,7 @@ const translations$1 = {
         {
             color: 'mint',
             variant: 'secondary',
-            className: 'text-mint shadow-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+            className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
         },
         {
             color: 'mint',
@@ -356,7 +356,7 @@ const translations$1 = {
         {
             color: 'white',
             variant: 'secondary',
-            className: 'text-white shadow-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
         },
         {
             color: 'white',
@@ -366,7 +366,7 @@ const translations$1 = {
     ],
     defaultVariants: {
         variant: 'primary',
-        color: 'green',
+        color: 'blue',
         isIconOnly: false,
         isPending: false
     }
@@ -377,8 +377,7 @@ function isLinkProps$1(props) {
 }
 function Button({ ref = null, ...props }) {
     [props, ref] = useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ...restProps } = props;
-    const isPending = _isPending || isLoading;
+    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
         className: props.className,
         color,
@@ -638,8 +637,7 @@ function InputAddonDivider() {
 }
 
 function Combobox(props) {
-    const { className, children, description, errorMessage, isLoading, isPending: _isPending, label, isInvalid: _isInvalid, ref, ...restProps } = props;
-    const isPending = _isPending || isLoading;
+    const { className, children, description, errorMessage, isPending, label, isInvalid: _isInvalid, ref, ...restProps } = props;
     // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
     // which will override any built in validation
     const isInvalid = !!errorMessage || _isInvalid;
@@ -1802,7 +1800,7 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                         children: children
                     })
                 }),
-                /*#__PURE__*/ jsx("ul", {
+                controlledOrUncontrolledFiles.length > 0 && /*#__PURE__*/ jsx("ul", {
                     className: "mt-4 grid gap-y-2",
                     children: controlledOrUncontrolledFiles.map((file, fileIndex)=>{
                         let fileName = file.name;

package/package.json

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