@magiclabs/ui-components 1.36.10 → 1.36.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),m=require("../containers/button.js");require("../containers/card.js");var o=require("@styled/css"),t=require("@styled/jsx"),g=require("@styled/tokens"),v=require("../icons/ico-external-link.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),s=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var c=require("create-slots");const q=c.createSlot(({children:r,...i})=>e.jsx(t.Center,{children:s.Children.map(r,a=>s.cloneElement(a,i))})),p=c.createSlot(({children:r,...i})=>e.jsx(t.Center,{children:s.Children.map(r,a=>s.cloneElement(a,i))})),x=s.forwardRef((r,i)=>{const{primaryLabel:a,secondaryLabel:u,isExternalLink:j}=r;return c.createHost(r.children,d=>{const n=d.get(q),l=d.get(p);return e.jsx(m.ButtonContainer,{ref:i,className:o.css({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),borderRadius:"0.5rem",expand:!0,...r,children:e.jsxs(t.HStack,{justify:"space-between",w:"full",children:[e.jsxs(t.HStack,{children:[n&&{...n,props:{height:24,...n.props,className:n.props.color?void 0:o.css({color:"brand.base"})}},e.jsxs(t.VStack,{gap:0,alignItems:"start",children:[e.jsxs(t.HStack,{children:[e.jsx(h.default,{fontWeight:"medium",children:a}),j&&e.jsx(v.default,{width:14,height:14,color:g.token("colors.neutral.primary")})]}),u&&e.jsx(h.default,{size:"sm",fontColor:"text.tertiary",children:u})]})]}),e.jsx(t.HStack,{children:l&&{...l,props:{...l.props,className:l.props.color?void 0:o.css({color:"neutral.primary"}),width:16,height:16}}})]})})})});x.displayName="NavigationButton";const b=Object.assign(x,{LeadingIcon:q,TrailingIcon:p});exports.default=b;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),g=require("../containers/button.js");require("../containers/card.js");var l=require("@styled/css"),t=require("@styled/jsx"),v=require("@styled/tokens"),b=require("../icons/ico-external-link.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),s=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var o=require("create-slots");const q=o.createSlot(({children:i,...r})=>e.jsx(t.Center,{children:s.Children.map(i,a=>s.cloneElement(a,r))})),p=o.createSlot(({children:i,...r})=>e.jsx(t.Center,{children:s.Children.map(i,a=>s.cloneElement(a,r))})),x=s.forwardRef(({className:i,...r},a)=>{const{primaryLabel:m,secondaryLabel:u,isExternalLink:j}=r;return o.createHost(r.children,d=>{const n=d.get(q),c=d.get(p);return e.jsx(g.ButtonContainer,{ref:a,className:l.cx(l.css({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),i),borderRadius:"0.5rem",expand:!0,...r,children:e.jsxs(t.HStack,{justify:"space-between",w:"full",children:[e.jsxs(t.HStack,{children:[n&&{...n,props:{height:24,...n.props,className:n.props.color?void 0:l.css({color:"brand.base"})}},e.jsxs(t.VStack,{gap:0,alignItems:"start",children:[e.jsxs(t.HStack,{children:[e.jsx(h.default,{fontWeight:"medium",children:m}),j&&e.jsx(b.default,{width:14,height:14,color:v.token("colors.neutral.primary")})]}),u&&e.jsx(h.default,{size:"sm",fontColor:"text.tertiary",children:u})]})]}),e.jsx(t.HStack,{children:c&&{...c,props:{...c.props,className:c.props.color?void 0:l.css({color:"neutral.primary"}),width:16,height:16}}})]})})})});x.displayName="NavigationButton";const f=Object.assign(x,{LeadingIcon:q,TrailingIcon:p});exports.default=f;
2
2
  //# sourceMappingURL=navigation-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n primaryLabel: string;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className={css({\n p: 4,\n bg: 'neutral.quaternary',\n _hover: { bg: 'neutral.secondary' },\n })}\n borderRadius=\"0.5rem\"\n expand\n {...props}\n >\n <HStack justify=\"space-between\" w=\"full\">\n <HStack>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n height: 24,\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n },\n }}\n <VStack gap={0} alignItems=\"start\">\n <HStack>\n <Text fontWeight=\"medium\">{primaryLabel}</Text>\n {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n </HStack>\n {secondaryLabel && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n </VStack>\n </HStack>\n <HStack>\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </HStack>\n </HStack>\n </ButtonContainer>\n );\n });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","css","_jsxs","HStack","VStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"u4BAiBA,MAAMA,EAAcC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,MAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,MAACC,EAAAA,OAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAAA,WAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,aAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIR,CAAY,EAE3C,OACEL,MAACgB,EAAAA,gBACC,CAAA,IAAKR,EACL,UAAWS,EAAAA,IAAI,CACb,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACD,aAAa,SACb,OACI,GAAA,GAAAlB,EAEJ,SAAAmB,EAAAA,KAACC,SAAM,CAAC,QAAQ,gBAAgB,EAAE,iBAChCD,EAACC,KAAAA,EAAAA,OACE,CAAA,SAAA,CAAAL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,OAAQ,GACR,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BG,EAAAA,IAAI,CAAE,MAAO,aAAc,CAClE,CACF,EACDC,EAACE,KAAAA,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,QAAO,SAAA,CAChCF,OAACC,oBACCnB,MAACqB,EAAAA,QAAK,CAAA,WAAW,SAAU,SAAAZ,IAC1BE,GAAkBX,MAACsB,EAAgB,QAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,MAAA,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACRb,GACCV,EAACqB,IAAAA,EAAAA,QAAK,CAAA,KAAK,KAAK,UAAU,yBACvBX,CAAc,CAAA,CAElB,CAAA,CAAA,CACM,IAEXV,MAACmB,EAAM,OAAA,CAAA,SACJJ,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCE,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EAEI,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAEDX,EAAqB,YAAc,mBAEnC,MAAMkB,EAAmB,OAAO,OAAOlB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
1
+ {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer, ButtonContainerProps } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css, cx } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps, ButtonContainerProps {\n primaryLabel: string;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className={cx(\n css({\n p: 4,\n bg: 'neutral.quaternary',\n _hover: { bg: 'neutral.secondary' },\n }),\n className,\n )}\n borderRadius=\"0.5rem\"\n expand\n {...props}\n >\n <HStack justify=\"space-between\" w=\"full\">\n <HStack>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n height: 24,\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n },\n }}\n <VStack gap={0} alignItems=\"start\">\n <HStack>\n <Text fontWeight=\"medium\">{primaryLabel}</Text>\n {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n </HStack>\n {secondaryLabel && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n </VStack>\n </HStack>\n <HStack>\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </HStack>\n </HStack>\n </ButtonContainer>\n );\n });\n },\n);\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","className","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","cx","css","_jsxs","HStack","VStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"u4BAiBA,MAAMA,EAAcC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,IAAAA,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAAA,WAC3B,CAAC,CAAE,UAAAC,EAAW,GAAGT,CAAK,EAAIU,IAAgB,CACxC,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKb,EAEzD,OAAOc,EAAWd,WAAAA,EAAM,SAAUe,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIlB,CAAW,EACnCoB,EAAeF,EAAM,IAAIT,CAAY,EAE3C,OACEL,EAAAA,IAACiB,EAAAA,gBAAe,CACd,IAAKR,EACL,UAAWS,EAAAA,GACTC,MAAI,CACF,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACDX,CAAS,EAEX,aAAa,SACb,OACI,GAAA,GAAAT,EAEJ,SAAAqB,EAACC,KAAAA,SAAM,CAAC,QAAQ,gBAAgB,EAAE,OAAM,SAAA,CACtCD,OAACC,EAAAA,OACE,CAAA,SAAA,CAAAN,GAAe,CACd,GAAGA,EACH,MAAO,CACL,OAAQ,GACR,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BI,EAAI,IAAA,CAAE,MAAO,aAAc,CAClE,CACF,EACDC,OAACE,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,QAAO,SAAA,CAChCF,EAAAA,KAACC,EAAAA,kBACCrB,EAAAA,IAACuB,EAAAA,QAAK,CAAA,WAAW,SAAU,SAAAb,IAC1BE,GAAkBZ,MAACwB,EAAAA,QAAgB,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,QAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACRd,GACCX,EAAAA,IAACuB,UAAK,CAAA,KAAK,KAAK,UAAU,yBACvBZ,CAAc,CAAA,CAElB,CAAA,CAAA,CACM,IAEXX,EAAAA,IAACqB,EAAAA,OAAM,CAAA,SACJL,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCG,EAAAA,IAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EAEI,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAGHb,EAAqB,YAAc,yBAE7BoB,EAAmB,OAAO,OAAOpB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
@@ -1,2 +1,2 @@
1
- import{jsx as o,jsxs as m}from"react/jsx-runtime";import{ButtonContainer as w}from"../containers/button.js";import"../containers/card.js";import{css as a}from"@styled/css";import{Center as c,HStack as p,VStack as L}from"@styled/jsx";import{token as N}from"@styled/tokens";import j from"../icons/ico-external-link.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import d from"../primitives/text.js";import{Children as h,cloneElement as f,forwardRef as k}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import{createSlot as g,createHost as v}from"create-slots";const u=g(({children:r,...t})=>o(c,{children:h.map(r,e=>f(e,t))})),b=g(({children:r,...t})=>o(c,{children:h.map(r,e=>f(e,t))})),y=k((r,t)=>{const{primaryLabel:e,secondaryLabel:l,isExternalLink:x}=r;return v(r.children,s=>{const i=s.get(u),n=s.get(b);return o(w,{ref:t,className:a({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),borderRadius:"0.5rem",expand:!0,...r,children:m(p,{justify:"space-between",w:"full",children:[m(p,{children:[i&&{...i,props:{height:24,...i.props,className:i.props.color?void 0:a({color:"brand.base"})}},m(L,{gap:0,alignItems:"start",children:[m(p,{children:[o(d,{fontWeight:"medium",children:e}),x&&o(j,{width:14,height:14,color:N("colors.neutral.primary")})]}),l&&o(d,{size:"sm",fontColor:"text.tertiary",children:l})]})]}),o(p,{children:n&&{...n,props:{...n.props,className:n.props.color?void 0:a({color:"neutral.primary"}),width:16,height:16}}})]})})})});y.displayName="NavigationButton";const C=Object.assign(y,{LeadingIcon:u,TrailingIcon:b});export{C as default};
1
+ import{jsx as o,jsxs as a}from"react/jsx-runtime";import{ButtonContainer as w}from"../containers/button.js";import"../containers/card.js";import{cx as C,css as p}from"@styled/css";import{Center as c,HStack as m,VStack as j}from"@styled/jsx";import{token as k}from"@styled/tokens";import v from"../icons/ico-external-link.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import d from"../primitives/text.js";import{Children as h,cloneElement as f,forwardRef as L}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import{createSlot as g,createHost as B}from"create-slots";const u=g(({children:t,...r})=>o(c,{children:h.map(t,e=>f(e,r))})),b=g(({children:t,...r})=>o(c,{children:h.map(t,e=>f(e,r))})),y=L(({className:t,...r},e)=>{const{primaryLabel:x,secondaryLabel:l,isExternalLink:N}=r;return B(r.children,s=>{const i=s.get(u),n=s.get(b);return o(w,{ref:e,className:C(p({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),t),borderRadius:"0.5rem",expand:!0,...r,children:a(m,{justify:"space-between",w:"full",children:[a(m,{children:[i&&{...i,props:{height:24,...i.props,className:i.props.color?void 0:p({color:"brand.base"})}},a(j,{gap:0,alignItems:"start",children:[a(m,{children:[o(d,{fontWeight:"medium",children:x}),N&&o(v,{width:14,height:14,color:k("colors.neutral.primary")})]}),l&&o(d,{size:"sm",fontColor:"text.tertiary",children:l})]})]}),o(m,{children:n&&{...n,props:{...n.props,className:n.props.color?void 0:p({color:"neutral.primary"}),width:16,height:16}}})]})})})});y.displayName="NavigationButton";const I=Object.assign(y,{LeadingIcon:u,TrailingIcon:b});export{I as default};
2
2
  //# sourceMappingURL=navigation-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n primaryLabel: string;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className={css({\n p: 4,\n bg: 'neutral.quaternary',\n _hover: { bg: 'neutral.secondary' },\n })}\n borderRadius=\"0.5rem\"\n expand\n {...props}\n >\n <HStack justify=\"space-between\" w=\"full\">\n <HStack>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n height: 24,\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n },\n }}\n <VStack gap={0} alignItems=\"start\">\n <HStack>\n <Text fontWeight=\"medium\">{primaryLabel}</Text>\n {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n </HStack>\n {secondaryLabel && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n </VStack>\n </HStack>\n <HStack>\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </HStack>\n </HStack>\n </ButtonContainer>\n );\n });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","css","_jsxs","HStack","VStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"07BAiBA,MAAMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,EAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIR,CAAY,EAE3C,OACEL,EAACgB,EACC,CAAA,IAAKR,EACL,UAAWS,EAAI,CACb,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACD,aAAa,SACb,OACI,GAAA,GAAAlB,EAEJ,SAAAmB,EAACC,EAAM,CAAC,QAAQ,gBAAgB,EAAE,iBAChCD,EAACC,EACE,CAAA,SAAA,CAAAL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,OAAQ,GACR,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BG,EAAI,CAAE,MAAO,aAAc,CAClE,CACF,EACDC,EAACE,EAAO,CAAA,IAAK,EAAG,WAAW,QAAO,SAAA,CAChCF,EAACC,aACCnB,EAACqB,EAAK,CAAA,WAAW,SAAU,SAAAZ,IAC1BE,GAAkBX,EAACsB,EAAgB,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACRb,GACCV,EAACqB,EAAK,CAAA,KAAK,KAAK,UAAU,yBACvBX,CAAc,CAAA,CAElB,CAAA,CAAA,CACM,IAEXV,EAACmB,EAAM,CAAA,SACJJ,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCE,EAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EAEI,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAEDX,EAAqB,YAAc,mBAEnC,MAAMkB,EAAmB,OAAO,OAAOlB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
1
+ {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer, ButtonContainerProps } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css, cx } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps, ButtonContainerProps {\n primaryLabel: string;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className={cx(\n css({\n p: 4,\n bg: 'neutral.quaternary',\n _hover: { bg: 'neutral.secondary' },\n }),\n className,\n )}\n borderRadius=\"0.5rem\"\n expand\n {...props}\n >\n <HStack justify=\"space-between\" w=\"full\">\n <HStack>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n height: 24,\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n },\n }}\n <VStack gap={0} alignItems=\"start\">\n <HStack>\n <Text fontWeight=\"medium\">{primaryLabel}</Text>\n {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n </HStack>\n {secondaryLabel && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n </VStack>\n </HStack>\n <HStack>\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </HStack>\n </HStack>\n </ButtonContainer>\n );\n });\n },\n);\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","className","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","cx","css","_jsxs","HStack","VStack","Text","IcoExternalLink","token","NavigationButton"],"mappings":"k8BAiBA,MAAMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAC3B,CAAC,CAAE,UAAAC,EAAW,GAAGT,CAAK,EAAIU,IAAgB,CACxC,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKb,EAEzD,OAAOc,EAAWd,EAAM,SAAUe,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIlB,CAAW,EACnCoB,EAAeF,EAAM,IAAIT,CAAY,EAE3C,OACEL,EAACiB,EAAe,CACd,IAAKR,EACL,UAAWS,EACTC,EAAI,CACF,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACDX,CAAS,EAEX,aAAa,SACb,OACI,GAAA,GAAAT,EAEJ,SAAAqB,EAACC,EAAM,CAAC,QAAQ,gBAAgB,EAAE,OAAM,SAAA,CACtCD,EAACC,EACE,CAAA,SAAA,CAAAN,GAAe,CACd,GAAGA,EACH,MAAO,CACL,OAAQ,GACR,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BI,EAAI,CAAE,MAAO,aAAc,CAClE,CACF,EACDC,EAACE,EAAO,CAAA,IAAK,EAAG,WAAW,QAAO,SAAA,CAChCF,EAACC,aACCrB,EAACuB,EAAK,CAAA,WAAW,SAAU,SAAAb,IAC1BE,GAAkBZ,EAACwB,EAAgB,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACRd,GACCX,EAACuB,EAAK,CAAA,KAAK,KAAK,UAAU,yBACvBZ,CAAc,CAAA,CAElB,CAAA,CAAA,CACM,IAEXX,EAACqB,EAAM,CAAA,SACJL,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCG,EAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EAEI,CAAA,CAAA,CAAA,CAAA,CAEK,CAAA,CAEtB,CAAC,CACH,CAAC,EAGHb,EAAqB,YAAc,yBAE7BoB,EAAmB,OAAO,OAAOpB,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
+ import { ButtonContainerProps } from '../containers';
2
3
  import { AriaButtonProps } from 'react-aria';
3
- export interface NavigationButtonProps extends AriaButtonProps {
4
+ export interface NavigationButtonProps extends AriaButtonProps, ButtonContainerProps {
4
5
  primaryLabel: string;
5
6
  secondaryLabel?: string;
6
7
  isExternalLink?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"navigation-button.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/navigation-button.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkFD,QAAA,MAAM,gBAAgB;;;CAAqE,CAAC;AAE5F,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"navigation-button.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/navigation-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAQ/E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,eAAe,EAAE,oBAAoB;IAClF,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuFD,QAAA,MAAM,gBAAgB;;;CAAqE,CAAC;AAE5F,eAAe,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.36.10",
3
+ "version": "1.36.12",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {