@agregio-solutions/design-system 1.13.0 → 1.14.0

package/dist/design-system.cjs

@@ -107,14 +107,13 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tr]+=1);function K1(e){return
   cursor: pointer;
   white-space: nowrap;
 
-  // Remove default browser focus outline, we handle it differently via [data-focus-visible]
-  &:focus {
-    outline: none;
+  &[data-full-width] {
+    width: 100%;
   }
 
   // Manage hover state
   &[data-hovered],
-  &[data-force-hover] {
+  &[data-force-hovered] {
     color: var(--hover-color);
     background: var(--hover-background-color);
     outline-color: var(--hover-border-color);
@@ -122,9 +121,9 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tr]+=1);function K1(e){return
 
   // Manage keyboard focus state (and temporary active state as well)
   &:not([data-disabled])[data-pressed],
+  &:not([data-disabled])[data-force-pressed],
   &:not([data-disabled])[data-focus-visible],
-  &:not([data-disabled])[data-force-active],
-  &:not([data-disabled])[data-force-focus] {
+  &:not([data-disabled])[data-force-focus-visible] {
     color: var(--hover-color);
     background: var(--hover-background-color);
     outline-color: var(--hover-border-color);
@@ -134,6 +133,12 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tr]+=1);function K1(e){return
       rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
   }
 
+  // Manage the main focus state
+  &not([data-disabled])[data-focused],
+  &not([data-disabled])[data-force-focused] {
+    outline: var(--border-color) solid 1px;
+  }
+
   // Manage the size variations
   &[data-size="small"] {
     padding: var(--spacing-xs) var(--spacing-sm);
@@ -326,11 +331,11 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tr]+=1);function K1(e){return
   // Remove box-shadow and add text-decoration on hover/focus/active, but not for "action" buttons
   /* prettier-ignore */
   &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-hovered],
-  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-hover],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-hovered],
   &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-focus-visible],
-  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-focus],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-focus-visible],
   &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-pressed],
-  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-active] {
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-pressed] {
     box-shadow: none;
 
     ${Eu} {
@@ -360,7 +365,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tr]+=1);function K1(e){return
       --hover-background-color: transparent;
     }
   }
-`;function et({text:e,mode:t="primary",size:r="medium",nature:n="action",iconLeft:o,iconRight:i,type:a,onClick:l,disabled:s,...c}){const d=e==null||e==="";if(d&&!o&&!i)throw new Error("You must provide a text or an icon");if(o&&i)throw new Error("You can't provide both an iconLeft and an iconRight");return v.jsxs(Yh,{...c,type:a||"button","data-size":r,"data-nature":n,"data-mode":t,"data-has-icon-left":!!o,"data-has-icon-right":!!i,"data-has-no-text":d,onPress:l,isDisabled:s,children:[!!o&&v.jsx(fa,{name:o,"data-size":r}),!d&&v.jsx(Eu,{"data-size":r,children:e}),!!i&&v.jsx(fa,{name:i,"data-size":r})]})}const Xh=K.span`
+`;function et({text:e,mode:t="primary",size:r="medium",nature:n="action",iconLeft:o,iconRight:i,type:a,onClick:l,disabled:s,fullWidth:c,...d}){const p=e==null||e==="";if(p&&!o&&!i)throw new Error("You must provide a text or an icon");if(o&&i)throw new Error("You can't provide both an iconLeft and an iconRight");return v.jsxs(Yh,{...d,type:a||"button","data-size":r,"data-nature":n,"data-mode":t,"data-has-icon-left":!!o,"data-has-icon-right":!!i,"data-has-no-text":p,"data-full-width":c,onPress:l,isDisabled:s,children:[!!o&&v.jsx(fa,{name:o,"data-size":r}),!p&&v.jsx(Eu,{"data-size":r,children:e}),!!i&&v.jsx(fa,{name:i,"data-size":r})]})}const Xh=K.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/dist/design-system.js

@@ -9364,14 +9364,13 @@ const nv = {
   cursor: pointer;
   white-space: nowrap;
 
-  // Remove default browser focus outline, we handle it differently via [data-focus-visible]
-  &:focus {
-    outline: none;
+  &[data-full-width] {
+    width: 100%;
   }
 
   // Manage hover state
   &[data-hovered],
-  &[data-force-hover] {
+  &[data-force-hovered] {
     color: var(--hover-color);
     background: var(--hover-background-color);
     outline-color: var(--hover-border-color);
@@ -9379,9 +9378,9 @@ const nv = {
 
   // Manage keyboard focus state (and temporary active state as well)
   &:not([data-disabled])[data-pressed],
+  &:not([data-disabled])[data-force-pressed],
   &:not([data-disabled])[data-focus-visible],
-  &:not([data-disabled])[data-force-active],
-  &:not([data-disabled])[data-force-focus] {
+  &:not([data-disabled])[data-force-focus-visible] {
     color: var(--hover-color);
     background: var(--hover-background-color);
     outline-color: var(--hover-border-color);
@@ -9391,6 +9390,12 @@ const nv = {
       rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
   }
 
+  // Manage the main focus state
+  &not([data-disabled])[data-focused],
+  &not([data-disabled])[data-force-focused] {
+    outline: var(--border-color) solid 1px;
+  }
+
   // Manage the size variations
   &[data-size="small"] {
     padding: var(--spacing-xs) var(--spacing-sm);
@@ -9583,11 +9588,11 @@ const nv = {
   // Remove box-shadow and add text-decoration on hover/focus/active, but not for "action" buttons
   /* prettier-ignore */
   &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-hovered],
-  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-hover],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-hovered],
   &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-focus-visible],
-  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-focus],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-focus-visible],
   &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-pressed],
-  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-active] {
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-nature="action"])[data-force-pressed] {
     box-shadow: none;
 
     ${Ru} {
@@ -9628,29 +9633,31 @@ function vt({
   type: a,
   onClick: l,
   disabled: s,
-  ...c
+  fullWidth: c,
+  ...u
 }) {
-  const u = e == null || e === "";
-  if (u && !o && !i)
+  const f = e == null || e === "";
+  if (f && !o && !i)
     throw new Error("You must provide a text or an icon");
   if (o && i)
     throw new Error("You can't provide both an iconLeft and an iconRight");
   return /* @__PURE__ */ re(
     lv,
     {
-      ...c,
+      ...u,
       type: a || "button",
       "data-size": r,
       "data-nature": n,
       "data-mode": t,
       "data-has-icon-left": !!o,
       "data-has-icon-right": !!i,
-      "data-has-no-text": u,
+      "data-has-no-text": f,
+      "data-full-width": c,
       onPress: l,
       isDisabled: s,
       children: [
         !!o && /* @__PURE__ */ g($a, { name: o, "data-size": r }),
-        !u && /* @__PURE__ */ g(Ru, { "data-size": r, children: e }),
+        !f && /* @__PURE__ */ g(Ru, { "data-size": r, children: e }),
         !!i && /* @__PURE__ */ g($a, { name: i, "data-size": r })
       ]
     }

package/dist/packages/components/Button/index.d.ts

@@ -37,5 +37,9 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      * Same as native "disabled" attribute.
      */
     disabled?: boolean;
+    /**
+     * Set full width to the button
+     */
+    fullWidth?: boolean;
 };
-export default function Button({ text, mode, size, nature, iconLeft, iconRight, type, onClick, disabled, ...reactAriaButtonProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Button({ text, mode, size, nature, iconLeft, iconRight, type, onClick, disabled, fullWidth, ...reactAriaButtonProps }: Props): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",