@simpli-route/apollo-ds 0.0.3 → 0.0.5

package/dist/components/Button/types.d.ts

@@ -15,7 +15,7 @@ export interface BtnProps extends ButtonProps {
     /**
      * Defines the size of the button
      */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /**
      * Optional className to add the root of the button
      */

package/dist/components/Button/variants.d.ts

@@ -1,6 +1,6 @@
 export declare const buttonVariants: (props?: ({
     intent?: "primary" | "secondary" | "tertiary" | "outline" | "success" | "error" | "orangeWarning" | "yellowWarning" | "info" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     isDisabled?: boolean | null | undefined;
     isHovered?: boolean | null | undefined;
     isActive?: boolean | null | undefined;

package/dist/index.cjs2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index.cjs3.js"),E=require("react-aria-components"),b=require("./index.cjs4.js"),q=require("./index.cjs5.js"),N=require("./index.cjs6.js"),j=({renderPosition:e,leftIcon:o,rightIcon:l,isLoading:n,loaderPosition:r,loaderProps:t})=>{const i=e==="left"?o:e==="right"?l:null;return i||n&&r===e?s.jsxRuntimeExports.jsx("span",{className:e==="left"?"mr-1":"ml-1",children:n&&r===e?s.jsxRuntimeExports.jsx(N.Loader,{size:"sm",...t}):i}):null},y=e=>{const{intent:o="primary",size:l="md",leftIcon:n,rightIcon:r,isDisabled:t,children:i,className:p,isLoading:a,loaderPosition:m="left",loaderProps:x,fullWidth:h=!1,unstyled:f=!1,focus:R=!0,...g}=e,v=(u,c,d)=>b.cn(f?"":q.buttonVariants({intent:o,size:l,isHovered:c,isActive:u,isDisabled:t,isFocused:R||!f?d:!1,fullWidth:h,isLoading:a}),p);return s.jsxRuntimeExports.jsxs(E.Button,{"data-disabled":t||void 0,"data-loading":a||void 0,isDisabled:t,className:({isPressed:u,isHovered:c,isFocused:d})=>v(u,c,d),...g,children:[s.jsxRuntimeExports.jsx(j,{renderPosition:"left",loaderPosition:m,loaderProps:x,isLoading:a,leftIcon:n}),s.jsxRuntimeExports.jsx("span",{className:"flex h-full items-center overflow-hidden whitespace-nowrap",children:i}),s.jsxRuntimeExports.jsx(j,{renderPosition:"right",loaderPosition:m,loaderProps:x,isLoading:a,rightIcon:r})]})};exports.Button=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index.cjs3.js"),E=require("react-aria-components"),b=require("./index.cjs4.js"),q=require("./index.cjs5.js"),N=require("./index.cjs6.js"),p=({renderPosition:e,leftIcon:u,rightIcon:c,isLoading:n,loaderPosition:r,loaderProps:s})=>{const a=e==="left"?u:e==="right"?c:null;return a||n&&r===e?t.jsxRuntimeExports.jsx("span",{className:e==="left"?"mr-1":"ml-1",children:n&&r===e?t.jsxRuntimeExports.jsx(N.Loader,{size:"sm",...s}):a}):null},y=e=>{const{intent:u="primary",size:c="md",leftIcon:n,rightIcon:r,isDisabled:s,children:a,className:h,isLoading:i,loaderPosition:x="left",loaderProps:f,fullWidth:R=!1,unstyled:d=!1,focus:j=!0,...g}=e,v=(m,l,o)=>b.cn(d?"":q.buttonVariants({intent:u,size:c,isHovered:l||(j||!d?o:!1),isActive:m,isDisabled:s,isFocused:j||!d?o:!1,fullWidth:R,isLoading:i}),h);return t.jsxRuntimeExports.jsxs(E.Button,{"data-disabled":s||void 0,"data-loading":i||void 0,isDisabled:s,className:({isPressed:m,isHovered:l,isFocusVisible:o})=>v(m,l,o),...g,children:[t.jsxRuntimeExports.jsx(p,{renderPosition:"left",loaderPosition:x,loaderProps:f,isLoading:i,leftIcon:n}),t.jsxRuntimeExports.jsx("span",{className:"flex h-full items-center overflow-hidden whitespace-nowrap",children:a}),t.jsxRuntimeExports.jsx(p,{renderPosition:"right",loaderPosition:x,loaderProps:f,isLoading:i,rightIcon:r})]})};exports.Button=y;

package/dist/index.cjs5.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("class-variance-authority"),e=r.cva("inline-flex select-none items-center justify-center text-center text-base font-semibold leading-6 transition duration-150 ease-in-out focus:outline-none",{variants:{intent:{primary:"bg-primary-500 text-primary-50",secondary:"border border-primary-500 bg-primary-50 text-primary-500",tertiary:"text-primary-500",outline:"border border-primary-500 text-primary-500",success:"border border-success-800 text-success-800",error:"border border-error-800 text-error-800",orangeWarning:"border border-orange-warning-800 text-orange-warning-800",yellowWarning:"border border-yellow-warning-800 text-yellow-warning-800",info:"border border-primary-800 text-primary-800"},size:{sm:"rounded px-3 py-2",md:"rounded-lg px-4 py-3",lg:"rounded-lg px-6 py-4"},isDisabled:{true:"pointer-events-none cursor-not-allowed border-none bg-neutral-400 text-neutral-600"},isHovered:{true:""},isActive:{true:""},fullWidth:{true:"w-full",false:"w-fit"},isLoading:{true:"pointer-events-none cursor-not-allowed opacity-70"},isFocused:{true:"focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2",false:""}},defaultVariants:{intent:"primary",size:"md"},compoundVariants:[{intent:"primary",isHovered:!0,class:"bg-primary-700"},{intent:"secondary",isHovered:!0,class:"bg-primary-200"},{intent:"tertiary",isHovered:!0,class:"bg-primary-300 text-primary-800"},{intent:"outline",isHovered:!0,class:"bg-primary-500 text-primary-50"},{intent:"success",isHovered:!0,class:"bg-success-600 text-neutral-50"},{intent:"error",isHovered:!0,class:"bg-error-600 text-neutral-50"},{intent:"orangeWarning",isHovered:!0,class:"bg-orange-warning-600 text-neutral-50"},{intent:"yellowWarning",isHovered:!0,class:"bg-yellow-warning-600 text-neutral-50"},{intent:"info",isHovered:!0,class:"bg-primary-600 text-neutral-50"},{intent:"primary",isActive:!0,class:"bg-primary-900"},{intent:"secondary",isActive:!0,class:"bg-primary-300"},{intent:"tertiary",isActive:!0,class:"bg-primary-500 text-white"},{intent:"outline",isActive:!0,class:"border border-primary-500 bg-primary-300 text-primary-500"},{intent:"success",isActive:!0,class:"border border-transparent bg-success-300 text-success-600"},{intent:"error",isActive:!0,class:"border border-transparent bg-error-300 text-error-600"},{intent:"orangeWarning",isActive:!0,class:"border border-transparent bg-orange-warning-300 text-orange-warning-600"},{intent:"yellowWarning",isActive:!0,class:"border border-transparent bg-yellow-warning-300 text-yellow-warning-600"},{intent:"info",isActive:!0,class:"border border-transparent bg-primary-300 text-primary-600"}]});exports.buttonVariants=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("class-variance-authority"),e=r.cva("inline-flex select-none items-center justify-center text-center text-base font-semibold leading-6 transition duration-150 ease-in-out focus:outline-none",{variants:{intent:{primary:"bg-primary-500 text-primary-50",secondary:"border border-primary-500 bg-primary-50 text-primary-500",tertiary:"text-primary-500",outline:"border border-primary-500 text-primary-500",success:"border border-success-800 text-success-800",error:"border border-error-800 text-error-800",orangeWarning:"border border-orange-warning-800 text-orange-warning-800",yellowWarning:"border border-yellow-warning-800 text-yellow-warning-800",info:"border border-primary-800 text-primary-800"},size:{xs:"rounded px-3 py-1",sm:"rounded px-3 py-2",md:"rounded-lg px-4 py-3",lg:"rounded-lg px-6 py-4"},isDisabled:{true:"pointer-events-none cursor-not-allowed border-none bg-neutral-400 text-neutral-600"},isHovered:{true:""},isActive:{true:""},fullWidth:{true:"w-full",false:"w-fit"},isLoading:{true:"pointer-events-none cursor-not-allowed opacity-70"},isFocused:{true:"focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-[0.4px] border-none",false:""}},defaultVariants:{intent:"primary",size:"md"},compoundVariants:[{intent:"primary",isHovered:!0,class:"bg-primary-700"},{intent:"secondary",isHovered:!0,class:"bg-primary-200"},{intent:"tertiary",isHovered:!0,class:"bg-primary-300 text-primary-800"},{intent:"outline",isHovered:!0,class:"bg-primary-500 text-primary-50"},{intent:"success",isHovered:!0,class:"bg-success-600 text-neutral-50"},{intent:"error",isHovered:!0,class:"bg-error-600 text-neutral-50"},{intent:"orangeWarning",isHovered:!0,class:"bg-orange-warning-600 text-neutral-50"},{intent:"yellowWarning",isHovered:!0,class:"bg-yellow-warning-600 text-neutral-50"},{intent:"info",isHovered:!0,class:"bg-primary-600 text-neutral-50"},{intent:"success",isFocused:!0,class:"border-[1.5px] focus:ring-success-800"},{intent:"error",isFocused:!0,class:"border-[1.5px] focus:ring-error-800"},{intent:"orangeWarning",isFocused:!0,class:"border-[1.5px] focus:ring-orange-800"},{intent:"yellowWarning",isFocused:!0,class:"border-[1.5px] focus:ring-yellow-800"},{intent:"info",isFocused:!0,class:"border-[1.5px] focus:ring-primary-800"},{intent:"primary",isActive:!0,class:"bg-primary-900"},{intent:"secondary",isActive:!0,class:"bg-primary-300"},{intent:"tertiary",isActive:!0,class:"bg-primary-500 text-white"},{intent:"outline",isActive:!0,class:"border border-primary-500 bg-primary-300 text-primary-500"},{intent:"success",isActive:!0,class:"border border-transparent bg-success-300 text-success-600"},{intent:"error",isActive:!0,class:"border border-transparent bg-error-300 text-error-600"},{intent:"orangeWarning",isActive:!0,class:"border border-transparent bg-orange-warning-300 text-orange-warning-600"},{intent:"yellowWarning",isActive:!0,class:"border border-transparent bg-yellow-warning-300 text-yellow-warning-600"},{intent:"info",isActive:!0,class:"border border-transparent bg-primary-300 text-primary-600"}]});exports.buttonVariants=e;

package/dist/index.es2.js

@@ -3,44 +3,44 @@ import { Button as I } from "react-aria-components";
 import { cn as b } from "./index.es4.js";
 import { buttonVariants as w } from "./index.es5.js";
 import { Loader as B } from "./index.es6.js";
-const h = ({
+const x = ({
   renderPosition: s,
-  leftIcon: o,
-  rightIcon: i,
+  leftIcon: m,
+  rightIcon: c,
   isLoading: r,
   loaderPosition: l,
   loaderProps: e
 }) => {
-  const a = s === "left" ? o : s === "right" ? i : null;
+  const a = s === "left" ? m : s === "right" ? c : null;
   return a || r && l === s ? /* @__PURE__ */ t.jsx("span", { className: s === "left" ? "mr-1" : "ml-1", children: r && l === s ? /* @__PURE__ */ t.jsx(B, { size: "sm", ...e }) : a }) : null;
 }, D = (s) => {
   const {
-    intent: o = "primary",
-    size: i = "md",
+    intent: m = "primary",
+    size: c = "md",
     leftIcon: r,
     rightIcon: l,
     isDisabled: e,
     children: a,
-    className: x,
+    className: j,
     isLoading: n,
-    loaderPosition: f = "left",
-    loaderProps: u,
-    fullWidth: j = !1,
-    unstyled: p = !1,
-    focus: N = !0,
+    loaderPosition: u = "left",
+    loaderProps: p,
+    fullWidth: N = !1,
+    unstyled: f = !1,
+    focus: h = !0,
     ...g
-  } = s, v = (m, c, d) => b(
-    p ? "" : w({
-      intent: o,
-      size: i,
-      isHovered: c,
-      isActive: m,
+  } = s, v = (d, o, i) => b(
+    f ? "" : w({
+      intent: m,
+      size: c,
+      isHovered: o || (h || !f ? i : !1),
+      isActive: d,
       isDisabled: e,
-      isFocused: N || !p ? d : !1,
-      fullWidth: j,
+      isFocused: h || !f ? i : !1,
+      fullWidth: N,
       isLoading: n
     }),
-    x
+    j
   );
   return /* @__PURE__ */ t.jsxs(
     I,
@@ -48,26 +48,26 @@ const h = ({
       "data-disabled": e || void 0,
       "data-loading": n || void 0,
       isDisabled: e,
-      className: ({ isPressed: m, isHovered: c, isFocused: d }) => v(m, c, d),
+      className: ({ isPressed: d, isHovered: o, isFocusVisible: i }) => v(d, o, i),
       ...g,
       children: [
         /* @__PURE__ */ t.jsx(
-          h,
+          x,
           {
             renderPosition: "left",
-            loaderPosition: f,
-            loaderProps: u,
+            loaderPosition: u,
+            loaderProps: p,
             isLoading: n,
             leftIcon: r
           }
         ),
         /* @__PURE__ */ t.jsx("span", { className: "flex h-full items-center overflow-hidden whitespace-nowrap", children: a }),
         /* @__PURE__ */ t.jsx(
-          h,
+          x,
           {
             renderPosition: "right",
-            loaderPosition: f,
-            loaderProps: u,
+            loaderPosition: u,
+            loaderProps: p,
             isLoading: n,
             rightIcon: l
           }

package/dist/index.es5.js

@@ -15,6 +15,7 @@ const t = r(
         info: "border border-primary-800 text-primary-800"
       },
       size: {
+        xs: "rounded px-3 py-1",
         sm: "rounded px-3 py-2",
         md: "rounded-lg px-4 py-3",
         lg: "rounded-lg px-6 py-4"
@@ -36,7 +37,7 @@ const t = r(
         true: "pointer-events-none cursor-not-allowed opacity-70"
       },
       isFocused: {
-        true: "focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2",
+        true: "focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-[0.4px] border-none",
         false: ""
       }
     },
@@ -91,7 +92,32 @@ const t = r(
         isHovered: !0,
         class: "bg-primary-600 text-neutral-50"
       },
-      /* /Hover State */
+      /* /Focus State */
+      {
+        intent: "success",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-success-800"
+      },
+      {
+        intent: "error",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-error-800"
+      },
+      {
+        intent: "orangeWarning",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-orange-800"
+      },
+      {
+        intent: "yellowWarning",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-yellow-800"
+      },
+      {
+        intent: "info",
+        isFocused: !0,
+        class: "border-[1.5px] focus:ring-primary-800"
+      },
       /* Active State */
       {
         intent: "primary",

package/dist/style.css

@@ -847,6 +847,9 @@ select {
 .border {
   border-width: 1px;
 }
+.border-\[1\.5px\] {
+  border-width: 1.5px;
+}
 .border-none {
   border-style: none;
 }
@@ -956,6 +959,10 @@ select {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1101,10 +1108,30 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus\:ring-error-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(94 27 20 / var(--tw-ring-opacity));
+}
+.focus\:ring-orange-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(154 52 18 / var(--tw-ring-opacity));
+}
+.focus\:ring-primary-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(23 13 108 / var(--tw-ring-opacity));
+}
 .focus\:ring-sky-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(38 157 217 / var(--tw-ring-opacity));
 }
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
+.focus\:ring-success-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 96 56 / var(--tw-ring-opacity));
+}
+.focus\:ring-yellow-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(113 96 12 / var(--tw-ring-opacity));
+}
+.focus\:ring-offset-\[0\.4px\]:focus {
+  --tw-ring-offset-width: 0.4px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "dist"