@simpli-route/apollo-ds 0.0.14 → 0.0.15

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

@@ -21,4 +21,5 @@ export interface MarkIconProps {
     className?: string;
     isIndeterminate?: boolean;
     isSelected?: boolean;
+    isHovered?: boolean;
 }

package/dist/index.cjs13.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs10.js"),o=require("./index.cjs11.js"),i=t=>{const{isIndeterminate:r,isSelected:s,className:n}=t;return e.jsxRuntimeExports.jsx("svg",{className:o.cn("stroke-current",n),viewBox:"-1 1 17 17",children:r?e.jsxRuntimeExports.jsx("line",{x1:1,y1:10,x2:14,y2:10,fill:"none",strokeWidth:2,strokeDasharray:14,strokeDashoffset:s?28:42,style:{transition:"all 400ms"}}):e.jsxRuntimeExports.jsx("polyline",{points:"1 9 7 14 15 4",fill:"none",strokeWidth:2,strokeDasharray:22,strokeDashoffset:s?44:66,style:{transition:"all 400ms"}})})};exports.MarkIcon=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index.cjs10.js"),l=require("./index.cjs11.js"),c=o=>{const{isIndeterminate:t,isSelected:e,className:n,isHovered:i}=o,r=i&&!e&&!t?"text-neutral-500":"",a=!!(r||e);return s.jsxRuntimeExports.jsx("svg",{className:l.cn("stroke-current",r,n),viewBox:"-1 1 17 17",children:t?s.jsxRuntimeExports.jsx("line",{x1:1,y1:10,x2:14,y2:10,fill:"none",strokeWidth:2,strokeDasharray:14,strokeDashoffset:e?28:42,style:{transition:"all 400ms"}}):s.jsxRuntimeExports.jsx("polyline",{points:"1 9 7 14 15 4",fill:"none",strokeWidth:2,strokeDasharray:22,strokeDashoffset:a?44:66,style:{transition:"all 400ms"}})})};exports.MarkIcon=c;

package/dist/index.cjs14.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("class-variance-authority"),e=r.cva("flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border-2 border-primary-200 text-white transition duration-150 ease-in-out",{variants:{isHovered:{true:""},isSelected:{true:"border-primary-500 bg-primary-500",false:"bg-white"},isFocusVisible:{true:"border-primary-500 group-active:border-primary-500"},isDisabled:{true:"border-neutral-500 bg-neutral-500"},label:{true:"mr-2"}},compoundVariants:[{isHovered:!0,isSelected:!0,class:"border-none bg-primary-600 group-active:bg-primary-600"},{isHovered:!0,isSelected:!1,isDisabled:!1,class:"border-primary-700 group-active:bg-primary-600"}]});exports.checkboxVariants=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),r=e.cva("flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border-2 border-primary-200 text-white transition duration-150 ease-in-out",{variants:{isHovered:{true:""},isSelected:{true:"border-primary-500 bg-primary-500",false:"bg-white"},isFocusVisible:{true:"border-primary-500 group-active:border-primary-500"},isDisabled:{true:"border-neutral-500"},label:{true:"mr-2"}},compoundVariants:[{isHovered:!0,isSelected:!0,class:"border-none bg-primary-600 group-active:bg-primary-600"},{isHovered:!0,isSelected:!1,isDisabled:!1,class:"border-primary-700 group-active:bg-primary-600"},{isDisabled:!0,isSelected:!0,class:"bg-neutral-500"}]});exports.checkboxVariants=r;

package/dist/index.cjs4.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs10.js"),l=require("react-aria-components"),o=require("./index.cjs11.js"),p=require("./index.cjs13.js"),b=require("./index.cjs14.js"),h=({isIndeterminate:c=!1,isDisabled:t=!1,className:i,children:s,onChange:u,isSelected:r,id:x,...m})=>{const j=(n,a)=>o.cn(b.checkboxVariants({isDisabled:t,isFocusVisible:n,isHovered:a,isSelected:r,label:!!s}));return e.jsxRuntimeExports.jsx(l.Checkbox,{className:o.cn("group flex items-center",i),isSelected:r,isDisabled:t,id:x,onChange:u,...m,children:({isFocusVisible:n,isHovered:a})=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{className:j(n,a),"aria-hidden":"true",children:e.jsxRuntimeExports.jsx(p.MarkIcon,{isIndeterminate:c,isSelected:r,className:"size-3"})}),s&&e.jsxRuntimeExports.jsx("span",{className:o.cn("select-none text-base leading-6",t?"text-neutral-500":"text-primary-900"),id:x,children:s})]})})};exports.Checkbox=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs10.js"),l=require("react-aria-components"),x=require("./index.cjs11.js"),p=require("./index.cjs13.js"),b=require("./index.cjs14.js"),h=({isIndeterminate:c=!1,isDisabled:s=!1,className:u,children:r,onChange:i,isSelected:n,id:o,...m})=>{const j=(a,t)=>x.cn(b.checkboxVariants({isDisabled:s,isFocusVisible:a,isHovered:t,isSelected:n,label:!!r}));return e.jsxRuntimeExports.jsx(l.Checkbox,{className:x.cn("group flex items-center",u),isSelected:n,isDisabled:s,id:o,onChange:i,...m,children:({isFocusVisible:a,isHovered:t})=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{className:j(a,t),"aria-hidden":"true",children:e.jsxRuntimeExports.jsx(p.MarkIcon,{isIndeterminate:c,isHovered:t,isSelected:n,className:"size-3"})}),r&&e.jsxRuntimeExports.jsx("span",{className:x.cn("select-none text-base leading-6",s?"text-neutral-500":"text-primary-900"),id:o,children:r})]})})};exports.Checkbox=h;

package/dist/index.cjs6.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index.cjs10.js"),d=require("react-aria-components"),o=require("./index.cjs11.js"),w=require("./index.cjs15.js"),q=require("./index.cjs16.js"),y=require("./index.cjs17.js"),R=({children:c,label:a,description:s,errorMessage:x,validationState:u,size:e="md",isDisabled:t=!1,isSelected:n=!1,onChange:f,"aria-label":m,"aria-describedby":h})=>{const j=u==="invalid"&&!t,l=e==="sm"?{offLeft:3,onLeft:19}:{offLeft:4,onLeft:28};return r.jsxRuntimeExports.jsxs("label",{className:o.cn("group flex flex-row items-center gap-2",t?"opacity-40":"opacity-100"),children:[r.jsxRuntimeExports.jsx(d.Switch,{isDisabled:t,isSelected:n,"aria-checked":n,"aria-label":m,"aria-describedby":h,onChange:f,children:({isFocusVisible:p,isHovered:i})=>r.jsxRuntimeExports.jsx("div",{className:o.cn(y.switchVariants({isSelected:n,isDisabled:t,isFocusVisible:p,size:e,isHoveredWhenOff:i&&!n})),children:r.jsxRuntimeExports.jsx(q.SwitchIndicator,{isSelected:n,isDisabled:t,isHovered:i,size:e,dimensions:l})})}),r.jsxRuntimeExports.jsx(w.ContentSwitch,{label:a,description:s,errorMessage:x,isDisabled:t,isInvalid:j,children:c})]})};exports.Switch=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index.cjs10.js"),w=require("react-aria-components"),s=require("./index.cjs11.js"),d=require("./index.cjs15.js"),q=require("./index.cjs16.js"),y=require("./index.cjs17.js"),R=({children:a,label:i,description:o,errorMessage:x,validationState:u,size:e="md",isDisabled:t=!1,isSelected:r=!1,onChange:f,"aria-label":m,"aria-describedby":h})=>{const j=u==="invalid"&&!t,p=e==="sm"?{offLeft:3,onLeft:19}:{offLeft:4,onLeft:28};return n.jsxRuntimeExports.jsxs("label",{className:s.cn("group flex flex-row gap-2",t?"opacity-40":"opacity-100",i&&o?"items-start":"items-center"),children:[n.jsxRuntimeExports.jsx(w.Switch,{isDisabled:t,isSelected:r,"aria-checked":r,"aria-label":m,"aria-describedby":h,onChange:f,children:({isFocusVisible:l,isHovered:c})=>n.jsxRuntimeExports.jsx("div",{className:s.cn(y.switchVariants({isSelected:r,isDisabled:t,isFocusVisible:l,size:e,isHoveredWhenOff:c&&!r})),children:n.jsxRuntimeExports.jsx(q.SwitchIndicator,{isSelected:r,isDisabled:t,isHovered:c,size:e,dimensions:p})})}),n.jsxRuntimeExports.jsx(d.ContentSwitch,{label:i,description:o,errorMessage:x,isDisabled:t,isInvalid:j,children:a})]})};exports.Switch=R;

package/dist/index.es13.js

@@ -1,8 +1,8 @@
-import { j as s } from "./index.es10.js";
-import { cn as n } from "./index.es11.js";
-const l = (e) => {
-  const { isIndeterminate: r, isSelected: t, className: o } = e;
-  return /* @__PURE__ */ s.jsx("svg", { className: n("stroke-current", o), viewBox: "-1 1 17 17", children: r ? /* @__PURE__ */ s.jsx(
+import { j as e } from "./index.es10.js";
+import { cn as l } from "./index.es11.js";
+const m = (r) => {
+  const { isIndeterminate: t, isSelected: s, className: n, isHovered: a } = r, o = a && !s && !t ? "text-neutral-500" : "", i = !!(o || s);
+  return /* @__PURE__ */ e.jsx("svg", { className: l("stroke-current", o, n), viewBox: "-1 1 17 17", children: t ? /* @__PURE__ */ e.jsx(
     "line",
     {
       x1: 1,
@@ -12,21 +12,21 @@ const l = (e) => {
       fill: "none",
       strokeWidth: 2,
       strokeDasharray: 14,
-      strokeDashoffset: t ? 28 : 42,
+      strokeDashoffset: s ? 28 : 42,
       style: { transition: "all 400ms" }
     }
-  ) : /* @__PURE__ */ s.jsx(
+  ) : /* @__PURE__ */ e.jsx(
     "polyline",
     {
       points: "1 9 7 14 15 4",
       fill: "none",
       strokeWidth: 2,
       strokeDasharray: 22,
-      strokeDashoffset: t ? 44 : 66,
+      strokeDashoffset: i ? 44 : 66,
       style: { transition: "all 400ms" }
     }
   ) });
 };
 export {
-  l as MarkIcon
+  m as MarkIcon
 };

package/dist/index.es14.js

@@ -14,7 +14,7 @@ const i = r(
         true: "border-primary-500 group-active:border-primary-500"
       },
       isDisabled: {
-        true: "border-neutral-500 bg-neutral-500"
+        true: "border-neutral-500"
       },
       label: {
         true: "mr-2"
@@ -31,6 +31,11 @@ const i = r(
         isSelected: !1,
         isDisabled: !1,
         class: "border-primary-700 group-active:bg-primary-600"
+      },
+      {
+        isDisabled: !0,
+        isSelected: !0,
+        class: "bg-neutral-500"
       }
     ]
   }

package/dist/index.es4.js

@@ -1,44 +1,52 @@
 import { j as e } from "./index.es10.js";
-import { Checkbox as i } from "react-aria-components";
+import { Checkbox as h } from "react-aria-components";
 import { cn as m } from "./index.es11.js";
-import { MarkIcon as h } from "./index.es13.js";
+import { MarkIcon as i } from "./index.es13.js";
 import { checkboxVariants as j } from "./index.es14.js";
 const g = ({
   isIndeterminate: x = !1,
-  isDisabled: r = !1,
+  isDisabled: a = !1,
   className: c,
-  children: a,
+  children: t,
   onChange: l,
   isSelected: s,
   id: n,
   ...p
 }) => {
-  const f = (t, o) => m(
+  const f = (o, r) => m(
     j({
-      isDisabled: r,
-      isFocusVisible: t,
-      isHovered: o,
+      isDisabled: a,
+      isFocusVisible: o,
+      isHovered: r,
       isSelected: s,
-      label: !!a
+      label: !!t
     })
   );
   return /* @__PURE__ */ e.jsx(
-    i,
+    h,
     {
       className: m("group flex items-center", c),
       isSelected: s,
-      isDisabled: r,
+      isDisabled: a,
       id: n,
       onChange: l,
       ...p,
-      children: ({ isFocusVisible: t, isHovered: o }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx("div", { className: f(t, o), "aria-hidden": "true", children: /* @__PURE__ */ e.jsx(h, { isIndeterminate: x, isSelected: s, className: "size-3" }) }),
-        a && /* @__PURE__ */ e.jsx(
+      children: ({ isFocusVisible: o, isHovered: r }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx("div", { className: f(o, r), "aria-hidden": "true", children: /* @__PURE__ */ e.jsx(
+          i,
+          {
+            isIndeterminate: x,
+            isHovered: r,
+            isSelected: s,
+            className: "size-3"
+          }
+        ) }),
+        t && /* @__PURE__ */ e.jsx(
           "span",
           {
-            className: m("select-none text-base leading-6", r ? "text-neutral-500" : "text-primary-900"),
+            className: m("select-none text-base leading-6", a ? "text-neutral-500" : "text-primary-900"),
             id: n,
-            children: a
+            children: t
           }
         )
       ] })

package/dist/index.es6.js

@@ -1,71 +1,81 @@
-import { j as t } from "./index.es10.js";
+import { j as o } from "./index.es10.js";
 import { Switch as d } from "react-aria-components";
-import { cn as f } from "./index.es11.js";
+import { cn as c } from "./index.es11.js";
 import { ContentSwitch as y } from "./index.es15.js";
 import { SwitchIndicator as L } from "./index.es16.js";
 import { switchVariants as u } from "./index.es17.js";
 const C = ({
-  children: c,
-  label: i,
+  children: i,
+  label: f,
   description: m,
-  errorMessage: e,
-  validationState: p,
+  errorMessage: s,
+  validationState: e,
   size: a = "md",
   isDisabled: r = !1,
-  isSelected: o = !1,
-  onChange: s,
-  "aria-label": h,
+  isSelected: t = !1,
+  onChange: h,
+  "aria-label": p,
   "aria-describedby": x
 }) => {
-  const l = p === "invalid" && !r, j = a === "sm" ? { offLeft: 3, onLeft: 19 } : { offLeft: 4, onLeft: 28 };
-  return /* @__PURE__ */ t.jsxs("label", { className: f("group flex flex-row items-center gap-2", r ? "opacity-40" : "opacity-100"), children: [
-    /* @__PURE__ */ t.jsx(
-      d,
-      {
-        isDisabled: r,
-        isSelected: o,
-        "aria-checked": o,
-        "aria-label": h,
-        "aria-describedby": x,
-        onChange: s,
-        children: ({ isFocusVisible: w, isHovered: n }) => /* @__PURE__ */ t.jsx(
-          "div",
+  const j = e === "invalid" && !r, w = a === "sm" ? { offLeft: 3, onLeft: 19 } : { offLeft: 4, onLeft: 28 };
+  return /* @__PURE__ */ o.jsxs(
+    "label",
+    {
+      className: c(
+        "group flex flex-row gap-2",
+        r ? "opacity-40" : "opacity-100",
+        f && m ? "items-start" : "items-center"
+      ),
+      children: [
+        /* @__PURE__ */ o.jsx(
+          d,
           {
-            className: f(
-              u({
-                isSelected: o,
-                isDisabled: r,
-                isFocusVisible: w,
-                size: a,
-                isHoveredWhenOff: n && !o
-              })
-            ),
-            children: /* @__PURE__ */ t.jsx(
-              L,
+            isDisabled: r,
+            isSelected: t,
+            "aria-checked": t,
+            "aria-label": p,
+            "aria-describedby": x,
+            onChange: h,
+            children: ({ isFocusVisible: l, isHovered: n }) => /* @__PURE__ */ o.jsx(
+              "div",
               {
-                isSelected: o,
-                isDisabled: r,
-                isHovered: n,
-                size: a,
-                dimensions: j
+                className: c(
+                  u({
+                    isSelected: t,
+                    isDisabled: r,
+                    isFocusVisible: l,
+                    size: a,
+                    isHoveredWhenOff: n && !t
+                  })
+                ),
+                children: /* @__PURE__ */ o.jsx(
+                  L,
+                  {
+                    isSelected: t,
+                    isDisabled: r,
+                    isHovered: n,
+                    size: a,
+                    dimensions: w
+                  }
+                )
               }
             )
           }
+        ),
+        /* @__PURE__ */ o.jsx(
+          y,
+          {
+            label: f,
+            description: m,
+            errorMessage: s,
+            isDisabled: r,
+            isInvalid: j,
+            children: i
+          }
         )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      y,
-      {
-        label: i,
-        description: m,
-        errorMessage: e,
-        isDisabled: r,
-        isInvalid: l,
-        children: c
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 export {
   C as Switch

package/dist/stories/Checkbox.stories.d.ts

@@ -7,6 +7,11 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
+    argTypes: {
+        children: {
+            control: string;
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/style.css

@@ -899,6 +899,9 @@ select {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-end {
   align-items: flex-end;
 }

package/package.json

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