@obosbbl/grunnmuren-react 2.3.3 → 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

@@ -168,7 +168,7 @@ function AccordionItem(props) {
                     HeadingContext,
                     {
                         // Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
-                        className: 'font-semibold leading-7 -mx-2 text-base',
+                        className: 'font-medium leading-7 -mx-2 text-base',
                         // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
                         level: 3,
                         _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
@@ -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;
@@ -2025,6 +2023,7 @@ const oneColumnLayout = [
     // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
     'lg:items-end'
 ];
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
 const variants = cva({
     base: [
         'container px-0',
@@ -2045,19 +2044,26 @@ const variants = cva({
      * */ variant: {
             standard: [
                 roundedMediaCorners,
-                oneColumnLayout
+                oneColumnLayout,
+                nonFullBleedAspectRatiosForSmallScreens,
+                'lg:*:data-[slot="media"]:*:aspect-2/1'
             ],
             'full-bleed': [
                 oneColumnLayout,
                 // Position the media and carousel content to fill the entire viewport width
                 '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
-                '*:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
+                // Special case for Carousel, where the Media is nested inside a CarouselItem
+                '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full *:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
                 // This is necessary due to the absolute positioning of the media and carousel containers in this variant
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                '*:data-[slot="media"]:*:h-70 sm:*:data-[slot="media"]:*:h-[25rem] md:*:data-[slot="media"]:*:h-[30rem] lg:*:data-[slot="media"]:*:h-[35rem] xl:*:data-[slot="media"]:*:h-[40rem] 2xl:*:data-[slot="media"]:*:h-[42rem] 3xl:*:data-[slot="media"]:*:h-[48rem] 4xl:*:data-[slot="media"]:*:h-[53rem]',
+                '**:data-[slot="media"]:h-70 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '**:data-[slot="media"]:*:h-70 sm:**:data-[slot="media"]:*:h-[25rem] md:**:data-[slot="media"]:*:h-[30rem] lg:**:data-[slot="media"]:*:h-[35rem] xl:**:data-[slot="media"]:*:h-[40rem] 2xl:**:data-[slot="media"]:*:h-[42rem] 3xl:**:data-[slot="media"]:*:h-[48rem] 4xl:**:data-[slot="media"]:*:h-[53rem]',
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
                 '*:data-[slot="carousel"]:h-70 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
+                // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
+                '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
                 '**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
                 // Override rounded corners of Carousel slots
                 '*:data-[slot="carousel"]:*:rounded-none'
@@ -2067,6 +2073,7 @@ const variants = cva({
                 // Vertical spacing in the <Content>
                 'lg:*:data-[slot="content"]:gap-y-7',
                 roundedMediaCorners,
+                nonFullBleedAspectRatiosForSmallScreens,
                 // Set media aspect ratio to 1:1 (square)
                 'lg:*:data-[slot="media"]:*:aspect-[1/1]'
             ]
@@ -2087,7 +2094,9 @@ const Hero = ({ variant, className, children })=>{
                 HeadingContext,
                 {
                     // Sets the default heading size for the Hero based on the variant
-                    size: variant === 'two-column' ? 'xl' : 'l'
+                    size: variant === 'two-column' ? 'xl' : 'l',
+                    className: // word-break:break-word to allow long words to break (this is necessary to make hyphens work in grid containers in Safari)
+                    'hyphens-auto text-pretty [word-break:break-word]'
                 }
             ],
             [
@@ -2272,8 +2281,7 @@ const CarouselItem = ({ className, children, id })=>{
                     MediaContext,
                     {
                         fit: 'cover',
-                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:w-full', // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                        '*:h-70 sm:*:h-[25rem] lg:*:h-[35rem] xl:*:h-[40rem] 2xl:*:h-[42rem] 3xl:*:h-[48rem] 4xl:*:h-[53rem]')
+                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-1/1 max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
                     }
                 ]
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.3.3",
+  "version": "3.0.0",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -35,7 +35,7 @@
     "react": "^19"
   },
   "devDependencies": {
-    "tailwindcss": "4.1.7"
+    "tailwindcss": "4.1.10"
   },
   "scripts": {
     "build": "bunchee"