@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
@@ -1,17 +1,24 @@
1
- import {resolve} from 'node:path';
2
1
  import type {StorybookConfig} from '@storybook/react-vite';
3
- import tailwindcss from '@tailwindcss/vite';
4
- import react from '@vitejs/plugin-react';
5
2
 
6
3
  const config: StorybookConfig = {
7
4
  framework: '@storybook/react-vite',
8
5
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
9
6
  addons: ['storybook-addon-pseudo-states', '@storybook/addon-vitest'],
10
- viteFinal: (config) => {
11
- config.plugins = config.plugins ?? [];
7
+ viteFinal: async (config) => {
8
+ const [{default: react}, {default: tailwindcss}, {fileURLToPath}, {dirname, resolve}] =
9
+ await Promise.all([
10
+ import('@vitejs/plugin-react'),
11
+ import('@tailwindcss/vite'),
12
+ import('node:url'),
13
+ import('node:path'),
14
+ ]);
12
15
 
16
+ config.plugins = config.plugins ?? [];
13
17
  config.plugins.push(react(), tailwindcss());
14
18
 
19
+ const __filename = fileURLToPath(import.meta.url);
20
+ const __dirname = dirname(__filename);
21
+
15
22
  config.resolve = config.resolve ?? {};
16
23
  config.resolve.alias = {
17
24
  ...config.resolve.alias,
@@ -9,6 +9,17 @@ const withTheme: Decorator = (Story, context) => {
9
9
  const preview: Preview = {
10
10
  decorators: [withTheme],
11
11
  parameters: {
12
+ viewport: {
13
+ viewports: {
14
+ large: {
15
+ name: 'Large Viewport',
16
+ styles: {
17
+ width: '1280px',
18
+ height: '2000px',
19
+ },
20
+ },
21
+ },
22
+ },
12
23
  options: {
13
24
  storySort: {
14
25
  method: 'alphabetical',
@@ -1,6 +1,19 @@
1
1
   WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
2
2
 
3
- > @shipfox/react-ui@0.5.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
4
- > swc
3
+ > @shipfox/react-ui@0.7.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
4
+ > swc && pnpm run build:css
5
5
 
6
- Successfully compiled: 108 files with swc (681.63ms)
6
+ Successfully compiled: 116 files with swc (406.75ms)
7
+  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
8
+
9
+ > @shipfox/react-ui@0.7.0 build:css /runnertmp/_work/tooling/tooling/libs/react/ui
10
+ > vite build --config vite.css.config.ts && rm -f dist/css-entry.js dist/css-entry.js.map
11
+
12
+ vite v7.2.2 building client environment for production...
13
+ transforming...
14
+ ✓ 2 modules transformed.
15
+ rendering chunks...
16
+ computing gzip size...
17
+ dist/styles.css 84.62 kB │ gzip: 13.44 kB
18
+ dist/css-entry.js  0.00 kB │ gzip: 0.02 kB
19
+ ✓ built in 745ms
@@ -1,6 +1,6 @@
1
1
   WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
2
2
 
3
- > @shipfox/react-ui@0.5.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
3
+ > @shipfox/react-ui@0.7.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
4
4
  > biome-check --fix
5
5
 
6
- Checked 126 files in 232ms. No fixes applied.
6
+ Checked 135 files in 240ms. No fixes applied.
@@ -1,5 +1,5 @@
1
1
   WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
2
2
 
3
- > @shipfox/react-ui@0.5.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
3
+ > @shipfox/react-ui@0.7.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
4
4
  > tsc-emit
5
5
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @shipfox/react-ui
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6054e39: Add Dot-grid component
8
+
9
+ ## 0.6.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 3a95f26: Add Argos CI Upload Screenshots
14
+ - 35f3c64: Add CSS bundle
15
+ - 3a95f26: Add Modal components
16
+
3
17
  ## 0.5.0
4
18
 
5
19
  ### Minor Changes
package/README.md CHANGED
@@ -14,6 +14,22 @@ yarn add @shipfox/react-ui
14
14
  npm install @shipfox/react-ui
15
15
  ```
16
16
 
17
+ ### CSS Styles
18
+
19
+ This package includes a pre-built, minified CSS bundle with all Tailwind CSS styles and design tokens. Import it in your application:
20
+
21
+ ```typescript
22
+ import "@shipfox/react-ui/dist/styles.css"
23
+ ```
24
+
25
+ Or in your HTML:
26
+
27
+ ```html
28
+ <link rel="stylesheet" href="node_modules/@shipfox/react-ui/dist/styles.css" />
29
+ ```
30
+
31
+ The CSS bundle is self-contained and includes all design tokens, so you don't need to configure Tailwind CSS in your consuming project.
32
+
17
33
  ## Storybook
18
34
 
19
35
  The storybook is [publicly accessible online](https://react-ui.shipfox.vercel.app).
@@ -0,0 +1,5 @@
1
+ // This file is only used for building CSS
2
+ // It imports the CSS file which Vite will process and bundle
3
+ import '../index.css';
4
+
5
+ //# sourceMappingURL=build-css-entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/build-css-entry.ts"],"sourcesContent":["// This file is only used for building CSS\n// It imports the CSS file which Vite will process and bundle\nimport '../index.css';\n"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,6DAA6D;AAC7D,OAAO,eAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"code-block-footer.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoDtB;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAY7B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAe7B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAejC"}
1
+ {"version":3,"file":"code-block-footer.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-footer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA0CtB;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAY7B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAuB7B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAuBjC"}
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Slot } from '@radix-ui/react-slot';
3
3
  import { Icon } from '../../components/icon/icon.js';
4
+ import { Text } from '../../components/typography/index.js';
4
5
  import { cn } from '../../utils/cn.js';
5
6
  export function CodeBlockFooter({ className, asChild = false, state = 'running', message, description, icon, children, ...props }) {
6
7
  const Comp = asChild ? Slot : 'div';
@@ -26,19 +27,16 @@ export function CodeBlockFooter({ className, asChild = false, state = 'running',
26
27
  className: cn('flex w-full items-center justify-start gap-12 px-16 py-12', className),
27
28
  ...props,
28
29
  children: [
29
- /*#__PURE__*/ _jsx("div", {
30
- className: "flex shrink-0 items-center justify-center size-20 text-tag-success-icon",
30
+ /*#__PURE__*/ _jsx(CodeBlockFooterIcon, {
31
+ className: "text-tag-success-icon",
31
32
  children: defaultIcon
32
33
  }),
33
- (message || description) && /*#__PURE__*/ _jsxs("div", {
34
- className: "flex flex-col items-start justify-center gap-0",
34
+ (message || description) && /*#__PURE__*/ _jsxs(CodeBlockFooterContent, {
35
35
  children: [
36
- message && /*#__PURE__*/ _jsx("div", {
37
- className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base",
36
+ message && /*#__PURE__*/ _jsx(CodeBlockFooterMessage, {
38
37
  children: message
39
38
  }),
40
- description && /*#__PURE__*/ _jsx("div", {
41
- className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle",
39
+ description && /*#__PURE__*/ _jsx(CodeBlockFooterDescription, {
42
40
  children: description
43
41
  })
44
42
  ]
@@ -59,25 +57,41 @@ export function CodeBlockFooterContent({ className, asChild = false, children, .
59
57
  const Comp = asChild ? Slot : 'div';
60
58
  return /*#__PURE__*/ _jsx(Comp, {
61
59
  "data-slot": "code-block-footer-content",
62
- className: cn('flex flex-col items-start justify-center gap-0', className),
60
+ className: cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className),
63
61
  ...props,
64
62
  children: children
65
63
  });
66
64
  }
67
65
  export function CodeBlockFooterMessage({ className, asChild = false, children, ...props }) {
68
- const Comp = asChild ? Slot : 'div';
69
- return /*#__PURE__*/ _jsx(Comp, {
66
+ if (asChild) {
67
+ return /*#__PURE__*/ _jsx(Slot, {
68
+ "data-slot": "code-block-footer-message",
69
+ className: cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className),
70
+ ...props,
71
+ children: children
72
+ });
73
+ }
74
+ return /*#__PURE__*/ _jsx(Text, {
70
75
  "data-slot": "code-block-footer-message",
71
- className: cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base', className),
76
+ size: "xs",
77
+ className: cn('overflow-hidden text-ellipsis whitespace-nowrap', className),
72
78
  ...props,
73
79
  children: children
74
80
  });
75
81
  }
76
82
  export function CodeBlockFooterDescription({ className, asChild = false, children, ...props }) {
77
- const Comp = asChild ? Slot : 'div';
78
- return /*#__PURE__*/ _jsx(Comp, {
83
+ if (asChild) {
84
+ return /*#__PURE__*/ _jsx(Slot, {
85
+ "data-slot": "code-block-footer-description",
86
+ className: cn('text-xs text-foreground-neutral-subtle', className),
87
+ ...props,
88
+ children: children
89
+ });
90
+ }
91
+ return /*#__PURE__*/ _jsx(Text, {
79
92
  "data-slot": "code-block-footer-description",
80
- className: cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle', className),
93
+ size: "xs",
94
+ className: cn('text-foreground-neutral-subtle', className),
81
95
  ...props,
82
96
  children: children
83
97
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/code-block/code-block-footer.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Icon} from 'components/icon/icon';\nimport type {ComponentProps, HTMLAttributes, ReactNode} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {\n asChild?: boolean;\n state?: 'running' | 'done';\n message?: ReactNode;\n description?: ReactNode;\n icon?: ReactNode;\n};\n\nexport function CodeBlockFooter({\n className,\n asChild = false,\n state = 'running',\n message,\n description,\n icon,\n children,\n ...props\n}: CodeBlockFooterProps) {\n const Comp = asChild ? Slot : 'div';\n\n const defaultIcon =\n icon ??\n (state === 'running' ? (\n <Icon name=\"shipfox\" className=\"size-20\" aria-hidden=\"true\" />\n ) : (\n <Icon\n name=\"checkCircleSolid\"\n className=\"size-20 text-foreground-neutral-base\"\n aria-hidden=\"true\"\n />\n ));\n\n if (asChild || children) {\n return (\n <Comp\n data-slot=\"code-block-footer\"\n className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n }\n\n return (\n <Comp\n data-slot=\"code-block-footer\"\n className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n {...props}\n >\n <div className=\"flex shrink-0 items-center justify-center size-20 text-tag-success-icon\">\n {defaultIcon}\n </div>\n {(message || description) && (\n <div className=\"flex flex-col items-start justify-center gap-0\">\n {message && (\n <div className=\"overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base\">\n {message}\n </div>\n )}\n {description && (\n <div className=\"overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle\">\n {description}\n </div>\n )}\n </div>\n )}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterIconProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterIcon({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterIconProps) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"code-block-footer-icon\"\n className={cn('flex shrink-0 items-center justify-center size-20', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterContentProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterContent({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterContentProps) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"code-block-footer-content\"\n className={cn('flex flex-col items-start justify-center gap-0', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterMessageProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterMessage({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterMessageProps) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"code-block-footer-message\"\n className={cn(\n 'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base',\n className,\n )}\n {...props}\n >\n {children}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterDescription({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterDescriptionProps) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"code-block-footer-description\"\n className={cn(\n 'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle',\n className,\n )}\n {...props}\n >\n {children}\n </Comp>\n );\n}\n"],"names":["Slot","Icon","cn","CodeBlockFooter","className","asChild","state","message","description","icon","children","props","Comp","defaultIcon","name","aria-hidden","data-slot","div","CodeBlockFooterIcon","CodeBlockFooterContent","CodeBlockFooterMessage","CodeBlockFooterDescription"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,uBAAuB;AAE1C,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,gBAAgB,EAC9BC,SAAS,EACTC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,MAAMa,cACJJ,QACCH,CAAAA,UAAU,0BACT,KAACL;QAAKa,MAAK;QAAUV,WAAU;QAAUW,eAAY;uBAErD,KAACd;QACCa,MAAK;QACLV,WAAU;QACVW,eAAY;MAEhB;IAEF,IAAIV,WAAWK,UAAU;QACvB,qBACE,KAACE;YACCI,aAAU;YACVZ,WAAWF,GAAG,6DAA6DE;YAC1E,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,MAACE;QACCI,aAAU;QACVZ,WAAWF,GAAG,6DAA6DE;QAC1E,GAAGO,KAAK;;0BAET,KAACM;gBAAIb,WAAU;0BACZS;;YAEDN,CAAAA,WAAWC,WAAU,mBACrB,MAACS;gBAAIb,WAAU;;oBACZG,yBACC,KAACU;wBAAIb,WAAU;kCACZG;;oBAGJC,6BACC,KAACS;wBAAIb,WAAU;kCACZI;;;;;;AAOf;AAMA,OAAO,SAASU,oBAAoB,EAClCd,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACsB;IACzB,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GAAG,qDAAqDE;QAClE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASS,uBAAuB,EACrCf,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GAAG,kDAAkDE;QAC/D,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASU,uBAAuB,EACrChB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GACT,mGACAE;QAED,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASW,2BAA2B,EACzCjB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OAC6B;IAChC,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GACT,qGACAE;QAED,GAAGO,KAAK;kBAERD;;AAGP"}
1
+ {"version":3,"sources":["../../../src/components/code-block/code-block-footer.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Icon} from 'components/icon/icon';\nimport {Text} from 'components/typography';\nimport type {ComponentProps, HTMLAttributes, ReactNode} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {\n asChild?: boolean;\n state?: 'running' | 'done';\n message?: ReactNode;\n description?: ReactNode;\n icon?: ReactNode;\n};\n\nexport function CodeBlockFooter({\n className,\n asChild = false,\n state = 'running',\n message,\n description,\n icon,\n children,\n ...props\n}: CodeBlockFooterProps) {\n const Comp = asChild ? Slot : 'div';\n\n const defaultIcon =\n icon ??\n (state === 'running' ? (\n <Icon name=\"shipfox\" className=\"size-20\" aria-hidden=\"true\" />\n ) : (\n <Icon\n name=\"checkCircleSolid\"\n className=\"size-20 text-foreground-neutral-base\"\n aria-hidden=\"true\"\n />\n ));\n\n if (asChild || children) {\n return (\n <Comp\n data-slot=\"code-block-footer\"\n className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n }\n\n return (\n <Comp\n data-slot=\"code-block-footer\"\n className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n {...props}\n >\n <CodeBlockFooterIcon className=\"text-tag-success-icon\">{defaultIcon}</CodeBlockFooterIcon>\n {(message || description) && (\n <CodeBlockFooterContent>\n {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}\n {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}\n </CodeBlockFooterContent>\n )}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterIconProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterIcon({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterIconProps) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"code-block-footer-icon\"\n className={cn('flex shrink-0 items-center justify-center size-20', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterContentProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterContent({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterContentProps) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"code-block-footer-content\"\n className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}\n {...props}\n >\n {children}\n </Comp>\n );\n}\n\nexport type CodeBlockFooterMessageProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterMessage({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterMessageProps) {\n if (asChild) {\n return (\n <Slot\n data-slot=\"code-block-footer-message\"\n className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}\n {...props}\n >\n {children}\n </Slot>\n );\n }\n\n return (\n <Text\n data-slot=\"code-block-footer-message\"\n size=\"xs\"\n className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n\nexport type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport function CodeBlockFooterDescription({\n className,\n asChild = false,\n children,\n ...props\n}: CodeBlockFooterDescriptionProps) {\n if (asChild) {\n return (\n <Slot\n data-slot=\"code-block-footer-description\"\n className={cn('text-xs text-foreground-neutral-subtle', className)}\n {...props}\n >\n {children}\n </Slot>\n );\n }\n\n return (\n <Text\n data-slot=\"code-block-footer-description\"\n size=\"xs\"\n className={cn('text-foreground-neutral-subtle', className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["Slot","Icon","Text","cn","CodeBlockFooter","className","asChild","state","message","description","icon","children","props","Comp","defaultIcon","name","aria-hidden","data-slot","CodeBlockFooterIcon","CodeBlockFooterContent","CodeBlockFooterMessage","CodeBlockFooterDescription","size"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,wBAAwB;AAE3C,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,gBAAgB,EAC9BC,SAAS,EACTC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,MAAMc,cACJJ,QACCH,CAAAA,UAAU,0BACT,KAACN;QAAKc,MAAK;QAAUV,WAAU;QAAUW,eAAY;uBAErD,KAACf;QACCc,MAAK;QACLV,WAAU;QACVW,eAAY;MAEhB;IAEF,IAAIV,WAAWK,UAAU;QACvB,qBACE,KAACE;YACCI,aAAU;YACVZ,WAAWF,GAAG,6DAA6DE;YAC1E,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,MAACE;QACCI,aAAU;QACVZ,WAAWF,GAAG,6DAA6DE;QAC1E,GAAGO,KAAK;;0BAET,KAACM;gBAAoBb,WAAU;0BAAyBS;;YACtDN,CAAAA,WAAWC,WAAU,mBACrB,MAACU;;oBACEX,yBAAW,KAACY;kCAAwBZ;;oBACpCC,6BAAe,KAACY;kCAA4BZ;;;;;;AAKvD;AAMA,OAAO,SAASS,oBAAoB,EAClCb,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACsB;IACzB,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,qBACE,KAACa;QACCI,aAAU;QACVZ,WAAWF,GAAG,qDAAqDE;QAClE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASQ,uBAAuB,EACrCd,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,qBACE,KAACa;QACCI,aAAU;QACVZ,WAAWF,GAAG,iEAAiEE;QAC9E,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASS,uBAAuB,EACrCf,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,IAAIN,SAAS;QACX,qBACE,KAACN;YACCiB,aAAU;YACVZ,WAAWF,GAAG,2DAA2DE;YACxE,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACT;QACCe,aAAU;QACVK,MAAK;QACLjB,WAAWF,GAAG,mDAAmDE;QAChE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASU,2BAA2B,EACzChB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OAC6B;IAChC,IAAIN,SAAS;QACX,qBACE,KAACN;YACCiB,aAAU;YACVZ,WAAWF,GAAG,0CAA0CE;YACvD,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACT;QACCe,aAAU;QACVK,MAAK;QACLjB,WAAWF,GAAG,kCAAkCE;QAC/C,GAAGO,KAAK;kBAERD;;AAGP"}
@@ -0,0 +1,18 @@
1
+ import type React from 'react';
2
+ export interface DotGridProps {
3
+ dotSize?: number;
4
+ gap?: number;
5
+ baseColor?: string;
6
+ activeColor?: string;
7
+ proximity?: number;
8
+ speedTrigger?: number;
9
+ shockRadius?: number;
10
+ shockStrength?: number;
11
+ maxSpeed?: number;
12
+ resistance?: number;
13
+ returnDuration?: number;
14
+ className?: string;
15
+ style?: React.CSSProperties;
16
+ }
17
+ export declare function DotGrid({ dotSize, gap, baseColor, activeColor, proximity, speedTrigger, shockRadius, shockStrength, maxSpeed, resistance, returnDuration, className, style, }: DotGridProps): React.JSX.Element;
18
+ //# sourceMappingURL=dot-grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dot-grid.d.ts","sourceRoot":"","sources":["../../../src/components/dot-grid/dot-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkBD,wBAAgB,OAAO,CAAC,EACtB,OAAY,EACZ,GAAQ,EACR,SAAqB,EACrB,WAAuB,EACvB,SAAe,EACf,YAAkB,EAClB,WAAiB,EACjB,aAAiB,EACjB,QAAe,EACf,UAAgB,EAChB,cAAoB,EACpB,SAAc,EACd,KAAK,GACN,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyPlC"}
@@ -0,0 +1,295 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { gsap } from 'gsap';
3
+ import { InertiaPlugin } from 'gsap/InertiaPlugin';
4
+ import { useCallback, useEffect, useMemo, useRef } from 'react';
5
+ import { cn } from '../../utils/index.js';
6
+ gsap.registerPlugin(InertiaPlugin);
7
+ const HEX_COLOR_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
8
+ const throttle = (func, limit)=>{
9
+ let lastCall = 0;
10
+ return (...args)=>{
11
+ const now = performance.now();
12
+ if (now - lastCall >= limit) {
13
+ lastCall = now;
14
+ func(...args);
15
+ }
16
+ };
17
+ };
18
+ function hexToRgb(hex) {
19
+ const m = hex.match(HEX_COLOR_REGEX);
20
+ if (!m) return {
21
+ r: 0,
22
+ g: 0,
23
+ b: 0
24
+ };
25
+ return {
26
+ r: parseInt(m[1], 16),
27
+ g: parseInt(m[2], 16),
28
+ b: parseInt(m[3], 16)
29
+ };
30
+ }
31
+ export function DotGrid({ dotSize = 16, gap = 32, baseColor = '#5227FF', activeColor = '#5227FF', proximity = 150, speedTrigger = 100, shockRadius = 250, shockStrength = 5, maxSpeed = 5000, resistance = 750, returnDuration = 1.5, className = '', style }) {
32
+ const wrapperRef = useRef(null);
33
+ const canvasRef = useRef(null);
34
+ const dotsRef = useRef([]);
35
+ const pointerRef = useRef({
36
+ x: 0,
37
+ y: 0,
38
+ vx: 0,
39
+ vy: 0,
40
+ speed: 0,
41
+ lastTime: 0,
42
+ lastX: 0,
43
+ lastY: 0
44
+ });
45
+ const baseRgb = useMemo(()=>hexToRgb(baseColor), [
46
+ baseColor
47
+ ]);
48
+ const activeRgb = useMemo(()=>hexToRgb(activeColor), [
49
+ activeColor
50
+ ]);
51
+ const colorGradient = useMemo(()=>{
52
+ const gradient = new Array(256);
53
+ for(let i = 0; i < 256; i++){
54
+ const normalizedSqDist = i / 255;
55
+ const normalizedDist = Math.sqrt(normalizedSqDist);
56
+ const t = 1 - normalizedDist;
57
+ const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t);
58
+ const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t);
59
+ const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t);
60
+ gradient[i] = `rgb(${r},${g},${b})`;
61
+ }
62
+ return gradient;
63
+ }, [
64
+ baseRgb,
65
+ activeRgb
66
+ ]);
67
+ const circlePath = useMemo(()=>{
68
+ if (typeof window === 'undefined' || !window.Path2D) return null;
69
+ const p = new Path2D();
70
+ p.arc(0, 0, dotSize / 2, 0, Math.PI * 2);
71
+ return p;
72
+ }, [
73
+ dotSize
74
+ ]);
75
+ const buildGrid = useCallback(()=>{
76
+ const wrap = wrapperRef.current;
77
+ const canvas = canvasRef.current;
78
+ if (!wrap || !canvas) return;
79
+ const { width, height } = wrap.getBoundingClientRect();
80
+ const dpr = window.devicePixelRatio || 1;
81
+ canvas.width = width * dpr;
82
+ canvas.height = height * dpr;
83
+ canvas.style.width = `${width}px`;
84
+ canvas.style.height = `${height}px`;
85
+ const ctx = canvas.getContext('2d');
86
+ if (ctx) ctx.scale(dpr, dpr);
87
+ const cols = Math.floor((width + gap) / (dotSize + gap));
88
+ const rows = Math.floor((height + gap) / (dotSize + gap));
89
+ const cell = dotSize + gap;
90
+ const gridW = cell * cols - gap;
91
+ const gridH = cell * rows - gap;
92
+ const extraX = width - gridW;
93
+ const extraY = height - gridH;
94
+ const startX = extraX / 2 + dotSize / 2;
95
+ const startY = extraY / 2 + dotSize / 2;
96
+ const dots = [];
97
+ for(let y = 0; y < rows; y++){
98
+ for(let x = 0; x < cols; x++){
99
+ const cx = startX + x * cell;
100
+ const cy = startY + y * cell;
101
+ dots.push({
102
+ cx,
103
+ cy,
104
+ xOffset: 0,
105
+ yOffset: 0,
106
+ _inertiaApplied: false
107
+ });
108
+ }
109
+ }
110
+ dotsRef.current = dots;
111
+ }, [
112
+ dotSize,
113
+ gap
114
+ ]);
115
+ useEffect(()=>{
116
+ if (!circlePath) return;
117
+ let rafId;
118
+ const proxSq = proximity * proximity;
119
+ const draw = ()=>{
120
+ const canvas = canvasRef.current;
121
+ if (!canvas) return;
122
+ const ctx = canvas.getContext('2d');
123
+ if (!ctx) return;
124
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
125
+ const { x: px, y: py } = pointerRef.current;
126
+ for (const dot of dotsRef.current){
127
+ const ox = dot.cx + dot.xOffset;
128
+ const oy = dot.cy + dot.yOffset;
129
+ const dx = dot.cx - px;
130
+ const dy = dot.cy - py;
131
+ const dsq = dx * dx + dy * dy;
132
+ let fillColor = baseColor;
133
+ if (dsq <= proxSq) {
134
+ const normalizedSqDist = dsq / proxSq;
135
+ const index = Math.min(255, Math.max(0, Math.round(normalizedSqDist * 255)));
136
+ fillColor = colorGradient[index];
137
+ }
138
+ ctx.save();
139
+ ctx.translate(ox, oy);
140
+ ctx.fillStyle = fillColor;
141
+ ctx.fill(circlePath);
142
+ ctx.restore();
143
+ }
144
+ rafId = requestAnimationFrame(draw);
145
+ };
146
+ draw();
147
+ return ()=>cancelAnimationFrame(rafId);
148
+ }, [
149
+ proximity,
150
+ baseColor,
151
+ colorGradient,
152
+ circlePath
153
+ ]);
154
+ useEffect(()=>{
155
+ buildGrid();
156
+ let ro = null;
157
+ if ('ResizeObserver' in window) {
158
+ ro = new ResizeObserver(buildGrid);
159
+ wrapperRef.current && ro.observe(wrapperRef.current);
160
+ } else {
161
+ window.addEventListener('resize', buildGrid);
162
+ }
163
+ return ()=>{
164
+ if (ro) ro.disconnect();
165
+ else window.removeEventListener('resize', buildGrid);
166
+ };
167
+ }, [
168
+ buildGrid
169
+ ]);
170
+ useEffect(()=>{
171
+ const onMove = (e)=>{
172
+ const now = performance.now();
173
+ const pr = pointerRef.current;
174
+ const dt = pr.lastTime ? now - pr.lastTime : 16;
175
+ const dx = e.clientX - pr.lastX;
176
+ const dy = e.clientY - pr.lastY;
177
+ let vx = dx / dt * 1000;
178
+ let vy = dy / dt * 1000;
179
+ let speed = Math.hypot(vx, vy);
180
+ if (speed > maxSpeed) {
181
+ const scale = maxSpeed / speed;
182
+ vx *= scale;
183
+ vy *= scale;
184
+ speed = maxSpeed;
185
+ }
186
+ pr.lastTime = now;
187
+ pr.lastX = e.clientX;
188
+ pr.lastY = e.clientY;
189
+ pr.vx = vx;
190
+ pr.vy = vy;
191
+ pr.speed = speed;
192
+ const canvas = canvasRef.current;
193
+ if (!canvas) return;
194
+ const rect = canvas.getBoundingClientRect();
195
+ pr.x = e.clientX - rect.left;
196
+ pr.y = e.clientY - rect.top;
197
+ for (const dot of dotsRef.current){
198
+ const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);
199
+ if (speed > speedTrigger && dist < proximity && !dot._inertiaApplied) {
200
+ dot._inertiaApplied = true;
201
+ gsap.killTweensOf(dot);
202
+ const pushX = dot.cx - pr.x + vx * 0.005;
203
+ const pushY = dot.cy - pr.y + vy * 0.005;
204
+ gsap.to(dot, {
205
+ inertia: {
206
+ xOffset: pushX,
207
+ yOffset: pushY,
208
+ resistance
209
+ },
210
+ onComplete: ()=>{
211
+ gsap.to(dot, {
212
+ xOffset: 0,
213
+ yOffset: 0,
214
+ duration: returnDuration,
215
+ ease: 'elastic.out(1,0.75)'
216
+ });
217
+ dot._inertiaApplied = false;
218
+ }
219
+ });
220
+ }
221
+ }
222
+ };
223
+ const onClick = (e)=>{
224
+ const canvas = canvasRef.current;
225
+ if (!canvas) return;
226
+ const rect = canvas.getBoundingClientRect();
227
+ const cx = e.clientX - rect.left;
228
+ const cy = e.clientY - rect.top;
229
+ for (const dot of dotsRef.current){
230
+ const dist = Math.hypot(dot.cx - cx, dot.cy - cy);
231
+ if (dist < shockRadius && !dot._inertiaApplied) {
232
+ dot._inertiaApplied = true;
233
+ gsap.killTweensOf(dot);
234
+ const falloff = Math.max(0, 1 - dist / shockRadius);
235
+ const pushX = (dot.cx - cx) * shockStrength * falloff;
236
+ const pushY = (dot.cy - cy) * shockStrength * falloff;
237
+ gsap.to(dot, {
238
+ inertia: {
239
+ xOffset: pushX,
240
+ yOffset: pushY,
241
+ resistance
242
+ },
243
+ onComplete: ()=>{
244
+ gsap.to(dot, {
245
+ xOffset: 0,
246
+ yOffset: 0,
247
+ duration: returnDuration,
248
+ ease: 'elastic.out(1,0.75)'
249
+ });
250
+ dot._inertiaApplied = false;
251
+ }
252
+ });
253
+ }
254
+ }
255
+ };
256
+ const throttledMove = throttle(onMove, 50);
257
+ const wrapper = wrapperRef.current;
258
+ if (wrapper) {
259
+ wrapper.addEventListener('mousemove', throttledMove, {
260
+ passive: true
261
+ });
262
+ wrapper.addEventListener('click', onClick);
263
+ }
264
+ return ()=>{
265
+ if (wrapper) {
266
+ wrapper.removeEventListener('mousemove', throttledMove);
267
+ wrapper.removeEventListener('click', onClick);
268
+ }
269
+ };
270
+ }, [
271
+ maxSpeed,
272
+ speedTrigger,
273
+ proximity,
274
+ resistance,
275
+ returnDuration,
276
+ shockRadius,
277
+ shockStrength
278
+ ]);
279
+ return /*#__PURE__*/ _jsx("section", {
280
+ className: cn('p-4 flex items-center justify-center h-full w-full relative', className),
281
+ style: style,
282
+ role: "presentation",
283
+ children: /*#__PURE__*/ _jsx("div", {
284
+ ref: wrapperRef,
285
+ className: "w-full h-full relative",
286
+ children: /*#__PURE__*/ _jsx("canvas", {
287
+ ref: canvasRef,
288
+ className: "absolute inset-0 w-full h-full pointer-events-none",
289
+ "aria-hidden": "true"
290
+ })
291
+ })
292
+ });
293
+ }
294
+
295
+ //# sourceMappingURL=dot-grid.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/dot-grid/dot-grid.tsx"],"sourcesContent":["import {gsap} from 'gsap';\nimport {InertiaPlugin} from 'gsap/InertiaPlugin';\nimport type React from 'react';\nimport {useCallback, useEffect, useMemo, useRef} from 'react';\nimport {cn} from 'utils';\n\ngsap.registerPlugin(InertiaPlugin);\n\nconst HEX_COLOR_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nconst throttle = <T extends (...args: never[]) => void>(func: T, limit: number): T => {\n let lastCall = 0;\n return ((...args: Parameters<T>) => {\n const now = performance.now();\n if (now - lastCall >= limit) {\n lastCall = now;\n func(...args);\n }\n }) as T;\n};\n\ninterface Dot {\n cx: number;\n cy: number;\n xOffset: number;\n yOffset: number;\n _inertiaApplied: boolean;\n}\n\nexport interface DotGridProps {\n dotSize?: number;\n gap?: number;\n baseColor?: string;\n activeColor?: string;\n proximity?: number;\n speedTrigger?: number;\n shockRadius?: number;\n shockStrength?: number;\n maxSpeed?: number;\n resistance?: number;\n returnDuration?: number;\n className?: string;\n style?: React.CSSProperties;\n}\n\ntype RgbColor = {\n r: number;\n g: number;\n b: number;\n};\n\nfunction hexToRgb(hex: string): RgbColor {\n const m = hex.match(HEX_COLOR_REGEX);\n if (!m) return {r: 0, g: 0, b: 0};\n return {\n r: parseInt(m[1], 16),\n g: parseInt(m[2], 16),\n b: parseInt(m[3], 16),\n };\n}\n\nexport function DotGrid({\n dotSize = 16,\n gap = 32,\n baseColor = '#5227FF',\n activeColor = '#5227FF',\n proximity = 150,\n speedTrigger = 100,\n shockRadius = 250,\n shockStrength = 5,\n maxSpeed = 5000,\n resistance = 750,\n returnDuration = 1.5,\n className = '',\n style,\n}: DotGridProps): React.JSX.Element {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const dotsRef = useRef<Dot[]>([]);\n const pointerRef = useRef({\n x: 0,\n y: 0,\n vx: 0,\n vy: 0,\n speed: 0,\n lastTime: 0,\n lastX: 0,\n lastY: 0,\n });\n\n const baseRgb = useMemo(() => hexToRgb(baseColor), [baseColor]);\n const activeRgb = useMemo(() => hexToRgb(activeColor), [activeColor]);\n\n const colorGradient = useMemo(() => {\n const gradient: string[] = new Array(256);\n for (let i = 0; i < 256; i++) {\n const normalizedSqDist = i / 255;\n const normalizedDist = Math.sqrt(normalizedSqDist);\n const t = 1 - normalizedDist;\n const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t);\n const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t);\n const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t);\n gradient[i] = `rgb(${r},${g},${b})`;\n }\n return gradient;\n }, [baseRgb, activeRgb]);\n\n const circlePath = useMemo(() => {\n if (typeof window === 'undefined' || !window.Path2D) return null;\n\n const p = new Path2D();\n p.arc(0, 0, dotSize / 2, 0, Math.PI * 2);\n return p;\n }, [dotSize]);\n\n const buildGrid = useCallback(() => {\n const wrap = wrapperRef.current;\n const canvas = canvasRef.current;\n if (!wrap || !canvas) return;\n\n const {width, height} = wrap.getBoundingClientRect();\n const dpr = window.devicePixelRatio || 1;\n\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n const ctx = canvas.getContext('2d');\n if (ctx) ctx.scale(dpr, dpr);\n\n const cols = Math.floor((width + gap) / (dotSize + gap));\n const rows = Math.floor((height + gap) / (dotSize + gap));\n const cell = dotSize + gap;\n\n const gridW = cell * cols - gap;\n const gridH = cell * rows - gap;\n\n const extraX = width - gridW;\n const extraY = height - gridH;\n\n const startX = extraX / 2 + dotSize / 2;\n const startY = extraY / 2 + dotSize / 2;\n\n const dots: Dot[] = [];\n for (let y = 0; y < rows; y++) {\n for (let x = 0; x < cols; x++) {\n const cx = startX + x * cell;\n const cy = startY + y * cell;\n dots.push({cx, cy, xOffset: 0, yOffset: 0, _inertiaApplied: false});\n }\n }\n dotsRef.current = dots;\n }, [dotSize, gap]);\n\n useEffect(() => {\n if (!circlePath) return;\n\n let rafId: number;\n const proxSq = proximity * proximity;\n\n const draw = () => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const {x: px, y: py} = pointerRef.current;\n\n for (const dot of dotsRef.current) {\n const ox = dot.cx + dot.xOffset;\n const oy = dot.cy + dot.yOffset;\n const dx = dot.cx - px;\n const dy = dot.cy - py;\n const dsq = dx * dx + dy * dy;\n\n let fillColor = baseColor;\n if (dsq <= proxSq) {\n const normalizedSqDist = dsq / proxSq;\n const index = Math.min(255, Math.max(0, Math.round(normalizedSqDist * 255)));\n fillColor = colorGradient[index];\n }\n\n ctx.save();\n ctx.translate(ox, oy);\n ctx.fillStyle = fillColor;\n ctx.fill(circlePath);\n ctx.restore();\n }\n\n rafId = requestAnimationFrame(draw);\n };\n\n draw();\n return () => cancelAnimationFrame(rafId);\n }, [proximity, baseColor, colorGradient, circlePath]);\n\n useEffect(() => {\n buildGrid();\n let ro: ResizeObserver | null = null;\n if ('ResizeObserver' in window) {\n ro = new ResizeObserver(buildGrid);\n wrapperRef.current && ro.observe(wrapperRef.current);\n } else {\n (window as Window).addEventListener('resize', buildGrid);\n }\n return () => {\n if (ro) ro.disconnect();\n else window.removeEventListener('resize', buildGrid);\n };\n }, [buildGrid]);\n\n useEffect(() => {\n const onMove = (e: MouseEvent) => {\n const now = performance.now();\n const pr = pointerRef.current;\n const dt = pr.lastTime ? now - pr.lastTime : 16;\n const dx = e.clientX - pr.lastX;\n const dy = e.clientY - pr.lastY;\n let vx = (dx / dt) * 1000;\n let vy = (dy / dt) * 1000;\n let speed = Math.hypot(vx, vy);\n if (speed > maxSpeed) {\n const scale = maxSpeed / speed;\n vx *= scale;\n vy *= scale;\n speed = maxSpeed;\n }\n pr.lastTime = now;\n pr.lastX = e.clientX;\n pr.lastY = e.clientY;\n pr.vx = vx;\n pr.vy = vy;\n pr.speed = speed;\n\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n pr.x = e.clientX - rect.left;\n pr.y = e.clientY - rect.top;\n\n for (const dot of dotsRef.current) {\n const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);\n if (speed > speedTrigger && dist < proximity && !dot._inertiaApplied) {\n dot._inertiaApplied = true;\n gsap.killTweensOf(dot);\n const pushX = dot.cx - pr.x + vx * 0.005;\n const pushY = dot.cy - pr.y + vy * 0.005;\n gsap.to(dot, {\n inertia: {xOffset: pushX, yOffset: pushY, resistance},\n onComplete: () => {\n gsap.to(dot, {\n xOffset: 0,\n yOffset: 0,\n duration: returnDuration,\n ease: 'elastic.out(1,0.75)',\n });\n dot._inertiaApplied = false;\n },\n });\n }\n }\n };\n\n const onClick = (e: MouseEvent) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const cx = e.clientX - rect.left;\n const cy = e.clientY - rect.top;\n for (const dot of dotsRef.current) {\n const dist = Math.hypot(dot.cx - cx, dot.cy - cy);\n if (dist < shockRadius && !dot._inertiaApplied) {\n dot._inertiaApplied = true;\n gsap.killTweensOf(dot);\n const falloff = Math.max(0, 1 - dist / shockRadius);\n const pushX = (dot.cx - cx) * shockStrength * falloff;\n const pushY = (dot.cy - cy) * shockStrength * falloff;\n gsap.to(dot, {\n inertia: {xOffset: pushX, yOffset: pushY, resistance},\n onComplete: () => {\n gsap.to(dot, {\n xOffset: 0,\n yOffset: 0,\n duration: returnDuration,\n ease: 'elastic.out(1,0.75)',\n });\n dot._inertiaApplied = false;\n },\n });\n }\n }\n };\n\n const throttledMove = throttle(onMove, 50) as (e: MouseEvent) => void;\n const wrapper = wrapperRef.current;\n if (wrapper) {\n wrapper.addEventListener('mousemove', throttledMove, {passive: true});\n wrapper.addEventListener('click', onClick);\n }\n return () => {\n if (wrapper) {\n wrapper.removeEventListener('mousemove', throttledMove);\n wrapper.removeEventListener('click', onClick);\n }\n };\n }, [maxSpeed, speedTrigger, proximity, resistance, returnDuration, shockRadius, shockStrength]);\n\n return (\n <section\n className={cn('p-4 flex items-center justify-center h-full w-full relative', className)}\n style={style}\n role=\"presentation\"\n >\n <div ref={wrapperRef} className=\"w-full h-full relative\">\n {/** biome-ignore lint/a11y/noAriaHiddenOnFocusable: <canvas is not focusable> */}\n <canvas\n ref={canvasRef}\n className=\"absolute inset-0 w-full h-full pointer-events-none\"\n aria-hidden=\"true\"\n />\n </div>\n </section>\n );\n}\n"],"names":["gsap","InertiaPlugin","useCallback","useEffect","useMemo","useRef","cn","registerPlugin","HEX_COLOR_REGEX","throttle","func","limit","lastCall","args","now","performance","hexToRgb","hex","m","match","r","g","b","parseInt","DotGrid","dotSize","gap","baseColor","activeColor","proximity","speedTrigger","shockRadius","shockStrength","maxSpeed","resistance","returnDuration","className","style","wrapperRef","canvasRef","dotsRef","pointerRef","x","y","vx","vy","speed","lastTime","lastX","lastY","baseRgb","activeRgb","colorGradient","gradient","Array","i","normalizedSqDist","normalizedDist","Math","sqrt","t","round","circlePath","window","Path2D","p","arc","PI","buildGrid","wrap","current","canvas","width","height","getBoundingClientRect","dpr","devicePixelRatio","ctx","getContext","scale","cols","floor","rows","cell","gridW","gridH","extraX","extraY","startX","startY","dots","cx","cy","push","xOffset","yOffset","_inertiaApplied","rafId","proxSq","draw","clearRect","px","py","dot","ox","oy","dx","dy","dsq","fillColor","index","min","max","save","translate","fillStyle","fill","restore","requestAnimationFrame","cancelAnimationFrame","ro","ResizeObserver","observe","addEventListener","disconnect","removeEventListener","onMove","e","pr","dt","clientX","clientY","hypot","rect","left","top","dist","killTweensOf","pushX","pushY","to","inertia","onComplete","duration","ease","onClick","falloff","throttledMove","wrapper","passive","section","role","div","ref","aria-hidden"],"mappings":";AAAA,SAAQA,IAAI,QAAO,OAAO;AAC1B,SAAQC,aAAa,QAAO,qBAAqB;AAEjD,SAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAO,QAAQ;AAC9D,SAAQC,EAAE,QAAO,QAAQ;AAEzBN,KAAKO,cAAc,CAACN;AAEpB,MAAMO,kBAAkB;AAExB,MAAMC,WAAW,CAAuCC,MAASC;IAC/D,IAAIC,WAAW;IACf,OAAQ,CAAC,GAAGC;QACV,MAAMC,MAAMC,YAAYD,GAAG;QAC3B,IAAIA,MAAMF,YAAYD,OAAO;YAC3BC,WAAWE;YACXJ,QAAQG;QACV;IACF;AACF;AAgCA,SAASG,SAASC,GAAW;IAC3B,MAAMC,IAAID,IAAIE,KAAK,CAACX;IACpB,IAAI,CAACU,GAAG,OAAO;QAACE,GAAG;QAAGC,GAAG;QAAGC,GAAG;IAAC;IAChC,OAAO;QACLF,GAAGG,SAASL,CAAC,CAAC,EAAE,EAAE;QAClBG,GAAGE,SAASL,CAAC,CAAC,EAAE,EAAE;QAClBI,GAAGC,SAASL,CAAC,CAAC,EAAE,EAAE;IACpB;AACF;AAEA,OAAO,SAASM,QAAQ,EACtBC,UAAU,EAAE,EACZC,MAAM,EAAE,EACRC,YAAY,SAAS,EACrBC,cAAc,SAAS,EACvBC,YAAY,GAAG,EACfC,eAAe,GAAG,EAClBC,cAAc,GAAG,EACjBC,gBAAgB,CAAC,EACjBC,WAAW,IAAI,EACfC,aAAa,GAAG,EAChBC,iBAAiB,GAAG,EACpBC,YAAY,EAAE,EACdC,KAAK,EACQ;IACb,MAAMC,aAAajC,OAAuB;IAC1C,MAAMkC,YAAYlC,OAA0B;IAC5C,MAAMmC,UAAUnC,OAAc,EAAE;IAChC,MAAMoC,aAAapC,OAAO;QACxBqC,GAAG;QACHC,GAAG;QACHC,IAAI;QACJC,IAAI;QACJC,OAAO;QACPC,UAAU;QACVC,OAAO;QACPC,OAAO;IACT;IAEA,MAAMC,UAAU9C,QAAQ,IAAMY,SAASW,YAAY;QAACA;KAAU;IAC9D,MAAMwB,YAAY/C,QAAQ,IAAMY,SAASY,cAAc;QAACA;KAAY;IAEpE,MAAMwB,gBAAgBhD,QAAQ;QAC5B,MAAMiD,WAAqB,IAAIC,MAAM;QACrC,IAAK,IAAIC,IAAI,GAAGA,IAAI,KAAKA,IAAK;YAC5B,MAAMC,mBAAmBD,IAAI;YAC7B,MAAME,iBAAiBC,KAAKC,IAAI,CAACH;YACjC,MAAMI,IAAI,IAAIH;YACd,MAAMrC,IAAIsC,KAAKG,KAAK,CAACX,QAAQ9B,CAAC,GAAG,AAAC+B,CAAAA,UAAU/B,CAAC,GAAG8B,QAAQ9B,CAAC,AAADA,IAAKwC;YAC7D,MAAMvC,IAAIqC,KAAKG,KAAK,CAACX,QAAQ7B,CAAC,GAAG,AAAC8B,CAAAA,UAAU9B,CAAC,GAAG6B,QAAQ7B,CAAC,AAADA,IAAKuC;YAC7D,MAAMtC,IAAIoC,KAAKG,KAAK,CAACX,QAAQ5B,CAAC,GAAG,AAAC6B,CAAAA,UAAU7B,CAAC,GAAG4B,QAAQ5B,CAAC,AAADA,IAAKsC;YAC7DP,QAAQ,CAACE,EAAE,GAAG,CAAC,IAAI,EAAEnC,EAAE,CAAC,EAAEC,EAAE,CAAC,EAAEC,EAAE,CAAC,CAAC;QACrC;QACA,OAAO+B;IACT,GAAG;QAACH;QAASC;KAAU;IAEvB,MAAMW,aAAa1D,QAAQ;QACzB,IAAI,OAAO2D,WAAW,eAAe,CAACA,OAAOC,MAAM,EAAE,OAAO;QAE5D,MAAMC,IAAI,IAAID;QACdC,EAAEC,GAAG,CAAC,GAAG,GAAGzC,UAAU,GAAG,GAAGiC,KAAKS,EAAE,GAAG;QACtC,OAAOF;IACT,GAAG;QAACxC;KAAQ;IAEZ,MAAM2C,YAAYlE,YAAY;QAC5B,MAAMmE,OAAO/B,WAAWgC,OAAO;QAC/B,MAAMC,SAAShC,UAAU+B,OAAO;QAChC,IAAI,CAACD,QAAQ,CAACE,QAAQ;QAEtB,MAAM,EAACC,KAAK,EAAEC,MAAM,EAAC,GAAGJ,KAAKK,qBAAqB;QAClD,MAAMC,MAAMZ,OAAOa,gBAAgB,IAAI;QAEvCL,OAAOC,KAAK,GAAGA,QAAQG;QACvBJ,OAAOE,MAAM,GAAGA,SAASE;QACzBJ,OAAOlC,KAAK,CAACmC,KAAK,GAAG,GAAGA,MAAM,EAAE,CAAC;QACjCD,OAAOlC,KAAK,CAACoC,MAAM,GAAG,GAAGA,OAAO,EAAE,CAAC;QACnC,MAAMI,MAAMN,OAAOO,UAAU,CAAC;QAC9B,IAAID,KAAKA,IAAIE,KAAK,CAACJ,KAAKA;QAExB,MAAMK,OAAOtB,KAAKuB,KAAK,CAAC,AAACT,CAAAA,QAAQ9C,GAAE,IAAMD,CAAAA,UAAUC,GAAE;QACrD,MAAMwD,OAAOxB,KAAKuB,KAAK,CAAC,AAACR,CAAAA,SAAS/C,GAAE,IAAMD,CAAAA,UAAUC,GAAE;QACtD,MAAMyD,OAAO1D,UAAUC;QAEvB,MAAM0D,QAAQD,OAAOH,OAAOtD;QAC5B,MAAM2D,QAAQF,OAAOD,OAAOxD;QAE5B,MAAM4D,SAASd,QAAQY;QACvB,MAAMG,SAASd,SAASY;QAExB,MAAMG,SAASF,SAAS,IAAI7D,UAAU;QACtC,MAAMgE,SAASF,SAAS,IAAI9D,UAAU;QAEtC,MAAMiE,OAAc,EAAE;QACtB,IAAK,IAAI/C,IAAI,GAAGA,IAAIuC,MAAMvC,IAAK;YAC7B,IAAK,IAAID,IAAI,GAAGA,IAAIsC,MAAMtC,IAAK;gBAC7B,MAAMiD,KAAKH,SAAS9C,IAAIyC;gBACxB,MAAMS,KAAKH,SAAS9C,IAAIwC;gBACxBO,KAAKG,IAAI,CAAC;oBAACF;oBAAIC;oBAAIE,SAAS;oBAAGC,SAAS;oBAAGC,iBAAiB;gBAAK;YACnE;QACF;QACAxD,QAAQ8B,OAAO,GAAGoB;IACpB,GAAG;QAACjE;QAASC;KAAI;IAEjBvB,UAAU;QACR,IAAI,CAAC2D,YAAY;QAEjB,IAAImC;QACJ,MAAMC,SAASrE,YAAYA;QAE3B,MAAMsE,OAAO;YACX,MAAM5B,SAAShC,UAAU+B,OAAO;YAChC,IAAI,CAACC,QAAQ;YACb,MAAMM,MAAMN,OAAOO,UAAU,CAAC;YAC9B,IAAI,CAACD,KAAK;YACVA,IAAIuB,SAAS,CAAC,GAAG,GAAG7B,OAAOC,KAAK,EAAED,OAAOE,MAAM;YAE/C,MAAM,EAAC/B,GAAG2D,EAAE,EAAE1D,GAAG2D,EAAE,EAAC,GAAG7D,WAAW6B,OAAO;YAEzC,KAAK,MAAMiC,OAAO/D,QAAQ8B,OAAO,CAAE;gBACjC,MAAMkC,KAAKD,IAAIZ,EAAE,GAAGY,IAAIT,OAAO;gBAC/B,MAAMW,KAAKF,IAAIX,EAAE,GAAGW,IAAIR,OAAO;gBAC/B,MAAMW,KAAKH,IAAIZ,EAAE,GAAGU;gBACpB,MAAMM,KAAKJ,IAAIX,EAAE,GAAGU;gBACpB,MAAMM,MAAMF,KAAKA,KAAKC,KAAKA;gBAE3B,IAAIE,YAAYlF;gBAChB,IAAIiF,OAAOV,QAAQ;oBACjB,MAAM1C,mBAAmBoD,MAAMV;oBAC/B,MAAMY,QAAQpD,KAAKqD,GAAG,CAAC,KAAKrD,KAAKsD,GAAG,CAAC,GAAGtD,KAAKG,KAAK,CAACL,mBAAmB;oBACtEqD,YAAYzD,aAAa,CAAC0D,MAAM;gBAClC;gBAEAjC,IAAIoC,IAAI;gBACRpC,IAAIqC,SAAS,CAACV,IAAIC;gBAClB5B,IAAIsC,SAAS,GAAGN;gBAChBhC,IAAIuC,IAAI,CAACtD;gBACTe,IAAIwC,OAAO;YACb;YAEApB,QAAQqB,sBAAsBnB;QAChC;QAEAA;QACA,OAAO,IAAMoB,qBAAqBtB;IACpC,GAAG;QAACpE;QAAWF;QAAWyB;QAAeU;KAAW;IAEpD3D,UAAU;QACRiE;QACA,IAAIoD,KAA4B;QAChC,IAAI,oBAAoBzD,QAAQ;YAC9ByD,KAAK,IAAIC,eAAerD;YACxB9B,WAAWgC,OAAO,IAAIkD,GAAGE,OAAO,CAACpF,WAAWgC,OAAO;QACrD,OAAO;YACJP,OAAkB4D,gBAAgB,CAAC,UAAUvD;QAChD;QACA,OAAO;YACL,IAAIoD,IAAIA,GAAGI,UAAU;iBAChB7D,OAAO8D,mBAAmB,CAAC,UAAUzD;QAC5C;IACF,GAAG;QAACA;KAAU;IAEdjE,UAAU;QACR,MAAM2H,SAAS,CAACC;YACd,MAAMjH,MAAMC,YAAYD,GAAG;YAC3B,MAAMkH,KAAKvF,WAAW6B,OAAO;YAC7B,MAAM2D,KAAKD,GAAGjF,QAAQ,GAAGjC,MAAMkH,GAAGjF,QAAQ,GAAG;YAC7C,MAAM2D,KAAKqB,EAAEG,OAAO,GAAGF,GAAGhF,KAAK;YAC/B,MAAM2D,KAAKoB,EAAEI,OAAO,GAAGH,GAAG/E,KAAK;YAC/B,IAAIL,KAAK,AAAC8D,KAAKuB,KAAM;YACrB,IAAIpF,KAAK,AAAC8D,KAAKsB,KAAM;YACrB,IAAInF,QAAQY,KAAK0E,KAAK,CAACxF,IAAIC;YAC3B,IAAIC,QAAQb,UAAU;gBACpB,MAAM8C,QAAQ9C,WAAWa;gBACzBF,MAAMmC;gBACNlC,MAAMkC;gBACNjC,QAAQb;YACV;YACA+F,GAAGjF,QAAQ,GAAGjC;YACdkH,GAAGhF,KAAK,GAAG+E,EAAEG,OAAO;YACpBF,GAAG/E,KAAK,GAAG8E,EAAEI,OAAO;YACpBH,GAAGpF,EAAE,GAAGA;YACRoF,GAAGnF,EAAE,GAAGA;YACRmF,GAAGlF,KAAK,GAAGA;YAEX,MAAMyB,SAAShC,UAAU+B,OAAO;YAChC,IAAI,CAACC,QAAQ;YACb,MAAM8D,OAAO9D,OAAOG,qBAAqB;YACzCsD,GAAGtF,CAAC,GAAGqF,EAAEG,OAAO,GAAGG,KAAKC,IAAI;YAC5BN,GAAGrF,CAAC,GAAGoF,EAAEI,OAAO,GAAGE,KAAKE,GAAG;YAE3B,KAAK,MAAMhC,OAAO/D,QAAQ8B,OAAO,CAAE;gBACjC,MAAMkE,OAAO9E,KAAK0E,KAAK,CAAC7B,IAAIZ,EAAE,GAAGqC,GAAGtF,CAAC,EAAE6D,IAAIX,EAAE,GAAGoC,GAAGrF,CAAC;gBACpD,IAAIG,QAAQhB,gBAAgB0G,OAAO3G,aAAa,CAAC0E,IAAIP,eAAe,EAAE;oBACpEO,IAAIP,eAAe,GAAG;oBACtBhG,KAAKyI,YAAY,CAAClC;oBAClB,MAAMmC,QAAQnC,IAAIZ,EAAE,GAAGqC,GAAGtF,CAAC,GAAGE,KAAK;oBACnC,MAAM+F,QAAQpC,IAAIX,EAAE,GAAGoC,GAAGrF,CAAC,GAAGE,KAAK;oBACnC7C,KAAK4I,EAAE,CAACrC,KAAK;wBACXsC,SAAS;4BAAC/C,SAAS4C;4BAAO3C,SAAS4C;4BAAOzG;wBAAU;wBACpD4G,YAAY;4BACV9I,KAAK4I,EAAE,CAACrC,KAAK;gCACXT,SAAS;gCACTC,SAAS;gCACTgD,UAAU5G;gCACV6G,MAAM;4BACR;4BACAzC,IAAIP,eAAe,GAAG;wBACxB;oBACF;gBACF;YACF;QACF;QAEA,MAAMiD,UAAU,CAAClB;YACf,MAAMxD,SAAShC,UAAU+B,OAAO;YAChC,IAAI,CAACC,QAAQ;YACb,MAAM8D,OAAO9D,OAAOG,qBAAqB;YACzC,MAAMiB,KAAKoC,EAAEG,OAAO,GAAGG,KAAKC,IAAI;YAChC,MAAM1C,KAAKmC,EAAEI,OAAO,GAAGE,KAAKE,GAAG;YAC/B,KAAK,MAAMhC,OAAO/D,QAAQ8B,OAAO,CAAE;gBACjC,MAAMkE,OAAO9E,KAAK0E,KAAK,CAAC7B,IAAIZ,EAAE,GAAGA,IAAIY,IAAIX,EAAE,GAAGA;gBAC9C,IAAI4C,OAAOzG,eAAe,CAACwE,IAAIP,eAAe,EAAE;oBAC9CO,IAAIP,eAAe,GAAG;oBACtBhG,KAAKyI,YAAY,CAAClC;oBAClB,MAAM2C,UAAUxF,KAAKsD,GAAG,CAAC,GAAG,IAAIwB,OAAOzG;oBACvC,MAAM2G,QAAQ,AAACnC,CAAAA,IAAIZ,EAAE,GAAGA,EAAC,IAAK3D,gBAAgBkH;oBAC9C,MAAMP,QAAQ,AAACpC,CAAAA,IAAIX,EAAE,GAAGA,EAAC,IAAK5D,gBAAgBkH;oBAC9ClJ,KAAK4I,EAAE,CAACrC,KAAK;wBACXsC,SAAS;4BAAC/C,SAAS4C;4BAAO3C,SAAS4C;4BAAOzG;wBAAU;wBACpD4G,YAAY;4BACV9I,KAAK4I,EAAE,CAACrC,KAAK;gCACXT,SAAS;gCACTC,SAAS;gCACTgD,UAAU5G;gCACV6G,MAAM;4BACR;4BACAzC,IAAIP,eAAe,GAAG;wBACxB;oBACF;gBACF;YACF;QACF;QAEA,MAAMmD,gBAAgB1I,SAASqH,QAAQ;QACvC,MAAMsB,UAAU9G,WAAWgC,OAAO;QAClC,IAAI8E,SAAS;YACXA,QAAQzB,gBAAgB,CAAC,aAAawB,eAAe;gBAACE,SAAS;YAAI;YACnED,QAAQzB,gBAAgB,CAAC,SAASsB;QACpC;QACA,OAAO;YACL,IAAIG,SAAS;gBACXA,QAAQvB,mBAAmB,CAAC,aAAasB;gBACzCC,QAAQvB,mBAAmB,CAAC,SAASoB;YACvC;QACF;IACF,GAAG;QAAChH;QAAUH;QAAcD;QAAWK;QAAYC;QAAgBJ;QAAaC;KAAc;IAE9F,qBACE,KAACsH;QACClH,WAAW9B,GAAG,+DAA+D8B;QAC7EC,OAAOA;QACPkH,MAAK;kBAEL,cAAA,KAACC;YAAIC,KAAKnH;YAAYF,WAAU;sBAE9B,cAAA,KAACmC;gBACCkF,KAAKlH;gBACLH,WAAU;gBACVsH,eAAY;;;;AAKtB"}
@@ -0,0 +1,2 @@
1
+ export * from './dot-grid';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dot-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}