@shipfox/react-ui 0.5.0 → 0.7.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.
Files changed (77) hide show
  1. package/.storybook/main.ts +12 -5
  2. package/.storybook/preview.tsx +11 -0
  3. package/.turbo/turbo-build.log +16 -3
  4. package/.turbo/turbo-check.log +2 -2
  5. package/.turbo/turbo-type.log +1 -1
  6. package/CHANGELOG.md +14 -0
  7. package/README.md +16 -0
  8. package/dist/build-css-entry.js +5 -0
  9. package/dist/build-css-entry.js.map +1 -0
  10. package/dist/components/code-block/code-block-footer.d.ts.map +1 -1
  11. package/dist/components/code-block/code-block-footer.js +29 -15
  12. package/dist/components/code-block/code-block-footer.js.map +1 -1
  13. package/dist/components/dot-grid/dot-grid.d.ts +18 -0
  14. package/dist/components/dot-grid/dot-grid.d.ts.map +1 -0
  15. package/dist/components/dot-grid/dot-grid.js +295 -0
  16. package/dist/components/dot-grid/dot-grid.js.map +1 -0
  17. package/dist/components/dot-grid/index.d.ts +2 -0
  18. package/dist/components/dot-grid/index.d.ts.map +1 -0
  19. package/dist/components/dot-grid/index.js +3 -0
  20. package/dist/components/dot-grid/index.js.map +1 -0
  21. package/dist/components/dynamic-item/dynamic-item.stories.js +1 -1
  22. package/dist/components/dynamic-item/dynamic-item.stories.js.map +1 -1
  23. package/dist/components/icon/icon.d.ts +1 -0
  24. package/dist/components/icon/icon.d.ts.map +1 -1
  25. package/dist/components/icon/icon.js +3 -2
  26. package/dist/components/icon/icon.js.map +1 -1
  27. package/dist/components/index.d.ts +3 -0
  28. package/dist/components/index.d.ts.map +1 -1
  29. package/dist/components/index.js +3 -0
  30. package/dist/components/index.js.map +1 -1
  31. package/dist/components/modal/index.d.ts +3 -0
  32. package/dist/components/modal/index.d.ts.map +1 -0
  33. package/dist/components/modal/index.js +3 -0
  34. package/dist/components/modal/index.js.map +1 -0
  35. package/dist/components/modal/modal.d.ts +37 -0
  36. package/dist/components/modal/modal.d.ts.map +1 -0
  37. package/dist/components/modal/modal.js +262 -0
  38. package/dist/components/modal/modal.js.map +1 -0
  39. package/dist/components/modal/modal.stories.js +497 -0
  40. package/dist/components/modal/modal.stories.js.map +1 -0
  41. package/dist/components/moving-border/index.d.ts +2 -0
  42. package/dist/components/moving-border/index.d.ts.map +1 -0
  43. package/dist/components/moving-border/index.js +3 -0
  44. package/dist/components/moving-border/index.js.map +1 -0
  45. package/dist/components/typography/text.d.ts.map +1 -1
  46. package/dist/components/typography/text.js +1 -1
  47. package/dist/components/typography/text.js.map +1 -1
  48. package/dist/hooks/index.d.ts +1 -0
  49. package/dist/hooks/index.d.ts.map +1 -1
  50. package/dist/hooks/index.js +1 -0
  51. package/dist/hooks/index.js.map +1 -1
  52. package/dist/hooks/useMediaQuery.d.ts +2 -0
  53. package/dist/hooks/useMediaQuery.d.ts.map +1 -0
  54. package/dist/hooks/useMediaQuery.js +74 -0
  55. package/dist/hooks/useMediaQuery.js.map +1 -0
  56. package/dist/onboarding/sign-in.stories.js +16 -8
  57. package/dist/onboarding/sign-in.stories.js.map +1 -1
  58. package/dist/styles.css +1 -0
  59. package/index.css +1 -1
  60. package/package.json +21 -16
  61. package/src/build-css-entry.ts +3 -0
  62. package/src/components/code-block/code-block-footer.tsx +37 -30
  63. package/src/components/dot-grid/dot-grid.tsx +325 -0
  64. package/src/components/dot-grid/index.ts +1 -0
  65. package/src/components/dynamic-item/dynamic-item.stories.tsx +1 -1
  66. package/src/components/icon/icon.tsx +2 -0
  67. package/src/components/index.ts +3 -0
  68. package/src/components/modal/index.ts +23 -0
  69. package/src/components/modal/modal.stories.tsx +384 -0
  70. package/src/components/modal/modal.tsx +309 -0
  71. package/src/components/moving-border/index.ts +1 -0
  72. package/src/components/typography/text.tsx +9 -1
  73. package/src/hooks/index.ts +1 -0
  74. package/src/hooks/useMediaQuery.ts +87 -0
  75. package/src/onboarding/sign-in.stories.tsx +20 -8
  76. package/tsconfig.build.json +7 -1
  77. package/vite.css.config.ts +30 -0
@@ -0,0 +1,3 @@
1
+ export * from './dot-grid.js';
2
+
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/dot-grid/index.ts"],"sourcesContent":["export * from './dot-grid';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button } from '../../components/button/button.js';
3
3
  import { ItemTitle } from '../../components/item/index.js';
4
+ import { MovingBorder } from '../../components/moving-border/index.js';
4
5
  import { cn } from '../../utils/cn.js';
5
6
  import illustration1 from '../../assets/illustration-1.svg';
6
7
  import illustration2 from '../../assets/illustration-2.svg';
@@ -8,7 +9,6 @@ import illustrationBg from '../../assets/illustration-gradient.svg';
8
9
  import { Avatar } from '../avatar/avatar.js';
9
10
  import { AvatarGroup, AvatarGroupTooltip } from '../avatar/avatar-group.js';
10
11
  import { Icon } from '../icon/icon.js';
11
- import { MovingBorder } from '../moving-border/moving-border.js';
12
12
  import { DynamicItem } from './dynamic-item.js';
13
13
  const meta = {
14
14
  title: 'Components/DynamicItem',
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {ItemTitle} from 'components/item';\nimport {cn} from 'utils/cn';\nimport illustration1 from '../../assets/illustration-1.svg';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {Avatar} from '../avatar/avatar';\nimport {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';\nimport {Icon} from '../icon/icon';\nimport {MovingBorder} from '../moving-border/moving-border';\nimport {DynamicItem} from './dynamic-item';\n\nconst meta = {\n title: 'Components/DynamicItem',\n component: DynamicItem,\n tags: ['autodocs'],\n} satisfies Meta<typeof DynamicItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const OrganizationItem: Story = {\n args: {},\n render: () => (\n <div className=\"flex flex-col gap-16 w-full max-w-476\">\n <DynamicItem\n variant=\"default\"\n leftElement={<Avatar content=\"logo\" logoName=\"slack\" radius=\"rounded\" size=\"xl\" />}\n title=\"Slack\"\n description=\"3 members\"\n rightElement={\n <AvatarGroup size=\"md\">\n <Avatar content=\"image\" fallback=\"John Doe\">\n <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Jane Smith\">\n <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Bob Johnson\">\n <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>\n </Avatar>\n </AvatarGroup>\n }\n />\n <DynamicItem\n variant=\"default\"\n leftElement={<Avatar content=\"logo\" logoName=\"stripe\" radius=\"rounded\" size=\"xl\" />}\n title=\"Stripe\"\n description=\"2 members\"\n rightElement={\n <AvatarGroup size=\"md\">\n <Avatar content=\"image\" fallback=\"Alice Brown\">\n <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Carlos Vega\">\n <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>\n </Avatar>\n </AvatarGroup>\n }\n />\n <DynamicItem\n variant=\"default\"\n leftElement={<Avatar content=\"logo\" logoName=\"shipfox\" radius=\"rounded\" size=\"xl\" />}\n title=\"Shipfox\"\n description=\"9 members\"\n rightElement={\n <AvatarGroup size=\"md\" maxVisible={4} animateOnHover>\n <Avatar content=\"image\" fallback=\"Linda Tran\">\n <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Michael Chen\">\n <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Sarah Williams\">\n <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"David Lee\">\n <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Emily Davis\">\n <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"James Wilson\">\n <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Olivia Martinez\">\n <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Noah Anderson\">\n <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Sophia Taylor\">\n <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>\n </Avatar>\n </AvatarGroup>\n }\n />\n </div>\n ),\n};\n\nexport const ConnectGithubAccountItem: Story = {\n args: {},\n render: () => (\n <div className=\"flex flex-col gap-16 w-full max-w-476\">\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"relative\">\n <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n <Avatar\n content=\"logoPlaceholder\"\n logoName=\"github\"\n radius=\"full\"\n size=\"2xs\"\n logoClassName=\"p-0\"\n className=\"absolute bottom-0 left-27\"\n />\n </div>\n }\n title=\"Slack\"\n description=\"Connect Github organization\"\n rightElement={\n <Button variant=\"primary\" size=\"sm\">\n Connect\n </Button>\n }\n />\n\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"relative\">\n <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n <Avatar\n content=\"logo\"\n logoName=\"github\"\n radius=\"full\"\n size=\"2xs\"\n logoClassName=\"p-0\"\n className=\"absolute bottom-0 left-27\"\n />\n </div>\n }\n title=\"Slack\"\n description=\"Personal account (kye-nguyen)\"\n rightElement={\n <Button variant=\"primary\" size=\"sm\">\n Change account\n </Button>\n }\n />\n\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"relative\">\n <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n <Avatar\n content=\"logo\"\n logoName=\"github\"\n radius=\"full\"\n size=\"2xs\"\n logoClassName=\"p-0\"\n className=\"absolute bottom-0 left-27\"\n />\n </div>\n }\n title=\"Slack\"\n description=\"Organization (slack-github)\"\n rightElement={\n <Button variant=\"secondary\" size=\"sm\">\n Change account\n </Button>\n }\n />\n </div>\n ),\n};\n\nexport const WithCustomElementsItem: Story = {\n args: {},\n render: () => {\n return (\n <div className=\"flex flex-col gap-16 w-full max-w-672\">\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"flex shrink-0 items-center justify-center text-tag-success-icon\">\n <Icon name=\"checkCircleSolid\" size=\"sm\" />\n </div>\n }\n title=\"Give access to your Github organizations\"\n description=\"We'll use this permission to sync your organization's.\"\n action={\n <div className=\"flex gap-8 mx-auto sm:mx-0\">\n <Button variant=\"primary\" size=\"sm\">\n Github access\n </Button>\n <Button variant=\"transparentMuted\" size=\"sm\">\n Skip for now\n </Button>\n </div>\n }\n rightElement={\n <img\n src={illustration1}\n alt=\"illustration-1\"\n className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain\"\n />\n }\n />\n <div className=\"relative\">\n <img\n src={illustration2}\n alt=\"illustration-2\"\n className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50\"\n />\n <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>\n <div className=\"absolute inset-0\" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>\n <MovingBorder duration={6000} rx=\"30%\" ry=\"30%\">\n <div className=\"h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]\" />\n </MovingBorder>\n </div>\n <div\n className=\"relative\"\n style={{\n borderRadius: 'calc(0.5rem * 0.96)',\n }}\n >\n <DynamicItem\n variant=\"default\"\n title={\n <div className=\"flex items-center gap-6\">\n <span className=\"flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16\">\n <Icon\n name=\"money\"\n size=\"sm\"\n color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n />\n </span>\n <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>\n </div>\n }\n description=\"~500 builds/month. No payment required.\"\n rightElement={\n <img\n src={illustrationBg}\n alt=\"illustration-bg\"\n className=\"hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105\"\n />\n }\n />\n </div>\n </div>\n </div>\n </div>\n );\n },\n};\n"],"names":["Button","ItemTitle","cn","illustration1","illustration2","illustrationBg","Avatar","AvatarGroup","AvatarGroupTooltip","Icon","MovingBorder","DynamicItem","meta","title","component","tags","OrganizationItem","args","render","div","className","variant","leftElement","content","logoName","radius","size","description","rightElement","fallback","maxVisible","animateOnHover","ConnectGithubAccountItem","logoClassName","WithCustomElementsItem","name","action","img","src","alt","style","borderRadius","duration","rx","ry","span","color"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {ItemTitle} from 'components/item';\nimport {MovingBorder} from 'components/moving-border';\nimport {cn} from 'utils/cn';\nimport illustration1 from '../../assets/illustration-1.svg';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {Avatar} from '../avatar/avatar';\nimport {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';\nimport {Icon} from '../icon/icon';\nimport {DynamicItem} from './dynamic-item';\n\nconst meta = {\n title: 'Components/DynamicItem',\n component: DynamicItem,\n tags: ['autodocs'],\n} satisfies Meta<typeof DynamicItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const OrganizationItem: Story = {\n args: {},\n render: () => (\n <div className=\"flex flex-col gap-16 w-full max-w-476\">\n <DynamicItem\n variant=\"default\"\n leftElement={<Avatar content=\"logo\" logoName=\"slack\" radius=\"rounded\" size=\"xl\" />}\n title=\"Slack\"\n description=\"3 members\"\n rightElement={\n <AvatarGroup size=\"md\">\n <Avatar content=\"image\" fallback=\"John Doe\">\n <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Jane Smith\">\n <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Bob Johnson\">\n <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>\n </Avatar>\n </AvatarGroup>\n }\n />\n <DynamicItem\n variant=\"default\"\n leftElement={<Avatar content=\"logo\" logoName=\"stripe\" radius=\"rounded\" size=\"xl\" />}\n title=\"Stripe\"\n description=\"2 members\"\n rightElement={\n <AvatarGroup size=\"md\">\n <Avatar content=\"image\" fallback=\"Alice Brown\">\n <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Carlos Vega\">\n <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>\n </Avatar>\n </AvatarGroup>\n }\n />\n <DynamicItem\n variant=\"default\"\n leftElement={<Avatar content=\"logo\" logoName=\"shipfox\" radius=\"rounded\" size=\"xl\" />}\n title=\"Shipfox\"\n description=\"9 members\"\n rightElement={\n <AvatarGroup size=\"md\" maxVisible={4} animateOnHover>\n <Avatar content=\"image\" fallback=\"Linda Tran\">\n <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Michael Chen\">\n <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Sarah Williams\">\n <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"David Lee\">\n <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Emily Davis\">\n <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"James Wilson\">\n <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Olivia Martinez\">\n <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Noah Anderson\">\n <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>\n </Avatar>\n <Avatar content=\"image\" fallback=\"Sophia Taylor\">\n <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>\n </Avatar>\n </AvatarGroup>\n }\n />\n </div>\n ),\n};\n\nexport const ConnectGithubAccountItem: Story = {\n args: {},\n render: () => (\n <div className=\"flex flex-col gap-16 w-full max-w-476\">\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"relative\">\n <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n <Avatar\n content=\"logoPlaceholder\"\n logoName=\"github\"\n radius=\"full\"\n size=\"2xs\"\n logoClassName=\"p-0\"\n className=\"absolute bottom-0 left-27\"\n />\n </div>\n }\n title=\"Slack\"\n description=\"Connect Github organization\"\n rightElement={\n <Button variant=\"primary\" size=\"sm\">\n Connect\n </Button>\n }\n />\n\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"relative\">\n <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n <Avatar\n content=\"logo\"\n logoName=\"github\"\n radius=\"full\"\n size=\"2xs\"\n logoClassName=\"p-0\"\n className=\"absolute bottom-0 left-27\"\n />\n </div>\n }\n title=\"Slack\"\n description=\"Personal account (kye-nguyen)\"\n rightElement={\n <Button variant=\"primary\" size=\"sm\">\n Change account\n </Button>\n }\n />\n\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"relative\">\n <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n <Avatar\n content=\"logo\"\n logoName=\"github\"\n radius=\"full\"\n size=\"2xs\"\n logoClassName=\"p-0\"\n className=\"absolute bottom-0 left-27\"\n />\n </div>\n }\n title=\"Slack\"\n description=\"Organization (slack-github)\"\n rightElement={\n <Button variant=\"secondary\" size=\"sm\">\n Change account\n </Button>\n }\n />\n </div>\n ),\n};\n\nexport const WithCustomElementsItem: Story = {\n args: {},\n render: () => {\n return (\n <div className=\"flex flex-col gap-16 w-full max-w-672\">\n <DynamicItem\n variant=\"default\"\n leftElement={\n <div className=\"flex shrink-0 items-center justify-center text-tag-success-icon\">\n <Icon name=\"checkCircleSolid\" size=\"sm\" />\n </div>\n }\n title=\"Give access to your Github organizations\"\n description=\"We'll use this permission to sync your organization's.\"\n action={\n <div className=\"flex gap-8 mx-auto sm:mx-0\">\n <Button variant=\"primary\" size=\"sm\">\n Github access\n </Button>\n <Button variant=\"transparentMuted\" size=\"sm\">\n Skip for now\n </Button>\n </div>\n }\n rightElement={\n <img\n src={illustration1}\n alt=\"illustration-1\"\n className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain\"\n />\n }\n />\n <div className=\"relative\">\n <img\n src={illustration2}\n alt=\"illustration-2\"\n className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50\"\n />\n <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>\n <div className=\"absolute inset-0\" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>\n <MovingBorder duration={6000} rx=\"30%\" ry=\"30%\">\n <div className=\"h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]\" />\n </MovingBorder>\n </div>\n <div\n className=\"relative\"\n style={{\n borderRadius: 'calc(0.5rem * 0.96)',\n }}\n >\n <DynamicItem\n variant=\"default\"\n title={\n <div className=\"flex items-center gap-6\">\n <span className=\"flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16\">\n <Icon\n name=\"money\"\n size=\"sm\"\n color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n />\n </span>\n <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>\n </div>\n }\n description=\"~500 builds/month. No payment required.\"\n rightElement={\n <img\n src={illustrationBg}\n alt=\"illustration-bg\"\n className=\"hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105\"\n />\n }\n />\n </div>\n </div>\n </div>\n </div>\n );\n },\n};\n"],"names":["Button","ItemTitle","MovingBorder","cn","illustration1","illustration2","illustrationBg","Avatar","AvatarGroup","AvatarGroupTooltip","Icon","DynamicItem","meta","title","component","tags","OrganizationItem","args","render","div","className","variant","leftElement","content","logoName","radius","size","description","rightElement","fallback","maxVisible","animateOnHover","ConnectGithubAccountItem","logoClassName","WithCustomElementsItem","name","action","img","src","alt","style","borderRadius","duration","rx","ry","span","color"],"mappings":";AACA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,SAAS,QAAO,kBAAkB;AAC1C,SAAQC,YAAY,QAAO,2BAA2B;AACtD,SAAQC,EAAE,QAAO,WAAW;AAC5B,OAAOC,mBAAmB,kCAAkC;AAC5D,OAAOC,mBAAmB,kCAAkC;AAC5D,OAAOC,oBAAoB,yCAAyC;AACpE,SAAQC,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,EAAEC,kBAAkB,QAAO,yBAAyB;AACvE,SAAQC,IAAI,QAAO,eAAe;AAClC,SAAQC,WAAW,QAAO,iBAAiB;AAE3C,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWH;IACXI,MAAM;QAAC;KAAW;AACpB;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,mBAA0B;IACrCC,MAAM,CAAC;IACPC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BAAa,KAACf;wBAAOgB,SAAQ;wBAAOC,UAAS;wBAAQC,QAAO;wBAAUC,MAAK;;oBAC3Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACpB;wBAAYkB,MAAK;;0CAChB,KAACnB;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;;;;8BAK5B,KAACE;oBACCU,SAAQ;oBACRC,2BAAa,KAACf;wBAAOgB,SAAQ;wBAAOC,UAAS;wBAASC,QAAO;wBAAUC,MAAK;;oBAC5Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACpB;wBAAYkB,MAAK;;0CAChB,KAACnB;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;;;;8BAK5B,KAACE;oBACCU,SAAQ;oBACRC,2BAAa,KAACf;wBAAOgB,SAAQ;wBAAOC,UAAS;wBAAUC,QAAO;wBAAUC,MAAK;;oBAC7Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACpB;wBAAYkB,MAAK;wBAAKI,YAAY;wBAAGC,cAAc;;0CAClD,KAACxB;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;;;;;;AAOlC,EAAE;AAEF,OAAO,MAAMuB,2BAAkC;IAC7Cf,MAAM,CAAC;IACPC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACb;gCAAOgB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACnB;gCACCgB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAUK,MAAK;kCAAK;;;8BAMxC,KAACf;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACb;gCAAOgB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACnB;gCACCgB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAUK,MAAK;kCAAK;;;8BAMxC,KAACf;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACb;gCAAOgB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACnB;gCACCgB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAYK,MAAK;kCAAK;;;;;AAOhD,EAAE;AAEF,OAAO,MAAMQ,yBAAgC;IAC3CjB,MAAM,CAAC;IACPC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BACE,KAACH;wBAAIC,WAAU;kCACb,cAAA,KAACV;4BAAKyB,MAAK;4BAAmBT,MAAK;;;oBAGvCb,OAAM;oBACNc,aAAY;oBACZS,sBACE,MAACjB;wBAAIC,WAAU;;0CACb,KAACpB;gCAAOqB,SAAQ;gCAAUK,MAAK;0CAAK;;0CAGpC,KAAC1B;gCAAOqB,SAAQ;gCAAmBK,MAAK;0CAAK;;;;oBAKjDE,4BACE,KAACS;wBACCC,KAAKlC;wBACLmC,KAAI;wBACJnB,WAAU;;;8BAIhB,MAACD;oBAAIC,WAAU;;sCACb,KAACiB;4BACCC,KAAKjC;4BACLkC,KAAI;4BACJnB,WAAU;;sCAEZ,MAACD;4BAAIC,WAAWjB,GAAG;;8CACjB,KAACgB;oCAAIC,WAAU;oCAAmBoB,OAAO;wCAACC,cAAc;oCAAqB;8CAC3E,cAAA,KAACvC;wCAAawC,UAAU;wCAAMC,IAAG;wCAAMC,IAAG;kDACxC,cAAA,KAACzB;4CAAIC,WAAU;;;;8CAGnB,KAACD;oCACCC,WAAU;oCACVoB,OAAO;wCACLC,cAAc;oCAChB;8CAEA,cAAA,KAAC9B;wCACCU,SAAQ;wCACRR,qBACE,MAACM;4CAAIC,WAAU;;8DACb,KAACyB;oDAAKzB,WAAU;8DACd,cAAA,KAACV;wDACCyB,MAAK;wDACLT,MAAK;wDACLoB,OAAM;;;8DAGV,KAAC7C;8DAAU;;;;wCAGf0B,aAAY;wCACZC,4BACE,KAACS;4CACCC,KAAKhC;4CACLiC,KAAI;4CACJnB,WAAU;;;;;;;;;;IAS5B;AACF,EAAE"}
@@ -29,6 +29,7 @@ declare const iconsMap: {
29
29
  readonly copy: RemixiconComponentType;
30
30
  readonly addLine: RemixiconComponentType;
31
31
  readonly chevronRight: RemixiconComponentType;
32
+ readonly bookOpen: RemixiconComponentType;
32
33
  };
33
34
  export type IconName = keyof typeof iconsMap;
34
35
  export declare const iconNames: IconName[];
@@ -1 +1 @@
1
- {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAO3B,YAAY,EAOb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}
1
+ {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAQ3B,YAAY,EAOb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B6C,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,eAAO,MAAM,SAAS,EAA4B,QAAQ,EAAE,CAAC;AAE7D,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,KAAK,SAAS,GAAG;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAEhE,wBAAgB,IAAI,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAG/C"}
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { RiAddLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiFileCopyLine, RiGithubFill, RiGoogleFill, RiHomeSmileFill, RiImageAddFill, RiInformationFill, RiMicrosoftFill, RiMoneyDollarCircleLine, RiSubtractLine } from '@remixicon/react';
2
+ import { RiAddLine, RiArrowRightSLine, RiBookOpenFill, RiCheckLine, RiCloseLine, RiFileCopyLine, RiGithubFill, RiGoogleFill, RiHomeSmileFill, RiImageAddFill, RiInformationFill, RiMicrosoftFill, RiMoneyDollarCircleLine, RiSubtractLine } from '@remixicon/react';
3
3
  import { BadgeIcon, CheckCircleSolidIcon, CircleDottedLineIcon, ComponentFillIcon, ComponentLineIcon, EllipseMiniSolidIcon, InfoTooltipFillIcon, ResizeIcon, ShipfoxLogo, SlackLogo, SpinnerIcon, StripeLogo, ThunderIcon, XCircleSolidIcon } from './custom/index.js';
4
4
  const iconsMap = {
5
5
  google: RiGoogleFill,
@@ -28,7 +28,8 @@ const iconsMap = {
28
28
  homeSmile: RiHomeSmileFill,
29
29
  copy: RiFileCopyLine,
30
30
  addLine: RiAddLine,
31
- chevronRight: RiArrowRightSLine
31
+ chevronRight: RiArrowRightSLine,
32
+ bookOpen: RiBookOpenFill
32
33
  };
33
34
  export const iconNames = Object.keys(iconsMap);
34
35
  export function Icon({ name, ...props }) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import {\n type RemixiconComponentType,\n RiAddLine,\n RiArrowRightSLine,\n RiCheckLine,\n RiCloseLine,\n RiFileCopyLine,\n RiGithubFill,\n RiGoogleFill,\n RiHomeSmileFill,\n RiImageAddFill,\n RiInformationFill,\n RiMicrosoftFill,\n RiMoneyDollarCircleLine,\n RiSubtractLine,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n BadgeIcon,\n CheckCircleSolidIcon,\n CircleDottedLineIcon,\n ComponentFillIcon,\n ComponentLineIcon,\n EllipseMiniSolidIcon,\n InfoTooltipFillIcon,\n ResizeIcon,\n ShipfoxLogo,\n SlackLogo,\n SpinnerIcon,\n StripeLogo,\n ThunderIcon,\n XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n google: RiGoogleFill,\n microsoft: RiMicrosoftFill,\n badge: BadgeIcon,\n checkCircleSolid: CheckCircleSolidIcon,\n circleDottedLine: CircleDottedLineIcon,\n componentFill: ComponentFillIcon,\n xCircleSolid: XCircleSolidIcon,\n thunder: ThunderIcon,\n resize: ResizeIcon,\n infoTooltipFill: InfoTooltipFillIcon,\n spinner: SpinnerIcon,\n ellipseMiniSolid: EllipseMiniSolidIcon,\n componentLine: ComponentLineIcon,\n imageAdd: RiImageAddFill,\n close: RiCloseLine,\n shipfox: ShipfoxLogo,\n slack: SlackLogo,\n stripe: StripeLogo,\n github: RiGithubFill,\n check: RiCheckLine,\n subtractLine: RiSubtractLine,\n info: RiInformationFill,\n money: RiMoneyDollarCircleLine,\n homeSmile: RiHomeSmileFill,\n copy: RiFileCopyLine,\n addLine: RiAddLine,\n chevronRight: RiArrowRightSLine,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n const IconComponent = iconsMap[name];\n return <IconComponent {...props} />;\n}\n"],"names":["RiAddLine","RiArrowRightSLine","RiCheckLine","RiCloseLine","RiFileCopyLine","RiGithubFill","RiGoogleFill","RiHomeSmileFill","RiImageAddFill","RiInformationFill","RiMicrosoftFill","RiMoneyDollarCircleLine","RiSubtractLine","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SlackLogo","SpinnerIcon","StripeLogo","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","imageAdd","close","shipfox","slack","stripe","github","check","subtractLine","info","money","homeSmile","copy","addLine","chevronRight","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAEEA,SAAS,EACTC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,QACT,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQtB;IACRuB,WAAWnB;IACXoB,OAAOjB;IACPkB,kBAAkBjB;IAClBkB,kBAAkBjB;IAClBkB,eAAejB;IACfkB,cAAcR;IACdS,SAASV;IACTW,QAAQhB;IACRiB,iBAAiBlB;IACjBmB,SAASf;IACTgB,kBAAkBrB;IAClBsB,eAAevB;IACfwB,UAAUjC;IACVkC,OAAOvC;IACPwC,SAAStB;IACTuB,OAAOtB;IACPuB,QAAQrB;IACRsB,QAAQzC;IACR0C,OAAO7C;IACP8C,cAAcpC;IACdqC,MAAMxC;IACNyC,OAAOvC;IACPwC,WAAW5C;IACX6C,MAAMhD;IACNiD,SAASrD;IACTsD,cAAcrD;AAChB;AAGA,OAAO,MAAMsD,YAAYC,OAAOC,IAAI,CAAC9B,UAAwB;AAK7D,OAAO,SAAS+B,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBlC,QAAQ,CAACgC,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}
1
+ {"version":3,"sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import {\n type RemixiconComponentType,\n RiAddLine,\n RiArrowRightSLine,\n RiBookOpenFill,\n RiCheckLine,\n RiCloseLine,\n RiFileCopyLine,\n RiGithubFill,\n RiGoogleFill,\n RiHomeSmileFill,\n RiImageAddFill,\n RiInformationFill,\n RiMicrosoftFill,\n RiMoneyDollarCircleLine,\n RiSubtractLine,\n} from '@remixicon/react';\nimport type {ComponentProps} from 'react';\nimport {\n BadgeIcon,\n CheckCircleSolidIcon,\n CircleDottedLineIcon,\n ComponentFillIcon,\n ComponentLineIcon,\n EllipseMiniSolidIcon,\n InfoTooltipFillIcon,\n ResizeIcon,\n ShipfoxLogo,\n SlackLogo,\n SpinnerIcon,\n StripeLogo,\n ThunderIcon,\n XCircleSolidIcon,\n} from './custom';\n\nconst iconsMap = {\n google: RiGoogleFill,\n microsoft: RiMicrosoftFill,\n badge: BadgeIcon,\n checkCircleSolid: CheckCircleSolidIcon,\n circleDottedLine: CircleDottedLineIcon,\n componentFill: ComponentFillIcon,\n xCircleSolid: XCircleSolidIcon,\n thunder: ThunderIcon,\n resize: ResizeIcon,\n infoTooltipFill: InfoTooltipFillIcon,\n spinner: SpinnerIcon,\n ellipseMiniSolid: EllipseMiniSolidIcon,\n componentLine: ComponentLineIcon,\n imageAdd: RiImageAddFill,\n close: RiCloseLine,\n shipfox: ShipfoxLogo,\n slack: SlackLogo,\n stripe: StripeLogo,\n github: RiGithubFill,\n check: RiCheckLine,\n subtractLine: RiSubtractLine,\n info: RiInformationFill,\n money: RiMoneyDollarCircleLine,\n homeSmile: RiHomeSmileFill,\n copy: RiFileCopyLine,\n addLine: RiAddLine,\n chevronRight: RiArrowRightSLine,\n bookOpen: RiBookOpenFill,\n} as const satisfies Record<string, RemixiconComponentType>;\n\nexport type IconName = keyof typeof iconsMap;\nexport const iconNames = Object.keys(iconsMap) as IconName[];\n\ntype BaseIconProps = ComponentProps<typeof RiGoogleFill>;\ntype IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;\n\nexport function Icon({name, ...props}: IconProps) {\n const IconComponent = iconsMap[name];\n return <IconComponent {...props} />;\n}\n"],"names":["RiAddLine","RiArrowRightSLine","RiBookOpenFill","RiCheckLine","RiCloseLine","RiFileCopyLine","RiGithubFill","RiGoogleFill","RiHomeSmileFill","RiImageAddFill","RiInformationFill","RiMicrosoftFill","RiMoneyDollarCircleLine","RiSubtractLine","BadgeIcon","CheckCircleSolidIcon","CircleDottedLineIcon","ComponentFillIcon","ComponentLineIcon","EllipseMiniSolidIcon","InfoTooltipFillIcon","ResizeIcon","ShipfoxLogo","SlackLogo","SpinnerIcon","StripeLogo","ThunderIcon","XCircleSolidIcon","iconsMap","google","microsoft","badge","checkCircleSolid","circleDottedLine","componentFill","xCircleSolid","thunder","resize","infoTooltipFill","spinner","ellipseMiniSolid","componentLine","imageAdd","close","shipfox","slack","stripe","github","check","subtractLine","info","money","homeSmile","copy","addLine","chevronRight","bookOpen","iconNames","Object","keys","Icon","name","props","IconComponent"],"mappings":";AAAA,SAEEA,SAAS,EACTC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,uBAAuB,EACvBC,cAAc,QACT,mBAAmB;AAE1B,SACEC,SAAS,EACTC,oBAAoB,EACpBC,oBAAoB,EACpBC,iBAAiB,EACjBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,EACnBC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,gBAAgB,QACX,WAAW;AAElB,MAAMC,WAAW;IACfC,QAAQtB;IACRuB,WAAWnB;IACXoB,OAAOjB;IACPkB,kBAAkBjB;IAClBkB,kBAAkBjB;IAClBkB,eAAejB;IACfkB,cAAcR;IACdS,SAASV;IACTW,QAAQhB;IACRiB,iBAAiBlB;IACjBmB,SAASf;IACTgB,kBAAkBrB;IAClBsB,eAAevB;IACfwB,UAAUjC;IACVkC,OAAOvC;IACPwC,SAAStB;IACTuB,OAAOtB;IACPuB,QAAQrB;IACRsB,QAAQzC;IACR0C,OAAO7C;IACP8C,cAAcpC;IACdqC,MAAMxC;IACNyC,OAAOvC;IACPwC,WAAW5C;IACX6C,MAAMhD;IACNiD,SAAStD;IACTuD,cAActD;IACduD,UAAUtD;AACZ;AAGA,OAAO,MAAMuD,YAAYC,OAAOC,IAAI,CAAC/B,UAAwB;AAK7D,OAAO,SAASgC,KAAK,EAACC,IAAI,EAAE,GAAGC,OAAiB;IAC9C,MAAMC,gBAAgBnC,QAAQ,CAACiC,KAAK;IACpC,qBAAO,KAACE;QAAe,GAAGD,KAAK;;AACjC"}
@@ -4,14 +4,17 @@ export * from './badge';
4
4
  export * from './button';
5
5
  export * from './checkbox';
6
6
  export * from './code-block';
7
+ export * from './dot-grid';
7
8
  export * from './dynamic-item';
8
9
  export * from './icon';
9
10
  export * from './inline-tips';
10
11
  export * from './input';
11
12
  export * from './item';
12
13
  export * from './label';
14
+ export * from './modal';
13
15
  export * from './textarea';
14
16
  export * from './theme';
15
17
  export * from './toast';
18
+ export * from './tooltip';
16
19
  export * from './typography';
17
20
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
@@ -4,15 +4,18 @@ export * from './badge/index.js';
4
4
  export * from './button/index.js';
5
5
  export * from './checkbox/index.js';
6
6
  export * from './code-block/index.js';
7
+ export * from './dot-grid/index.js';
7
8
  export * from './dynamic-item/index.js';
8
9
  export * from './icon/index.js';
9
10
  export * from './inline-tips/index.js';
10
11
  export * from './input/index.js';
11
12
  export * from './item/index.js';
12
13
  export * from './label/index.js';
14
+ export * from './modal/index.js';
13
15
  export * from './textarea/index.js';
14
16
  export * from './theme/index.js';
15
17
  export * from './toast/index.js';
18
+ export * from './tooltip/index.js';
16
19
  export * from './typography/index.js';
17
20
 
18
21
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './dynamic-item';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,eAAe"}
1
+ {"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './dot-grid';\nexport * from './dynamic-item';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './modal';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './tooltip';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,eAAe"}
@@ -0,0 +1,3 @@
1
+ export type { ModalContentProps, ModalDescriptionProps, ModalHeaderProps, ModalOverlayProps, ModalTitleProps, } from './modal';
2
+ export { Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modalContentVariants, modalDefaultTransition, modalOverlayVariants, } from './modal';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modalContentVariants, modalDefaultTransition, modalOverlayVariants } from './modal.js';
2
+
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/modal/index.ts"],"sourcesContent":["export type {\n ModalContentProps,\n ModalDescriptionProps,\n ModalHeaderProps,\n ModalOverlayProps,\n ModalTitleProps,\n} from './modal';\nexport {\n Modal,\n ModalBody,\n ModalClose,\n ModalContent,\n ModalDescription,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n ModalPortal,\n ModalTitle,\n ModalTrigger,\n modalContentVariants,\n modalDefaultTransition,\n modalOverlayVariants,\n} from './modal';\n"],"names":["Modal","ModalBody","ModalClose","ModalContent","ModalDescription","ModalFooter","ModalHeader","ModalOverlay","ModalPortal","ModalTitle","ModalTrigger","modalContentVariants","modalDefaultTransition","modalOverlayVariants"],"mappings":"AAOA,SACEA,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,WAAW,EACXC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,oBAAoB,EACpBC,sBAAsB,EACtBC,oBAAoB,QACf,UAAU"}
@@ -0,0 +1,37 @@
1
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
2
+ import { type Transition } from 'framer-motion';
3
+ import { type ComponentProps } from 'react';
4
+ declare const modalDefaultTransition: Transition;
5
+ declare const modalOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
6
+ declare const modalContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
7
+ declare function Modal({ breakpoint, children, ...props }: ComponentProps<typeof DialogPrimitive.Root> & {
8
+ breakpoint?: string;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ declare function ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
11
+ declare function ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
12
+ declare function ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
13
+ type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {
14
+ animated?: boolean;
15
+ transition?: Transition;
16
+ };
17
+ declare function ModalOverlay({ className, animated, transition, ...props }: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;
18
+ type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
19
+ animated?: boolean;
20
+ transition?: Transition;
21
+ };
22
+ declare function ModalContent({ className, children, animated, transition, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
23
+ type ModalHeaderProps = ComponentProps<'div'> & {
24
+ title?: string;
25
+ showEscIndicator?: boolean;
26
+ showClose?: boolean;
27
+ };
28
+ declare function ModalHeader({ className, title, showEscIndicator, showClose, children, ...props }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
29
+ declare function ModalBody({ className, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
30
+ declare function ModalFooter({ className, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
31
+ type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
32
+ declare function ModalTitle({ className, ...props }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
33
+ type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
34
+ declare function ModalDescription({ className, ...props }: ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
35
+ export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition, };
36
+ export type { ModalContentProps, ModalHeaderProps, ModalOverlayProps, ModalTitleProps, ModalDescriptionProps, };
37
+ //# sourceMappingURL=modal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,262 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
3
+ import { cva } from 'class-variance-authority';
4
+ import { Button } from '../../components/button/index.js';
5
+ import { Icon } from '../../components/icon/index.js';
6
+ import { Text } from '../../components/typography/index.js';
7
+ import { motion } from 'framer-motion';
8
+ import { useMediaQuery } from '../../hooks/useMediaQuery.js';
9
+ import { createContext, useContext } from 'react';
10
+ import { cn } from '../../utils/cn.js';
11
+ import { Drawer as VaulDrawer } from 'vaul';
12
+ const modalDefaultTransition = {
13
+ type: 'spring',
14
+ stiffness: 300,
15
+ damping: 30
16
+ };
17
+ const ModalContext = /*#__PURE__*/ createContext(null);
18
+ function useModalContext() {
19
+ const context = useContext(ModalContext);
20
+ if (!context) {
21
+ throw new Error('Modal components must be used within a Modal component');
22
+ }
23
+ return context;
24
+ }
25
+ const modalOverlayVariants = cva('fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0');
26
+ const modalContentVariants = cva('fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip');
27
+ function Modal({ breakpoint = '(min-width: 768px)', children, ...props }) {
28
+ const isDesktop = useMediaQuery(breakpoint);
29
+ const contextValue = {
30
+ breakpoint,
31
+ isDesktop
32
+ };
33
+ const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;
34
+ return /*#__PURE__*/ _jsx(ModalContext.Provider, {
35
+ value: contextValue,
36
+ children: /*#__PURE__*/ _jsx(Root, {
37
+ ...props,
38
+ children: children
39
+ })
40
+ });
41
+ }
42
+ function ModalTrigger(props) {
43
+ const { isDesktop } = useModalContext();
44
+ if (isDesktop) {
45
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Trigger, {
46
+ ...props
47
+ });
48
+ }
49
+ return /*#__PURE__*/ _jsx(VaulDrawer.Trigger, {
50
+ ...props
51
+ });
52
+ }
53
+ function ModalPortal(props) {
54
+ const { isDesktop } = useModalContext();
55
+ if (isDesktop) {
56
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Portal, {
57
+ ...props
58
+ });
59
+ }
60
+ return /*#__PURE__*/ _jsx(VaulDrawer.Portal, {
61
+ ...props
62
+ });
63
+ }
64
+ function ModalClose(props) {
65
+ const { isDesktop } = useModalContext();
66
+ if (isDesktop) {
67
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Close, {
68
+ ...props
69
+ });
70
+ }
71
+ return /*#__PURE__*/ _jsx(VaulDrawer.Close, {
72
+ ...props
73
+ });
74
+ }
75
+ function ModalOverlay({ className, animated = true, transition = modalDefaultTransition, ...props }) {
76
+ const { isDesktop } = useModalContext();
77
+ if (!isDesktop) {
78
+ return /*#__PURE__*/ _jsx(VaulDrawer.Overlay, {
79
+ className: cn(modalOverlayVariants(), className),
80
+ ...props
81
+ });
82
+ }
83
+ if (animated) {
84
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Overlay, {
85
+ className: cn(modalOverlayVariants(), className),
86
+ asChild: true,
87
+ ...props,
88
+ children: /*#__PURE__*/ _jsx(motion.div, {
89
+ initial: {
90
+ opacity: 0
91
+ },
92
+ animate: {
93
+ opacity: 1
94
+ },
95
+ exit: {
96
+ opacity: 0
97
+ },
98
+ transition: transition
99
+ })
100
+ });
101
+ }
102
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Overlay, {
103
+ className: cn(modalOverlayVariants(), className),
104
+ ...props
105
+ });
106
+ }
107
+ function ModalContent({ className, children, animated = true, transition = modalDefaultTransition, ...props }) {
108
+ const { isDesktop } = useModalContext();
109
+ if (!isDesktop) {
110
+ return /*#__PURE__*/ _jsxs(ModalPortal, {
111
+ children: [
112
+ /*#__PURE__*/ _jsx(ModalOverlay, {
113
+ animated: animated,
114
+ transition: transition
115
+ }),
116
+ /*#__PURE__*/ _jsx(VaulDrawer.Content, {
117
+ className: cn('fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip', className),
118
+ ...props,
119
+ children: /*#__PURE__*/ _jsxs("div", {
120
+ className: "relative w-full h-full flex flex-col min-h-0",
121
+ children: [
122
+ /*#__PURE__*/ _jsx("div", {
123
+ className: "pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16"
124
+ }),
125
+ /*#__PURE__*/ _jsx("div", {
126
+ className: "flex items-center justify-center pt-8 pb-8 shrink-0",
127
+ children: /*#__PURE__*/ _jsx("div", {
128
+ className: "bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40"
129
+ })
130
+ }),
131
+ children
132
+ ]
133
+ })
134
+ })
135
+ ]
136
+ });
137
+ }
138
+ const baseClasses = cn(modalContentVariants(), className);
139
+ return /*#__PURE__*/ _jsxs(ModalPortal, {
140
+ children: [
141
+ /*#__PURE__*/ _jsx(ModalOverlay, {
142
+ animated: animated,
143
+ transition: transition
144
+ }),
145
+ /*#__PURE__*/ _jsx(DialogPrimitive.Content, {
146
+ className: baseClasses,
147
+ ...props,
148
+ children: /*#__PURE__*/ _jsxs("div", {
149
+ className: "relative size-full",
150
+ children: [
151
+ /*#__PURE__*/ _jsx("div", {
152
+ className: "pointer-events-none absolute inset-0 shadow-separator-inset rounded-16"
153
+ }),
154
+ children
155
+ ]
156
+ })
157
+ })
158
+ ]
159
+ });
160
+ }
161
+ function ModalHeader({ className, title, showEscIndicator = true, showClose = true, children, ...props }) {
162
+ const { isDesktop } = useModalContext();
163
+ return /*#__PURE__*/ _jsxs("div", {
164
+ className: "flex flex-col w-full shrink-0",
165
+ ...props,
166
+ children: [
167
+ /*#__PURE__*/ _jsxs("div", {
168
+ className: "bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full",
169
+ children: [
170
+ title ? /*#__PURE__*/ _jsx(Text, {
171
+ size: "lg",
172
+ className: "flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap",
173
+ children: title
174
+ }) : /*#__PURE__*/ _jsx("div", {
175
+ className: "flex-1",
176
+ children: children
177
+ }),
178
+ /*#__PURE__*/ _jsxs("div", {
179
+ className: "flex items-center gap-8",
180
+ children: [
181
+ isDesktop && showEscIndicator && /*#__PURE__*/ _jsx("kbd", {
182
+ className: "flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4",
183
+ children: "esc"
184
+ }),
185
+ showClose && /*#__PURE__*/ _jsx(ModalClose, {
186
+ asChild: true,
187
+ children: /*#__PURE__*/ _jsx(Button, {
188
+ variant: "transparent",
189
+ size: "xs",
190
+ className: "rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24",
191
+ children: /*#__PURE__*/ _jsx(Icon, {
192
+ name: "close"
193
+ })
194
+ })
195
+ })
196
+ ]
197
+ })
198
+ ]
199
+ }),
200
+ /*#__PURE__*/ _jsx("div", {
201
+ className: "bg-border-neutral-strong h-[1px] w-full"
202
+ })
203
+ ]
204
+ });
205
+ }
206
+ function ModalBody({ className, children, ...props }) {
207
+ const { isDesktop } = useModalContext();
208
+ return /*#__PURE__*/ _jsx("div", {
209
+ className: cn('bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full', isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1', className),
210
+ ...props,
211
+ children: children
212
+ });
213
+ }
214
+ function ModalFooter({ className, children, ...props }) {
215
+ return /*#__PURE__*/ _jsxs("div", {
216
+ className: "flex flex-col w-full shrink-0",
217
+ ...props,
218
+ children: [
219
+ /*#__PURE__*/ _jsx("div", {
220
+ className: "bg-border-neutral-strong h-[1px] w-full"
221
+ }),
222
+ /*#__PURE__*/ _jsx("div", {
223
+ className: "bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full",
224
+ children: /*#__PURE__*/ _jsx("div", {
225
+ className: cn('flex items-center gap-16', className),
226
+ children: children
227
+ })
228
+ })
229
+ ]
230
+ });
231
+ }
232
+ function ModalTitle({ className, ...props }) {
233
+ const { isDesktop } = useModalContext();
234
+ const titleClassName = cn('font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base', className);
235
+ if (!isDesktop) {
236
+ return /*#__PURE__*/ _jsx(VaulDrawer.Title, {
237
+ className: titleClassName,
238
+ ...props
239
+ });
240
+ }
241
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Title, {
242
+ className: titleClassName,
243
+ ...props
244
+ });
245
+ }
246
+ function ModalDescription({ className, ...props }) {
247
+ const { isDesktop } = useModalContext();
248
+ const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);
249
+ if (!isDesktop) {
250
+ return /*#__PURE__*/ _jsx(VaulDrawer.Description, {
251
+ className: descClassName,
252
+ ...props
253
+ });
254
+ }
255
+ return /*#__PURE__*/ _jsx(DialogPrimitive.Description, {
256
+ className: descClassName,
257
+ ...props
258
+ });
259
+ }
260
+ export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition };
261
+
262
+ //# sourceMappingURL=modal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {cva} from 'class-variance-authority';\nimport {Button} from 'components/button';\nimport {Icon} from 'components/icon';\nimport {Text} from 'components/typography';\nimport {motion, type Transition} from 'framer-motion';\nimport {useMediaQuery} from 'hooks/useMediaQuery';\nimport {type ComponentProps, createContext, useContext} from 'react';\nimport {cn} from 'utils/cn';\nimport {Drawer as VaulDrawer} from 'vaul';\n\nconst modalDefaultTransition: Transition = {\n type: 'spring',\n stiffness: 300,\n damping: 30,\n};\n\ntype ModalContextValue = {\n breakpoint: string;\n isDesktop: boolean;\n};\n\nconst ModalContext = createContext<ModalContextValue | null>(null);\n\nfunction useModalContext() {\n const context = useContext(ModalContext);\n if (!context) {\n throw new Error('Modal components must be used within a Modal component');\n }\n return context;\n}\n\nconst modalOverlayVariants = cva(\n 'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n);\n\nconst modalContentVariants = cva(\n 'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',\n);\n\nfunction Modal({\n breakpoint = '(min-width: 768px)',\n children,\n ...props\n}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {\n const isDesktop = useMediaQuery(breakpoint);\n\n const contextValue: ModalContextValue = {\n breakpoint,\n isDesktop,\n };\n\n const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;\n\n return (\n <ModalContext.Provider value={contextValue}>\n <Root {...props}>{children}</Root>\n </ModalContext.Provider>\n );\n}\n\nfunction ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {\n const {isDesktop} = useModalContext();\n\n if (isDesktop) {\n return <DialogPrimitive.Trigger {...props} />;\n }\n\n return <VaulDrawer.Trigger {...props} />;\n}\n\nfunction ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {\n const {isDesktop} = useModalContext();\n\n if (isDesktop) {\n return <DialogPrimitive.Portal {...props} />;\n }\n\n return <VaulDrawer.Portal {...props} />;\n}\n\nfunction ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {\n const {isDesktop} = useModalContext();\n\n if (isDesktop) {\n return <DialogPrimitive.Close {...props} />;\n }\n\n return <VaulDrawer.Close {...props} />;\n}\n\ntype ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {\n animated?: boolean;\n transition?: Transition;\n};\n\nfunction ModalOverlay({\n className,\n animated = true,\n transition = modalDefaultTransition,\n ...props\n}: ModalOverlayProps) {\n const {isDesktop} = useModalContext();\n\n if (!isDesktop) {\n return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n }\n\n if (animated) {\n return (\n <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>\n <motion.div\n initial={{opacity: 0}}\n animate={{opacity: 1}}\n exit={{opacity: 0}}\n transition={transition}\n />\n </DialogPrimitive.Overlay>\n );\n }\n\n return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n}\n\ntype ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {\n animated?: boolean;\n transition?: Transition;\n};\n\nfunction ModalContent({\n className,\n children,\n animated = true,\n transition = modalDefaultTransition,\n ...props\n}: ModalContentProps) {\n const {isDesktop} = useModalContext();\n\n if (!isDesktop) {\n return (\n <ModalPortal>\n <ModalOverlay animated={animated} transition={transition} />\n <VaulDrawer.Content\n className={cn(\n 'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',\n className,\n )}\n {...props}\n >\n <div className=\"relative w-full h-full flex flex-col min-h-0\">\n <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16\" />\n <div className=\"flex items-center justify-center pt-8 pb-8 shrink-0\">\n <div className=\"bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40\" />\n </div>\n {children}\n </div>\n </VaulDrawer.Content>\n </ModalPortal>\n );\n }\n\n const baseClasses = cn(modalContentVariants(), className);\n\n return (\n <ModalPortal>\n <ModalOverlay animated={animated} transition={transition} />\n <DialogPrimitive.Content className={baseClasses} {...props}>\n <div className=\"relative size-full\">\n <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-16\" />\n {children}\n </div>\n </DialogPrimitive.Content>\n </ModalPortal>\n );\n}\n\ntype ModalHeaderProps = ComponentProps<'div'> & {\n title?: string;\n showEscIndicator?: boolean;\n showClose?: boolean;\n};\n\nfunction ModalHeader({\n className,\n title,\n showEscIndicator = true,\n showClose = true,\n children,\n ...props\n}: ModalHeaderProps) {\n const {isDesktop} = useModalContext();\n\n return (\n <div className=\"flex flex-col w-full shrink-0\" {...props}>\n <div className=\"bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full\">\n {title ? (\n <Text size=\"lg\" className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\">\n {title}\n </Text>\n ) : (\n <div className=\"flex-1\">{children}</div>\n )}\n <div className=\"flex items-center gap-8\">\n {isDesktop && showEscIndicator && (\n <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n esc\n </kbd>\n )}\n {showClose && (\n <ModalClose asChild>\n <Button\n variant=\"transparent\"\n size=\"xs\"\n className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n >\n <Icon name=\"close\" />\n </Button>\n </ModalClose>\n )}\n </div>\n </div>\n <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n </div>\n );\n}\n\nfunction ModalBody({className, children, ...props}: ComponentProps<'div'>) {\n const {isDesktop} = useModalContext();\n\n return (\n <div\n className={cn(\n 'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',\n isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nfunction ModalFooter({className, children, ...props}: ComponentProps<'div'>) {\n return (\n <div className=\"flex flex-col w-full shrink-0\" {...props}>\n <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n <div className=\"bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full\">\n <div className={cn('flex items-center gap-16', className)}>{children}</div>\n </div>\n </div>\n );\n}\n\ntype ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction ModalTitle({className, ...props}: ModalTitleProps) {\n const {isDesktop} = useModalContext();\n\n const titleClassName = cn(\n 'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',\n className,\n );\n\n if (!isDesktop) {\n return <VaulDrawer.Title className={titleClassName} {...props} />;\n }\n\n return <DialogPrimitive.Title className={titleClassName} {...props} />;\n}\n\ntype ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;\n\nfunction ModalDescription({className, ...props}: ModalDescriptionProps) {\n const {isDesktop} = useModalContext();\n\n const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);\n\n if (!isDesktop) {\n return <VaulDrawer.Description className={descClassName} {...props} />;\n }\n\n return <DialogPrimitive.Description className={descClassName} {...props} />;\n}\n\nexport {\n Modal,\n ModalPortal,\n ModalOverlay,\n ModalTrigger,\n ModalClose,\n ModalContent,\n ModalHeader,\n ModalBody,\n ModalFooter,\n ModalTitle,\n ModalDescription,\n modalContentVariants,\n modalOverlayVariants,\n modalDefaultTransition,\n};\n\nexport type {\n ModalContentProps,\n ModalHeaderProps,\n ModalOverlayProps,\n ModalTitleProps,\n ModalDescriptionProps,\n};\n"],"names":["DialogPrimitive","cva","Button","Icon","Text","motion","useMediaQuery","createContext","useContext","cn","Drawer","VaulDrawer","modalDefaultTransition","type","stiffness","damping","ModalContext","useModalContext","context","Error","modalOverlayVariants","modalContentVariants","Modal","breakpoint","children","props","isDesktop","contextValue","Root","Provider","value","ModalTrigger","Trigger","ModalPortal","Portal","ModalClose","Close","ModalOverlay","className","animated","transition","Overlay","asChild","div","initial","opacity","animate","exit","ModalContent","Content","baseClasses","ModalHeader","title","showEscIndicator","showClose","size","kbd","variant","name","ModalBody","ModalFooter","ModalTitle","titleClassName","Title","ModalDescription","descClassName","Description"],"mappings":";AAAA,YAAYA,qBAAqB,yBAAyB;AAC1D,SAAQC,GAAG,QAAO,2BAA2B;AAC7C,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,IAAI,QAAO,kBAAkB;AACrC,SAAQC,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAwB,gBAAgB;AACtD,SAAQC,aAAa,QAAO,sBAAsB;AAClD,SAA6BC,aAAa,EAAEC,UAAU,QAAO,QAAQ;AACrE,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,UAAUC,UAAU,QAAO,OAAO;AAE1C,MAAMC,yBAAqC;IACzCC,MAAM;IACNC,WAAW;IACXC,SAAS;AACX;AAOA,MAAMC,6BAAeT,cAAwC;AAE7D,SAASU;IACP,MAAMC,UAAUV,WAAWQ;IAC3B,IAAI,CAACE,SAAS;QACZ,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOD;AACT;AAEA,MAAME,uBAAuBnB,IAC3B;AAGF,MAAMoB,uBAAuBpB,IAC3B;AAGF,SAASqB,MAAM,EACbC,aAAa,oBAAoB,EACjCC,QAAQ,EACR,GAAGC,OACiE;IACpE,MAAMC,YAAYpB,cAAciB;IAEhC,MAAMI,eAAkC;QACtCJ;QACAG;IACF;IAEA,MAAME,OAAOF,YAAY1B,gBAAgB4B,IAAI,GAAGjB,WAAWiB,IAAI;IAE/D,qBACE,KAACZ,aAAaa,QAAQ;QAACC,OAAOH;kBAC5B,cAAA,KAACC;YAAM,GAAGH,KAAK;sBAAGD;;;AAGxB;AAEA,SAASO,aAAaN,KAAqD;IACzE,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,IAAIS,WAAW;QACb,qBAAO,KAAC1B,gBAAgBgC,OAAO;YAAE,GAAGP,KAAK;;IAC3C;IAEA,qBAAO,KAACd,WAAWqB,OAAO;QAAE,GAAGP,KAAK;;AACtC;AAEA,SAASQ,YAAYR,KAAoD;IACvE,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,IAAIS,WAAW;QACb,qBAAO,KAAC1B,gBAAgBkC,MAAM;YAAE,GAAGT,KAAK;;IAC1C;IAEA,qBAAO,KAACd,WAAWuB,MAAM;QAAE,GAAGT,KAAK;;AACrC;AAEA,SAASU,WAAWV,KAAmD;IACrE,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,IAAIS,WAAW;QACb,qBAAO,KAAC1B,gBAAgBoC,KAAK;YAAE,GAAGX,KAAK;;IACzC;IAEA,qBAAO,KAACd,WAAWyB,KAAK;QAAE,GAAGX,KAAK;;AACpC;AAOA,SAASY,aAAa,EACpBC,SAAS,EACTC,WAAW,IAAI,EACfC,aAAa5B,sBAAsB,EACnC,GAAGa,OACe;IAClB,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,IAAI,CAACS,WAAW;QACd,qBAAO,KAACf,WAAW8B,OAAO;YAACH,WAAW7B,GAAGW,wBAAwBkB;YAAa,GAAGb,KAAK;;IACxF;IAEA,IAAIc,UAAU;QACZ,qBACE,KAACvC,gBAAgByC,OAAO;YAACH,WAAW7B,GAAGW,wBAAwBkB;YAAYI,OAAO;YAAE,GAAGjB,KAAK;sBAC1F,cAAA,KAACpB,OAAOsC,GAAG;gBACTC,SAAS;oBAACC,SAAS;gBAAC;gBACpBC,SAAS;oBAACD,SAAS;gBAAC;gBACpBE,MAAM;oBAACF,SAAS;gBAAC;gBACjBL,YAAYA;;;IAIpB;IAEA,qBAAO,KAACxC,gBAAgByC,OAAO;QAACH,WAAW7B,GAAGW,wBAAwBkB;QAAa,GAAGb,KAAK;;AAC7F;AAOA,SAASuB,aAAa,EACpBV,SAAS,EACTd,QAAQ,EACRe,WAAW,IAAI,EACfC,aAAa5B,sBAAsB,EACnC,GAAGa,OACe;IAClB,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,IAAI,CAACS,WAAW;QACd,qBACE,MAACO;;8BACC,KAACI;oBAAaE,UAAUA;oBAAUC,YAAYA;;8BAC9C,KAAC7B,WAAWsC,OAAO;oBACjBX,WAAW7B,GACT,wHACA6B;oBAED,GAAGb,KAAK;8BAET,cAAA,MAACkB;wBAAIL,WAAU;;0CACb,KAACK;gCAAIL,WAAU;;0CACf,KAACK;gCAAIL,WAAU;0CACb,cAAA,KAACK;oCAAIL,WAAU;;;4BAEhBd;;;;;;IAKX;IAEA,MAAM0B,cAAczC,GAAGY,wBAAwBiB;IAE/C,qBACE,MAACL;;0BACC,KAACI;gBAAaE,UAAUA;gBAAUC,YAAYA;;0BAC9C,KAACxC,gBAAgBiD,OAAO;gBAACX,WAAWY;gBAAc,GAAGzB,KAAK;0BACxD,cAAA,MAACkB;oBAAIL,WAAU;;sCACb,KAACK;4BAAIL,WAAU;;wBACdd;;;;;;AAKX;AAQA,SAAS2B,YAAY,EACnBb,SAAS,EACTc,KAAK,EACLC,mBAAmB,IAAI,EACvBC,YAAY,IAAI,EAChB9B,QAAQ,EACR,GAAGC,OACc;IACjB,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,qBACE,MAAC0B;QAAIL,WAAU;QAAiC,GAAGb,KAAK;;0BACtD,MAACkB;gBAAIL,WAAU;;oBACZc,sBACC,KAAChD;wBAAKmD,MAAK;wBAAKjB,WAAU;kCACvBc;uCAGH,KAACT;wBAAIL,WAAU;kCAAUd;;kCAE3B,MAACmB;wBAAIL,WAAU;;4BACZZ,aAAa2B,kCACZ,KAACG;gCAAIlB,WAAU;0CAA0K;;4BAI1LgB,2BACC,KAACnB;gCAAWO,OAAO;0CACjB,cAAA,KAACxC;oCACCuD,SAAQ;oCACRF,MAAK;oCACLjB,WAAU;8CAEV,cAAA,KAACnC;wCAAKuD,MAAK;;;;;;;;0BAMrB,KAACf;gBAAIL,WAAU;;;;AAGrB;AAEA,SAASqB,UAAU,EAACrB,SAAS,EAAEd,QAAQ,EAAE,GAAGC,OAA6B;IACvE,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,qBACE,KAAC0B;QACCL,WAAW7B,GACT,iFACAiB,YAAY,kBAAkB,0CAC9BY;QAED,GAAGb,KAAK;kBAERD;;AAGP;AAEA,SAASoC,YAAY,EAACtB,SAAS,EAAEd,QAAQ,EAAE,GAAGC,OAA6B;IACzE,qBACE,MAACkB;QAAIL,WAAU;QAAiC,GAAGb,KAAK;;0BACtD,KAACkB;gBAAIL,WAAU;;0BACf,KAACK;gBAAIL,WAAU;0BACb,cAAA,KAACK;oBAAIL,WAAW7B,GAAG,4BAA4B6B;8BAAad;;;;;AAIpE;AAIA,SAASqC,WAAW,EAACvB,SAAS,EAAE,GAAGb,OAAuB;IACxD,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,MAAM6C,iBAAiBrD,GACrB,iGACA6B;IAGF,IAAI,CAACZ,WAAW;QACd,qBAAO,KAACf,WAAWoD,KAAK;YAACzB,WAAWwB;YAAiB,GAAGrC,KAAK;;IAC/D;IAEA,qBAAO,KAACzB,gBAAgB+D,KAAK;QAACzB,WAAWwB;QAAiB,GAAGrC,KAAK;;AACpE;AAIA,SAASuC,iBAAiB,EAAC1B,SAAS,EAAE,GAAGb,OAA6B;IACpE,MAAM,EAACC,SAAS,EAAC,GAAGT;IAEpB,MAAMgD,gBAAgBxD,GAAG,qDAAqD6B;IAE9E,IAAI,CAACZ,WAAW;QACd,qBAAO,KAACf,WAAWuD,WAAW;YAAC5B,WAAW2B;YAAgB,GAAGxC,KAAK;;IACpE;IAEA,qBAAO,KAACzB,gBAAgBkE,WAAW;QAAC5B,WAAW2B;QAAgB,GAAGxC,KAAK;;AACzE;AAEA,SACEH,KAAK,EACLW,WAAW,EACXI,YAAY,EACZN,YAAY,EACZI,UAAU,EACVa,YAAY,EACZG,WAAW,EACXQ,SAAS,EACTC,WAAW,EACXC,UAAU,EACVG,gBAAgB,EAChB3C,oBAAoB,EACpBD,oBAAoB,EACpBR,sBAAsB,GACtB"}