@magiclabs/ui-components 1.34.13 → 1.34.15
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.
- package/dist/cjs/components/layouts/passport-page.js +1 -1
- package/dist/cjs/components/layouts/passport-page.js.map +1 -1
- package/dist/cjs/components/primitives/button.js +1 -1
- package/dist/cjs/components/primitives/button.js.map +1 -1
- package/dist/es/components/inputs/text-input.js +1 -1
- package/dist/es/components/layouts/passport-page.js +1 -1
- package/dist/es/components/layouts/passport-page.js.map +1 -1
- package/dist/es/components/primitives/button.js +1 -1
- package/dist/es/components/primitives/button.js.map +1 -1
- package/dist/es/components/primitives/popover.js +1 -1
- package/dist/types/components/primitives/button.d.ts +1 -0
- package/dist/types/components/primitives/button.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("../containers/button.js"),require("../containers/card.js"),require("@styled/css");var t=require("@styled/jsx"),v=require("../containers/drawer.js"),V=require("react");require("../utils/client-asset-logo.js");var m=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var W=require("../icons/ico-caret-left.js"),w=require("../icons/ico-magic.js"),A=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var S=require("../containers/menu.js"),I=require("../containers/modal.js");require("../containers/overlay.js"),require("../info/copy-button.js"),require("../info/email-wbr.js"),require("../info/security-otp.js"),require("../info/text-box.js");var L=require("../info/wallet-address.js"),n=require("../primitives/button.js"),j=require("../primitives/popover.js"),f=require("../primitives/text.js"),a=require("create-slots");const C=a.createSlot(({children:r})=>V.Children.map(r,l=>e.jsx(n.default,{expand:!0,...l.props}))),b=a.createSlot(n.default),P=a.createSlot(n.default),y=a.createSlot(({children:r})=>e.jsxs(j.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(j.Popover.TrailingIcon,{children:e.jsx(A.default,{})}),e.jsx(j.Popover.Content,{children:r})]})),k=a.createSlot(({branding:r,title:l})=>l?e.jsx(f.default,{size:"sm",fontColor:"text.secondary",children:l}):e.jsx(w.default,{color:m.token(r==="light"?"colors.text.primary":"colors.neutral.primary")})),B=a.createSlot(({children:r})=>e.jsx(t.VStack,{w:"full",justify:"center",children:r})),z=a.createSlot(S.Menu),H=a.createSlot(v.Drawer),M=a.createSlot(({children:r})=>e.jsx(t.Center,{pt:3,w:"full",children:r})),D=a.createSlot(({children:r,domain:l,name:o,logoUrl:s})=>e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[s?e.jsx("img",{src:s,alt:o,width:24,height:24}):e.jsx(w.default,{color:m.token("colors.brand.base"),height:24,width:24}),e.jsx(f.default,{size:"sm",fontWeight:"semibold",children:o}),l&&e.jsx(f.default,{size:"sm",fontColor:"text.tertiary",children:l}),r]})),J=({actionDirection:r="row",address:l,children:o,onBack:s,onCancel:d,...F})=>a.createHost(o,i=>{const c=i.getProps(b),u=i.getProps(P),p=i.getProps(H),x=i.getProps(z),g=i.get(C),q=i.get(y),T=i.get(k),h=r==="row";return e.jsxs(I.Modal,{...F,fullscreen:!0,paddingType:"none",gap:0,children:[e.jsxs(t.VStack,{gap:0,width:"full",children:[e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[s&&e.jsx(n.default,{onPress:s,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(n.default.LeadingIcon,{children:e.jsx(W.default,{})})}),d&&e.jsx(n.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(s||d)&&e.jsx(t.Box,{w:6}),T,l||q||x?e.jsxs(t.HStack,{children:[l&&e.jsx(L.default,{address:l}),q,x&&e.jsx(S.Menu,{...x})]}):e.jsx(t.Box,{w:6})]}),i.get(D)]}),e.jsxs(t.VStack,{h:"full",w:"full",justify:"space-between",p:6,children:[i.get(B),e.jsxs(t.VStack,{w:"full",gap:3,children:[(c||u)&&e.jsxs(t.Flex,{direction:h?"row":"column-reverse",gap:h?4:3,width:"full",children:[c&&e.jsx(n.default,{expand:!0,label:"Cancel",variant:"neutral",...c}),u&&e.jsx(n.default,{expand:!0,label:"Confirm",variant:"inverse",...u})]}),g&&e.jsx(t.Flex,{direction:r,gap:h?4:3,width:"full",children:g})
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("../containers/button.js"),require("../containers/card.js"),require("@styled/css");var t=require("@styled/jsx"),v=require("../containers/drawer.js"),V=require("react");require("../utils/client-asset-logo.js");var m=require("@styled/tokens");require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var W=require("../icons/ico-caret-left.js"),w=require("../icons/ico-magic.js"),A=require("../icons/ico-question-circle-fill.js");require("../containers/header.js");var S=require("../containers/menu.js"),I=require("../containers/modal.js");require("../containers/overlay.js"),require("../info/copy-button.js"),require("../info/email-wbr.js"),require("../info/security-otp.js"),require("../info/text-box.js");var L=require("../info/wallet-address.js"),n=require("../primitives/button.js"),j=require("../primitives/popover.js"),f=require("../primitives/text.js"),a=require("create-slots");const C=a.createSlot(({children:r})=>V.Children.map(r,l=>e.jsx(n.default,{expand:!0,...l.props}))),b=a.createSlot(n.default),P=a.createSlot(n.default),y=a.createSlot(({children:r})=>e.jsxs(j.Popover,{textStyle:"subtle",variant:"text",children:[e.jsx(j.Popover.TrailingIcon,{children:e.jsx(A.default,{})}),e.jsx(j.Popover.Content,{children:r})]})),k=a.createSlot(({branding:r,title:l})=>l?e.jsx(f.default,{size:"sm",fontColor:"text.secondary",children:l}):e.jsx(w.default,{color:m.token(r==="light"?"colors.text.primary":"colors.neutral.primary")})),B=a.createSlot(({children:r})=>e.jsx(t.VStack,{w:"full",justify:"center",children:r})),z=a.createSlot(S.Menu),H=a.createSlot(v.Drawer),M=a.createSlot(({children:r})=>e.jsx(t.Center,{pt:3,w:"full",children:r})),D=a.createSlot(({children:r,domain:l,name:o,logoUrl:s})=>e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[s?e.jsx("img",{src:s,alt:o,width:24,height:24}):e.jsx(w.default,{color:m.token("colors.brand.base"),height:24,width:24}),e.jsx(f.default,{size:"sm",fontWeight:"semibold",children:o}),l&&e.jsx(f.default,{size:"sm",fontColor:"text.tertiary",children:l}),r]})),J=({actionDirection:r="row",address:l,children:o,onBack:s,onCancel:d,...F})=>a.createHost(o,i=>{const c=i.getProps(b),u=i.getProps(P),p=i.getProps(H),x=i.getProps(z),g=i.get(C),q=i.get(y),T=i.get(k),h=r==="row";return e.jsxs(I.Modal,{...F,fullscreen:!0,paddingType:"none",gap:0,children:[e.jsxs(t.VStack,{gap:0,width:"full",children:[e.jsxs(t.HStack,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[s&&e.jsx(n.default,{onPress:s,size:"md",textStyle:"neutral",variant:"text",children:e.jsx(n.default.LeadingIcon,{children:e.jsx(W.default,{})})}),d&&e.jsx(n.default,{onPress:d,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(s||d)&&e.jsx(t.Box,{w:6}),T,l||q||x?e.jsxs(t.HStack,{children:[l&&e.jsx(L.default,{address:l}),q,x&&e.jsx(S.Menu,{...x})]}):e.jsx(t.Box,{w:6})]}),i.get(D)]}),e.jsxs(t.VStack,{h:"full",w:"full",justify:"space-between",p:6,children:[i.get(B),e.jsxs(t.VStack,{w:"full",gap:3,children:[i.get(M),(c||u)&&e.jsxs(t.Flex,{direction:h?"row":"column-reverse",gap:h?4:3,width:"full",children:[c&&e.jsx(n.default,{expand:!0,label:"Cancel",variant:"neutral",...c}),u&&e.jsx(n.default,{expand:!0,label:"Confirm",variant:"inverse",...u})]}),g&&e.jsx(t.Flex,{direction:r,gap:h?4:3,width:"full",children:g})]})]}),p&&e.jsx(v.Drawer,{...p})]})}),O=Object.assign(J,{Actions:C,Cancel:b,Confirm:P,Content:B,Menu:z,Drawer:H,Footer:M,Header:D,Info:y,Title:k});exports.PassportPage=O;
|
|
2
2
|
//# sourceMappingURL=passport-page.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children }) => (\n <VStack w=\"full\" justify=\"center\">\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({ actionDirection = 'row', address, children, onBack, onCancel, ...props }: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n
|
|
1
|
+
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children }) => (\n <VStack w=\"full\" justify=\"center\">\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({ actionDirection = 'row', address, children, onBack, onCancel, ...props }: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {slots.get(PageFooter)}\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoMagic","token","PageContent","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PageHost","actionDirection","address","onBack","onCancel","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","Box","WalletAddress","Flex","PassportPage"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("@styled/tokens");var o=require("react"),l=require("@styled/jsx"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("@styled/tokens");var o=require("react"),l=require("@styled/jsx"),R=require("@styled/css");require("../feedback/callout.js");var O=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("./checkbox.js"),require("./dropdown-selector.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js"),require("./portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var E=require("../../recipes/button.js"),q=require("create-slots"),d=require("react-aria");const S=q.createSlot(({children:e,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(e,r=>o.cloneElement(r,t))})),w=q.createSlot(({children:e,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(e,r=>o.cloneElement(r,t))})),k=({variant:e="primary",size:t="md"})=>{const r=e==="primary"||e==="negative",c=e==="neutral"||e==="tertiary";return i.jsx(O.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:r,neutral:c})},C=o.forwardRef((e,t)=>{const{label:r,variant:c="primary",textStyle:z,size:p="md",disabled:m,expand:v,validating:x,iconSize:N,onHover:g,centerContent:h}=e,u=N||(p==="sm"?16:24),b=r&&v&&!h,n=E.button({variant:c,textStyle:z,expand:v,size:p,validating:x,iconOnly:!r}),P=o.useRef(null),j=t||P,{buttonProps:B}=d.useButton({...e,isDisabled:m??!1},j),{hoverProps:F}=d.useHover({isDisabled:m??!1}),{isFocusVisible:H,focusProps:I}=d.useFocusRing();return q.createHost(e.children,f=>{const s=f.get(S),a=f.get(w),y=u/4;return i.jsx("button",{className:R.cx(n.button,"group",!r&&n.iconContainer,H&&n.focus),ref:j,...d.mergeProps(B,F,I),"aria-disabled":m,onMouseEnter:g,onTouchStart:g,children:x?i.jsx(k,{variant:c,size:p}):i.jsxs(l.HStack,{w:"full",gap:2,justify:r&&(s||a)&&!h?"space-between":"center",children:[s&&{...s,props:{className:s.props.color?void 0:n.icon,width:u,height:u,...s.props}},a&&b&&i.jsx(l.Box,{w:y}),r&&i.jsx("span",{className:n.label,children:r}),s&&b&&i.jsx(l.Box,{w:y}),a&&{...a,props:{className:a.props.color?void 0:n.icon,width:u,height:u,...a.props}}]})})})}),D=Object.assign(C,{LeadingIcon:S,TrailingIcon:w});C.displayName="Button",exports.default=D;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'positive' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'positive' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n centerContent?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n centerContent,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n const addPaddingContainer = label && expand && !centerContent;\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack\n w=\"full\"\n gap={2}\n justify={label && (leadingIcon || trailingIcon) && !centerContent ? 'space-between' : 'center'}\n >\n {leadingIcon && {\n ...leadingIcon,\n props: {\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...leadingIcon.props,\n },\n }}\n {trailingIcon && addPaddingContainer && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && addPaddingContainer && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...trailingIcon.props,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","centerContent","iconSize","addPaddingContainer","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as N}from"react/jsx-runtime";import{Children as z,cloneElement as k,isValidElement as ee,forwardRef as D,useRef as E}from"react";import{useTextField as S,useFocusRing as w,useHover as B,mergeProps as H}from"react-aria";import R 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 p from"../primitives/text.js";import{textInput as V}from"../../recipes/text-input.js";import{cx as q,css as re}from"@styled/css";import{Flex as P,VStack as te,HStack as oe}from"@styled/jsx";import{token as A}from"@styled/tokens";import{createSlot as m,createHost as ie}from"create-slots";const
|
|
1
|
+
import{jsx as t,jsxs as N}from"react/jsx-runtime";import{Children as z,cloneElement as k,isValidElement as ee,forwardRef as D,useRef as E}from"react";import{useTextField as S,useFocusRing as w,useHover as B,mergeProps as H}from"react-aria";import R 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 p from"../primitives/text.js";import{textInput as V}from"../../recipes/text-input.js";import{cx as q,css as re}from"@styled/css";import{Flex as P,VStack as te,HStack as oe}from"@styled/jsx";import{token as A}from"@styled/tokens";import{createSlot as m,createHost as ie}from"create-slots";const K=m(({children:o,...s})=>t(P,{alignItems:"center",justifyContent:"center",children:z.map(o,e=>{var r;return k(e,{...s,color:(r=e.props.color)!==null&&r!==void 0?r:A("colors.neutral.primary")})})})),M=m(({children:o,...s})=>t(P,{alignItems:"center",justifyContent:"center",children:z.map(o,e=>{var r;return ee(e)?k(e,{...s,color:(r=e.props.color)!==null&&r!==void 0?r:A("colors.brand.base")}):null})})),O=m(R),W=m(p),$=m(p),G=D((o,s)=>{const{label:e,disabled:r,size:n="md",alignText:h="left",attr:f,description:a,autoFocus:g,className:x="",errorMessage:d,required:l}=o,u=n==="sm"?16:20,L=E(null),I=s||L,{labelProps:Q,inputProps:U,descriptionProps:X,errorMessageProps:Y,isInvalid:y,validationErrors:C}=S({...o,isDisabled:r??!1,isInvalid:!!d},I),{focusProps:Z}=w({autoFocus:g??!1}),{hoverProps:_}=B({isDisabled:r??!1});return ie(o.children,c=>{const v=c.get(K),b=c.get(M),j=c.getProps(O),F=c.getProps(W),T=c.getProps($),i=V({size:n,alignText:h,disabled:r,isError:y});return N(te,{className:q(i.container,x),children:[e&&N("label",{className:i.label,...Q,children:[e," ",l&&t("span",{className:re({color:"negative.darker"}),children:"*"})]}),N(oe,{className:i.inputContainer,children:[v&&{...v,props:{...v.props,className:i.typeIcon,width:u,height:u}},F&&t(p,{...F,fontColor:"text.tertiary"}),t("input",{ref:I,className:i.input,...H(U,Z,_),...f}),T&&t(p,{...T,fontColor:"text.tertiary"}),b&&{...b,props:{...b.props,className:i.actionIcon,width:u,height:u}},j&&t(P,{alignItems:"center",justifyContent:"center",className:i.actionButton,children:t(R,{...j,variant:"text",size:n})})]}),a&&t("div",{className:i.description,...X,children:a}),y&&t(p,{variant:"error",...Y,size:"sm",fontWeight:"normal",children:C.length>0?C.join(" "):d})]})})}),J=D((o,s)=>{const{disabled:e,autoFocus:r,className:n="",attr:h}=o,f=E(null),a=s||f,{inputProps:g}=S({...o,isDisabled:e??!1},a),{focusProps:x}=w({autoFocus:r??!1}),{hoverProps:d}=B({isDisabled:e??!1}),l=V({char:!0,disabled:e});return t("div",{className:q(l.container,l.inputContainer,n),children:t("input",{ref:a,className:l.input,...H(g,x,d),size:1,...h})})}),se=Object.assign(G,{TypeIcon:K,ActionIcon:M,ActionButton:O,Char:J,Prefix:W,Suffix:$});G.displayName="TextInput",J.displayName="TextInputChar";export{se as TextInput};
|
|
2
2
|
//# sourceMappingURL=text-input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as
|
|
1
|
+
import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as K,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as O}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import U from"../icons/ico-caret-left.js";import j from"../icons/ico-magic.js";import V from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as $}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import q from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import w from"../primitives/text.js";import{createSlot as i,createHost as E}from"create-slots";const S=i(({children:e})=>O.map(e,t=>r(l,{expand:!0,...t.props}))),k=i(l),D=i(l),H=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(V,{})}),r(u.Content,{children:e})]})),M=i(({branding:e,title:t})=>t?r(w,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),T=i(({children:e})=>r(d,{w:"full",justify:"center",children:e})),W=i(z),F=i(v),I=i(({children:e})=>r(K,{pt:3,w:"full",children:e})),A=i(({children:e,domain:t,name:a,logoUrl:m})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[m?r("img",{src:m,alt:a,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(w,{size:"sm",fontWeight:"semibold",children:a}),t&&r(w,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),G=({actionDirection:e="row",address:t,children:a,onBack:m,onCancel:p,...L})=>E(a,o=>{const c=o.getProps(k),s=o.getProps(D),x=o.getProps(F),h=o.getProps(W),C=o.get(S),b=o.get(H),J=o.get(M),f=e==="row";return n($,{...L,fullscreen:!0,paddingType:"none",gap:0,children:[n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[m&&r(l,{onPress:m,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(U,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(m||p)&&r(y,{w:6}),J,t||b||h?n(g,{children:[t&&r(q,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(A)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,children:[o.get(T),n(d,{w:"full",gap:3,children:[o.get(I),(c||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[c&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...c}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),x&&r(v,{...x})]})}),N=Object.assign(G,{Actions:S,Cancel:k,Confirm:D,Content:T,Menu:W,Drawer:F,Footer:I,Header:A,Info:H,Title:M});export{N as PassportPage};
|
|
2
2
|
//# sourceMappingURL=passport-page.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children }) => (\n <VStack w=\"full\" justify=\"center\">\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({ actionDirection = 'row', address, children, onBack, onCancel, ...props }: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n
|
|
1
|
+
{"version":3,"file":"passport-page.js","sources":["../../../../src/components/layouts/passport-page.tsx"],"sourcesContent":["import { Menu } from '@components/containers';\nimport { Drawer } from '@components/containers/drawer';\nimport { Modal } from '@components/containers/modal';\nimport { IcoCaretLeft, IcoMagic, IcoQuestionCircleFill } from '@components/icons';\nimport { WalletAddress } from '@components/info';\nimport Button from '@components/primitives/button';\nimport Popover from '@components/primitives/popover';\nimport Text from '@components/primitives/text';\nimport { Box, Center, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, PropsWithChildren } from 'react';\n\nexport interface HeaderProps extends PropsWithChildren {\n name: string;\n domain?: string;\n logoUrl?: string;\n}\n\nexport interface TitleProps {\n branding?: 'light' | 'dark';\n title?: string;\n}\n\nexport interface PassportPageProps extends PropsWithChildren {\n address?: string;\n animate?: boolean;\n actionDirection?: 'column' | 'row';\n isOpen?: boolean;\n onAnimated?: () => void;\n onBack?: () => void;\n onClosed?: () => void;\n onCancel?: () => void;\n}\n\nconst Actions = createSlot(({ children }) => Children.map(children, child => <Button expand {...child.props} />));\nconst Cancel = createSlot(Button);\nconst Confirm = createSlot(Button);\nconst Info = createSlot(({ children }) => (\n <Popover textStyle=\"subtle\" variant=\"text\">\n <Popover.TrailingIcon>\n <IcoQuestionCircleFill />\n </Popover.TrailingIcon>\n <Popover.Content>{children}</Popover.Content>\n </Popover>\n));\nconst Title = createSlot(({ branding, title }: TitleProps) => {\n return title ? (\n <Text size=\"sm\" fontColor=\"text.secondary\">\n {title}\n </Text>\n ) : (\n <IcoMagic color={token(branding === 'light' ? 'colors.text.primary' : 'colors.neutral.primary')} />\n );\n});\n\nconst PageContent = createSlot(({ children }) => (\n <VStack w=\"full\" justify=\"center\">\n {children}\n </VStack>\n));\nconst PageMenu = createSlot(Menu);\nconst PageDrawer = createSlot(Drawer);\nconst PageFooter = createSlot(({ children }) => (\n <Center pt={3} w=\"full\">\n {children}\n </Center>\n));\nconst PageHeader = createSlot(({ children, domain, name, logoUrl }: HeaderProps) => (\n <HStack borderBottomColor=\"neutral.primary\" borderBottomWidth=\"1px\" p={3} width=\"full\">\n {logoUrl ? (\n <img src={logoUrl} alt={name} width={24} height={24} />\n ) : (\n <IcoMagic color={token('colors.brand.base')} height={24} width={24} />\n )}\n <Text size=\"sm\" fontWeight=\"semibold\">\n {name}\n </Text>\n {domain && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {domain}\n </Text>\n )}\n {children}\n </HStack>\n));\n\nconst PageHost = ({ actionDirection = 'row', address, children, onBack, onCancel, ...props }: PassportPageProps) => {\n return createHost(children, slots => {\n const cancelProps = slots.getProps(Cancel);\n const confirmProps = slots.getProps(Confirm);\n const drawerProps = slots.getProps(PageDrawer);\n const menuProps = slots.getProps(PageMenu);\n\n const actions = slots.get(Actions);\n const info = slots.get(Info);\n const title = slots.get(Title);\n\n const isRowDirection = actionDirection === 'row';\n\n return (\n <Modal {...props} fullscreen paddingType=\"none\" gap={0}>\n <VStack gap={0} width=\"full\">\n <HStack\n borderBottomColor=\"neutral.primary\"\n borderBottomWidth=\"1px\"\n justifyContent=\"space-between\"\n p={3}\n width=\"full\"\n >\n {onBack && (\n <Button onPress={onBack} size=\"md\" textStyle=\"neutral\" variant=\"text\">\n <Button.LeadingIcon>\n <IcoCaretLeft />\n </Button.LeadingIcon>\n </Button>\n )}\n {onCancel && <Button onPress={onCancel} label=\"Cancel\" size=\"sm\" textStyle=\"neutral\" variant=\"text\" />}\n {!(onBack || onCancel) && <Box w={6} />}\n {title}\n {address || info || menuProps ? (\n <HStack>\n {address && <WalletAddress address={address} />}\n {info}\n {menuProps && <Menu {...menuProps} />}\n </HStack>\n ) : (\n <Box w={6} />\n )}\n </HStack>\n {slots.get(PageHeader)}\n </VStack>\n <VStack h=\"full\" w=\"full\" justify=\"space-between\" p={6}>\n {slots.get(PageContent)}\n <VStack w=\"full\" gap={3}>\n {slots.get(PageFooter)}\n {(cancelProps || confirmProps) && (\n <Flex direction={isRowDirection ? 'row' : 'column-reverse'} gap={isRowDirection ? 4 : 3} width=\"full\">\n {cancelProps && <Button expand label=\"Cancel\" variant=\"neutral\" {...cancelProps} />}\n {confirmProps && <Button expand label=\"Confirm\" variant=\"inverse\" {...confirmProps} />}\n </Flex>\n )}\n {actions && (\n <Flex direction={actionDirection} gap={isRowDirection ? 4 : 3} width=\"full\">\n {actions}\n </Flex>\n )}\n </VStack>\n </VStack>\n {drawerProps && <Drawer {...drawerProps} />}\n </Modal>\n );\n });\n};\n\nexport const PassportPage = Object.assign(PageHost, {\n Actions,\n Cancel,\n Confirm,\n Content: PageContent,\n Menu: PageMenu,\n Drawer: PageDrawer,\n Footer: PageFooter,\n Header: PageHeader,\n Info,\n Title,\n});\n"],"names":["Actions","createSlot","children","Children","child","_jsx","Button","Cancel","Confirm","Info","_jsxs","Popover","IcoQuestionCircleFill","Title","branding","title","Text","IcoMagic","token","PageContent","VStack","PageMenu","Menu","PageDrawer","Drawer","PageFooter","Center","PageHeader","domain","name","logoUrl","HStack","PageHost","actionDirection","address","onBack","onCancel","props","createHost","slots","cancelProps","confirmProps","drawerProps","menuProps","actions","info","isRowDirection","Modal","IcoCaretLeft","Box","WalletAddress","Flex","PassportPage"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e,jsxs as k}from"react/jsx-runtime";import"@styled/tokens";import{Children as x,cloneElement as y,forwardRef as D,useRef as E}from"react";import{Flex as w,HStack as L,Box as j}from"@styled/jsx";import{cx as T}from"@styled/css";import"../feedback/callout.js";import{LoadingSpinner as J}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";import"./checkbox.js";import"./dropdown-selector.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import"./portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{button as K}from"../../recipes/button.js";import{createSlot as z,createHost as M}from"create-slots";import{useButton as V,useHover as W,useFocusRing as q,mergeProps as A}from"react-aria";const C=z(({children:t,...i})=>e(w,{alignItems:"center",justifyContent:"center",children:x.map(t,r=>y(r,i))})),N=z(({children:t,...i})=>e(w,{alignItems:"center",justifyContent:"center",children:x.map(t,r=>y(r,i))})),G=({variant:t="primary",size:i="md"})=>{const r=t==="primary"||t==="negative",p=t==="neutral"||t==="tertiary";return e(J,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:r,neutral:p})},S=D((t,i)=>{const{label:r,variant:p="primary",textStyle:H,size:m="md",disabled:l,expand:c,validating:d,iconSize:I,onHover:u,centerContent:f}=t,a=I||(m==="sm"?16:24),g=r&&c&&!f,o=K({variant:p,textStyle:H,expand:c,size:m,validating:d,iconOnly:!r}),P=E(null),h=i||P,{buttonProps:B}=V({...t,isDisabled:l??!1},h),{hoverProps:F}=W({isDisabled:l??!1}),{isFocusVisible:R,focusProps:O}=q();return M(t.children,b=>{const n=b.get(C),s=b.get(N),v=a/4;return e("button",{className:T(o.button,"group",!r&&o.iconContainer,R&&o.focus),ref:h,...A(B,F,O),"aria-disabled":l,onMouseEnter:u,onTouchStart:u,children:d?e(G,{variant:p,size:m}):k(L,{w:"full",gap:2,justify:r&&(n||s)&&!f?"space-between":"center",children:[n&&{...n,props:{className:n.props.color?void 0:o.icon,width:a,height:a,...n.props}},s&&g&&e(j,{w:v}),r&&e("span",{className:o.label,children:r}),n&&g&&e(j,{w:v}),s&&{...s,props:{className:s.props.color?void 0:o.icon,width:a,height:a,...s.props}}]})})})}),Q=Object.assign(S,{LeadingIcon:C,TrailingIcon:N});S.displayName="Button";export{Q as default};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'positive' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'positive' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n centerContent?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n centerContent,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n const addPaddingContainer = label && expand && !centerContent;\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack\n w=\"full\"\n gap={2}\n justify={label && (leadingIcon || trailingIcon) && !centerContent ? 'space-between' : 'center'}\n >\n {leadingIcon && {\n ...leadingIcon,\n props: {\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...leadingIcon.props,\n },\n }}\n {trailingIcon && addPaddingContainer && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && addPaddingContainer && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n ...trailingIcon.props,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","centerContent","iconSize","addPaddingContainer","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,Fragment as X,jsxs as C}from"react/jsx-runtime";import g from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as oe}from"../../hooks/useToggleState.js";import{cx as te}from"@styled/css";import{Center as re,Box as Y}from"@styled/jsx";import{vstack as ne}from"@styled/patterns";import{token as ie}from"@styled/tokens";import{createSlot as v,createHost as le}from"create-slots";import{Children as ce,cloneElement as se,useMemo as pe,useRef as z,useCallback as A,useEffect as ae}from"react";import{useOverlayTrigger as de,usePopover as me,mergeProps as B,Overlay as ge}from"react-aria";const D="bottom left",H=8,ue="hover",E=v(({children:t})=>o(X,{children:t})),j=v(({children:t,...c})=>{const{onPress:i,...s}=c;return o(re,{children:ce.map(t,l=>se(l,s))})}),w=v(t=>o(g.LeadingIcon,{...t})),
|
|
1
|
+
import{jsx as o,Fragment as X,jsxs as C}from"react/jsx-runtime";import g from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as oe}from"../../hooks/useToggleState.js";import{cx as te}from"@styled/css";import{Center as re,Box as Y}from"@styled/jsx";import{vstack as ne}from"@styled/patterns";import{token as ie}from"@styled/tokens";import{createSlot as v,createHost as le}from"create-slots";import{Children as ce,cloneElement as se,useMemo as pe,useRef as z,useCallback as A,useEffect as ae}from"react";import{useOverlayTrigger as de,usePopover as me,mergeProps as B,Overlay as ge}from"react-aria";const D="bottom left",H=8,ue="hover",E=v(({children:t})=>o(X,{children:t})),j=v(({children:t,...c})=>{const{onPress:i,...s}=c;return o(re,{children:ce.map(t,l=>se(l,s))})}),w=v(t=>o(g.LeadingIcon,{...t})),K=v(t=>o(g.TrailingIcon,{...t})),M=({children:t,...c})=>le(t,i=>{var s;const{isOpen:l,defaultOpen:W,onOpenChange:_,trigger:O=ue,iconSize:h,onPress:fe,...I}=c,{isSelected:q,setSelected:x}=oe({isOpen:l,defaultSelected:W,onChange:_,...c}),b=l!==void 0?l:q,r=24,n=pe(()=>({isOpen:b,open:()=>{x(!0)},close:()=>{x(!1)},setOpen(e){x(e)},toggle(){}}),[b]),S=i.getProps(E),p=z(null),{triggerProps:L,overlayProps:G}=de({type:"dialog"},n,p),a=z(null),{popoverProps:J,underlayProps:Z}=me({placement:c.placement||D,offset:H,popoverRef:a,triggerRef:p,...S},n),u=B(S,J);!((s=u?.style)===null||s===void 0)&&s.zIndex&&(u.style.zIndex=ie("zIndex.max"));const k=A(()=>{n.open()},[n]),y=A(e=>{var P,T;const d=(P=p.current)===null||P===void 0?void 0:P.getBoundingClientRect(),m=(T=a.current)===null||T===void 0?void 0:T.getBoundingClientRect();if(d&&m){const V=e.clientX>=d.left-r&&e.clientX<=d.right+r&&e.clientY>=d.top-r&&e.clientY<=d.bottom+r,ee=e.clientX>=m.left-r&&e.clientX<=m.right+r&&e.clientY>=m.top-r&&e.clientY<=m.bottom+r;!V&&!ee&&n.close()}},[n]),$=()=>{if(a.current){const e=a.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},Q=e=>{e.key==="Enter"&&(e.preventDefault(),l?n.close():(n.open(),setTimeout($,0)))};ae(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const f=i.get(j),R=i.getProps(w),F=i.getProps(K),N=h?{height:h,width:h}:{};return C(X,{children:[f?o(Y,{display:"inline-block",ref:p,...I,children:f&&{...f,props:{...f.props,...L}}}):o(Y,{display:"inline-block",ref:p,children:C(g,{...B(L,I),onKeyDown:Q,onHover:()=>O==="hover"&&k(),onPress:()=>O==="click"&&k(),children:[R&&o(g.LeadingIcon,{...R,...N}),F&&o(g.TrailingIcon,{...F,...N})]})}),b&&C(ge,{...G,children:[o("div",{...Z,className:"underlay"}),o("div",{ref:a,...u,className:te(ne({bg:"surface.secondary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),u.className),children:i.get(E)})]})]})}),U=Object.assign(M,{Trigger:j,LeadingIcon:w,TrailingIcon:K,Content:E});export{H as DEFAULT_OFFSET,D as DEFAULT_PLACEMENT,U as Popover,M as PopoverHost,U as default};
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
|
@@ -10,6 +10,7 @@ export interface ButtonProps extends AriaButtonProps {
|
|
|
10
10
|
validating?: boolean;
|
|
11
11
|
iconSize?: number;
|
|
12
12
|
onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;
|
|
13
|
+
centerContent?: boolean;
|
|
13
14
|
}
|
|
14
15
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
|
|
15
16
|
LeadingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7G,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7G,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmHD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}
|