@magiclabs/ui-components 1.39.1 → 1.40.0

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";var r=require("react/jsx-runtime"),x=require("@styled/tokens"),y=require("../icons/ico-clock-fill.js"),q=require("../icons/ico-grid-fill.js"),g=require("../icons/ico-home-fill.js"),m=require("../icons/ico-settings-fill.js");require("react");var o=require("@styled/jsx"),b=require("@styled/css");require("../feedback/callout.js"),require("../feedback/progress-bar.js");var u=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"),require("../primitives/text.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js");var h=require("../feedback/tooltip.js");const d={Home:g.default,Gallery:q.default,Activity:y.default,Settings:m.default};exports.WalletNavigationType=void 0,function(e){e.Home="home",e.Gallery="gallery",e.Activity="activity",e.Settings="settings"}(exports.WalletNavigationType||(exports.WalletNavigationType={}));const j=({active:e,children:i,label:t,onPress:a})=>r.jsx(o.Box,{pointerEvents:e===t?"none":"initial",children:r.jsx(u.default,{variant:"text",onPress:a,children:r.jsx(u.default.LeadingIcon,{className:b.css({color:e===t?"text.primary":"text.tertiary",_groupHover:{color:e===t?"text.primary":"text.secondary"}}),children:i})})}),f=(e,i)=>e[i],N=({active:e=exports.WalletNavigationType.Home,disabled:i=[],...t})=>r.jsx(o.Center,{bottom:0,pos:"fixed",h:"6.25rem",w:"full",style:{background:`linear-gradient(180deg, transparent 0%, ${x.token("colors.surface.primary")} 100%)`},children:r.jsx(o.HStack,{bg:"text.primary/6",borderColor:"text.primary/10",borderWidth:"medium",borderStyle:"solid",borderRadius:52,backdropFilter:"blur(24px)",p:1.5,children:Object.keys(exports.WalletNavigationType).map(a=>{var n;const l=exports.WalletNavigationType[a],s=(n=i.find(p=>p.type===l))===null||n===void 0?void 0:n.label,c=d[a],v=f(t,`on${a}`);return s?r.jsx(h.default,{content:s,width:"max-content",children:r.jsx(o.Box,{border:"thin solid transparent",opacity:.3,p:1.5,children:r.jsx(c,{})})},l):r.jsx(j,{active:e,label:l,onPress:v,children:r.jsx(c,{})},l)})})});exports.WalletNavigation=N,exports.WalletNavigationIcons=d;
1
+ "use strict";var r=require("react/jsx-runtime"),x=require("@styled/tokens"),y=require("../icons/ico-clock-fill.js"),q=require("../icons/ico-grid-fill.js"),g=require("../icons/ico-home-fill.js"),m=require("../icons/ico-settings-fill.js");require("react");var o=require("@styled/jsx"),b=require("@styled/css");require("../feedback/callout.js"),require("../feedback/progress-bar.js");var d=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"),require("../primitives/text.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js");var h=require("../feedback/tooltip.js");const v={Home:g.default,Gallery:q.default,Activity:y.default,Settings:m.default};exports.WalletNavigationType=void 0,function(e){e.Home="home",e.Gallery="gallery",e.Activity="activity",e.Settings="settings"}(exports.WalletNavigationType||(exports.WalletNavigationType={}));const j=({active:e,children:i,label:t,onPress:a})=>r.jsx(o.Box,{pointerEvents:e===t?"none":"initial",children:r.jsx(d.default,{variant:"text",onPress:a,children:r.jsx(d.default.LeadingIcon,{className:b.css({color:e===t?"text.primary":"text.tertiary",_groupHover:{color:e===t?"text.primary":"text.secondary"}}),children:i})})}),f=(e,i)=>e[i],N=({active:e=exports.WalletNavigationType.Home,disabled:i=[],...t})=>r.jsx(o.Center,{bottom:0,pos:"fixed",h:"6.25rem",w:"full",style:{background:`linear-gradient(180deg, transparent 0%, ${x.token("colors.surface.primary")} 100%)`},children:r.jsx(o.HStack,{bg:"text.primary/6",borderColor:"text.primary/10",borderWidth:"medium",borderStyle:"solid",borderRadius:52,backdropFilter:"blur(24px)",p:1.5,children:Object.keys(exports.WalletNavigationType).map(a=>{var n;const l=exports.WalletNavigationType[a],s=(n=i.find(p=>p.type===l))===null||n===void 0?void 0:n.label,c=v[a],u=f(t,`on${a}`);return u?s?r.jsx(h.default,{content:s,width:"max-content",children:r.jsx(o.Box,{border:"thin solid transparent",opacity:.3,p:1.5,children:r.jsx(c,{})})},l):r.jsx(j,{active:e,label:l,onPress:u,children:r.jsx(c,{})},l):null})})});exports.WalletNavigation=N,exports.WalletNavigationIcons=v;
2
2
  //# sourceMappingURL=wallet-navigation.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"wallet-navigation.js","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoClockFill, IcoGridFill, IcoHomeFill, IcoSettingsFill } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { PropsWithChildren } from 'react';\n\nexport const WalletNavigationIcons = {\n Home: IcoHomeFill,\n Gallery: IcoGridFill,\n Activity: IcoClockFill,\n Settings: IcoSettingsFill,\n};\n\nexport enum WalletNavigationType {\n Home = 'home',\n Gallery = 'gallery',\n Activity = 'activity',\n Settings = 'settings',\n}\ninterface ActionProps extends PropsWithChildren {\n active?: WalletNavigationType;\n label: WalletNavigationType;\n onPress: () => void;\n}\n\ntype DisabledProps = {\n type: WalletNavigationType;\n label: string;\n};\n\nexport interface WalletNavigationProps {\n active?: WalletNavigationType;\n onActivity: () => void;\n onGallery: () => void;\n onHome: () => void;\n onSettings: () => void;\n disabled?: DisabledProps[];\n}\n\nconst Action = ({ active, children, label, onPress }: ActionProps) => (\n <Box pointerEvents={active === label ? 'none' : 'initial'}>\n <Button variant=\"text\" onPress={onPress}>\n <Button.LeadingIcon\n className={css({\n color: active === label ? 'text.primary' : 'text.tertiary',\n _groupHover: { color: active === label ? 'text.primary' : 'text.secondary' },\n })}\n >\n {children}\n </Button.LeadingIcon>\n </Button>\n </Box>\n);\n\nconst getHandler = <T, K extends keyof T>(o: T, propertyName: K): T[K] => o[propertyName];\n\nexport const WalletNavigation = ({\n active = WalletNavigationType.Home,\n disabled = [],\n ...props\n}: WalletNavigationProps) => {\n return (\n <Center\n bottom={0}\n pos=\"fixed\"\n h=\"6.25rem\"\n w=\"full\"\n style={{ background: `linear-gradient(180deg, transparent 0%, ${token('colors.surface.primary')} 100%)` }}\n >\n <HStack\n bg=\"text.primary/6\"\n borderColor=\"text.primary/10\"\n borderWidth=\"medium\"\n borderStyle=\"solid\"\n borderRadius={52}\n backdropFilter=\"blur(24px)\"\n p={1.5}\n >\n {Object.keys(WalletNavigationType).map(key => {\n const type = WalletNavigationType[key as keyof typeof WalletNavigationType];\n const disabledLabel = disabled.find(d => d.type === type)?.label;\n const Icon = WalletNavigationIcons[key as keyof typeof WalletNavigationType];\n const onPress = getHandler(props, `on${key}` as keyof typeof props);\n\n if (disabledLabel) {\n return (\n <Tooltip key={type} content={disabledLabel} width=\"max-content\">\n <Box border=\"thin solid transparent\" opacity={0.3} p={1.5}>\n <Icon />\n </Box>\n </Tooltip>\n );\n }\n return (\n <Action active={active} label={type} onPress={onPress} key={type}>\n <Icon />\n </Action>\n );\n })}\n </HStack>\n </Center>\n );\n};\n"],"names":["WalletNavigationIcons","IcoHomeFill","IcoGridFill","IcoClockFill","IcoSettingsFill","WalletNavigationType","Action","active","children","label","onPress","_jsx","Box","Button","css","getHandler","o","propertyName","WalletNavigation","disabled","props","Center","token","HStack","key","type","disabledLabel","_a","d","Icon","Tooltip"],"mappings":"i0BAQO,MAAMA,EAAwB,CACnC,KAAMC,EACN,QAAA,QAASC,EACT,QAAA,SAAUC,EAAAA,QACV,SAAUC,EAAAA,SAGAC,QAAZ,qBAAA,OAAA,SAAYA,EAAoB,CAC9BA,EAAA,KAAA,OACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACF,EALYA,+BAAAA,6BAKX,CAAA,EAAA,EAqBD,MAAMC,EAAS,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,EAAO,QAAAC,CAAO,IAChDC,MAACC,MAAG,CAAC,cAAeL,IAAWE,EAAQ,OAAS,UAAS,SACvDE,MAACE,UAAM,CAAC,QAAQ,OAAO,QAASH,EAC9B,SAAAC,MAACE,EAAAA,QAAO,YACN,CAAA,UAAWC,EAAAA,IAAI,CACb,MAAOP,IAAWE,EAAQ,eAAiB,gBAC3C,YAAa,CAAE,MAAOF,IAAWE,EAAQ,eAAiB,gBAAkB,CAC7E,CAAA,WAEAD,CAAQ,CAAA,CAEJ,CAAA,CAAA,CAAA,EAIPO,EAAa,CAAuBC,EAAMC,IAA0BD,EAAEC,CAAY,EAE3EC,EAAmB,CAAC,CAC/B,OAAAX,EAASF,QAAA,qBAAqB,KAC9B,SAAAc,EAAW,CAAA,EACX,GAAGC,CAAK,IAGNT,EAAAA,IAACU,EAAAA,OAAM,CACL,OAAQ,EACR,IAAI,QACJ,EAAE,UACF,EAAE,OACF,MAAO,CAAE,WAAY,2CAA2CC,EAAAA,MAAM,wBAAwB,CAAC,QAAQ,EAEvG,SAAAX,MAACY,EACC,OAAA,CAAA,GAAG,iBACH,YAAY,kBACZ,YAAY,SACZ,YAAY,QACZ,aAAc,GACd,eAAe,aACf,EAAG,IAAG,SAEL,OAAO,KAAKlB,4BAAoB,EAAE,IAAImB,GAAM,OAC3C,MAAMC,EAAOpB,6BAAqBmB,CAAwC,EACpEE,GAAgBC,EAAAR,EAAS,KAAKS,GAAKA,EAAE,OAASH,CAAI,KAAC,MAAAE,IAAA,OAAA,OAAAA,EAAE,MACrDE,EAAO7B,EAAsBwB,CAAwC,EACrEd,EAAUK,EAAWK,EAAO,KAAKI,CAAG,EAAwB,EAElE,OAAIE,EAEAf,MAACmB,EAAAA,QAAO,CAAY,QAASJ,EAAe,MAAM,cAAa,SAC7Df,EAAAA,IAACC,EAAAA,KAAI,OAAO,yBAAyB,QAAS,GAAK,EAAG,IAAG,SACvDD,EAAAA,IAACkB,KACG,CAAA,CAAA,EAHMJ,CAAI,EAQpBd,MAACL,EAAM,CAAC,OAAQC,EAAQ,MAAOkB,EAAM,QAASf,EAAO,SACnDC,EAAAA,IAACkB,KADyD,EAAAJ,CAAI,CAIpE,CAAC,CAAC,CAAA,CAEG,CAAA"}
1
+ {"version":3,"file":"wallet-navigation.js","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoClockFill, IcoGridFill, IcoHomeFill, IcoSettingsFill } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { PropsWithChildren } from 'react';\n\nexport const WalletNavigationIcons = {\n Home: IcoHomeFill,\n Gallery: IcoGridFill,\n Activity: IcoClockFill,\n Settings: IcoSettingsFill,\n};\n\nexport enum WalletNavigationType {\n Home = 'home',\n Gallery = 'gallery',\n Activity = 'activity',\n Settings = 'settings',\n}\ninterface ActionProps extends PropsWithChildren {\n active?: WalletNavigationType;\n label: WalletNavigationType;\n onPress: () => void;\n}\n\ntype DisabledProps = {\n type: WalletNavigationType;\n label: string;\n};\n\nexport interface WalletNavigationProps {\n active?: WalletNavigationType;\n onActivity?: () => void;\n onGallery?: () => void;\n onHome?: () => void;\n onSettings?: () => void;\n disabled?: DisabledProps[];\n}\n\nconst Action = ({ active, children, label, onPress }: ActionProps) => (\n <Box pointerEvents={active === label ? 'none' : 'initial'}>\n <Button variant=\"text\" onPress={onPress}>\n <Button.LeadingIcon\n className={css({\n color: active === label ? 'text.primary' : 'text.tertiary',\n _groupHover: { color: active === label ? 'text.primary' : 'text.secondary' },\n })}\n >\n {children}\n </Button.LeadingIcon>\n </Button>\n </Box>\n);\n\nconst getHandler = <T, K extends keyof T>(o: T, propertyName: K): T[K] => o[propertyName];\n\nexport const WalletNavigation = ({\n active = WalletNavigationType.Home,\n disabled = [],\n ...props\n}: WalletNavigationProps) => {\n return (\n <Center\n bottom={0}\n pos=\"fixed\"\n h=\"6.25rem\"\n w=\"full\"\n style={{ background: `linear-gradient(180deg, transparent 0%, ${token('colors.surface.primary')} 100%)` }}\n >\n <HStack\n bg=\"text.primary/6\"\n borderColor=\"text.primary/10\"\n borderWidth=\"medium\"\n borderStyle=\"solid\"\n borderRadius={52}\n backdropFilter=\"blur(24px)\"\n p={1.5}\n >\n {Object.keys(WalletNavigationType).map(key => {\n const type = WalletNavigationType[key as keyof typeof WalletNavigationType];\n const disabledLabel = disabled.find(d => d.type === type)?.label;\n const Icon = WalletNavigationIcons[key as keyof typeof WalletNavigationType];\n const onPress = getHandler(props, `on${key}` as keyof typeof props);\n\n if (!onPress) {\n return null;\n }\n\n if (disabledLabel) {\n return (\n <Tooltip key={type} content={disabledLabel} width=\"max-content\">\n <Box border=\"thin solid transparent\" opacity={0.3} p={1.5}>\n <Icon />\n </Box>\n </Tooltip>\n );\n }\n return (\n <Action active={active} label={type} onPress={onPress} key={type}>\n <Icon />\n </Action>\n );\n })}\n </HStack>\n </Center>\n );\n};\n"],"names":["WalletNavigationIcons","IcoHomeFill","IcoGridFill","IcoClockFill","IcoSettingsFill","WalletNavigationType","Action","active","children","label","onPress","_jsx","Box","Button","css","getHandler","o","propertyName","WalletNavigation","disabled","props","Center","token","HStack","key","type","disabledLabel","_a","d","Icon","Tooltip"],"mappings":"i0BAQO,MAAMA,EAAwB,CACnC,KAAMC,EACN,QAAA,QAASC,EACT,QAAA,SAAUC,EAAAA,QACV,SAAUC,EAAAA,SAGAC,QAAZ,qBAAA,OAAA,SAAYA,EAAoB,CAC9BA,EAAA,KAAA,OACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACF,EALYA,+BAAAA,6BAKX,CAAA,EAAA,EAqBD,MAAMC,EAAS,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,EAAO,QAAAC,CAAO,IAChDC,MAACC,EAAG,IAAA,CAAC,cAAeL,IAAWE,EAAQ,OAAS,UAAS,SACvDE,EAAAA,IAACE,EAAAA,QAAM,CAAC,QAAQ,OAAO,QAASH,EAC9B,SAAAC,EAAAA,IAACE,UAAO,YACN,CAAA,UAAWC,EAAAA,IAAI,CACb,MAAOP,IAAWE,EAAQ,eAAiB,gBAC3C,YAAa,CAAE,MAAOF,IAAWE,EAAQ,eAAiB,gBAAkB,CAC7E,CAAA,WAEAD,CAAQ,CAAA,CAEJ,CAAA,CAAA,CAAA,EAIPO,EAAa,CAAuBC,EAAMC,IAA0BD,EAAEC,CAAY,EAE3EC,EAAmB,CAAC,CAC/B,OAAAX,EAASF,6BAAqB,KAC9B,SAAAc,EAAW,CACX,EAAA,GAAGC,CAAK,IAGNT,MAACU,EAAAA,OAAM,CACL,OAAQ,EACR,IAAI,QACJ,EAAE,UACF,EAAE,OACF,MAAO,CAAE,WAAY,2CAA2CC,EAAAA,MAAM,wBAAwB,CAAC,QAAQ,EAEvG,SAAAX,EAAAA,IAACY,SACC,CAAA,GAAG,iBACH,YAAY,kBACZ,YAAY,SACZ,YAAY,QACZ,aAAc,GACd,eAAe,aACf,EAAG,IAAG,SAEL,OAAO,KAAKlB,QAAoB,oBAAA,EAAE,IAAImB,GAAM,OAC3C,MAAMC,EAAOpB,QAAqBmB,qBAAAA,CAAwC,EACpEE,GAAgBC,EAAAR,EAAS,KAAKS,GAAKA,EAAE,OAASH,CAAI,KAAC,MAAAE,IAAA,OAAA,OAAAA,EAAE,MACrDE,EAAO7B,EAAsBwB,CAAwC,EACrEd,EAAUK,EAAWK,EAAO,KAAKI,CAAG,EAAwB,EAElE,OAAKd,EAIDgB,EAEAf,EAAAA,IAACmB,EAAAA,QAAO,CAAY,QAASJ,EAAe,MAAM,cAAa,SAC7Df,MAACC,EAAAA,KAAI,OAAO,yBAAyB,QAAS,GAAK,EAAG,IAAG,SACvDD,EAAAA,IAACkB,KACG,CAAA,CAAA,EAHMJ,CAAI,EAQpBd,EAAAA,IAACL,EAAM,CAAC,OAAQC,EAAQ,MAAOkB,EAAM,QAASf,EAAO,SACnDC,EAACkB,IAAAA,KADyD,EAAAJ,CAAI,EAbzD,IAiBX,CAAC,CAAC,CAAA,CAEG,CAAA"}
@@ -1,2 +1,2 @@
1
- import{jsx as r}from"react/jsx-runtime";import{token as b}from"@styled/tokens";import f from"../icons/ico-clock-fill.js";import h from"../icons/ico-grid-fill.js";import g from"../icons/ico-home-fill.js";import x from"../icons/ico-settings-fill.js";import"react";import{Center as u,HStack as k,Box as c}from"@styled/jsx";import{css as H}from"@styled/css";import"../feedback/callout.js";import"../feedback/progress-bar.js";import s from"../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"../primitives/text.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import N from"../feedback/tooltip.js";const d={Home:g,Gallery:h,Activity:f,Settings:x};var o;(function(t){t.Home="home",t.Gallery="gallery",t.Activity="activity",t.Settings="settings"})(o||(o={}));const S=({active:t,children:i,label:e,onPress:n})=>r(c,{pointerEvents:t===e?"none":"initial",children:r(s,{variant:"text",onPress:n,children:r(s.LeadingIcon,{className:H({color:t===e?"text.primary":"text.tertiary",_groupHover:{color:t===e?"text.primary":"text.secondary"}}),children:i})})}),W=(t,i)=>t[i],$=({active:t=o.Home,disabled:i=[],...e})=>r(u,{bottom:0,pos:"fixed",h:"6.25rem",w:"full",style:{background:`linear-gradient(180deg, transparent 0%, ${b("colors.surface.primary")} 100%)`},children:r(k,{bg:"text.primary/6",borderColor:"text.primary/10",borderWidth:"medium",borderStyle:"solid",borderRadius:52,backdropFilter:"blur(24px)",p:1.5,children:Object.keys(o).map(n=>{var a;const m=o[n],l=(a=i.find(v=>v.type===m))===null||a===void 0?void 0:a.label,p=d[n],y=W(e,`on${n}`);return l?r(N,{content:l,width:"max-content",children:r(c,{border:"thin solid transparent",opacity:.3,p:1.5,children:r(p,{})})},m):r(S,{active:t,label:m,onPress:y,children:r(p,{})},m)})})});export{$ as WalletNavigation,d as WalletNavigationIcons,o as WalletNavigationType};
1
+ import{jsx as r}from"react/jsx-runtime";import{token as b}from"@styled/tokens";import f from"../icons/ico-clock-fill.js";import h from"../icons/ico-grid-fill.js";import g from"../icons/ico-home-fill.js";import x from"../icons/ico-settings-fill.js";import"react";import{Center as u,HStack as k,Box as s}from"@styled/jsx";import{css as H}from"@styled/css";import"../feedback/callout.js";import"../feedback/progress-bar.js";import d from"../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"../primitives/text.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import N from"../feedback/tooltip.js";const y={Home:g,Gallery:h,Activity:f,Settings:x};var o;(function(t){t.Home="home",t.Gallery="gallery",t.Activity="activity",t.Settings="settings"})(o||(o={}));const S=({active:t,children:i,label:e,onPress:n})=>r(s,{pointerEvents:t===e?"none":"initial",children:r(d,{variant:"text",onPress:n,children:r(d.LeadingIcon,{className:H({color:t===e?"text.primary":"text.tertiary",_groupHover:{color:t===e?"text.primary":"text.secondary"}}),children:i})})}),W=(t,i)=>t[i],$=({active:t=o.Home,disabled:i=[],...e})=>r(u,{bottom:0,pos:"fixed",h:"6.25rem",w:"full",style:{background:`linear-gradient(180deg, transparent 0%, ${b("colors.surface.primary")} 100%)`},children:r(k,{bg:"text.primary/6",borderColor:"text.primary/10",borderWidth:"medium",borderStyle:"solid",borderRadius:52,backdropFilter:"blur(24px)",p:1.5,children:Object.keys(o).map(n=>{var m;const a=o[n],l=(m=i.find(v=>v.type===a))===null||m===void 0?void 0:m.label,p=y[n],c=W(e,`on${n}`);return c?l?r(N,{content:l,width:"max-content",children:r(s,{border:"thin solid transparent",opacity:.3,p:1.5,children:r(p,{})})},a):r(S,{active:t,label:a,onPress:c,children:r(p,{})},a):null})})});export{$ as WalletNavigation,y as WalletNavigationIcons,o as WalletNavigationType};
2
2
  //# sourceMappingURL=wallet-navigation.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"wallet-navigation.js","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoClockFill, IcoGridFill, IcoHomeFill, IcoSettingsFill } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { PropsWithChildren } from 'react';\n\nexport const WalletNavigationIcons = {\n Home: IcoHomeFill,\n Gallery: IcoGridFill,\n Activity: IcoClockFill,\n Settings: IcoSettingsFill,\n};\n\nexport enum WalletNavigationType {\n Home = 'home',\n Gallery = 'gallery',\n Activity = 'activity',\n Settings = 'settings',\n}\ninterface ActionProps extends PropsWithChildren {\n active?: WalletNavigationType;\n label: WalletNavigationType;\n onPress: () => void;\n}\n\ntype DisabledProps = {\n type: WalletNavigationType;\n label: string;\n};\n\nexport interface WalletNavigationProps {\n active?: WalletNavigationType;\n onActivity: () => void;\n onGallery: () => void;\n onHome: () => void;\n onSettings: () => void;\n disabled?: DisabledProps[];\n}\n\nconst Action = ({ active, children, label, onPress }: ActionProps) => (\n <Box pointerEvents={active === label ? 'none' : 'initial'}>\n <Button variant=\"text\" onPress={onPress}>\n <Button.LeadingIcon\n className={css({\n color: active === label ? 'text.primary' : 'text.tertiary',\n _groupHover: { color: active === label ? 'text.primary' : 'text.secondary' },\n })}\n >\n {children}\n </Button.LeadingIcon>\n </Button>\n </Box>\n);\n\nconst getHandler = <T, K extends keyof T>(o: T, propertyName: K): T[K] => o[propertyName];\n\nexport const WalletNavigation = ({\n active = WalletNavigationType.Home,\n disabled = [],\n ...props\n}: WalletNavigationProps) => {\n return (\n <Center\n bottom={0}\n pos=\"fixed\"\n h=\"6.25rem\"\n w=\"full\"\n style={{ background: `linear-gradient(180deg, transparent 0%, ${token('colors.surface.primary')} 100%)` }}\n >\n <HStack\n bg=\"text.primary/6\"\n borderColor=\"text.primary/10\"\n borderWidth=\"medium\"\n borderStyle=\"solid\"\n borderRadius={52}\n backdropFilter=\"blur(24px)\"\n p={1.5}\n >\n {Object.keys(WalletNavigationType).map(key => {\n const type = WalletNavigationType[key as keyof typeof WalletNavigationType];\n const disabledLabel = disabled.find(d => d.type === type)?.label;\n const Icon = WalletNavigationIcons[key as keyof typeof WalletNavigationType];\n const onPress = getHandler(props, `on${key}` as keyof typeof props);\n\n if (disabledLabel) {\n return (\n <Tooltip key={type} content={disabledLabel} width=\"max-content\">\n <Box border=\"thin solid transparent\" opacity={0.3} p={1.5}>\n <Icon />\n </Box>\n </Tooltip>\n );\n }\n return (\n <Action active={active} label={type} onPress={onPress} key={type}>\n <Icon />\n </Action>\n );\n })}\n </HStack>\n </Center>\n );\n};\n"],"names":["WalletNavigationIcons","IcoHomeFill","IcoGridFill","IcoClockFill","IcoSettingsFill","WalletNavigationType","Action","active","children","label","onPress","_jsx","Box","Button","css","getHandler","o","propertyName","WalletNavigation","disabled","props","Center","token","HStack","key","type","disabledLabel","_a","d","Icon","Tooltip"],"mappings":"u0BAQO,MAAMA,EAAwB,CACnC,KAAMC,EACN,QAASC,EACT,SAAUC,EACV,SAAUC,OAGAC,GAAZ,SAAYA,EAAoB,CAC9BA,EAAA,KAAA,OACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACF,GALYA,IAAAA,EAKX,GAAA,EAqBD,MAAMC,EAAS,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,EAAO,QAAAC,CAAO,IAChDC,EAACC,EAAG,CAAC,cAAeL,IAAWE,EAAQ,OAAS,UAAS,SACvDE,EAACE,EAAM,CAAC,QAAQ,OAAO,QAASH,EAC9B,SAAAC,EAACE,EAAO,YACN,CAAA,UAAWC,EAAI,CACb,MAAOP,IAAWE,EAAQ,eAAiB,gBAC3C,YAAa,CAAE,MAAOF,IAAWE,EAAQ,eAAiB,gBAAkB,CAC7E,CAAA,WAEAD,CAAQ,CAAA,CAEJ,CAAA,CAAA,CAAA,EAIPO,EAAa,CAAuBC,EAAMC,IAA0BD,EAAEC,CAAY,EAE3EC,EAAmB,CAAC,CAC/B,OAAAX,EAASF,EAAqB,KAC9B,SAAAc,EAAW,CAAE,EACb,GAAGC,CAAK,IAGNT,EAACU,EAAM,CACL,OAAQ,EACR,IAAI,QACJ,EAAE,UACF,EAAE,OACF,MAAO,CAAE,WAAY,2CAA2CC,EAAM,wBAAwB,CAAC,QAAQ,EAEvG,SAAAX,EAACY,EACC,CAAA,GAAG,iBACH,YAAY,kBACZ,YAAY,SACZ,YAAY,QACZ,aAAc,GACd,eAAe,aACf,EAAG,IAAG,SAEL,OAAO,KAAKlB,CAAoB,EAAE,IAAImB,GAAM,OAC3C,MAAMC,EAAOpB,EAAqBmB,CAAwC,EACpEE,GAAgBC,EAAAR,EAAS,KAAKS,GAAKA,EAAE,OAASH,CAAI,KAAC,MAAAE,IAAA,OAAA,OAAAA,EAAE,MACrDE,EAAO7B,EAAsBwB,CAAwC,EACrEd,EAAUK,EAAWK,EAAO,KAAKI,CAAG,EAAwB,EAElE,OAAIE,EAEAf,EAACmB,EAAO,CAAY,QAASJ,EAAe,MAAM,cAAa,SAC7Df,EAACC,GAAI,OAAO,yBAAyB,QAAS,GAAK,EAAG,IAAG,SACvDD,EAACkB,KACG,CAAA,CAAA,EAHMJ,CAAI,EAQpBd,EAACL,EAAM,CAAC,OAAQC,EAAQ,MAAOkB,EAAM,QAASf,EAAO,SACnDC,EAACkB,KADyD,EAAAJ,CAAI,CAIpE,CAAC,CAAC,CAAA,CAEG,CAAA"}
1
+ {"version":3,"file":"wallet-navigation.js","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoClockFill, IcoGridFill, IcoHomeFill, IcoSettingsFill } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Center, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { PropsWithChildren } from 'react';\n\nexport const WalletNavigationIcons = {\n Home: IcoHomeFill,\n Gallery: IcoGridFill,\n Activity: IcoClockFill,\n Settings: IcoSettingsFill,\n};\n\nexport enum WalletNavigationType {\n Home = 'home',\n Gallery = 'gallery',\n Activity = 'activity',\n Settings = 'settings',\n}\ninterface ActionProps extends PropsWithChildren {\n active?: WalletNavigationType;\n label: WalletNavigationType;\n onPress: () => void;\n}\n\ntype DisabledProps = {\n type: WalletNavigationType;\n label: string;\n};\n\nexport interface WalletNavigationProps {\n active?: WalletNavigationType;\n onActivity?: () => void;\n onGallery?: () => void;\n onHome?: () => void;\n onSettings?: () => void;\n disabled?: DisabledProps[];\n}\n\nconst Action = ({ active, children, label, onPress }: ActionProps) => (\n <Box pointerEvents={active === label ? 'none' : 'initial'}>\n <Button variant=\"text\" onPress={onPress}>\n <Button.LeadingIcon\n className={css({\n color: active === label ? 'text.primary' : 'text.tertiary',\n _groupHover: { color: active === label ? 'text.primary' : 'text.secondary' },\n })}\n >\n {children}\n </Button.LeadingIcon>\n </Button>\n </Box>\n);\n\nconst getHandler = <T, K extends keyof T>(o: T, propertyName: K): T[K] => o[propertyName];\n\nexport const WalletNavigation = ({\n active = WalletNavigationType.Home,\n disabled = [],\n ...props\n}: WalletNavigationProps) => {\n return (\n <Center\n bottom={0}\n pos=\"fixed\"\n h=\"6.25rem\"\n w=\"full\"\n style={{ background: `linear-gradient(180deg, transparent 0%, ${token('colors.surface.primary')} 100%)` }}\n >\n <HStack\n bg=\"text.primary/6\"\n borderColor=\"text.primary/10\"\n borderWidth=\"medium\"\n borderStyle=\"solid\"\n borderRadius={52}\n backdropFilter=\"blur(24px)\"\n p={1.5}\n >\n {Object.keys(WalletNavigationType).map(key => {\n const type = WalletNavigationType[key as keyof typeof WalletNavigationType];\n const disabledLabel = disabled.find(d => d.type === type)?.label;\n const Icon = WalletNavigationIcons[key as keyof typeof WalletNavigationType];\n const onPress = getHandler(props, `on${key}` as keyof typeof props);\n\n if (!onPress) {\n return null;\n }\n\n if (disabledLabel) {\n return (\n <Tooltip key={type} content={disabledLabel} width=\"max-content\">\n <Box border=\"thin solid transparent\" opacity={0.3} p={1.5}>\n <Icon />\n </Box>\n </Tooltip>\n );\n }\n return (\n <Action active={active} label={type} onPress={onPress} key={type}>\n <Icon />\n </Action>\n );\n })}\n </HStack>\n </Center>\n );\n};\n"],"names":["WalletNavigationIcons","IcoHomeFill","IcoGridFill","IcoClockFill","IcoSettingsFill","WalletNavigationType","Action","active","children","label","onPress","_jsx","Box","Button","css","getHandler","o","propertyName","WalletNavigation","disabled","props","Center","token","HStack","key","type","disabledLabel","_a","d","Icon","Tooltip"],"mappings":"u0BAQO,MAAMA,EAAwB,CACnC,KAAMC,EACN,QAASC,EACT,SAAUC,EACV,SAAUC,OAGAC,GAAZ,SAAYA,EAAoB,CAC9BA,EAAA,KAAA,OACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACF,GALYA,IAAAA,EAKX,GAAA,EAqBD,MAAMC,EAAS,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,EAAO,QAAAC,CAAO,IAChDC,EAACC,EAAG,CAAC,cAAeL,IAAWE,EAAQ,OAAS,UAAS,SACvDE,EAACE,EAAM,CAAC,QAAQ,OAAO,QAASH,EAC9B,SAAAC,EAACE,EAAO,YACN,CAAA,UAAWC,EAAI,CACb,MAAOP,IAAWE,EAAQ,eAAiB,gBAC3C,YAAa,CAAE,MAAOF,IAAWE,EAAQ,eAAiB,gBAAkB,CAC7E,CAAA,WAEAD,CAAQ,CAAA,CAEJ,CAAA,CAAA,CAAA,EAIPO,EAAa,CAAuBC,EAAMC,IAA0BD,EAAEC,CAAY,EAE3EC,EAAmB,CAAC,CAC/B,OAAAX,EAASF,EAAqB,KAC9B,SAAAc,EAAW,CACX,EAAA,GAAGC,CAAK,IAGNT,EAACU,EAAM,CACL,OAAQ,EACR,IAAI,QACJ,EAAE,UACF,EAAE,OACF,MAAO,CAAE,WAAY,2CAA2CC,EAAM,wBAAwB,CAAC,QAAQ,EAEvG,SAAAX,EAACY,EACC,CAAA,GAAG,iBACH,YAAY,kBACZ,YAAY,SACZ,YAAY,QACZ,aAAc,GACd,eAAe,aACf,EAAG,IAAG,SAEL,OAAO,KAAKlB,CAAoB,EAAE,IAAImB,GAAM,OAC3C,MAAMC,EAAOpB,EAAqBmB,CAAwC,EACpEE,GAAgBC,EAAAR,EAAS,KAAKS,GAAKA,EAAE,OAASH,CAAI,KAAC,MAAAE,IAAA,OAAA,OAAAA,EAAE,MACrDE,EAAO7B,EAAsBwB,CAAwC,EACrEd,EAAUK,EAAWK,EAAO,KAAKI,CAAG,EAAwB,EAElE,OAAKd,EAIDgB,EAEAf,EAACmB,EAAO,CAAY,QAASJ,EAAe,MAAM,cAAa,SAC7Df,EAACC,GAAI,OAAO,yBAAyB,QAAS,GAAK,EAAG,IAAG,SACvDD,EAACkB,KACG,CAAA,CAAA,EAHMJ,CAAI,EAQpBd,EAACL,EAAM,CAAC,OAAQC,EAAQ,MAAOkB,EAAM,QAASf,EAAO,SACnDC,EAACkB,KADyD,EAAAJ,CAAI,EAbzD,IAiBX,CAAC,CAAC,CAAA,CAEG,CAAA"}
@@ -16,10 +16,10 @@ type DisabledProps = {
16
16
  };
17
17
  export interface WalletNavigationProps {
18
18
  active?: WalletNavigationType;
19
- onActivity: () => void;
20
- onGallery: () => void;
21
- onHome: () => void;
22
- onSettings: () => void;
19
+ onActivity?: () => void;
20
+ onGallery?: () => void;
21
+ onHome?: () => void;
22
+ onSettings?: () => void;
23
23
  disabled?: DisabledProps[];
24
24
  }
25
25
  export declare const WalletNavigation: ({ active, disabled, ...props }: WalletNavigationProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"wallet-navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,qBAAqB;;;;;CAKjC,CAAC;AAEF,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAOD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAmBD,eAAO,MAAM,gBAAgB,mCAI1B,qBAAqB,4CA0CvB,CAAC"}
1
+ {"version":3,"file":"wallet-navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/wallet-navigation.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,qBAAqB;;;;;CAKjC,CAAC;AAEF,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAOD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAmBD,eAAO,MAAM,gBAAgB,mCAI1B,qBAAqB,4CA8CvB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.39.1",
3
+ "version": "1.40.0",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {