diff --git a/.github/workflows/component-docs-deploy-alpha-pages.yml b/.github/workflows/component-docs-deploy-alpha-pages.yml index d009c5d5e..7884e86ba 100644 --- a/.github/workflows/component-docs-deploy-alpha-pages.yml +++ b/.github/workflows/component-docs-deploy-alpha-pages.yml @@ -25,6 +25,9 @@ jobs: - name: Install Dependencies run: yarn install --immutable + - name: Build Packages + run: yarn build-only-package + - name: Build `Seed Component Docs` working-directory: ./component-docs run: | diff --git a/.github/workflows/component-docs-deploy-production-pages.yml b/.github/workflows/component-docs-deploy-production-pages.yml index 044cb464d..ad98b4e67 100644 --- a/.github/workflows/component-docs-deploy-production-pages.yml +++ b/.github/workflows/component-docs-deploy-production-pages.yml @@ -23,6 +23,9 @@ jobs: - name: Install Dependencies run: yarn install --immutable + - name: Build Packages + run: yarn build-only-package + - name: Build `Seed Component Docs` working-directory: ./component-docs run: | diff --git a/.yarn/cache/@antfu-ni-npm-0.22.0-75ba1472a6-2e3434a606.zip b/.yarn/cache/@antfu-ni-npm-0.22.0-75ba1472a6-2e3434a606.zip deleted file mode 100644 index 09970465b..000000000 Binary files a/.yarn/cache/@antfu-ni-npm-0.22.0-75ba1472a6-2e3434a606.zip and /dev/null differ diff --git a/.yarn/cache/@antfu-ni-npm-0.22.4-6640fbccbb-a10675c78e.zip b/.yarn/cache/@antfu-ni-npm-0.22.4-6640fbccbb-a10675c78e.zip new file mode 100644 index 000000000..75b38e345 Binary files /dev/null and b/.yarn/cache/@antfu-ni-npm-0.22.4-6640fbccbb-a10675c78e.zip differ diff --git a/.yarn/cache/@babel-compat-data-npm-7.24.9-819e0f036d-3590be0f70.zip b/.yarn/cache/@babel-compat-data-npm-7.25.2-119057710e-b61bc9da7c.zip similarity index 57% rename from .yarn/cache/@babel-compat-data-npm-7.24.9-819e0f036d-3590be0f70.zip rename to .yarn/cache/@babel-compat-data-npm-7.25.2-119057710e-b61bc9da7c.zip index 8b3fd75fa..4bef9a733 100644 Binary files a/.yarn/cache/@babel-compat-data-npm-7.24.9-819e0f036d-3590be0f70.zip and b/.yarn/cache/@babel-compat-data-npm-7.25.2-119057710e-b61bc9da7c.zip differ diff --git a/.yarn/cache/@babel-core-npm-7.24.9-9d33b31f15-eae273bee1.zip b/.yarn/cache/@babel-core-npm-7.24.9-9d33b31f15-eae273bee1.zip deleted file mode 100644 index af33a33cb..000000000 Binary files a/.yarn/cache/@babel-core-npm-7.24.9-9d33b31f15-eae273bee1.zip and /dev/null differ diff --git a/.yarn/cache/@babel-core-npm-7.25.2-341930f809-9a1ef604a7.zip b/.yarn/cache/@babel-core-npm-7.25.2-341930f809-9a1ef604a7.zip new file mode 100644 index 000000000..57980cf23 Binary files /dev/null and b/.yarn/cache/@babel-core-npm-7.25.2-341930f809-9a1ef604a7.zip differ diff --git a/.yarn/cache/@babel-generator-npm-7.24.10-a46757c8f5-eb13806e9e.zip b/.yarn/cache/@babel-generator-npm-7.24.10-a46757c8f5-eb13806e9e.zip deleted file mode 100644 index f365296ad..000000000 Binary files a/.yarn/cache/@babel-generator-npm-7.24.10-a46757c8f5-eb13806e9e.zip and /dev/null differ diff --git a/.yarn/cache/@babel-generator-npm-7.25.0-4bba208756-bf25649dde.zip b/.yarn/cache/@babel-generator-npm-7.25.0-4bba208756-bf25649dde.zip new file mode 100644 index 000000000..d1a7e948c Binary files /dev/null and b/.yarn/cache/@babel-generator-npm-7.25.0-4bba208756-bf25649dde.zip differ diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.24.8-0c08fe5b00-40c9e87212.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.24.8-0c08fe5b00-40c9e87212.zip deleted file mode 100644 index abe42b38a..000000000 Binary files a/.yarn/cache/@babel-helper-compilation-targets-npm-7.24.8-0c08fe5b00-40c9e87212.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.2-27e0232144-aed33c5496.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.2-27e0232144-aed33c5496.zip new file mode 100644 index 000000000..5f511fa26 Binary files /dev/null and b/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.2-27e0232144-aed33c5496.zip differ diff --git a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.8-e1343abde8-b4707e2c4a.zip b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.8-e1343abde8-b4707e2c4a.zip deleted file mode 100644 index 22d96b7ee..000000000 Binary files a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.8-e1343abde8-b4707e2c4a.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.25.0-8c1a9bf7ca-e986c1187e.zip b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.25.0-8c1a9bf7ca-e986c1187e.zip new file mode 100644 index 000000000..9d98d86c2 Binary files /dev/null and b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.25.0-8c1a9bf7ca-e986c1187e.zip differ diff --git a/.yarn/cache/@babel-helper-environment-visitor-npm-7.24.7-9a965bf523-079d86e657.zip b/.yarn/cache/@babel-helper-environment-visitor-npm-7.24.7-9a965bf523-079d86e657.zip deleted file mode 100644 index 8fe4b856a..000000000 Binary files a/.yarn/cache/@babel-helper-environment-visitor-npm-7.24.7-9a965bf523-079d86e657.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-function-name-npm-7.24.7-4f88fa6768-142ee08922.zip b/.yarn/cache/@babel-helper-function-name-npm-7.24.7-4f88fa6768-142ee08922.zip deleted file mode 100644 index 0616e4a0b..000000000 Binary files a/.yarn/cache/@babel-helper-function-name-npm-7.24.7-4f88fa6768-142ee08922.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-hoist-variables-npm-7.24.7-3d1fb54723-6cfdcf2289.zip b/.yarn/cache/@babel-helper-hoist-variables-npm-7.24.7-3d1fb54723-6cfdcf2289.zip deleted file mode 100644 index b2afa34ad..000000000 Binary files a/.yarn/cache/@babel-helper-hoist-variables-npm-7.24.7-3d1fb54723-6cfdcf2289.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.24.9-d41058579e-ffcf11b678.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.24.9-d41058579e-ffcf11b678.zip deleted file mode 100644 index 978d01e48..000000000 Binary files a/.yarn/cache/@babel-helper-module-transforms-npm-7.24.9-d41058579e-ffcf11b678.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.25.2-2c8d511580-282d4e3308.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.25.2-2c8d511580-282d4e3308.zip new file mode 100644 index 000000000..90bcbffe8 Binary files /dev/null and b/.yarn/cache/@babel-helper-module-transforms-npm-7.25.2-2c8d511580-282d4e3308.zip differ diff --git a/.yarn/cache/@babel-helper-replace-supers-npm-7.24.7-35d1343b26-2bf0d11335.zip b/.yarn/cache/@babel-helper-replace-supers-npm-7.24.7-35d1343b26-2bf0d11335.zip deleted file mode 100644 index 1d3bb0db9..000000000 Binary files a/.yarn/cache/@babel-helper-replace-supers-npm-7.24.7-35d1343b26-2bf0d11335.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-replace-supers-npm-7.25.0-7aaa2ff595-f669fc2487.zip b/.yarn/cache/@babel-helper-replace-supers-npm-7.25.0-7aaa2ff595-f669fc2487.zip new file mode 100644 index 000000000..c0b9e50ae Binary files /dev/null and b/.yarn/cache/@babel-helper-replace-supers-npm-7.25.0-7aaa2ff595-f669fc2487.zip differ diff --git a/.yarn/cache/@babel-helper-split-export-declaration-npm-7.24.7-77b1fc1a1c-e3ddc91273.zip b/.yarn/cache/@babel-helper-split-export-declaration-npm-7.24.7-77b1fc1a1c-e3ddc91273.zip deleted file mode 100644 index 6da6aa20b..000000000 Binary files a/.yarn/cache/@babel-helper-split-export-declaration-npm-7.24.7-77b1fc1a1c-e3ddc91273.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helpers-npm-7.24.8-37e3274e05-2d7301b1b9.zip b/.yarn/cache/@babel-helpers-npm-7.25.0-f552d9aaf3-739e3704ff.zip similarity index 70% rename from .yarn/cache/@babel-helpers-npm-7.24.8-37e3274e05-2d7301b1b9.zip rename to .yarn/cache/@babel-helpers-npm-7.25.0-f552d9aaf3-739e3704ff.zip index b8d99ee6e..52135bdd4 100644 Binary files a/.yarn/cache/@babel-helpers-npm-7.24.8-37e3274e05-2d7301b1b9.zip and b/.yarn/cache/@babel-helpers-npm-7.25.0-f552d9aaf3-739e3704ff.zip differ diff --git a/.yarn/cache/@babel-parser-npm-7.24.8-74fa45ab71-76f866333b.zip b/.yarn/cache/@babel-parser-npm-7.24.8-74fa45ab71-76f866333b.zip deleted file mode 100644 index 28a375b92..000000000 Binary files a/.yarn/cache/@babel-parser-npm-7.24.8-74fa45ab71-76f866333b.zip and /dev/null differ diff --git a/.yarn/cache/@babel-parser-npm-7.25.3-e33bb4a0e6-b55aba6421.zip b/.yarn/cache/@babel-parser-npm-7.25.3-e33bb4a0e6-b55aba6421.zip new file mode 100644 index 000000000..5ec509e09 Binary files /dev/null and b/.yarn/cache/@babel-parser-npm-7.25.3-e33bb4a0e6-b55aba6421.zip differ diff --git a/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.25.4-4a4a251dc2-9b89b8930c.zip b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.25.4-4a4a251dc2-9b89b8930c.zip new file mode 100644 index 000000000..e68552b4c Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.25.4-4a4a251dc2-9b89b8930c.zip differ diff --git a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.24.8-6f25313488-4dcdc0ca2b.zip b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.24.8-6f25313488-4dcdc0ca2b.zip deleted file mode 100644 index 0916a16b2..000000000 Binary files a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.24.8-6f25313488-4dcdc0ca2b.zip and /dev/null differ diff --git a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.25.2-99d4e753c3-b0267128d9.zip b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.25.2-99d4e753c3-b0267128d9.zip new file mode 100644 index 000000000..d0572b155 Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.25.2-99d4e753c3-b0267128d9.zip differ diff --git a/.yarn/cache/@babel-template-npm-7.24.7-d08a527e2b-ea90792fae.zip b/.yarn/cache/@babel-template-npm-7.25.0-2c6ddcb43a-3f2db56871.zip similarity index 55% rename from .yarn/cache/@babel-template-npm-7.24.7-d08a527e2b-ea90792fae.zip rename to .yarn/cache/@babel-template-npm-7.25.0-2c6ddcb43a-3f2db56871.zip index 2fbe6e6c2..5f9c6abd3 100644 Binary files a/.yarn/cache/@babel-template-npm-7.24.7-d08a527e2b-ea90792fae.zip and b/.yarn/cache/@babel-template-npm-7.25.0-2c6ddcb43a-3f2db56871.zip differ diff --git a/.yarn/cache/@babel-traverse-npm-7.24.8-66c78d088f-ee7955476c.zip b/.yarn/cache/@babel-traverse-npm-7.24.8-66c78d088f-ee7955476c.zip deleted file mode 100644 index 8da8f502f..000000000 Binary files a/.yarn/cache/@babel-traverse-npm-7.24.8-66c78d088f-ee7955476c.zip and /dev/null differ diff --git a/.yarn/cache/@babel-traverse-npm-7.25.3-69c3455e97-5661308b13.zip b/.yarn/cache/@babel-traverse-npm-7.25.3-69c3455e97-5661308b13.zip new file mode 100644 index 000000000..78b9f6954 Binary files /dev/null and b/.yarn/cache/@babel-traverse-npm-7.25.3-69c3455e97-5661308b13.zip differ diff --git a/.yarn/cache/@babel-types-npm-7.24.9-5c021bc930-15cb05c45b.zip b/.yarn/cache/@babel-types-npm-7.25.2-7d3fc0ed1e-f73f66ba90.zip similarity index 66% rename from .yarn/cache/@babel-types-npm-7.24.9-5c021bc930-15cb05c45b.zip rename to .yarn/cache/@babel-types-npm-7.25.2-7d3fc0ed1e-f73f66ba90.zip index 207b6fb85..2ea5f08d9 100644 Binary files a/.yarn/cache/@babel-types-npm-7.24.9-5c021bc930-15cb05c45b.zip and b/.yarn/cache/@babel-types-npm-7.25.2-7d3fc0ed1e-f73f66ba90.zip differ diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.21.5-62349c1520-8.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.21.5-62349c1520-8.zip new file mode 100644 index 000000000..3fcd3efbc Binary files /dev/null and b/.yarn/cache/@esbuild-darwin-arm64-npm-0.21.5-62349c1520-8.zip differ diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.23.1-1d26281f3d-8.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.23.1-1d26281f3d-8.zip new file mode 100644 index 000000000..2bddb0e87 Binary files /dev/null and b/.yarn/cache/@esbuild-darwin-arm64-npm-0.23.1-1d26281f3d-8.zip differ diff --git a/.yarn/cache/@radix-ui-react-use-layout-effect-npm-1.1.0-710cee2d09-271ea0bf1c.zip b/.yarn/cache/@radix-ui-react-use-layout-effect-npm-1.1.0-710cee2d09-271ea0bf1c.zip new file mode 100644 index 000000000..e436f491b Binary files /dev/null and b/.yarn/cache/@radix-ui-react-use-layout-effect-npm-1.1.0-710cee2d09-271ea0bf1c.zip differ diff --git a/.yarn/cache/@radix-ui-react-use-size-npm-1.1.0-88eb70d5c8-01a11d4c07.zip b/.yarn/cache/@radix-ui-react-use-size-npm-1.1.0-88eb70d5c8-01a11d4c07.zip new file mode 100644 index 000000000..fa5a501ae Binary files /dev/null and b/.yarn/cache/@radix-ui-react-use-size-npm-1.1.0-88eb70d5c8-01a11d4c07.zip differ diff --git a/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.21.1-2f83f576ce-8.zip b/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.21.1-2f83f576ce-8.zip new file mode 100644 index 000000000..3188d1901 Binary files /dev/null and b/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.21.1-2f83f576ce-8.zip differ diff --git a/.yarn/cache/@stackflow-core-npm-1.0.13-a99989f271-f4706f58bd.zip b/.yarn/cache/@stackflow-core-npm-1.1.0-b5a2e37b04-5fb1908da5.zip similarity index 50% rename from .yarn/cache/@stackflow-core-npm-1.0.13-a99989f271-f4706f58bd.zip rename to .yarn/cache/@stackflow-core-npm-1.1.0-b5a2e37b04-5fb1908da5.zip index 3705de044..d87fd302e 100644 Binary files a/.yarn/cache/@stackflow-core-npm-1.0.13-a99989f271-f4706f58bd.zip and b/.yarn/cache/@stackflow-core-npm-1.1.0-b5a2e37b04-5fb1908da5.zip differ diff --git a/.yarn/cache/@stackflow-plugin-basic-ui-npm-1.8.4-c234a92980-98df6bf718.zip b/.yarn/cache/@stackflow-plugin-basic-ui-npm-1.8.4-c234a92980-98df6bf718.zip deleted file mode 100644 index 0f17e7b35..000000000 Binary files a/.yarn/cache/@stackflow-plugin-basic-ui-npm-1.8.4-c234a92980-98df6bf718.zip and /dev/null differ diff --git a/.yarn/cache/@stackflow-plugin-basic-ui-npm-1.9.1-c480642e0e-efaa31168c.zip b/.yarn/cache/@stackflow-plugin-basic-ui-npm-1.9.1-c480642e0e-efaa31168c.zip new file mode 100644 index 000000000..7283b2808 Binary files /dev/null and b/.yarn/cache/@stackflow-plugin-basic-ui-npm-1.9.1-c480642e0e-efaa31168c.zip differ diff --git a/.yarn/cache/@stackflow-plugin-history-sync-npm-1.6.0-6f9fbcb2ed-70fb8b93ca.zip b/.yarn/cache/@stackflow-plugin-history-sync-npm-1.6.0-6f9fbcb2ed-70fb8b93ca.zip deleted file mode 100644 index 58dbfc9f9..000000000 Binary files a/.yarn/cache/@stackflow-plugin-history-sync-npm-1.6.0-6f9fbcb2ed-70fb8b93ca.zip and /dev/null differ diff --git a/.yarn/cache/@stackflow-plugin-history-sync-npm-1.6.2-9747d52680-f288ba4e3d.zip b/.yarn/cache/@stackflow-plugin-history-sync-npm-1.6.2-9747d52680-f288ba4e3d.zip new file mode 100644 index 000000000..18d7cc9fe Binary files /dev/null and b/.yarn/cache/@stackflow-plugin-history-sync-npm-1.6.2-9747d52680-f288ba4e3d.zip differ diff --git a/.yarn/cache/@stackflow-plugin-renderer-basic-npm-1.1.11-bafa2010dc-38e5383e5f.zip b/.yarn/cache/@stackflow-plugin-renderer-basic-npm-1.1.12-02419ea1be-c15aeb0eb7.zip similarity index 77% rename from .yarn/cache/@stackflow-plugin-renderer-basic-npm-1.1.11-bafa2010dc-38e5383e5f.zip rename to .yarn/cache/@stackflow-plugin-renderer-basic-npm-1.1.12-02419ea1be-c15aeb0eb7.zip index c6b426237..e1835c15a 100644 Binary files a/.yarn/cache/@stackflow-plugin-renderer-basic-npm-1.1.11-bafa2010dc-38e5383e5f.zip and b/.yarn/cache/@stackflow-plugin-renderer-basic-npm-1.1.12-02419ea1be-c15aeb0eb7.zip differ diff --git a/.yarn/cache/@stackflow-react-npm-1.2.1-12ff24cb2e-37f365fb15.zip b/.yarn/cache/@stackflow-react-npm-1.2.1-12ff24cb2e-37f365fb15.zip deleted file mode 100644 index 7dd37052a..000000000 Binary files a/.yarn/cache/@stackflow-react-npm-1.2.1-12ff24cb2e-37f365fb15.zip and /dev/null differ diff --git a/.yarn/cache/@stackflow-react-npm-1.3.1-1b189770db-a6aff9781b.zip b/.yarn/cache/@stackflow-react-npm-1.3.1-1b189770db-a6aff9781b.zip new file mode 100644 index 000000000..0bb09f6c0 Binary files /dev/null and b/.yarn/cache/@stackflow-react-npm-1.3.1-1b189770db-a6aff9781b.zip differ diff --git a/.yarn/cache/@stackflow-react-ui-core-npm-1.1.1-c6edcf6965-ab178979ee.zip b/.yarn/cache/@stackflow-react-ui-core-npm-1.1.1-c6edcf6965-ab178979ee.zip new file mode 100644 index 000000000..c46a78980 Binary files /dev/null and b/.yarn/cache/@stackflow-react-ui-core-npm-1.1.1-c6edcf6965-ab178979ee.zip differ diff --git a/.yarn/cache/@tanstack-react-virtual-npm-3.8.4-48ab772f31-297bcc941d.zip b/.yarn/cache/@tanstack-react-virtual-npm-3.10.1-c09d28c896-8a894d12be.zip similarity index 72% rename from .yarn/cache/@tanstack-react-virtual-npm-3.8.4-48ab772f31-297bcc941d.zip rename to .yarn/cache/@tanstack-react-virtual-npm-3.10.1-c09d28c896-8a894d12be.zip index 7ba6a3aa7..029c93e98 100644 Binary files a/.yarn/cache/@tanstack-react-virtual-npm-3.8.4-48ab772f31-297bcc941d.zip and b/.yarn/cache/@tanstack-react-virtual-npm-3.10.1-c09d28c896-8a894d12be.zip differ diff --git a/.yarn/cache/@tanstack-virtual-core-npm-3.10.1-dff0580e96-02d5c71e04.zip b/.yarn/cache/@tanstack-virtual-core-npm-3.10.1-dff0580e96-02d5c71e04.zip new file mode 100644 index 000000000..56c13d8cd Binary files /dev/null and b/.yarn/cache/@tanstack-virtual-core-npm-3.10.1-dff0580e96-02d5c71e04.zip differ diff --git a/.yarn/cache/@tanstack-virtual-core-npm-3.8.4-70e5dd763e-6774e50582.zip b/.yarn/cache/@tanstack-virtual-core-npm-3.8.4-70e5dd763e-6774e50582.zip deleted file mode 100644 index 46069d834..000000000 Binary files a/.yarn/cache/@tanstack-virtual-core-npm-3.8.4-70e5dd763e-6774e50582.zip and /dev/null differ diff --git a/.yarn/cache/@types-node-npm-20.14.12-c6cc526f86-1dd493d9e2.zip b/.yarn/cache/@types-node-npm-20.16.1-ba5fb07db1-2b8f30f416.zip similarity index 79% rename from .yarn/cache/@types-node-npm-20.14.12-c6cc526f86-1dd493d9e2.zip rename to .yarn/cache/@types-node-npm-20.16.1-ba5fb07db1-2b8f30f416.zip index 2f71c1a99..2cc92d004 100644 Binary files a/.yarn/cache/@types-node-npm-20.14.12-c6cc526f86-1dd493d9e2.zip and b/.yarn/cache/@types-node-npm-20.16.1-ba5fb07db1-2b8f30f416.zip differ diff --git a/.yarn/cache/@types-react-npm-18.3.4-8046f42f77-555ccd1af8.zip b/.yarn/cache/@types-react-npm-18.3.4-8046f42f77-555ccd1af8.zip new file mode 100644 index 000000000..9353885c2 Binary files /dev/null and b/.yarn/cache/@types-react-npm-18.3.4-8046f42f77-555ccd1af8.zip differ diff --git a/.yarn/cache/@types-unist-npm-3.0.2-3bce72a913-3d04d0be69.zip b/.yarn/cache/@types-unist-npm-3.0.2-3bce72a913-3d04d0be69.zip deleted file mode 100644 index e76a2f160..000000000 Binary files a/.yarn/cache/@types-unist-npm-3.0.2-3bce72a913-3d04d0be69.zip and /dev/null differ diff --git a/.yarn/cache/@types-unist-npm-3.0.3-1c20461f2e-96e6453da9.zip b/.yarn/cache/@types-unist-npm-3.0.3-1c20461f2e-96e6453da9.zip new file mode 100644 index 000000000..5f5c08b6f Binary files /dev/null and b/.yarn/cache/@types-unist-npm-3.0.3-1c20461f2e-96e6453da9.zip differ diff --git a/.yarn/cache/@use-gesture-core-npm-10.3.1-b22a3f8132-6d1a00dcb3.zip b/.yarn/cache/@use-gesture-core-npm-10.3.1-b22a3f8132-6d1a00dcb3.zip new file mode 100644 index 000000000..437b53d36 Binary files /dev/null and b/.yarn/cache/@use-gesture-core-npm-10.3.1-b22a3f8132-6d1a00dcb3.zip differ diff --git a/.yarn/cache/@use-gesture-react-npm-10.3.1-f739d431fa-763ef5fe5e.zip b/.yarn/cache/@use-gesture-react-npm-10.3.1-f739d431fa-763ef5fe5e.zip new file mode 100644 index 000000000..62339cb3e Binary files /dev/null and b/.yarn/cache/@use-gesture-react-npm-10.3.1-f739d431fa-763ef5fe5e.zip differ diff --git a/.yarn/cache/@vanilla-extract-babel-plugin-debug-ids-npm-1.0.6-88adcf5cbc-55f173c0c6.zip b/.yarn/cache/@vanilla-extract-babel-plugin-debug-ids-npm-1.0.6-88adcf5cbc-55f173c0c6.zip new file mode 100644 index 000000000..731a8efdc Binary files /dev/null and b/.yarn/cache/@vanilla-extract-babel-plugin-debug-ids-npm-1.0.6-88adcf5cbc-55f173c0c6.zip differ diff --git a/.yarn/cache/@vanilla-extract-css-npm-1.15.3-14d9c0dcd2-9f54c51708.zip b/.yarn/cache/@vanilla-extract-css-npm-1.15.5-6066edb59b-0c260e55a1.zip similarity index 72% rename from .yarn/cache/@vanilla-extract-css-npm-1.15.3-14d9c0dcd2-9f54c51708.zip rename to .yarn/cache/@vanilla-extract-css-npm-1.15.5-6066edb59b-0c260e55a1.zip index 9c93b4289..3941643b7 100644 Binary files a/.yarn/cache/@vanilla-extract-css-npm-1.15.3-14d9c0dcd2-9f54c51708.zip and b/.yarn/cache/@vanilla-extract-css-npm-1.15.5-6066edb59b-0c260e55a1.zip differ diff --git a/.yarn/cache/@vanilla-extract-dynamic-npm-2.1.1-8707677ad4-03fd6bcd47.zip b/.yarn/cache/@vanilla-extract-dynamic-npm-2.1.2-16ce9f4c98-ec6ec9b02c.zip similarity index 72% rename from .yarn/cache/@vanilla-extract-dynamic-npm-2.1.1-8707677ad4-03fd6bcd47.zip rename to .yarn/cache/@vanilla-extract-dynamic-npm-2.1.2-16ce9f4c98-ec6ec9b02c.zip index 077ed5f65..9bacddae3 100644 Binary files a/.yarn/cache/@vanilla-extract-dynamic-npm-2.1.1-8707677ad4-03fd6bcd47.zip and b/.yarn/cache/@vanilla-extract-dynamic-npm-2.1.2-16ce9f4c98-ec6ec9b02c.zip differ diff --git a/.yarn/cache/@vanilla-extract-integration-npm-7.1.9-af4380f865-6f6b1eab9f.zip b/.yarn/cache/@vanilla-extract-integration-npm-7.1.9-af4380f865-6f6b1eab9f.zip new file mode 100644 index 000000000..35ff7cbda Binary files /dev/null and b/.yarn/cache/@vanilla-extract-integration-npm-7.1.9-af4380f865-6f6b1eab9f.zip differ diff --git a/.yarn/cache/@vanilla-extract-next-plugin-npm-2.4.5-2085cc0188-6800fb5842.zip b/.yarn/cache/@vanilla-extract-next-plugin-npm-2.4.5-2085cc0188-6800fb5842.zip new file mode 100644 index 000000000..5fa326339 Binary files /dev/null and b/.yarn/cache/@vanilla-extract-next-plugin-npm-2.4.5-2085cc0188-6800fb5842.zip differ diff --git a/.yarn/cache/@vanilla-extract-private-npm-1.0.6-6569b02004-2265b02af2.zip b/.yarn/cache/@vanilla-extract-private-npm-1.0.6-6569b02004-2265b02af2.zip new file mode 100644 index 000000000..357fef636 Binary files /dev/null and b/.yarn/cache/@vanilla-extract-private-npm-1.0.6-6569b02004-2265b02af2.zip differ diff --git a/.yarn/cache/@vanilla-extract-recipes-npm-0.5.3-520cb7a00b-2ddf10ce34.zip b/.yarn/cache/@vanilla-extract-recipes-npm-0.5.5-986bba519e-8d2b4f8163.zip similarity index 75% rename from .yarn/cache/@vanilla-extract-recipes-npm-0.5.3-520cb7a00b-2ddf10ce34.zip rename to .yarn/cache/@vanilla-extract-recipes-npm-0.5.5-986bba519e-8d2b4f8163.zip index f49e6773a..34059fbb9 100644 Binary files a/.yarn/cache/@vanilla-extract-recipes-npm-0.5.3-520cb7a00b-2ddf10ce34.zip and b/.yarn/cache/@vanilla-extract-recipes-npm-0.5.5-986bba519e-8d2b4f8163.zip differ diff --git a/.yarn/cache/@vanilla-extract-webpack-plugin-npm-2.3.13-0559e53145-939b864f25.zip b/.yarn/cache/@vanilla-extract-webpack-plugin-npm-2.3.13-0559e53145-939b864f25.zip new file mode 100644 index 000000000..9464c25d8 Binary files /dev/null and b/.yarn/cache/@vanilla-extract-webpack-plugin-npm-2.3.13-0559e53145-939b864f25.zip differ diff --git a/.yarn/cache/browserslist-npm-4.23.2-35c88a7025-8212af37f6.zip b/.yarn/cache/browserslist-npm-4.23.2-35c88a7025-8212af37f6.zip deleted file mode 100644 index 0623f03f8..000000000 Binary files a/.yarn/cache/browserslist-npm-4.23.2-35c88a7025-8212af37f6.zip and /dev/null differ diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001643-1477bdedce-e39991c13a.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001643-1477bdedce-e39991c13a.zip deleted file mode 100644 index c214d58f2..000000000 Binary files a/.yarn/cache/caniuse-lite-npm-1.0.30001643-1477bdedce-e39991c13a.zip and /dev/null differ diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001646-2501598beb-53d45b990d.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001646-2501598beb-53d45b990d.zip deleted file mode 100644 index d74b5930b..000000000 Binary files a/.yarn/cache/caniuse-lite-npm-1.0.30001646-2501598beb-53d45b990d.zip and /dev/null differ diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001649-f371b9b86d-7952512a24.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001649-f371b9b86d-7952512a24.zip deleted file mode 100644 index e1c2f7d93..000000000 Binary files a/.yarn/cache/caniuse-lite-npm-1.0.30001649-f371b9b86d-7952512a24.zip and /dev/null differ diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001651-976e4d30de-c31a5a0128.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001651-976e4d30de-c31a5a0128.zip new file mode 100644 index 000000000..dfd57918f Binary files /dev/null and b/.yarn/cache/caniuse-lite-npm-1.0.30001651-976e4d30de-c31a5a0128.zip differ diff --git a/.yarn/cache/code-block-writer-npm-13.0.1-3d50aa2da6-678b740d17.zip b/.yarn/cache/code-block-writer-npm-13.0.1-3d50aa2da6-678b740d17.zip deleted file mode 100644 index b8b798107..000000000 Binary files a/.yarn/cache/code-block-writer-npm-13.0.1-3d50aa2da6-678b740d17.zip and /dev/null differ diff --git a/.yarn/cache/code-block-writer-npm-13.0.2-15ef0f83df-8052ae6f27.zip b/.yarn/cache/code-block-writer-npm-13.0.2-15ef0f83df-8052ae6f27.zip new file mode 100644 index 000000000..b8e329953 Binary files /dev/null and b/.yarn/cache/code-block-writer-npm-13.0.2-15ef0f83df-8052ae6f27.zip differ diff --git a/.yarn/cache/cytoscape-npm-3.30.1-6bc93139f1-9083ce604c.zip b/.yarn/cache/cytoscape-npm-3.30.2-ffffb09f12-45ec8f256b.zip similarity index 89% rename from .yarn/cache/cytoscape-npm-3.30.1-6bc93139f1-9083ce604c.zip rename to .yarn/cache/cytoscape-npm-3.30.2-ffffb09f12-45ec8f256b.zip index 092ca9421..37c184ee1 100644 Binary files a/.yarn/cache/cytoscape-npm-3.30.1-6bc93139f1-9083ce604c.zip and b/.yarn/cache/cytoscape-npm-3.30.2-ffffb09f12-45ec8f256b.zip differ diff --git a/.yarn/cache/dayjs-npm-1.11.12-ce23245b6e-40a4f67c2d.zip b/.yarn/cache/dayjs-npm-1.11.13-d478bb9479-f388db88a6.zip similarity index 81% rename from .yarn/cache/dayjs-npm-1.11.12-ce23245b6e-40a4f67c2d.zip rename to .yarn/cache/dayjs-npm-1.11.13-d478bb9479-f388db88a6.zip index 5b83efb6b..2d50054c5 100644 Binary files a/.yarn/cache/dayjs-npm-1.11.12-ce23245b6e-40a4f67c2d.zip and b/.yarn/cache/dayjs-npm-1.11.13-d478bb9479-f388db88a6.zip differ diff --git a/.yarn/cache/electron-to-chromium-npm-1.5.0-c7e94a5fd1-82e362dd58.zip b/.yarn/cache/electron-to-chromium-npm-1.5.0-c7e94a5fd1-82e362dd58.zip deleted file mode 100644 index 7c9af8a00..000000000 Binary files a/.yarn/cache/electron-to-chromium-npm-1.5.0-c7e94a5fd1-82e362dd58.zip and /dev/null differ diff --git a/.yarn/cache/electron-to-chromium-npm-1.5.5-ce59e1f3c6-fcdd2797ec.zip b/.yarn/cache/electron-to-chromium-npm-1.5.12-6f26203e2c-9ce8d5be88.zip similarity index 64% rename from .yarn/cache/electron-to-chromium-npm-1.5.5-ce59e1f3c6-fcdd2797ec.zip rename to .yarn/cache/electron-to-chromium-npm-1.5.12-6f26203e2c-9ce8d5be88.zip index d0d964575..a8bc1b5bc 100644 Binary files a/.yarn/cache/electron-to-chromium-npm-1.5.5-ce59e1f3c6-fcdd2797ec.zip and b/.yarn/cache/electron-to-chromium-npm-1.5.12-6f26203e2c-9ce8d5be88.zip differ diff --git a/.yarn/cache/esbuild-npm-0.21.5-d85dfbc965-2911c7b50b.zip b/.yarn/cache/esbuild-npm-0.21.5-d85dfbc965-2911c7b50b.zip new file mode 100644 index 000000000..cf88c17c6 Binary files /dev/null and b/.yarn/cache/esbuild-npm-0.21.5-d85dfbc965-2911c7b50b.zip differ diff --git a/.yarn/cache/esbuild-npm-0.23.1-6e231886af-0413c3b925.zip b/.yarn/cache/esbuild-npm-0.23.1-6e231886af-0413c3b925.zip new file mode 100644 index 000000000..4bbea29b8 Binary files /dev/null and b/.yarn/cache/esbuild-npm-0.23.1-6e231886af-0413c3b925.zip differ diff --git a/.yarn/cache/eval-npm-0.1.8-0cd081d9ca-d005567f39.zip b/.yarn/cache/eval-npm-0.1.8-0cd081d9ca-d005567f39.zip new file mode 100644 index 000000000..c7bcc8df7 Binary files /dev/null and b/.yarn/cache/eval-npm-0.1.8-0cd081d9ca-d005567f39.zip differ diff --git a/.yarn/cache/execa-npm-9.3.0-238a82e660-d07b28405e.zip b/.yarn/cache/execa-npm-9.3.1-37e531909d-8a7529de3c.zip similarity index 79% rename from .yarn/cache/execa-npm-9.3.0-238a82e660-d07b28405e.zip rename to .yarn/cache/execa-npm-9.3.1-37e531909d-8a7529de3c.zip index 072d839ca..0e78609e4 100644 Binary files a/.yarn/cache/execa-npm-9.3.0-238a82e660-d07b28405e.zip and b/.yarn/cache/execa-npm-9.3.1-37e531909d-8a7529de3c.zip differ diff --git a/.yarn/cache/focus-visible-npm-5.2.0-0a54ff0da1-876f646ef4.zip b/.yarn/cache/focus-visible-npm-5.2.1-cd9557ff7a-9da7388e70.zip similarity index 82% rename from .yarn/cache/focus-visible-npm-5.2.0-0a54ff0da1-876f646ef4.zip rename to .yarn/cache/focus-visible-npm-5.2.1-cd9557ff7a-9da7388e70.zip index 3adf3b32f..1dd8aff19 100644 Binary files a/.yarn/cache/focus-visible-npm-5.2.0-0a54ff0da1-876f646ef4.zip and b/.yarn/cache/focus-visible-npm-5.2.1-cd9557ff7a-9da7388e70.zip differ diff --git a/.yarn/cache/human-signals-npm-7.0.0-494fbdaf96-5e05a7dbb6.zip b/.yarn/cache/human-signals-npm-8.0.0-7d9d2b020e-ccaca470e8.zip similarity index 54% rename from .yarn/cache/human-signals-npm-7.0.0-494fbdaf96-5e05a7dbb6.zip rename to .yarn/cache/human-signals-npm-8.0.0-7d9d2b020e-ccaca470e8.zip index 0e554dc8f..59de0945b 100644 Binary files a/.yarn/cache/human-signals-npm-7.0.0-494fbdaf96-5e05a7dbb6.zip and b/.yarn/cache/human-signals-npm-8.0.0-7d9d2b020e-ccaca470e8.zip differ diff --git a/.yarn/cache/lru-cache-npm-10.4.3-30c10b861a-6476138d21.zip b/.yarn/cache/lru-cache-npm-10.4.3-30c10b861a-6476138d21.zip new file mode 100644 index 000000000..613a62b17 Binary files /dev/null and b/.yarn/cache/lru-cache-npm-10.4.3-30c10b861a-6476138d21.zip differ diff --git a/.yarn/cache/postcss-npm-8.4.41-1607021b28-f865894929.zip b/.yarn/cache/postcss-npm-8.4.41-1607021b28-f865894929.zip new file mode 100644 index 000000000..7da89509b Binary files /dev/null and b/.yarn/cache/postcss-npm-8.4.41-1607021b28-f865894929.zip differ diff --git a/.yarn/cache/react-dom-npm-18.3.1-a805663f38-298954ecd8.zip b/.yarn/cache/react-dom-npm-18.3.1-a805663f38-298954ecd8.zip deleted file mode 100644 index 3b6d2c014..000000000 Binary files a/.yarn/cache/react-dom-npm-18.3.1-a805663f38-298954ecd8.zip and /dev/null differ diff --git a/.yarn/cache/react-npm-18.3.1-af38f3c1ae-a27bcfa8ff.zip b/.yarn/cache/react-npm-18.3.1-af38f3c1ae-a27bcfa8ff.zip deleted file mode 100644 index fe5b70e7d..000000000 Binary files a/.yarn/cache/react-npm-18.3.1-af38f3c1ae-a27bcfa8ff.zip and /dev/null differ diff --git a/.yarn/cache/rehype-katex-npm-7.0.0-704b6f2147-3184cf7635.zip b/.yarn/cache/rehype-katex-npm-7.0.0-704b6f2147-3184cf7635.zip deleted file mode 100644 index f2fc6923b..000000000 Binary files a/.yarn/cache/rehype-katex-npm-7.0.0-704b6f2147-3184cf7635.zip and /dev/null differ diff --git a/.yarn/cache/rehype-katex-npm-7.0.1-e8637a6b2b-d8f90f2b48.zip b/.yarn/cache/rehype-katex-npm-7.0.1-e8637a6b2b-d8f90f2b48.zip new file mode 100644 index 000000000..64357f9ce Binary files /dev/null and b/.yarn/cache/rehype-katex-npm-7.0.1-e8637a6b2b-d8f90f2b48.zip differ diff --git a/.yarn/cache/rollup-npm-4.21.1-53146c58db-d275e1ab9c.zip b/.yarn/cache/rollup-npm-4.21.1-53146c58db-d275e1ab9c.zip new file mode 100644 index 000000000..232eb03f6 Binary files /dev/null and b/.yarn/cache/rollup-npm-4.21.1-53146c58db-d275e1ab9c.zip differ diff --git a/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-3e82d1f419.zip b/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-3e82d1f419.zip deleted file mode 100644 index e58698558..000000000 Binary files a/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-3e82d1f419.zip and /dev/null differ diff --git a/.yarn/cache/tinybench-npm-2.9.0-2861a048db-1ab00d7dfe.zip b/.yarn/cache/tinybench-npm-2.9.0-2861a048db-1ab00d7dfe.zip new file mode 100644 index 000000000..ec0acdf43 Binary files /dev/null and b/.yarn/cache/tinybench-npm-2.9.0-2861a048db-1ab00d7dfe.zip differ diff --git a/.yarn/cache/tinypool-npm-1.0.0-01bf44ef1d-59dab87b08.zip b/.yarn/cache/tinypool-npm-1.0.0-01bf44ef1d-59dab87b08.zip deleted file mode 100644 index 97b9be92a..000000000 Binary files a/.yarn/cache/tinypool-npm-1.0.0-01bf44ef1d-59dab87b08.zip and /dev/null differ diff --git a/.yarn/cache/tinypool-npm-1.0.1-d26e93a818-5cd6b8cbcc.zip b/.yarn/cache/tinypool-npm-1.0.1-d26e93a818-5cd6b8cbcc.zip new file mode 100644 index 000000000..52549dd2f Binary files /dev/null and b/.yarn/cache/tinypool-npm-1.0.1-d26e93a818-5cd6b8cbcc.zip differ diff --git a/.yarn/cache/type-fest-npm-4.23.0-cea2c34bb1-75466563be.zip b/.yarn/cache/type-fest-npm-4.25.0-5e8969fb6f-4c318d0fbf.zip similarity index 74% rename from .yarn/cache/type-fest-npm-4.23.0-cea2c34bb1-75466563be.zip rename to .yarn/cache/type-fest-npm-4.25.0-5e8969fb6f-4c318d0fbf.zip index b7f4b5a5d..3e138e360 100644 Binary files a/.yarn/cache/type-fest-npm-4.23.0-cea2c34bb1-75466563be.zip and b/.yarn/cache/type-fest-npm-4.25.0-5e8969fb6f-4c318d0fbf.zip differ diff --git a/.yarn/cache/undici-types-npm-6.19.8-9f12285b7a-de51f1b447.zip b/.yarn/cache/undici-types-npm-6.19.8-9f12285b7a-de51f1b447.zip new file mode 100644 index 000000000..432bfb3b6 Binary files /dev/null and b/.yarn/cache/undici-types-npm-6.19.8-9f12285b7a-de51f1b447.zip differ diff --git a/.yarn/cache/vite-npm-5.4.2-65a106d8cf-7d25c1b236.zip b/.yarn/cache/vite-npm-5.4.2-65a106d8cf-7d25c1b236.zip new file mode 100644 index 000000000..7f925a8fe Binary files /dev/null and b/.yarn/cache/vite-npm-5.4.2-65a106d8cf-7d25c1b236.zip differ diff --git a/biome.json b/biome.json index 015114ebe..f059773b7 100644 --- a/biome.json +++ b/biome.json @@ -30,7 +30,8 @@ "noBannedTypes": "off" }, "correctness": { - "useExhaustiveDependencies": "warn" + "useExhaustiveDependencies": "warn", + "noUnusedVariables": "error" }, "security": { "noDangerouslySetInnerHtml": "warn" diff --git a/component-docs/activities/ActivityLayout.css.ts b/component-docs/activities/ActivityLayout.css.ts new file mode 100644 index 000000000..971a94fa3 --- /dev/null +++ b/component-docs/activities/ActivityLayout.css.ts @@ -0,0 +1,72 @@ +import { style } from "@vanilla-extract/css"; +import { vars } from "@seed-design/design-token"; + +import { f } from "@/styles"; + +export const wrapper = style([f.posAbsFull, f.flexColumn, f.rootLineHeight]); + +export const appBarLeft = style([ + f.flex, + { + fontSize: "1.125rem", + fontWeight: 700, + marginLeft: ".5rem", + }, +]); + +export const appBarLeftIcon = style([ + f.flexAlignCenter, + { + marginLeft: ".5rem", + }, +]); + +export const appBarRight = style([ + { + display: "grid", + gridTemplateColumns: "1.5rem 1.5rem 1.5rem", + gap: "1rem", + marginRight: ".5rem", + }, +]); + +export const content = style({ + flex: 1, +}); + +// BottomTab + +export const container = style([ + f.grid, + { + backgroundColor: vars.$semantic.color.paperDefault, + gridTemplateColumns: "1.5rem 1.5rem 1.5rem 1.5rem 1.5rem", + justifyContent: "space-between", + padding: ".5rem 7.25% 0", + paddingBottom: ".375rem", + "@supports": { + "(padding-bottom: constant(safe-area-inset-bottom))": { + paddingBottom: "calc(.375rem + constant(safe-area-inset-bottom))", + }, + "(padding-bottom: env(safe-area-inset-bottom))": { + paddingBottom: "calc(.375rem + env(safe-area-inset-bottom))", + }, + }, + boxShadow: `0 -1px 0 0 ${vars.$semantic.color.divider2}`, + }, +]); + +export const button = style([f.flexColumn, f.flexAlignCenter, f.resetButton, f.cursorPointer]); + +export const buttonIcon = style([ + { + marginBottom: ".375rem", + }, +]); + +export const buttonLabel = style([ + f.nowrap, + { + fontSize: ".75rem", + }, +]); diff --git a/component-docs/activities/ActivityLayout.tsx b/component-docs/activities/ActivityLayout.tsx new file mode 100644 index 000000000..d41051fa8 --- /dev/null +++ b/component-docs/activities/ActivityLayout.tsx @@ -0,0 +1,92 @@ +import { AppScreen } from "@stackflow/plugin-basic-ui"; + +import IconExpandMore from "@/assets/IconExpandMore"; +import IconSearch from "@/assets/IconSearch"; +import IconSettings from "@/assets/IconSettings"; +import IconBell from "@/assets/IconBell"; +import IconHome from "@/assets/IconHome"; +import IconMenu from "@/assets/IconMenu"; +import IconSell from "@/assets/IconSell"; +import IconChatting from "@/assets/IconChatting"; +import IconProfile from "@/assets/IconProfile"; + +import * as css from "./ActivityLayout.css"; + +type PropOf = T extends React.ComponentType ? U : never; + +interface LayoutProps { + appBar?: PropOf["appBar"]; + children: React.ReactNode; +} + +const Layout: React.FC = ({ children }) => { + const appBarLeft = () => ( +
+ Woolston +
+ +
+
+ ); + + const appBarRight = () => ( +
+ + + +
+ ); + + return ( + +
+
{children}
+ +
+ + ); +}; + +Layout.displayName = "Layout"; + +export default Layout; + +const BottomTab: React.FC = () => ( +
+ + + + + +
+); diff --git a/component-docs/activities/ChipTabsBasicActivity.tsx b/component-docs/activities/ChipTabsBasicActivity.tsx new file mode 100644 index 000000000..075350869 --- /dev/null +++ b/component-docs/activities/ChipTabsBasicActivity.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; + +import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "@/seed-design/ui/chip-tabs"; + +import type { ActivityComponentType } from "@stackflow/react/future"; +import Layout from "./ActivityLayout"; + +declare module "@stackflow/config" { + interface Register { + ChipTabsBasic: unknown; + } +} + +const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => { + const [value, setValue] = React.useState("1"); + + const commonStyle = { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "#eeeeee", + height: "100%", + }; + + return ( + + setValue(value)}> + + 라벨1 + 라벨2 + 라벨3 + + + {value === "1" &&
content 1
} + {value === "2" &&
content 2
} + {value === "3" &&
content 3
} + + ); +}; + +export default ChipTabsBasicActivity; diff --git a/component-docs/activities/TabsAlertActivity.tsx b/component-docs/activities/TabsAlertActivity.tsx new file mode 100644 index 000000000..9b83a6762 --- /dev/null +++ b/component-docs/activities/TabsAlertActivity.tsx @@ -0,0 +1,71 @@ +import * as React from "react"; +import { AppScreen } from "@stackflow/plugin-basic-ui"; + +import { + Tabs as UITabs, + TabTriggerList, + TabContent, + TabContentList, + TabTrigger, +} from "@/seed-design/ui/tabs"; + +import type { ActivityComponentType } from "@stackflow/react/future"; + +declare module "@stackflow/config" { + interface Register { + TabsAlert: unknown; + } +} + +const TabsAlertActivity: ActivityComponentType<"TabsAlert"> = () => { + const appBarLeft = () =>
Left
; + const appBarRight = () =>
Right
; + + const tabCommonStyle = { + padding: "16px", + backgroundColor: "#f5f5f5", + }; + + return ( + +
+ + + + 라벨1 + + + 라벨2 + + + 라벨3 + + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + +
+ + ); +}; + +export default TabsAlertActivity; diff --git a/component-docs/activities/TabsDisabledActivity.tsx b/component-docs/activities/TabsDisabledActivity.tsx new file mode 100644 index 000000000..8b716628c --- /dev/null +++ b/component-docs/activities/TabsDisabledActivity.tsx @@ -0,0 +1,67 @@ +import * as React from "react"; +import { AppScreen } from "@stackflow/plugin-basic-ui"; + +import { + Tabs, + TabTriggerList, + TabContent, + TabContentList, + TabTrigger, +} from "@/seed-design/ui/tabs"; + +import type { ActivityComponentType } from "@stackflow/react/future"; + +declare module "@stackflow/config" { + interface Register { + TabsDisabled: unknown; + } +} + +const TabsDisabledActivity: ActivityComponentType<"TabsDisabled"> = () => { + const appBarLeft = () =>
Left
; + const appBarRight = () =>
Right
; + + const tabCommonStyle = { + padding: "16px", + backgroundColor: "#f5f5f5", + }; + + return ( + +
+ + + 라벨1 + + 라벨2 + + 라벨3 + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + +
+ + ); +}; + +export default TabsDisabledActivity; diff --git a/component-docs/assets/IconBell.tsx b/component-docs/assets/IconBell.tsx new file mode 100644 index 000000000..d16e8733c --- /dev/null +++ b/component-docs/assets/IconBell.tsx @@ -0,0 +1,13 @@ +import { f } from "@/styles"; + +const SVG = ` + + + +`; + +const IconBell: React.FC = () => ( +
+); + +export default IconBell; diff --git a/component-docs/assets/IconChatting.tsx b/component-docs/assets/IconChatting.tsx new file mode 100644 index 000000000..2cf0d9994 --- /dev/null +++ b/component-docs/assets/IconChatting.tsx @@ -0,0 +1,13 @@ +import { f } from "@/styles"; + +const SVG = ` + + + +`; + +const IconChatting: React.FC = () => ( +
+); + +export default IconChatting; diff --git a/component-docs/assets/IconExpandMore.tsx b/component-docs/assets/IconExpandMore.tsx new file mode 100644 index 000000000..9d970c1f2 --- /dev/null +++ b/component-docs/assets/IconExpandMore.tsx @@ -0,0 +1,13 @@ +import { f } from "@/styles"; + +const SVG = ` + + + +`; + +const IconExpandMore: React.FC = () => ( +
+); + +export default IconExpandMore; diff --git a/component-docs/assets/IconHome.tsx b/component-docs/assets/IconHome.tsx new file mode 100644 index 000000000..5774cc676 --- /dev/null +++ b/component-docs/assets/IconHome.tsx @@ -0,0 +1,13 @@ +import { f } from "@/styles"; + +const SVG = ` + + + +`; + +const IconHome: React.FC = () => ( +
+); + +export default IconHome; diff --git a/component-docs/assets/IconMenu.tsx b/component-docs/assets/IconMenu.tsx new file mode 100644 index 000000000..67b36b1a3 --- /dev/null +++ b/component-docs/assets/IconMenu.tsx @@ -0,0 +1,15 @@ +import { f } from "@/styles"; + +const SVG = ` + + + + + +`; + +const IconMenu: React.FC = () => ( +
+); + +export default IconMenu; diff --git a/component-docs/assets/IconProfile.tsx b/component-docs/assets/IconProfile.tsx new file mode 100644 index 000000000..31befb47e --- /dev/null +++ b/component-docs/assets/IconProfile.tsx @@ -0,0 +1,14 @@ +import { f } from "@/styles"; + +const SVG = ` + + + + +`; + +const IconProfile: React.FC = () => ( +
+); + +export default IconProfile; diff --git a/component-docs/assets/IconSearch.tsx b/component-docs/assets/IconSearch.tsx new file mode 100644 index 000000000..8ee60a522 --- /dev/null +++ b/component-docs/assets/IconSearch.tsx @@ -0,0 +1,13 @@ +import { f } from "@/styles"; + +const SVG = ` + + + +`; + +const IconSearch: React.FC = () => ( +
+); + +export default IconSearch; diff --git a/component-docs/assets/IconSell.tsx b/component-docs/assets/IconSell.tsx new file mode 100644 index 000000000..667daa2a0 --- /dev/null +++ b/component-docs/assets/IconSell.tsx @@ -0,0 +1,15 @@ +import { f } from "@/styles"; + +const SVG = ` + + + + + +`; + +const IconSell: React.FC = () => ( +
+); + +export default IconSell; diff --git a/component-docs/assets/IconSettings.tsx b/component-docs/assets/IconSettings.tsx new file mode 100644 index 000000000..2e794bc36 --- /dev/null +++ b/component-docs/assets/IconSettings.tsx @@ -0,0 +1,14 @@ +import { f } from "@/styles"; + +const SVG = ` + + + + +`; + +const IconSettings: React.FC = () => ( +
+); + +export default IconSettings; diff --git a/component-docs/assets/ImageProfileRating.tsx b/component-docs/assets/ImageProfileRating.tsx new file mode 100644 index 000000000..ac84622ee --- /dev/null +++ b/component-docs/assets/ImageProfileRating.tsx @@ -0,0 +1,49 @@ +import { f } from "@/styles"; + +const SVG = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +const ImageProfileRating: React.FC = () => ( +
+); + +export default ImageProfileRating; diff --git a/component-docs/components/Installation.tsx b/component-docs/components/Installation.tsx index af44e98a3..aa4ede903 100644 --- a/component-docs/components/Installation.tsx +++ b/component-docs/components/Installation.tsx @@ -1,6 +1,7 @@ -import type * as React from "react"; +import { Code, Pre, Steps, Tabs } from "nextra/components"; + import type { ComponentRegistry } from "@/schemas/registry"; -import { Code, Pre, Tabs, Steps } from "nextra/components"; +import type * as React from "react"; interface InstallationProps { registry: ComponentRegistry; @@ -33,18 +34,22 @@ export function Installation({ registry }: InstallationProps) { - 의존성 설치 - 
-            
-              
-                npm 
-                install 
-                
-                  {registry.dependencies.join(" ")}
-                
-              
-            
-
+ {registry.dependencies && ( + <> + 의존성 설치 + 
+                
+                  
+                    npm 
+                    install 
+                    
+                      {registry.dependencies.join(" ")}
+                    
+                  
+                
+
+ + )} 아래 코드를 복사 후 붙여넣고 사용하세요 {registry.registries.map((registry) => ( diff --git a/component-docs/components/Preview.tsx b/component-docs/components/Preview.tsx index 664440f14..aea07c4ae 100644 --- a/component-docs/components/Preview.tsx +++ b/component-docs/components/Preview.tsx @@ -1,6 +1,7 @@ -import type * as React from "react"; import { Tabs } from "nextra/components"; +import type * as React from "react"; + interface PreviewProps { component: React.ReactNode; } diff --git a/component-docs/components/Stackflow.tsx b/component-docs/components/Stackflow.tsx index eb66bd18a..4e47844e0 100644 --- a/component-docs/components/Stackflow.tsx +++ b/component-docs/components/Stackflow.tsx @@ -1,16 +1,17 @@ import { makeStack } from "@/stackflow"; +import type { Register } from "@stackflow/config"; import type { ActivityComponentType } from "@stackflow/react/future"; import { useSimpleReveal } from "simple-reveal"; interface StackflowProps { - Activity: ActivityComponentType<"Main">; + Activity: ActivityComponentType; } export const Stackflow: React.FC = ({ Activity }) => { const { Stack } = makeStack({ Activity }); const { cn, ref, style } = useSimpleReveal({ delay: 200, - rootMargin: "-400px", + rootMargin: "-200px", initialTransform: "scale(0.95)", }); diff --git a/component-docs/metadatas/component.ts b/component-docs/metadatas/component.ts index a41728ee9..b019d69fa 100644 --- a/component-docs/metadatas/component.ts +++ b/component-docs/metadatas/component.ts @@ -1,6 +1,12 @@ import type { ComponentMetadatas } from "../schemas/metadata"; export const componentMetadatas: ComponentMetadatas = [ + { + name: "alert-dialog", + type: "component", + innerDependencies: ["box-button"], + snippets: ["alert-dialog.tsx"], + }, { name: "box-button", type: "component", @@ -8,10 +14,21 @@ export const componentMetadatas: ComponentMetadatas = [ snippets: ["box-button.tsx"], }, { - name: "alert-dialog", + name: "checkbox", type: "component", - dependencies: ["@radix-ui/react-slot"], - innerDependencies: ["box-button"], - snippets: ["alert-dialog.tsx"], + dependencies: ["@seed-design/react-checkbox"], + snippets: ["checkbox.tsx"], + }, + { + name: "tabs", + type: "component", + dependencies: ["@seed-design/react-tabs"], + snippets: ["tabs.tsx"], + }, + { + name: "chip-tabs", + type: "component", + dependencies: ["@seed-design/react-tabs"], + snippets: ["chip-tabs.tsx"], }, ]; diff --git a/component-docs/next.config.js b/component-docs/next.config.js index bc962bad8..662eb6495 100644 --- a/component-docs/next.config.js +++ b/component-docs/next.config.js @@ -1,4 +1,7 @@ import nextra from "nextra"; +import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin"; + +const withVanillaExtract = createVanillaExtractPlugin(); const withNextra = nextra({ theme: "nextra-theme-docs", @@ -23,4 +26,4 @@ const nextConfig = { transpilePackages: ["@stackflow/plugin-basic-ui"], }; -export default withNextra(nextConfig); +export default withVanillaExtract(withNextra(nextConfig)); diff --git a/component-docs/package.json b/component-docs/package.json index 8b6448763..a5e011d99 100644 --- a/component-docs/package.json +++ b/component-docs/package.json @@ -11,6 +11,9 @@ }, "dependencies": { "@radix-ui/react-slot": "^1.1.0", + "@seed-design/design-token": "^1.0.3", + "@seed-design/react-checkbox": "0.0.0", + "@seed-design/react-tabs": "0.0.0", "@seed-design/recipe": "0.0.0", "@seed-design/stylesheet": "1.0.4", "@stackflow/config": "^1.1.0", @@ -18,17 +21,20 @@ "@stackflow/plugin-basic-ui": "^1.8.4", "@stackflow/plugin-renderer-basic": "^1.1.11", "@stackflow/react": "^1.2.1", + "@vanilla-extract/css": "^1.15.5", "next": "^14.2.5", "nextra": "^2.13.4", "nextra-theme-docs": "^2.13.4", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "simple-reveal": "^0.8.0", "ts-morph": "^23.0.0" }, "devDependencies": { "@seed-design/cli": "workspace:^", "@types/node": "^20.14.12", + "@types/react": "^18.3.4", + "@vanilla-extract/next-plugin": "^2.4.5", "autoprefixer": "^10.4.20", "chalk": "^5.3.0", "ts-node": "^10.9.2", diff --git a/component-docs/pages/components/_meta.json b/component-docs/pages/components/_meta.json new file mode 100644 index 000000000..7ab745408 --- /dev/null +++ b/component-docs/pages/components/_meta.json @@ -0,0 +1,6 @@ +{ + "alert-dialog": "AlertDialog", + "box-button": "BoxButton", + "checkbox": "Checkbox", + "tabs": "Tabs" +} diff --git a/component-docs/pages/components/alert-dialog.mdx b/component-docs/pages/components/alert-dialog.mdx index 9df2e138d..44d6732a6 100644 --- a/component-docs/pages/components/alert-dialog.mdx +++ b/component-docs/pages/components/alert-dialog.mdx @@ -1,7 +1,6 @@ import { AlertDialog } from '@/seed-design/components/alert-dialog'; import { Installation } from '@/components/Installation'; import { Preview } from '@/components/Preview'; -import { Tabs } from "nextra/components"; import { Stackflow } from "@/components/Stackflow"; import registry from '@/public/registry/components/alert-dialog.json'; diff --git a/component-docs/pages/components/box-button.mdx b/component-docs/pages/components/box-button.mdx index d93f5c46a..e73dbd4d7 100644 --- a/component-docs/pages/components/box-button.mdx +++ b/component-docs/pages/components/box-button.mdx @@ -1,7 +1,6 @@ import { BoxButton } from '@/seed-design/ui/box-button'; import { Installation } from '@/components/Installation'; import { Preview } from '@/components/Preview'; -import { Tabs } from "nextra/components"; import registry from '@/public/registry/components/box-button.json'; diff --git a/component-docs/pages/components/checkbox.mdx b/component-docs/pages/components/checkbox.mdx new file mode 100644 index 000000000..6df7bca48 --- /dev/null +++ b/component-docs/pages/components/checkbox.mdx @@ -0,0 +1,23 @@ +import { Checkbox } from '@/seed-design/ui/checkbox'; +import { Installation } from '@/components/Installation'; +import { Preview } from '@/components/Preview'; + +import registry from '@/public/registry/components/checkbox.json'; + +# Checkbox + +}> +```tsx copy +import { Checkbox } from './seed-design/ui/checkbox'; + +const App = () => { + return ( + + ); +} +``` + + +### 설치 + + diff --git a/component-docs/pages/components/tabs.mdx b/component-docs/pages/components/tabs.mdx deleted file mode 100644 index 0745edd32..000000000 --- a/component-docs/pages/components/tabs.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Tabs - -WIP \ No newline at end of file diff --git a/component-docs/pages/components/tabs/_meta.json b/component-docs/pages/components/tabs/_meta.json new file mode 100644 index 000000000..ca998043a --- /dev/null +++ b/component-docs/pages/components/tabs/_meta.json @@ -0,0 +1,4 @@ +{ + "tabs": "Tabs", + "chip-tabs": "ChipTabs" +} diff --git a/component-docs/pages/components/tabs/chip-tabs.mdx b/component-docs/pages/components/tabs/chip-tabs.mdx new file mode 100644 index 000000000..3624d638b --- /dev/null +++ b/component-docs/pages/components/tabs/chip-tabs.mdx @@ -0,0 +1,47 @@ +import { Installation } from '@/components/Installation'; +import { Preview } from '@/components/Preview'; +import { Stackflow } from "@/components/Stackflow"; + +import { ChipTabs } from '@/seed-design/components/chip-tabs'; + +import registry from '@/public/registry/components/chip-tabs.json'; +import ChipTabsBasicActivity from "@/activities/ChipTabsBasicActivity"; + +# ChipTabs + +}> + +```tsx copy +import { + ChipTabs, + ChipTabTrigger, + ChipTabTriggerList, +} from './seed-design/ui/chip-tabs'; + +const App = () => { + const [value, setValue] = React.useState("1"); + return ( + <> + setValue(value)}> + + 라벨1 + 라벨2 + 라벨3 + + + {value === "1" &&
content 1
} + {value === "2" &&
content 2
} + {value === "3" &&
content 3
} + + ); +} +``` + + +### 설치 + + + +### Basic + + diff --git a/component-docs/pages/components/tabs/tabs.mdx b/component-docs/pages/components/tabs/tabs.mdx new file mode 100644 index 000000000..086499e14 --- /dev/null +++ b/component-docs/pages/components/tabs/tabs.mdx @@ -0,0 +1,59 @@ +import { Installation } from '@/components/Installation'; +import { Preview } from '@/components/Preview'; +import { Stackflow } from "@/components/Stackflow"; + +import { Tabs } from '@/seed-design/components/tabs'; + +import registry from '@/public/registry/components/tabs.json'; +import TabsDisabledActivity from "@/activities/TabsDisabledActivity"; +import TabsAlertActivity from "@/activities/TabsAlertActivity"; + +# Tabs + +}> + +```tsx copy +import { + Tabs, + TabContent, + TabContentList, + TabTrigger, + TabTriggerList, +} from './seed-design/ui/tabs'; + +const App = () => { + return ( + + + 라벨1 + 라벨2 + 라벨3 + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + + ); +} +``` + + +### 설치 + + + +### Disabled + + + +### Alert + + diff --git a/component-docs/pages/get-started/CLI.mdx b/component-docs/pages/get-started/CLI.mdx index 7d31ac82f..0fb843755 100644 --- a/component-docs/pages/get-started/CLI.mdx +++ b/component-docs/pages/get-started/CLI.mdx @@ -1,4 +1,4 @@ -import SeedDesignConfiguration from "@/components/seed-design-configuration.mdx"; +import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx"; # CLI diff --git a/component-docs/pages/get-started/installation/next.mdx b/component-docs/pages/get-started/installation/next.mdx index 56286b1e3..42da22779 100644 --- a/component-docs/pages/get-started/installation/next.mdx +++ b/component-docs/pages/get-started/installation/next.mdx @@ -1,7 +1,7 @@ import { Steps, Tabs } from 'nextra/components' -import SeedDesignConfiguration from "@/components/seed-design-configuration.mdx" -import Installation from "@/components/get-started-installation.mdx" +import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx" +import Installation from "@/templates/get-started-installation.mdx" # 설치 diff --git a/component-docs/pages/get-started/installation/vite.mdx b/component-docs/pages/get-started/installation/vite.mdx index 54886065a..a0741ffa5 100644 --- a/component-docs/pages/get-started/installation/vite.mdx +++ b/component-docs/pages/get-started/installation/vite.mdx @@ -1,7 +1,7 @@ import { Steps, Tabs } from 'nextra/components' -import SeedDesignConfiguration from "@/components/seed-design-configuration.mdx" -import Installation from "@/components/get-started-installation.mdx" +import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx" +import Installation from "@/templates/get-started-installation.mdx" # 설치 diff --git a/component-docs/pages/get-started/seed-design.json.mdx b/component-docs/pages/get-started/seed-design.json.mdx index 17e4e8d4a..e8d80f848 100644 --- a/component-docs/pages/get-started/seed-design.json.mdx +++ b/component-docs/pages/get-started/seed-design.json.mdx @@ -1,6 +1,6 @@ import { FileTree } from 'nextra/components'; -import SeedDesignConfiguration from "@/components/seed-design-configuration.mdx"; +import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx"; # seed-design.json diff --git a/component-docs/public/registry/components/alert-dialog.json b/component-docs/public/registry/components/alert-dialog.json index c3b500581..986695f0d 100644 --- a/component-docs/public/registry/components/alert-dialog.json +++ b/component-docs/public/registry/components/alert-dialog.json @@ -1,8 +1,5 @@ { "name": "alert-dialog", - "dependencies": [ - "@radix-ui/react-slot" - ], "innerDependencies": [ "box-button" ], diff --git a/component-docs/public/registry/components/checkbox.json b/component-docs/public/registry/components/checkbox.json new file mode 100644 index 000000000..1dcbbb262 --- /dev/null +++ b/component-docs/public/registry/components/checkbox.json @@ -0,0 +1,13 @@ +{ + "name": "checkbox", + "dependencies": [ + "@seed-design/react-checkbox" + ], + "registries": [ + { + "name": "checkbox.tsx", + "content": "\"use client\";\n\nimport { type UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { type CheckboxVariantProps, checkbox } from \"@seed-design/recipe/checkbox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport type { CSSProperties } from \"react\";\n\nimport \"@seed-design/stylesheet/checkbox.css\";\n\ntype Assign = Omit & U;\n\nconst visuallyHidden: CSSProperties = {\n border: 0,\n clip: \"rect(0 0 0 0)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n};\n\nconst Checkmark = React.forwardRef>((props, ref) => (\n \n \n \n));\n\nexport interface CheckboxProps\n extends Assign, UseCheckboxProps>,\n CheckboxVariantProps {\n label: React.ReactNode;\n}\n\nexport const Checkbox = React.forwardRef(\n ({ className, size = \"medium\", label, ...otherProps }, ref) => {\n const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } =\n useCheckbox(otherProps);\n\n const classNames = checkbox({ size });\n return (\n \n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n" + } + ], + "type": "component" +} \ No newline at end of file diff --git a/component-docs/public/registry/components/chip-tabs.json b/component-docs/public/registry/components/chip-tabs.json new file mode 100644 index 000000000..cfd886d8e --- /dev/null +++ b/component-docs/public/registry/components/chip-tabs.json @@ -0,0 +1,13 @@ +{ + "name": "chip-tabs", + "dependencies": [ + "@seed-design/react-tabs" + ], + "registries": [ + { + "name": "chip-tabs.tsx", + "content": "\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n useTabs,\n type UseTabsProps,\n type TriggerProps,\n type ContentProps,\n useLazyContents,\n type UseLazyContentsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTabs } from \"@seed-design/recipe/chipTabs\";\nimport { chipTab } from \"@seed-design/recipe/chipTab\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign = Omit & U;\n\ninterface ChipTabsContextValue {\n api: ReturnType;\n classNames: ReturnType;\n shouldRender: (value: string) => boolean;\n}\n\nconst ChipTabsContext = React.createContext(null);\n\nconst useChipTabsContext = () => {\n const context = React.useContext(ChipTabsContext);\n if (!context) {\n throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n }\n return context;\n};\n\nexport interface ChipTabsProps\n extends Assign<\n React.HTMLAttributes,\n Omit\n >,\n Omit {}\n\nexport const ChipTabs = React.forwardRef((props, ref) => {\n const { className, lazyMode, isLazy } = props;\n const api = useTabs(props);\n const classNames = chipTabs();\n const { rootProps, value, restProps } = api;\n const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n return (\n
\n \n {props.children}\n \n
\n );\n});\nChipTabs.displayName = \"Tabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames } = useChipTabsContext();\n const { tabTriggerListProps, triggerSize } = api;\n const { left } = triggerSize;\n const { triggerList } = classNames;\n\n const containerRef = React.useRef(null);\n React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n React.useEffect(() => {\n if (containerRef.current) {\n containerRef.current?.scrollTo({\n // NOTE: 27px is half of tab's min-width\n left: left - 27,\n behavior: \"smooth\",\n });\n }\n }, [left]);\n\n return (\n \n {children}\n
\n );\n});\nChipTabTriggerList.displayName = \"TabTriggerList\";\n\nexport interface ChipTabTriggerProps\n extends Assign, Omit> {}\n\nexport const ChipTabTrigger = React.forwardRef(\n ({ className, children, value, ...otherProps }, ref) => {\n const { api } = useChipTabsContext();\n const { getTabTriggerProps } = api;\n const { label, root } = chipTab();\n const { rootProps, labelProps } = getTabTriggerProps({ value });\n\n return (\n \n );\n },\n);\nChipTabTrigger.displayName = \"TabTrigger\";\n\nexport const ChipTabContentList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames } = useChipTabsContext();\n const {\n tabContentListProps,\n tabContentCameraProps,\n getDragProps,\n currentTabEnabledIndex,\n swipeMoveX,\n tabEnabledCount,\n } = api;\n const { contentList, contentCamera } = classNames;\n const dragProps = getDragProps();\n\n const getCameraTranslateX = () => {\n const MODIFIER = 5;\n\n const currentContentOffsetX = currentTabEnabledIndex * 100;\n\n if (swipeMoveX > 0 && currentTabEnabledIndex === 0) {\n return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;\n }\n\n if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) {\n return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;\n }\n\n return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`;\n };\n\n return (\n \n \n {children}\n
\n
\n );\n});\nChipTabContentList.displayName = \"TabContentList\";\n\nexport const ChipTabContent = React.forwardRef<\n HTMLDivElement,\n Assign, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n const { api, classNames, shouldRender } = useChipTabsContext();\n const { getTabContentProps } = api;\n const { content } = classNames;\n const tabContentProps = getTabContentProps({ value });\n const isRender = shouldRender(value);\n\n return (\n
\n {isRender && children}\n
\n );\n});\nChipTabContent.displayName = \"TabContent\";\n" + } + ], + "type": "component" +} \ No newline at end of file diff --git a/component-docs/public/registry/components/index.json b/component-docs/public/registry/components/index.json index 3c1962610..6afa97bf2 100644 --- a/component-docs/public/registry/components/index.json +++ b/component-docs/public/registry/components/index.json @@ -1,4 +1,14 @@ [ + { + "name": "alert-dialog", + "type": "component", + "innerDependencies": [ + "box-button" + ], + "snippets": [ + "alert-dialog.tsx" + ] + }, { "name": "box-button", "type": "component", @@ -10,16 +20,33 @@ ] }, { - "name": "alert-dialog", + "name": "checkbox", "type": "component", "dependencies": [ - "@radix-ui/react-slot" + "@seed-design/react-checkbox" ], - "innerDependencies": [ - "box-button" + "snippets": [ + "checkbox.tsx" + ] + }, + { + "name": "tabs", + "type": "component", + "dependencies": [ + "@seed-design/react-tabs" ], "snippets": [ - "alert-dialog.tsx" + "tabs.tsx" + ] + }, + { + "name": "chip-tabs", + "type": "component", + "dependencies": [ + "@seed-design/react-tabs" + ], + "snippets": [ + "chip-tabs.tsx" ] } ] \ No newline at end of file diff --git a/component-docs/public/registry/components/tabs.json b/component-docs/public/registry/components/tabs.json new file mode 100644 index 000000000..83b7ce322 --- /dev/null +++ b/component-docs/public/registry/components/tabs.json @@ -0,0 +1,13 @@ +{ + "name": "tabs", + "dependencies": [ + "@seed-design/react-tabs" + ], + "registries": [ + { + "name": "tabs.tsx", + "content": "\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n useTabs,\n type UseTabsProps,\n type TriggerProps,\n type ContentProps,\n useLazyContents,\n type UseLazyContentsProps,\n} from \"@seed-design/react-tabs\";\nimport { tabs } from \"@seed-design/recipe/tabs\";\nimport { tab } from \"@seed-design/recipe/tab\";\n\nimport \"@seed-design/stylesheet/tabs.css\";\nimport \"@seed-design/stylesheet/tab.css\";\n\ntype Assign = Omit & U;\n\ninterface TabsContextValue {\n api: ReturnType;\n classNames: ReturnType;\n shouldRender: (value: string) => boolean;\n isSwipeable: boolean;\n layout: \"fill\" | \"hug\";\n size: \"small\" | \"medium\";\n}\n\nconst TabsContext = React.createContext(null);\n\nconst useTabsContext = () => {\n const context = React.useContext(TabsContext);\n if (!context) {\n throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n }\n return context;\n};\n\nexport interface TabsProps\n extends Assign, UseTabsProps>,\n Omit {\n /**\n * @default \"hug\"\n */\n layout?: \"fill\" | \"hug\";\n\n /**\n * @default \"small\"\n */\n size?: \"small\" | \"medium\";\n}\n\nexport const Tabs = React.forwardRef((props, ref) => {\n const {\n className,\n lazyMode,\n isLazy,\n isSwipeable = false,\n layout = \"hug\",\n size = \"small\",\n } = props;\n const api = useTabs(props);\n const classNames = tabs({\n layout,\n });\n const { rootProps, value, restProps } = api;\n const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n return (\n
\n \n {props.children}\n \n
\n );\n});\nTabs.displayName = \"Tabs\";\n\nexport const TabTriggerList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames } = useTabsContext();\n const { tabTriggerListProps, triggerSize } = api;\n const { left } = triggerSize;\n const { triggerList } = classNames;\n\n const containerRef = React.useRef(null);\n React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n React.useEffect(() => {\n if (containerRef.current) {\n containerRef.current?.scrollTo({\n // NOTE: 27px is half of tab's min-width\n left: left - 27,\n behavior: \"smooth\",\n });\n }\n }, [left]);\n\n return (\n \n {children}\n \n
\n );\n});\nTabTriggerList.displayName = \"TabTriggerList\";\n\nexport interface TabTriggerProps\n extends Assign, TriggerProps> {\n /**\n * @default false\n */\n alert?: boolean;\n}\n\nexport const TabTrigger = React.forwardRef(\n ({ className, children, value, isDisabled, alert = false, ...otherProps }, ref) => {\n const { api, layout, size } = useTabsContext();\n const { getTabTriggerProps } = api;\n const { label, notification, root } = tab({\n size,\n layout,\n });\n const { rootProps, notificationProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n return (\n \n );\n },\n);\nTabTrigger.displayName = \"TabTrigger\";\n\nexport const TabContentList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames, isSwipeable } = useTabsContext();\n const {\n tabContentListProps,\n tabContentCameraProps,\n getDragProps,\n currentTabEnabledIndex,\n swipeMoveX,\n swipeStatus,\n tabEnabledCount,\n } = api;\n const { contentList, contentCamera } = classNames;\n const dragProps = getDragProps();\n\n const getCameraTranslateX = () => {\n const MODIFIER = 5;\n\n const currentContentOffsetX = currentTabEnabledIndex * 100;\n\n if (swipeMoveX > 0 && currentTabEnabledIndex === 0) {\n return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;\n }\n\n if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) {\n return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;\n }\n\n return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`;\n };\n\n return (\n \n \n {children}\n
\n
\n );\n});\nTabContentList.displayName = \"TabContentList\";\n\nexport const TabContent = React.forwardRef<\n HTMLDivElement,\n Assign, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n const { api, classNames, shouldRender } = useTabsContext();\n const { getTabContentProps } = api;\n const { content } = classNames;\n const tabContentProps = getTabContentProps({ value });\n const isRender = shouldRender(value);\n\n return (\n
\n {isRender && children}\n
\n );\n});\nTabContent.displayName = \"TabContent\";\n\nconst TabIndicator = React.forwardRef>(\n ({ className, ...otherProps }, ref) => {\n const { api, classNames, isSwipeable, layout } = useTabsContext();\n const { tabIndicatorProps, triggerSize, currentTabIndex, swipeMoveX, tabCount, swipeStatus } =\n api;\n const { indicator } = classNames;\n const { left: triggerLeft, width: triggerWidth } = triggerSize;\n\n const getLeft = () => {\n const MODIFIER = layout === \"hug\" ? 10 : 5;\n const GUTTER = layout === \"fill\" ? 16 : 0;\n\n // 양끝 탭에서 스와이프로 인한 이동은 MODIFIER를 5배로 늘려서 완전 조금 이동하도록 함\n if (\n (swipeMoveX > 0 && currentTabIndex === 0) ||\n (swipeMoveX < 0 && currentTabIndex === tabCount - 1)\n ) {\n return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / (MODIFIER * 5)}px)`;\n }\n\n return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / MODIFIER}px)`;\n };\n\n const getWidth = () => {\n const GUTTER = 16;\n\n if (layout === \"hug\") {\n return triggerWidth;\n }\n\n return triggerWidth - GUTTER * 2;\n };\n\n const leftTransition =\n isSwipeable && swipeStatus === \"idle\" ? \"left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)\" : \"\";\n const widthTransition = \"width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)\";\n const transitions = [leftTransition, widthTransition].filter(Boolean).join(\", \");\n\n return (\n \n );\n },\n);\nTabIndicator.displayName = \"TabIndicator\";\n" + } + ], + "type": "component" +} \ No newline at end of file diff --git a/component-docs/public/registry/examples/chip-tabs-default.tsx b/component-docs/public/registry/examples/chip-tabs-default.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/component-docs/public/robots.txt b/component-docs/public/robots.txt new file mode 100644 index 000000000..1f53798bb --- /dev/null +++ b/component-docs/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/component-docs/schemas/example.ts b/component-docs/schemas/example.ts new file mode 100644 index 000000000..5d66da38d --- /dev/null +++ b/component-docs/schemas/example.ts @@ -0,0 +1,15 @@ +import { z } from "zod"; + +export const componentExampleSchema = z.object({ + name: z.string(), + dependencies: z.array(z.string()).optional(), + devDependencies: z.array(z.string()).optional(), + innerDependencies: z.array(z.string()).optional(), + snippets: z.array(z.string()), +}); + +export const componentExamplesSchema = z.array(componentExampleSchema); + +export type ComponentExample = z.infer; + +export type ComponentExamples = z.infer; diff --git a/component-docs/seed-design.json b/component-docs/seed-design.json index dcae80d4e..15d253d77 100644 --- a/component-docs/seed-design.json +++ b/component-docs/seed-design.json @@ -1,5 +1,5 @@ { - "rsc": false, + "rsc": true, "tsx": true, "path": "./seed-design" } diff --git a/component-docs/seed-design/components/chip-tabs.tsx b/component-docs/seed-design/components/chip-tabs.tsx new file mode 100644 index 000000000..11cffefa1 --- /dev/null +++ b/component-docs/seed-design/components/chip-tabs.tsx @@ -0,0 +1,56 @@ +import * as React from "react"; + +import { + ChipTabs as UIChipTabs, + ChipTabTrigger, + ChipTabTriggerList, + ChipTabContent, +} from "@/seed-design/ui/chip-tabs"; + +export const ChipTabs = () => { + const commonStyle = { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "#eeeeee", + height: "300px", + }; + return ( + + + 라벨1 + 라벨2 + + 라벨3 + + + 라벨4 + + 라벨5 + 라벨6 + 라벨7 + + +
content 1
+ + +
content 2
+ + +
content 3
+ + +
content 4
+ + +
content 5
+ + +
content 6
+ + +
content 7
+ + + ); +}; diff --git a/component-docs/seed-design/components/tabs.tsx b/component-docs/seed-design/components/tabs.tsx new file mode 100644 index 000000000..dd6cfc906 --- /dev/null +++ b/component-docs/seed-design/components/tabs.tsx @@ -0,0 +1,39 @@ +import * as React from "react"; + +import { + Tabs as UITabs, + TabTriggerList, + TabContent, + TabContentList, + TabTrigger, +} from "@/seed-design/ui/tabs"; + +export const Tabs = () => { + const tabCommonStyle = { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "#eeeeee", + height: "300px", + }; + return ( + + + 라벨1 + 라벨2 + 라벨3 + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + + ); +}; diff --git a/component-docs/seed-design/ui/alert-dialog.tsx b/component-docs/seed-design/ui/alert-dialog.tsx index 4be6b3d1f..495c19435 100644 --- a/component-docs/seed-design/ui/alert-dialog.tsx +++ b/component-docs/seed-design/ui/alert-dialog.tsx @@ -1,3 +1,5 @@ +"use client"; + import "@seed-design/stylesheet/dialog.css"; import * as React from "react"; diff --git a/component-docs/seed-design/ui/box-button.tsx b/component-docs/seed-design/ui/box-button.tsx index cd5cfe743..cb9df44b7 100644 --- a/component-docs/seed-design/ui/box-button.tsx +++ b/component-docs/seed-design/ui/box-button.tsx @@ -1,3 +1,5 @@ +"use client"; + import "@seed-design/stylesheet/boxButton.css"; import * as React from "react"; diff --git a/component-docs/seed-design/ui/checkbox.tsx b/component-docs/seed-design/ui/checkbox.tsx new file mode 100644 index 000000000..37fde2669 --- /dev/null +++ b/component-docs/seed-design/ui/checkbox.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { type UseCheckboxProps, useCheckbox } from "@seed-design/react-checkbox"; +import { type CheckboxVariantProps, checkbox } from "@seed-design/recipe/checkbox"; +import clsx from "clsx"; +import * as React from "react"; +import type { CSSProperties } from "react"; + +import "@seed-design/stylesheet/checkbox.css"; + +type Assign = Omit & U; + +const visuallyHidden: CSSProperties = { + border: 0, + clip: "rect(0 0 0 0)", + height: "1px", + margin: "-1px", + overflow: "hidden", + padding: 0, + position: "absolute", + whiteSpace: "nowrap", + width: "1px", +}; + +const Checkmark = React.forwardRef>((props, ref) => ( + +)); + +export interface CheckboxProps + extends Assign, UseCheckboxProps>, + CheckboxVariantProps { + label: React.ReactNode; +} + +export const Checkbox = React.forwardRef( + ({ className, size = "medium", label, ...otherProps }, ref) => { + const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } = + useCheckbox(otherProps); + + const classNames = checkbox({ size }); + return ( + + ); + }, +); +Checkbox.displayName = "Checkbox"; diff --git a/component-docs/seed-design/ui/chip-tabs.tsx b/component-docs/seed-design/ui/chip-tabs.tsx new file mode 100644 index 000000000..1c1ad65bf --- /dev/null +++ b/component-docs/seed-design/ui/chip-tabs.tsx @@ -0,0 +1,139 @@ +"use client"; + +import { + useLazyContents, + useTabs, + type TriggerProps, + type UseLazyContentsProps, + type UseTabsProps, + type ContentProps, +} from "@seed-design/react-tabs"; +import { chipTab } from "@seed-design/recipe/chipTab"; +import { chipTabs } from "@seed-design/recipe/chipTabs"; +import clsx from "clsx"; +import * as React from "react"; + +import "@seed-design/stylesheet/chipTab.css"; +import "@seed-design/stylesheet/chipTabs.css"; + +type Assign = Omit & U; + +interface ChipTabsContextValue { + api: ReturnType; + classNames: ReturnType; + shouldRender: (value: string) => boolean; +} + +const ChipTabsContext = React.createContext(null); + +const useChipTabsContext = () => { + const context = React.useContext(ChipTabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +export interface ChipTabsProps + extends Assign, Omit>, + Omit {} + +export const ChipTabs = React.forwardRef((props, ref) => { + const { className, lazyMode, isLazy } = props; + const api = useTabs(props); + const classNames = chipTabs(); + const { rootProps, value, restProps } = api; + const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy }); + + return ( +
+ + {props.children} + +
+ ); +}); +ChipTabs.displayName = "ChipTabs"; + +export const ChipTabTriggerList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames } = useChipTabsContext(); + const { tabTriggerListProps, triggerSize } = api; + const { left } = triggerSize; + const { triggerList } = classNames; + + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); + + React.useEffect(() => { + if (containerRef.current) { + containerRef.current?.scrollTo({ + // NOTE: 27px is half of tab's min-width + left: left - 27, + behavior: "smooth", + }); + } + }, [left]); + + return ( +
+ {children} +
+ ); +}); +ChipTabTriggerList.displayName = "ChipTabTriggerList"; + +export interface ChipTabTriggerProps + extends Assign, TriggerProps> {} + +export const ChipTabTrigger = React.forwardRef( + ({ className, children, value, isDisabled, ...otherProps }, ref) => { + const { api } = useChipTabsContext(); + const { getTabTriggerProps } = api; + const { label, root } = chipTab(); + const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled }); + + return ( + + ); + }, +); +ChipTabTrigger.displayName = "ChipTabTrigger"; + +export const ChipTabContent = React.forwardRef< + HTMLDivElement, + Assign, ContentProps> +>(({ className, children, value, ...otherProps }, ref) => { + const { api, classNames, shouldRender } = useChipTabsContext(); + const { getTabContentProps } = api; + const { content } = classNames; + const tabContentProps = getTabContentProps({ + value, + visibilityMode: "hidden", + }); + const isRender = shouldRender(value); + + return ( +
+ {isRender && children} +
+ ); +}); +ChipTabContent.displayName = "ChipTabContent"; diff --git a/component-docs/seed-design/ui/tabs.tsx b/component-docs/seed-design/ui/tabs.tsx new file mode 100644 index 000000000..a4fb3d4a1 --- /dev/null +++ b/component-docs/seed-design/ui/tabs.tsx @@ -0,0 +1,304 @@ +"use client"; + +import clsx from "clsx"; +import * as React from "react"; +import { + useTabs, + useSwipeable, + type UseTabsProps, + type TriggerProps, + type ContentProps, + useLazyContents, + type UseLazyContentsProps, +} from "@seed-design/react-tabs"; +import { tabs } from "@seed-design/recipe/tabs"; +import { tab } from "@seed-design/recipe/tab"; + +import "@seed-design/stylesheet/tabs.css"; +import "@seed-design/stylesheet/tab.css"; + +type Assign = Omit & U; + +interface TabsContextValue { + api: ReturnType & ReturnType; + classNames: ReturnType; + shouldRender: (value: string) => boolean; + isSwipeable: boolean; + layout: "fill" | "hug"; + size: "small" | "medium"; +} + +const TabsContext = React.createContext(null); + +const useTabsContext = () => { + const context = React.useContext(TabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +export interface TabsProps + extends Assign, UseTabsProps>, + Omit { + /** + * @default "hug" + */ + layout?: "fill" | "hug"; + + /** + * @default "small" + */ + size?: "small" | "medium"; +} + +export const Tabs = React.forwardRef((props, ref) => { + const { + className, + lazyMode, + isLazy, + isSwipeable = false, + layout = "hug", + size = "small", + } = props; + const useTabsProps = useTabs(props); + const useSwipeableProps = useSwipeable({ + isSwipeable, + onSwipeLeftToRight: useTabsProps.movePrev, + onSwipeRightToLeft: useTabsProps.moveNext, + }); + const classNames = tabs({ + layout, + }); + const { rootProps, value, restProps } = useTabsProps; + const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy }); + const api = { + ...useTabsProps, + ...useSwipeableProps, + }; + + return ( +
+ + {props.children} + +
+ ); +}); +Tabs.displayName = "Tabs"; + +export const TabTriggerList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames } = useTabsContext(); + const { tabTriggerListProps, triggerSize } = api; + const { left } = triggerSize; + const { triggerList } = classNames; + + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); + + React.useEffect(() => { + if (containerRef.current) { + containerRef.current?.scrollTo({ + // NOTE: 27px is half of tab's min-width + left: left - 27, + behavior: "smooth", + }); + } + }, [left]); + + return ( +
+ {children} + +
+ ); +}); +TabTriggerList.displayName = "TabTriggerList"; + +export interface TabTriggerProps + extends Assign, TriggerProps> { + /** + * @default false + */ + alert?: boolean; +} + +export const TabTrigger = React.forwardRef( + ({ className, children, value, isDisabled, alert = false, ...otherProps }, ref) => { + const { api, layout, size } = useTabsContext(); + const { getTabTriggerProps } = api; + const { label, notification, root } = tab({ + size, + layout, + }); + const { rootProps, notificationProps, labelProps } = getTabTriggerProps({ value, isDisabled }); + + return ( + + ); + }, +); +TabTrigger.displayName = "TabTrigger"; + +export const TabContentList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames, isSwipeable } = useTabsContext(); + const { + tabContentListProps, + tabContentCameraProps, + getDragProps, + currentTabEnabledIndex, + swipeMoveX, + swipeStatus, + tabEnabledCount, + } = api; + const { contentList, contentCamera } = classNames; + const dragProps = getDragProps(); + + const getCameraTranslateX = () => { + const MODIFIER = 5; + + const currentContentOffsetX = currentTabEnabledIndex * 100; + + if (swipeMoveX > 0 && currentTabEnabledIndex === 0) { + return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`; + } + + if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) { + return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`; + } + + return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`; + }; + + return ( +
+
+ {children} +
+
+ ); +}); +TabContentList.displayName = "TabContentList"; + +export const TabContent = React.forwardRef< + HTMLDivElement, + Assign, ContentProps> +>(({ className, children, value, ...otherProps }, ref) => { + const { api, classNames, shouldRender } = useTabsContext(); + const { getTabContentProps } = api; + const { content } = classNames; + const tabContentProps = getTabContentProps({ value }); + const isRender = shouldRender(value); + + return ( +
+ {isRender && children} +
+ ); +}); +TabContent.displayName = "TabContent"; + +const TabIndicator = React.forwardRef>( + ({ className, ...otherProps }, ref) => { + const { api, classNames, isSwipeable, layout } = useTabsContext(); + const { tabIndicatorProps, triggerSize, currentTabIndex, swipeMoveX, tabCount, swipeStatus } = + api; + const { indicator } = classNames; + const { left: triggerLeft, width: triggerWidth } = triggerSize; + + const getLeft = () => { + const MODIFIER = layout === "hug" ? 10 : 5; + const GUTTER = layout === "fill" ? 16 : 0; + + // 양끝 탭에서 스와이프로 인한 이동은 MODIFIER를 5배로 늘려서 완전 조금 이동하도록 함 + if ( + (swipeMoveX > 0 && currentTabIndex === 0) || + (swipeMoveX < 0 && currentTabIndex === tabCount - 1) + ) { + return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / (MODIFIER * 5)}px)`; + } + + return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / MODIFIER}px)`; + }; + + const getWidth = () => { + const GUTTER = 16; + + if (layout === "hug") { + return triggerWidth; + } + + return triggerWidth - GUTTER * 2; + }; + + const leftTransition = + isSwipeable && swipeStatus === "idle" ? "left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)" : ""; + const widthTransition = "width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)"; + const transitions = [leftTransition, widthTransition].filter(Boolean).join(", "); + + return ( +
+ ); + }, +); +TabIndicator.displayName = "TabIndicator"; diff --git a/component-docs/snippets/checkbox.tsx b/component-docs/snippets/checkbox.tsx new file mode 100644 index 000000000..37fde2669 --- /dev/null +++ b/component-docs/snippets/checkbox.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { type UseCheckboxProps, useCheckbox } from "@seed-design/react-checkbox"; +import { type CheckboxVariantProps, checkbox } from "@seed-design/recipe/checkbox"; +import clsx from "clsx"; +import * as React from "react"; +import type { CSSProperties } from "react"; + +import "@seed-design/stylesheet/checkbox.css"; + +type Assign = Omit & U; + +const visuallyHidden: CSSProperties = { + border: 0, + clip: "rect(0 0 0 0)", + height: "1px", + margin: "-1px", + overflow: "hidden", + padding: 0, + position: "absolute", + whiteSpace: "nowrap", + width: "1px", +}; + +const Checkmark = React.forwardRef>((props, ref) => ( + +)); + +export interface CheckboxProps + extends Assign, UseCheckboxProps>, + CheckboxVariantProps { + label: React.ReactNode; +} + +export const Checkbox = React.forwardRef( + ({ className, size = "medium", label, ...otherProps }, ref) => { + const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } = + useCheckbox(otherProps); + + const classNames = checkbox({ size }); + return ( + + ); + }, +); +Checkbox.displayName = "Checkbox"; diff --git a/component-docs/snippets/chip-tabs.tsx b/component-docs/snippets/chip-tabs.tsx new file mode 100644 index 000000000..fca21778d --- /dev/null +++ b/component-docs/snippets/chip-tabs.tsx @@ -0,0 +1,136 @@ +"use client"; + +import clsx from "clsx"; +import * as React from "react"; +import { + useTabs, + type UseTabsProps, + type TriggerProps, + type ContentProps, + useLazyContents, + type UseLazyContentsProps, +} from "@seed-design/react-tabs"; +import { chipTabs } from "@seed-design/recipe/chipTabs"; +import { chipTab } from "@seed-design/recipe/chipTab"; + +import "@seed-design/stylesheet/chipTab.css"; +import "@seed-design/stylesheet/chipTabs.css"; + +type Assign = Omit & U; + +interface ChipTabsContextValue { + api: ReturnType; + classNames: ReturnType; + shouldRender: (value: string) => boolean; +} + +const ChipTabsContext = React.createContext(null); + +const useChipTabsContext = () => { + const context = React.useContext(ChipTabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +export interface ChipTabsProps + extends Assign, Omit>, + Omit {} + +export const ChipTabs = React.forwardRef((props, ref) => { + const { className, lazyMode, isLazy } = props; + const api = useTabs(props); + const classNames = chipTabs(); + const { rootProps, value, restProps } = api; + const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy }); + + return ( +
+ + {props.children} + +
+ ); +}); +ChipTabs.displayName = "ChipTabs"; + +export const ChipTabTriggerList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames } = useChipTabsContext(); + const { tabTriggerListProps, triggerSize } = api; + const { left } = triggerSize; + const { triggerList } = classNames; + + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); + + React.useEffect(() => { + if (containerRef.current) { + containerRef.current?.scrollTo({ + // NOTE: 27px is half of tab's min-width + left: left - 27, + behavior: "smooth", + }); + } + }, [left]); + + return ( +
+ {children} +
+ ); +}); +ChipTabTriggerList.displayName = "ChipTabTriggerList"; + +export interface ChipTabTriggerProps + extends Assign, Omit> {} + +export const ChipTabTrigger = React.forwardRef( + ({ className, children, value, ...otherProps }, ref) => { + const { api } = useChipTabsContext(); + const { getTabTriggerProps } = api; + const { label, root } = chipTab(); + const { rootProps, labelProps } = getTabTriggerProps({ value }); + + return ( + + ); + }, +); +ChipTabTrigger.displayName = "ChipTabTrigger"; + +export const ChipTabContent = React.forwardRef< + HTMLDivElement, + Assign, ContentProps> +>(({ className, children, value, ...otherProps }, ref) => { + const { api, classNames, shouldRender } = useChipTabsContext(); + const { getTabContentProps } = api; + const { content } = classNames; + const tabContentProps = getTabContentProps({ value }); + const isRender = shouldRender(value); + + return ( +
+ {isRender && children} +
+ ); +}); +ChipTabContent.displayName = "ChipTabContent"; diff --git a/component-docs/snippets/tabs.tsx b/component-docs/snippets/tabs.tsx new file mode 100644 index 000000000..a4fb3d4a1 --- /dev/null +++ b/component-docs/snippets/tabs.tsx @@ -0,0 +1,304 @@ +"use client"; + +import clsx from "clsx"; +import * as React from "react"; +import { + useTabs, + useSwipeable, + type UseTabsProps, + type TriggerProps, + type ContentProps, + useLazyContents, + type UseLazyContentsProps, +} from "@seed-design/react-tabs"; +import { tabs } from "@seed-design/recipe/tabs"; +import { tab } from "@seed-design/recipe/tab"; + +import "@seed-design/stylesheet/tabs.css"; +import "@seed-design/stylesheet/tab.css"; + +type Assign = Omit & U; + +interface TabsContextValue { + api: ReturnType & ReturnType; + classNames: ReturnType; + shouldRender: (value: string) => boolean; + isSwipeable: boolean; + layout: "fill" | "hug"; + size: "small" | "medium"; +} + +const TabsContext = React.createContext(null); + +const useTabsContext = () => { + const context = React.useContext(TabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +export interface TabsProps + extends Assign, UseTabsProps>, + Omit { + /** + * @default "hug" + */ + layout?: "fill" | "hug"; + + /** + * @default "small" + */ + size?: "small" | "medium"; +} + +export const Tabs = React.forwardRef((props, ref) => { + const { + className, + lazyMode, + isLazy, + isSwipeable = false, + layout = "hug", + size = "small", + } = props; + const useTabsProps = useTabs(props); + const useSwipeableProps = useSwipeable({ + isSwipeable, + onSwipeLeftToRight: useTabsProps.movePrev, + onSwipeRightToLeft: useTabsProps.moveNext, + }); + const classNames = tabs({ + layout, + }); + const { rootProps, value, restProps } = useTabsProps; + const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy }); + const api = { + ...useTabsProps, + ...useSwipeableProps, + }; + + return ( +
+ + {props.children} + +
+ ); +}); +Tabs.displayName = "Tabs"; + +export const TabTriggerList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames } = useTabsContext(); + const { tabTriggerListProps, triggerSize } = api; + const { left } = triggerSize; + const { triggerList } = classNames; + + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); + + React.useEffect(() => { + if (containerRef.current) { + containerRef.current?.scrollTo({ + // NOTE: 27px is half of tab's min-width + left: left - 27, + behavior: "smooth", + }); + } + }, [left]); + + return ( +
+ {children} + +
+ ); +}); +TabTriggerList.displayName = "TabTriggerList"; + +export interface TabTriggerProps + extends Assign, TriggerProps> { + /** + * @default false + */ + alert?: boolean; +} + +export const TabTrigger = React.forwardRef( + ({ className, children, value, isDisabled, alert = false, ...otherProps }, ref) => { + const { api, layout, size } = useTabsContext(); + const { getTabTriggerProps } = api; + const { label, notification, root } = tab({ + size, + layout, + }); + const { rootProps, notificationProps, labelProps } = getTabTriggerProps({ value, isDisabled }); + + return ( + + ); + }, +); +TabTrigger.displayName = "TabTrigger"; + +export const TabContentList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames, isSwipeable } = useTabsContext(); + const { + tabContentListProps, + tabContentCameraProps, + getDragProps, + currentTabEnabledIndex, + swipeMoveX, + swipeStatus, + tabEnabledCount, + } = api; + const { contentList, contentCamera } = classNames; + const dragProps = getDragProps(); + + const getCameraTranslateX = () => { + const MODIFIER = 5; + + const currentContentOffsetX = currentTabEnabledIndex * 100; + + if (swipeMoveX > 0 && currentTabEnabledIndex === 0) { + return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`; + } + + if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) { + return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`; + } + + return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`; + }; + + return ( +
+
+ {children} +
+
+ ); +}); +TabContentList.displayName = "TabContentList"; + +export const TabContent = React.forwardRef< + HTMLDivElement, + Assign, ContentProps> +>(({ className, children, value, ...otherProps }, ref) => { + const { api, classNames, shouldRender } = useTabsContext(); + const { getTabContentProps } = api; + const { content } = classNames; + const tabContentProps = getTabContentProps({ value }); + const isRender = shouldRender(value); + + return ( +
+ {isRender && children} +
+ ); +}); +TabContent.displayName = "TabContent"; + +const TabIndicator = React.forwardRef>( + ({ className, ...otherProps }, ref) => { + const { api, classNames, isSwipeable, layout } = useTabsContext(); + const { tabIndicatorProps, triggerSize, currentTabIndex, swipeMoveX, tabCount, swipeStatus } = + api; + const { indicator } = classNames; + const { left: triggerLeft, width: triggerWidth } = triggerSize; + + const getLeft = () => { + const MODIFIER = layout === "hug" ? 10 : 5; + const GUTTER = layout === "fill" ? 16 : 0; + + // 양끝 탭에서 스와이프로 인한 이동은 MODIFIER를 5배로 늘려서 완전 조금 이동하도록 함 + if ( + (swipeMoveX > 0 && currentTabIndex === 0) || + (swipeMoveX < 0 && currentTabIndex === tabCount - 1) + ) { + return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / (MODIFIER * 5)}px)`; + } + + return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / MODIFIER}px)`; + }; + + const getWidth = () => { + const GUTTER = 16; + + if (layout === "hug") { + return triggerWidth; + } + + return triggerWidth - GUTTER * 2; + }; + + const leftTransition = + isSwipeable && swipeStatus === "idle" ? "left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)" : ""; + const widthTransition = "width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)"; + const transitions = [leftTransition, widthTransition].filter(Boolean).join(", "); + + return ( +
+ ); + }, +); +TabIndicator.displayName = "TabIndicator"; diff --git a/component-docs/stackflow/Stack.ts b/component-docs/stackflow/Stack.ts index 596169475..a29e95e94 100644 --- a/component-docs/stackflow/Stack.ts +++ b/component-docs/stackflow/Stack.ts @@ -1,13 +1,14 @@ import { basicUIPlugin } from "@stackflow/plugin-basic-ui"; import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic"; -import { ActivityComponentType, stackflow } from "@stackflow/react/future"; +import { type ActivityComponentType, stackflow } from "@stackflow/react/future"; import { config } from "./stackflow.config"; +import type { Register } from "@stackflow/config"; -interface MakeStackProps { - Activity: ActivityComponentType<"Main">; +interface MakeStackProps { + Activity: ActivityComponentType; } -export const makeStack = (props: MakeStackProps) => { +export const makeStack = (props: MakeStackProps) => { const { Activity } = props; const { Stack, actions, stepActions } = stackflow({ diff --git a/component-docs/styles/f.css.ts b/component-docs/styles/f.css.ts new file mode 100644 index 000000000..49d940fd5 --- /dev/null +++ b/component-docs/styles/f.css.ts @@ -0,0 +1,97 @@ +import { vars } from "@seed-design/design-token"; +import { style } from "@vanilla-extract/css"; + +export const grid = style({ + display: "grid", +}); + +export const flex = style({ + display: "flex", +}); + +export const flexAlignCenter = style([ + flex, + { + alignItems: "center", + }, +]); + +export const flexJustifyCenter = style([ + flex, + { + justifyContent: "center", + }, +]); + +export const flexColumn = style([ + flex, + { + flexDirection: "column", + }, +]); + +export const flex1 = style({ + flex: 1, +}); + +export const posAbs = style({ + position: "absolute", +}); + +export const posRel = style({ + position: "relative", +}); + +export const top0 = style({ + top: 0, +}); + +export const left0 = style({ + left: 0, +}); + +export const fullWidth = style({ + width: "100%", +}); + +export const fullHeight = style({ + height: "100%", +}); + +export const posAbsFull = style([posAbs, top0, left0, fullWidth, fullHeight]); + +export const nowrap = style({ + whiteSpace: "nowrap", +}); + +export const resetButton = style({ + appearance: "none", + border: 0, + padding: 0, + background: "none", + color: vars.$scale.color.gray900, + textAlign: "left", +}); + +export const cursorPointer = style({ + cursor: "pointer", + WebkitTapHighlightColor: "transparent", +}); + +export const overflowHidden = style({ + overflow: "hidden", + transform: "translate3d(0, 0, 0)", + maskImage: "-webkit-radial-gradient(white, black)", +}); + +export const overflowScroll = style({ + overflowY: "scroll", + WebkitOverflowScrolling: "touch", + "::-webkit-scrollbar": { + display: "none", + }, +}); + +export const rootLineHeight = style({ + lineHeight: "1.15", +}); diff --git a/component-docs/styles/index.ts b/component-docs/styles/index.ts new file mode 100644 index 000000000..773ae6c30 --- /dev/null +++ b/component-docs/styles/index.ts @@ -0,0 +1 @@ +export * as f from "./f.css"; diff --git a/component-docs/components/get-started-installation.mdx b/component-docs/templates/get-started-installation.mdx similarity index 100% rename from component-docs/components/get-started-installation.mdx rename to component-docs/templates/get-started-installation.mdx diff --git a/component-docs/components/seed-design-configuration.mdx b/component-docs/templates/seed-design-configuration.mdx similarity index 100% rename from component-docs/components/seed-design-configuration.mdx rename to component-docs/templates/seed-design-configuration.mdx diff --git a/component-docs/tsconfig.snippets.json b/component-docs/tsconfig.snippets.json new file mode 100644 index 000000000..42ff3503e --- /dev/null +++ b/component-docs/tsconfig.snippets.json @@ -0,0 +1,8 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "./tsconfig.json", + "compilerOptions": { + "jsx": "react" + }, + "include": ["snippets/**/*.tsx"] +} diff --git a/examples/stackflow-spa/package.json b/examples/stackflow-spa/package.json index 458a034ac..bc913cf9d 100644 --- a/examples/stackflow-spa/package.json +++ b/examples/stackflow-spa/package.json @@ -3,7 +3,8 @@ "private": true, "scripts": { "build": "vite build", - "dev": "vite --host 0.0.0.0" + "dev": "vite --host 0.0.0.0", + "serve": "vite preview" }, "dependencies": { "@radix-ui/react-slot": "^1.0.2", @@ -11,6 +12,7 @@ "@seed-design/react-popover": "0.0.0", "@seed-design/react-radio-group": "0.0.0", "@seed-design/react-switch": "0.0.0", + "@seed-design/react-tabs": "0.0.0", "@seed-design/react-text-field": "0.0.0", "@seed-design/recipe": "0.0.0", "@seed-design/stylesheet": "1.0.4", diff --git a/examples/stackflow-spa/src/activities/ActivityChipTabs.tsx b/examples/stackflow-spa/src/activities/ActivityChipTabs.tsx new file mode 100644 index 000000000..7c65c61d5 --- /dev/null +++ b/examples/stackflow-spa/src/activities/ActivityChipTabs.tsx @@ -0,0 +1,59 @@ +import type { ActivityComponentType } from "@stackflow/react"; + +import { AppScreen } from "@stackflow/plugin-basic-ui"; +import * as React from "react"; +import { + ChipTabTrigger, + ChipTabTriggerList, + ChipTabs, + ChipTabContent, +} from "../design-system/components"; + +const AcitivitiyChipTabs: ActivityComponentType = () => { + const commonStyle = { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "#eeeeee", + height: "300px", + }; + + return ( + + + + 라벨1 + 라벨2 + 라벨3 + 라벨4 + 라벨5 + 라벨6 + 라벨7 + + + content 1 + + + content 2 + + + content 3 + + + content 4 + + + content 5 + + + content 6 + + + content 7 + + + + ); +}; + +export default AcitivitiyChipTabs; diff --git a/examples/stackflow-spa/src/activities/ActivityHome.tsx b/examples/stackflow-spa/src/activities/ActivityHome.tsx index 3741e8835..552c8e87b 100644 --- a/examples/stackflow-spa/src/activities/ActivityHome.tsx +++ b/examples/stackflow-spa/src/activities/ActivityHome.tsx @@ -20,6 +20,8 @@ const ActivityHome: ActivityComponentType = () => { push("ActivitySwitch", {})}>Switch push("ActivityTextField", {})}>TextField push("ActivityHelpBubble", {})}>HelpBubble + push("ActivityTabs", {})}>Tabs + push("ActivityChipTabs", {})}>ChipTabs
); diff --git a/examples/stackflow-spa/src/activities/ActivityTabs.tsx b/examples/stackflow-spa/src/activities/ActivityTabs.tsx new file mode 100644 index 000000000..c5d95f490 --- /dev/null +++ b/examples/stackflow-spa/src/activities/ActivityTabs.tsx @@ -0,0 +1,129 @@ +import type { ActivityComponentType } from "@stackflow/react"; + +import { AppScreen } from "@stackflow/plugin-basic-ui"; +import { + Tabs, + TabTriggerList, + TabContent, + TabContentList, + TabTrigger, +} from "../design-system/components"; + +const AcitivitiyTabs: ActivityComponentType = () => { + const tabCommonStyle = { + padding: "16px", + backgroundColor: "#f5f5f5", + }; + return ( + + Fill,Medium + + + + 라벨1 + + 라벨2 + + 라벨3 + + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + + Fill,Small + + + + Tab 1 + + Tab 2 + + Tab 3 + + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + + Hug + + + Tab 1 + Tab 2 + Tab 3 + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + + + Many Tabs + + + Tab 1 + Tab 2 + + Tab 333333333333 + + Tab 4 + Tab 55555555555 + Tab 6 + Tab 7 + Tab 8 + + + +
Content 1
+ + +
Content 2
+ + +
Content 3
+ + +
Content 4
+ + +
Content 5
+ + +
Content 6
+ + +
Content 7
+ + +
Content 8
+ + + + + ); +}; + +export default AcitivitiyTabs; diff --git a/examples/stackflow-spa/src/design-system/components/AlertDialog.tsx b/examples/stackflow-spa/src/design-system/components/AlertDialog.tsx index 8d54684b7..e19398604 100644 --- a/examples/stackflow-spa/src/design-system/components/AlertDialog.tsx +++ b/examples/stackflow-spa/src/design-system/components/AlertDialog.tsx @@ -1,5 +1,6 @@ import { dialog } from "@seed-design/recipe/dialog"; -import { useStyleEffect } from "@stackflow/plugin-basic-ui"; +// TODO: useStyleEffect는 어디에? +// import { useStyleEffect } from "@stackflow/plugin-basic-ui"; import { useActions, useActivity } from "@stackflow/react"; import { useRef } from "react"; @@ -23,18 +24,18 @@ export const AlertDialog: React.FC = ({ const containerRef = useRef(null); const backdropRef = useRef(null); - useStyleEffect({ - styleName: "hide", - refs: [containerRef], - }); - useStyleEffect({ - styleName: "offset", - refs: [backdropRef], - }); - useStyleEffect({ - styleName: "swipe-back", - refs: [backdropRef], - }); + // useStyleEffect({ + // styleName: "hide", + // refs: [containerRef], + // }); + // useStyleEffect({ + // styleName: "offset", + // refs: [backdropRef], + // }); + // useStyleEffect({ + // styleName: "swipe-back", + // refs: [backdropRef], + // }); const popLock = useRef(false); @@ -57,7 +58,7 @@ export const AlertDialog: React.FC = ({ }; const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3; - const transitionState = activity?.transitionState ?? "enter-done"; + // const transitionState = activity?.transitionState ?? "enter-done"; const classNames = dialog(); diff --git a/examples/stackflow-spa/src/design-system/components/ChipTabs.tsx b/examples/stackflow-spa/src/design-system/components/ChipTabs.tsx new file mode 100644 index 000000000..5a3fd0dc0 --- /dev/null +++ b/examples/stackflow-spa/src/design-system/components/ChipTabs.tsx @@ -0,0 +1,134 @@ +import clsx from "clsx"; +import * as React from "react"; +import { + useTabs, + type UseTabsProps, + type TriggerProps, + type ContentProps, + useLazyContents, + type UseLazyContentsProps, +} from "@seed-design/react-tabs"; +import { chipTabs } from "@seed-design/recipe/chipTabs"; +import { chipTab } from "@seed-design/recipe/chipTab"; + +import type { Assign } from "../util/types"; + +import "@seed-design/stylesheet/chipTab.css"; +import "@seed-design/stylesheet/chipTabs.css"; + +interface ChipTabsContextValue { + api: ReturnType; + classNames: ReturnType; + shouldRender: (value: string) => boolean; +} + +const ChipTabsContext = React.createContext(null); + +const useChipTabsContext = () => { + const context = React.useContext(ChipTabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +export interface ChipTabsProps + extends Assign, Omit>, + Omit {} + +export const ChipTabs = React.forwardRef((props, ref) => { + const { className, lazyMode, isLazy } = props; + const api = useTabs(props); + const classNames = chipTabs(); + const { rootProps, value, restProps } = api; + const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy }); + + return ( +
+ + {props.children} + +
+ ); +}); +ChipTabs.displayName = "ChipTabs"; + +export const ChipTabTriggerList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames } = useChipTabsContext(); + const { tabTriggerListProps, triggerSize } = api; + const { left } = triggerSize; + const { triggerList } = classNames; + + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); + + React.useEffect(() => { + if (containerRef.current) { + containerRef.current?.scrollTo({ + // NOTE: 27px is half of tab's min-width + left: left - 27, + behavior: "smooth", + }); + } + }, [left]); + + return ( +
+ {children} +
+ ); +}); +ChipTabTriggerList.displayName = "ChipTabTriggerList"; + +export interface ChipTabTriggerProps + extends Assign, Omit> {} + +export const ChipTabTrigger = React.forwardRef( + ({ className, children, value, ...otherProps }, ref) => { + const { api } = useChipTabsContext(); + const { getTabTriggerProps } = api; + const { label, root } = chipTab(); + const { rootProps, labelProps } = getTabTriggerProps({ value }); + + return ( + + ); + }, +); +ChipTabTrigger.displayName = "ChipTabTrigger"; + +export const ChipTabContent = React.forwardRef< + HTMLDivElement, + Assign, ContentProps> +>(({ className, children, value, ...otherProps }, ref) => { + const { api, classNames, shouldRender } = useChipTabsContext(); + const { getTabContentProps } = api; + const { content } = classNames; + const tabContentProps = getTabContentProps({ value }); + const isRender = shouldRender(value); + + return ( +
+ {isRender && children} +
+ ); +}); +ChipTabContent.displayName = "ChipTabContent"; diff --git a/examples/stackflow-spa/src/design-system/components/Tabs.tsx b/examples/stackflow-spa/src/design-system/components/Tabs.tsx new file mode 100644 index 000000000..eb9db0a5a --- /dev/null +++ b/examples/stackflow-spa/src/design-system/components/Tabs.tsx @@ -0,0 +1,302 @@ +import clsx from "clsx"; +import * as React from "react"; +import { + useTabs, + useSwipeable, + type UseTabsProps, + type TriggerProps, + type ContentProps, + useLazyContents, + type UseLazyContentsProps, +} from "@seed-design/react-tabs"; +import { tabs } from "@seed-design/recipe/tabs"; +import { tab } from "@seed-design/recipe/tab"; + +import type { Assign } from "../util/types"; + +import "@seed-design/stylesheet/tabs.css"; +import "@seed-design/stylesheet/tab.css"; + +interface TabsContextValue { + api: ReturnType & ReturnType; + classNames: ReturnType; + shouldRender: (value: string) => boolean; + isSwipeable: boolean; + layout: "fill" | "hug"; + size: "small" | "medium"; +} + +const TabsContext = React.createContext(null); + +const useTabsContext = () => { + const context = React.useContext(TabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +export interface TabsProps + extends Assign, UseTabsProps>, + Omit { + /** + * @default "hug" + */ + layout?: "fill" | "hug"; + + /** + * @default "small" + */ + size?: "small" | "medium"; +} + +export const Tabs = React.forwardRef((props, ref) => { + const { + className, + lazyMode, + isLazy, + isSwipeable = false, + layout = "hug", + size = "small", + } = props; + const useTabsProps = useTabs(props); + const useSwipeableProps = useSwipeable({ + isSwipeable, + onSwipeLeftToRight: useTabsProps.movePrev, + onSwipeRightToLeft: useTabsProps.moveNext, + }); + const classNames = tabs({ + layout, + }); + const { rootProps, value, restProps } = useTabsProps; + const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy }); + const api = { + ...useTabsProps, + ...useSwipeableProps, + }; + + return ( +
+ + {props.children} + +
+ ); +}); +Tabs.displayName = "Tabs"; + +export const TabTriggerList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames } = useTabsContext(); + const { tabTriggerListProps, triggerSize } = api; + const { left } = triggerSize; + const { triggerList } = classNames; + + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement); + + React.useEffect(() => { + if (containerRef.current) { + containerRef.current?.scrollTo({ + // NOTE: 27px is half of tab's min-width + left: left - 27, + behavior: "smooth", + }); + } + }, [left]); + + return ( +
+ {children} + +
+ ); +}); +TabTriggerList.displayName = "TabTriggerList"; + +export interface TabTriggerProps + extends Assign, TriggerProps> { + /** + * @default false + */ + alert?: boolean; +} + +export const TabTrigger = React.forwardRef( + ({ className, children, value, isDisabled, alert = false, ...otherProps }, ref) => { + const { api, layout, size } = useTabsContext(); + const { getTabTriggerProps } = api; + const { label, notification, root } = tab({ + size, + layout, + }); + const { rootProps, notificationProps, labelProps } = getTabTriggerProps({ value, isDisabled }); + + return ( + + ); + }, +); +TabTrigger.displayName = "TabTrigger"; + +export const TabContentList = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const { api, classNames, isSwipeable } = useTabsContext(); + const { + tabContentListProps, + tabContentCameraProps, + getDragProps, + currentTabEnabledIndex, + swipeMoveX, + swipeStatus, + tabEnabledCount, + } = api; + const { contentList, contentCamera } = classNames; + const dragProps = getDragProps(); + + const getCameraTranslateX = () => { + const MODIFIER = 5; + + const currentContentOffsetX = currentTabEnabledIndex * 100; + + if (swipeMoveX > 0 && currentTabEnabledIndex === 0) { + return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`; + } + + if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) { + return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`; + } + + return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`; + }; + + return ( +
+
+ {children} +
+
+ ); +}); +TabContentList.displayName = "TabContentList"; + +export const TabContent = React.forwardRef< + HTMLDivElement, + Assign, ContentProps> +>(({ className, children, value, ...otherProps }, ref) => { + const { api, classNames, shouldRender } = useTabsContext(); + const { getTabContentProps } = api; + const { content } = classNames; + const tabContentProps = getTabContentProps({ value }); + const isRender = shouldRender(value); + + return ( +
+ {isRender && children} +
+ ); +}); +TabContent.displayName = "TabContent"; + +const TabIndicator = React.forwardRef>( + ({ className, ...otherProps }, ref) => { + const { api, classNames, isSwipeable, layout } = useTabsContext(); + const { tabIndicatorProps, triggerSize, currentTabIndex, swipeMoveX, tabCount, swipeStatus } = + api; + const { indicator } = classNames; + const { left: triggerLeft, width: triggerWidth } = triggerSize; + + const getLeft = () => { + const MODIFIER = layout === "hug" ? 10 : 5; + const GUTTER = layout === "fill" ? 16 : 0; + + // 양끝 탭에서 스와이프로 인한 이동은 MODIFIER를 5배로 늘려서 완전 조금 이동하도록 함 + if ( + (swipeMoveX > 0 && currentTabIndex === 0) || + (swipeMoveX < 0 && currentTabIndex === tabCount - 1) + ) { + return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / (MODIFIER * 5)}px)`; + } + + return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / MODIFIER}px)`; + }; + + const getWidth = () => { + const GUTTER = 16; + + if (layout === "hug") { + return triggerWidth; + } + + return triggerWidth - GUTTER * 2; + }; + + const leftTransition = + isSwipeable && swipeStatus === "idle" ? "left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)" : ""; + const widthTransition = "width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)"; + const transitions = [leftTransition, widthTransition].filter(Boolean).join(", "); + + return ( +
+ ); + }, +); +TabIndicator.displayName = "TabIndicator"; diff --git a/examples/stackflow-spa/src/design-system/components/index.ts b/examples/stackflow-spa/src/design-system/components/index.ts index ffa8bff97..0fa213104 100644 --- a/examples/stackflow-spa/src/design-system/components/index.ts +++ b/examples/stackflow-spa/src/design-system/components/index.ts @@ -10,3 +10,5 @@ export * from "./RadioGroup"; export * from "./Text"; export * from "./Switch"; export * from "./TextField"; +export * from "./Tabs"; +export * from "./ChipTabs"; diff --git a/examples/stackflow-spa/src/index.tsx b/examples/stackflow-spa/src/index.tsx index 1aa33a9af..7672c5a5c 100644 --- a/examples/stackflow-spa/src/index.tsx +++ b/examples/stackflow-spa/src/index.tsx @@ -8,5 +8,6 @@ import ReactDOM from "react-dom/client"; import App from "./App"; +// biome-ignore lint/style/noNonNullAssertion: const root = ReactDOM.createRoot(document.getElementById("root")!); root.render(); diff --git a/examples/stackflow-spa/src/stackflow/Stack.tsx b/examples/stackflow-spa/src/stackflow/Stack.tsx index 911656544..7d54ff89b 100644 --- a/examples/stackflow-spa/src/stackflow/Stack.tsx +++ b/examples/stackflow-spa/src/stackflow/Stack.tsx @@ -30,6 +30,8 @@ const { Stack, useFlow, useStepFlow } = stackflow({ ActivityCallout: React.lazy(() => import("../activities/ActivityCallout")), ActivitySwitch: React.lazy(() => import("../activities/ActivitySwitch")), ActivityHelpBubble: React.lazy(() => import("../activities/ActivityHelpBubble")), + ActivityTabs: React.lazy(() => import("../activities/ActivityTabs")), + ActivityChipTabs: React.lazy(() => import("../activities/ActivityChipTabs")), ActivityNotFound, }, plugins: [ @@ -58,6 +60,8 @@ const { Stack, useFlow, useStepFlow } = stackflow({ ActivityChip: "/chip", ActivityCallout: "/callout", ActivitySwitch: "/switch", + ActivityTabs: "/tabs", + ActivityChipTabs: "/chipTabs", ActivityNotFound: "/404", ActivityTextField: "/text-field", ActivityHelpBubble: "/help-bubble", diff --git a/package.json b/package.json index 39d635779..2c55eb6db 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "build": "ultra -r --filter \"packages/*\" build", "build:dts": "ultra -r --build build:dts", "build:style": "ultra -r --build build:style", + "build:style:re": "ultra -r --rebuild build:style", + "build:headless": "ultra -r --filter 'packages/react-headless/*' build", "build-only-package": "ultra -r --filter 'packages/*' build", "generate": "ultra -r generate", "clean": "ultra -r clean", diff --git a/packages/component-spec/artifacts/box-button.yaml b/packages/component-spec/artifacts/box-button.yaml index 2cc0a9ce8..98e588229 100644 --- a/packages/component-spec/artifacts/box-button.yaml +++ b/packages/component-spec/artifacts/box-button.yaml @@ -5,17 +5,17 @@ base: variant=brand: enabled: root: - color: "$color.bg.brand-emphasis" + color: "$color.bg.brand-solid" label: color: "$color.fg.static-white" prefixIcon: color: "$color.fg.static-white" pressed: root: - color: "$color.bg.brand-emphasis-pressed" + color: "$color.bg.brand-solid-pressed" disabled: root: - color: "$color.bg.disabled" + color: "$color.bg.disabled-1" variant=brand soft: enabled: root: diff --git a/packages/component-spec/artifacts/chip-tab.yaml b/packages/component-spec/artifacts/chip-tab.yaml new file mode 100644 index 000000000..9ea73b7cd --- /dev/null +++ b/packages/component-spec/artifacts/chip-tab.yaml @@ -0,0 +1,28 @@ +base: + enabled: + root: + paddingX: $unit[3.5] + paddingY: $unit[2] + cornerRadius: $radii.full + minHeight: 36px + label: + color: $color.fg.neutral + fontSize: $font-size[100] + fontWeight: $font-weight.bold + enabled,pressed: + root: + color: $color.bg.layer-1-pressed + selected: + root: + color: $color.bg.neutral-inverted + label: + color: $color.fg.neutral-inverted + selected,pressed: + root: + color: $color.bg.neutral-inverted-pressed + disabled: + label: + color: $color.fg.disabled-1 + selected,disabled: + root: + color: $color.bg.disabled-2 diff --git a/packages/component-spec/artifacts/chip-tablist.yaml b/packages/component-spec/artifacts/chip-tablist.yaml new file mode 100644 index 000000000..1a2cd8b0e --- /dev/null +++ b/packages/component-spec/artifacts/chip-tablist.yaml @@ -0,0 +1,4 @@ +base: + enabled: + root: + paddingX: $unit[4] # global gutter diff --git a/packages/component-spec/artifacts/tab.yaml b/packages/component-spec/artifacts/tab.yaml index 04f7885b6..27c9caf8f 100644 --- a/packages/component-spec/artifacts/tab.yaml +++ b/packages/component-spec/artifacts/tab.yaml @@ -5,8 +5,8 @@ base: notification: size: $unit[1] cornerRadius: $radii.full - color: $color.bg.brand - paddingLeft: $unit[0.5] + color: $color.bg.brand-solid + marginLeft: $unit[0.5] selected: label: color: $color.fg.neutral diff --git a/packages/component-spec/artifacts/tablist.yaml b/packages/component-spec/artifacts/tablist.yaml index 78e1b6bfa..f551e7795 100644 --- a/packages/component-spec/artifacts/tablist.yaml +++ b/packages/component-spec/artifacts/tablist.yaml @@ -1,6 +1,7 @@ base: enabled: root: + color: $color.bg.layer-1 strokeBottomWidth: 1px strokeColor: $color.stroke.neutral indicator: @@ -9,7 +10,7 @@ base: layout=hug: enabled: root: - paddingX: $spacing.global-gutter + paddingX: $unit[4] # global gutter layout=fill: enabled: root: diff --git a/packages/react-headless/tabs/package.json b/packages/react-headless/tabs/package.json new file mode 100644 index 000000000..4986a9ce6 --- /dev/null +++ b/packages/react-headless/tabs/package.json @@ -0,0 +1,48 @@ +{ + "name": "@seed-design/react-tabs", + "version": "0.0.0", + "repository": { + "type": "git", + "url": "git+https://github.com/daangn/seed-design.git", + "directory": "packages/react-headless/tabs" + }, + "sideEffects": false, + "exports": { + ".": { + "types": "./lib/index.d.ts", + "require": "./lib/index.js", + "import": "./lib/index.mjs" + } + }, + "main": "./lib/index.js", + "files": [ + "lib", + "src" + ], + "scripts": { + "prepack": "rm -rf lib && yarn build", + "build": "nanobundle build" + }, + "dependencies": { + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-size": "^1.1.0", + "@seed-design/dom-utils": "0.0.0", + "@use-gesture/react": "^10.3.1" + }, + "devDependencies": { + "nanobundle": "^1.6.0" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + }, + "publishConfig": { + "access": "public" + }, + "ultra": { + "concurrent": [ + "dev", + "build" + ] + } +} diff --git a/packages/react-headless/tabs/src/dom.ts b/packages/react-headless/tabs/src/dom.ts new file mode 100644 index 000000000..012f2c283 --- /dev/null +++ b/packages/react-headless/tabs/src/dom.ts @@ -0,0 +1,94 @@ +/* ID ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- */ + +export const getRootId = (id: string) => `tabs:${id}:root`; +export const getTabTriggerRootId = (value: string, id: string) => + `tabs:${value}:${id}:trigger-root`; +export const getTabTriggerLabelId = (value: string, id: string) => + `tabs:${value}:${id}:trigger-label`; +export const getTabTriggerNotificationId = (value: string, id: string) => + `tabs:${value}:${id}:trigger-notification`; +export const getTabTriggerListId = (id: string) => `tabs:${id}:trigger-list`; +export const getTabContentId = (value: string, id: string) => `tabs:${value}:${id}:content`; +export const getTabContentListId = (id: string) => `tabs:${id}:content-list`; +export const getTabContentCameraId = (id: string) => `tabs:${id}:content-camera`; +export const getIndicatorId = (id: string) => `tabs:${id}:indicator`; + +/* Element ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- */ + +const isClient = typeof window === "object"; + +export const getRootEl = (id: string) => (isClient ? document.getElementById(getRootId(id)) : null); +export const getTabTriggerListEl = (id: string) => + isClient ? document.getElementById(getTabTriggerListId(id)) : null; +export const getTabTriggerEl = (value: string, id: string) => + isClient ? document.getElementById(getTabTriggerRootId(value, id)) : null; +export const getTabContentEl = (value: string, id: string) => + isClient ? document.getElementById(getTabContentId(value, id)) : null; +export const getTabContentListEl = (id: string) => + isClient ? document.getElementById(getTabContentListId(id)) : null; +export const getTabContentCameraEl = (id: string) => + isClient ? document.getElementById(getTabContentCameraId(id)) : null; +export const getIndicatorEl = (id: string) => + isClient ? document.getElementById(getIndicatorId(id)) : null; + +export const getDisabledElements = (id: string) => { + const triggerListId = getTabTriggerListId(id); + const triggerListEl = getTabTriggerListEl(id); + const selector = `[role=tab][data-ownedby='${triggerListId}'][aria-disabled=true]`; + return queryAll(triggerListEl, selector); +}; + +/* Utils ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- */ + +type Root = Document | Element | null | undefined; + +export function queryAll(root: Root, selector: string) { + return Array.from(root?.querySelectorAll(selector) ?? []); +} + +export function query(root: Root, selector: string) { + return root?.querySelector(selector) ?? null; +} + +export type ItemToId = (v: T) => string; + +export const defaultItemToId = (v: T) => v.id; +export function itemById( + v: T[], + id: string, + itemToId: ItemToId = defaultItemToId, +) { + return v.find((item) => itemToId(item) === id); +} + +export const getAllValues = (id: string) => { + const el = getTabTriggerListEl(id); + + if (!el) return []; + return Array.from(el.children) + .map((child) => child.getAttribute("data-value")) + .filter(Boolean); +}; + +export const getEnabledValues = (id: string) => { + const el = getTabTriggerListEl(id); + + if (!el) return []; + return Array.from(el.children) + .filter((child) => !child.hasAttribute("aria-disabled")) + .map((child) => child.getAttribute("data-value")) + .filter(Boolean); +}; + +export const getTabIndex = (value: string, id: string) => { + const values = getAllValues(id); + return values.indexOf(value); +}; + +export const getTabIndexOnlyEnabled = (value: string, id: string) => { + const values = getEnabledValues(id); + return values.indexOf(value); +}; diff --git a/packages/react-headless/tabs/src/index.ts b/packages/react-headless/tabs/src/index.ts new file mode 100644 index 000000000..06a7a93db --- /dev/null +++ b/packages/react-headless/tabs/src/index.ts @@ -0,0 +1,9 @@ +import { useTabs } from "./useTabs"; +import { useLazyContents, type UseLazyContentsProps } from "./useLazyContents"; +import { useSwipeable } from "./useSwipeable"; + +import type { ContentProps, TriggerProps, UseTabsProps } from "./types"; +import type { UseSwipeableProps } from "./useSwipeable"; + +export { useLazyContents, useTabs, useSwipeable }; +export type { ContentProps, TriggerProps, UseTabsProps, UseLazyContentsProps, UseSwipeableProps }; diff --git a/packages/react-headless/tabs/src/types.ts b/packages/react-headless/tabs/src/types.ts new file mode 100644 index 000000000..65ee93e5e --- /dev/null +++ b/packages/react-headless/tabs/src/types.ts @@ -0,0 +1,61 @@ +export type Vector2 = [number, number]; + +export interface UseTabsStateProps { + value?: string; + defaultValue?: string; + onValueChange?: (value: string) => void; +} + +export interface UseTabsProps extends UseTabsStateProps { + /** + * tab swipe 기능 활성화 여부 + * @default false + */ + isSwipeable?: boolean; + + /** + * @default "horizontal" + */ + orientation?: "horizontal" | "vertical"; + + /** + * @default "hug" + */ + layout?: "fill" | "hug"; + + swipeConfig?: { + /** + * @default 0.3 + * The minimum velocity per axis (in pixels / ms) the drag gesture needs to + * reach before the pointer is released. + */ + velocity?: number | Vector2; + /** + * @default 50 + * The minimum distance per axis (in pixels) the drag gesture needs to + * travel to trigger a swipe. Defaults to 50. + */ + distance?: number | Vector2; + /** + * @default 250 + * The maximum duration in milliseconds that a swipe is detected. Defaults + * to 250. + */ + duration?: number; + }; +} + +export interface TriggerProps { + value: string; + isDisabled?: boolean; +} + +export interface ContentProps { + value: string; + + /** + * @default "keep" + * @description 실제 value에 해당하는 컨텐츠를 보여줄 때, 다른 컨텐츠를 숨길지 여부 + */ + visibilityMode?: "hidden" | "keep"; +} diff --git a/packages/react-headless/tabs/src/useLazyContents.test.tsx b/packages/react-headless/tabs/src/useLazyContents.test.tsx new file mode 100644 index 000000000..0c69fae9c --- /dev/null +++ b/packages/react-headless/tabs/src/useLazyContents.test.tsx @@ -0,0 +1,223 @@ +import "@testing-library/jest-dom/vitest"; +import { cleanup, render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { afterEach, describe, expect, it } from "vitest"; + +import type { ReactElement } from "react"; +import * as React from "react"; + +import { + useLazyContents, + useTabs, + type ContentProps, + type TriggerProps, + type UseLazyContentsProps, + type UseTabsProps, +} from "./index"; + +afterEach(cleanup); + +/** + * @see https://github.com/ZeeCoder/use-resize-observer/issues/40#issuecomment-644536259 + * useSize에서 사용하는 ResizeObserver를 mock으로 대체합니다. + */ +class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +} + +function setUp(jsx: ReactElement) { + return { + user: userEvent.setup(), + ...render(jsx), + }; +} + +const TabsContext = React.createContext<{ + api: ReturnType; + shouldRender?: (value: string) => boolean; +} | null>(null); + +const useTabsContext = () => { + const context = React.useContext(TabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +function TabsWithLazy( + props: React.PropsWithChildren>, +) { + const api = useTabs(props); + const { rootProps, value } = api; + const { shouldRender } = useLazyContents({ + currentValue: value, + lazyMode: props.lazyMode, + isLazy: props.isLazy, + }); + + return ( +
+ {props.children} +
+ ); +} + +function TabTriggerList(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { tabTriggerListProps } = api; + return
{props.children}
; +} + +function TabTrigger(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { getTabTriggerProps } = api; + const { labelProps, notificationProps, rootProps } = getTabTriggerProps(props); + + return ( + + ); +} + +function TabContentList(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { tabContentListProps, tabContentCameraProps } = api; + return ( +
+
{props.children}
+
+ ); +} + +function TabContentWithLazy(props: React.PropsWithChildren) { + const { api, shouldRender } = useTabsContext(); + const { getTabContentProps } = api; + const tabContentProps = getTabContentProps(props); + + return
{shouldRender(props.value) && props.children}
; +} + +const tabs = { + tab1: { + value: "Tab 1", + label: "Label 1", + content: "Content 1", + }, + tab2: { + value: "Tab 2", + label: "Label 2", + content: "Content 2", + }, + tab3: { + value: "Tab 3", + label: "Label 3", + content: "Content 3", + }, +}; + +function LazyTabs(props: UseTabsProps & Omit) { + return ( + + + {Object.values(tabs).map(({ value, label }) => ( + + {label} + + ))} + + + {Object.values(tabs).map(({ value, content }) => ( + + {content} + + ))} + + + ); +} + +describe("useLazyContents", () => { + window.ResizeObserver = ResizeObserver; + + it("should render all tabs when isLazy=false, lazyMode='keepMounted'", async () => { + const { queryByText, user } = setUp(); + + await user.click(queryByText(tabs.tab1.label)); + + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).toBeInTheDocument(); + }); + + it("should render all tabs when isLazy=false, lazyMode='unmount'", async () => { + const { queryByText, user } = setUp(); + + await user.click(queryByText(tabs.tab1.label)); + + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).toBeInTheDocument(); + }); + + it("should only render first tab when isLazy=true, lazyMode='keepMounted'", async () => { + const { queryByText, user } = setUp(); + + await user.click(queryByText(tabs.tab1.label)); + + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).not.toBeInTheDocument(); + }); + + it("should render all tabs after all tabs was selected when isLazy=true, lazyMode='keepMounted'", async () => { + const { queryByText, user } = setUp(); + + await user.click(queryByText(tabs.tab1.label)); + + // only render tab1 + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).not.toBeInTheDocument(); + expect(queryByText(tabs.tab3.content)).not.toBeInTheDocument(); + + await user.click(queryByText(tabs.tab2.label)); + + // render tab1 and tab2 + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab3.content)).not.toBeInTheDocument(); + + await user.click(queryByText(tabs.tab3.label)); + + // render tab1, tab2 and tab3 + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab3.content)).toBeInTheDocument(); + }); + + it("should render only selected tab when isLazy=true, lazyMode='unmount'", async () => { + const { queryByText, user } = setUp(); + + await user.click(queryByText(tabs.tab1.label)); + + // only render tab1 + expect(queryByText(tabs.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).not.toBeInTheDocument(); + expect(queryByText(tabs.tab3.content)).not.toBeInTheDocument(); + + await user.click(queryByText(tabs.tab2.label)); + + // only render tab2 + expect(queryByText(tabs.tab1.content)).not.toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).toBeInTheDocument(); + expect(queryByText(tabs.tab3.content)).not.toBeInTheDocument(); + + await user.click(queryByText(tabs.tab3.label)); + + // only render tab3 + expect(queryByText(tabs.tab1.content)).not.toBeInTheDocument(); + expect(queryByText(tabs.tab2.content)).not.toBeInTheDocument(); + expect(queryByText(tabs.tab3.content)).toBeInTheDocument(); + }); +}); diff --git a/packages/react-headless/tabs/src/useLazyContents.ts b/packages/react-headless/tabs/src/useLazyContents.ts new file mode 100644 index 000000000..80ad34432 --- /dev/null +++ b/packages/react-headless/tabs/src/useLazyContents.ts @@ -0,0 +1,55 @@ +import { useEffect, useState } from "react"; + +export interface UseLazyContentsProps { + currentValue: string; + + isLazy?: boolean; + + lazyMode?: "keepMounted" | "unmount"; +} + +interface LazyOptions { + enabled?: boolean; + isSelected?: boolean; + wasSelected?: boolean; + mode?: UseLazyContentsProps["lazyMode"]; +} + +function lazyDisclosure(options: LazyOptions) { + const { enabled, isSelected, wasSelected, mode = "unmount" } = options; + + if (!enabled) return true; + + // if the disclosure is selected, render the disclosure's content + if (isSelected) return true; + + // if the disclosure was selected but not active, keep its content active + if (mode === "keepMounted" && wasSelected) return true; + + return false; +} + +export function useLazyContents(props: UseLazyContentsProps) { + const { currentValue, isLazy, lazyMode } = props; + const [previousValues, setPreviousValues] = useState>({}); + + useEffect(() => { + setPreviousValues((prev) => ({ + ...prev, + [currentValue]: true, + })); + }, [currentValue]); + + function shouldRender(value: string): boolean { + return lazyDisclosure({ + enabled: isLazy, + isSelected: value === currentValue, + wasSelected: previousValues[value], + mode: lazyMode, + }); + } + + return { + shouldRender, + }; +} diff --git a/packages/react-headless/tabs/src/useSwipeable.ts b/packages/react-headless/tabs/src/useSwipeable.ts new file mode 100644 index 000000000..37bb11cfa --- /dev/null +++ b/packages/react-headless/tabs/src/useSwipeable.ts @@ -0,0 +1,113 @@ +import * as React from "react"; + +import { type FullGestureState, useGesture } from "@use-gesture/react"; + +interface UseSwipeableStateProps { + /** + * tab swipe 기능 활성화 여부 + * @default true + */ + isSwipeable?: boolean; +} + +const useSwipeableState = (props: UseSwipeableStateProps) => { + const { isSwipeable } = props; + const [swipeStatus, setSwipeStatus] = React.useState<"idle" | "dragging">("idle"); + const [swipeMoveX, setSwipeMoveX] = React.useState(0); + + return { + swipeStatus, + swipeMoveX, + onDrag: ( + state: Omit, "event"> & { + event: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent; + }, + ) => { + if (!isSwipeable) return; + + setSwipeMoveX(state.movement[0]); + }, + onDragStart: () => { + if (!isSwipeable) return; + + setSwipeStatus("dragging"); + }, + onDragEnd: () => { + if (!isSwipeable) return; + + setSwipeStatus("idle"); + setSwipeMoveX(0); + }, + }; +}; + +export type Vector2 = [number, number]; + +export interface UseSwipeableProps extends UseSwipeableStateProps { + onSwipeLeftToRight?: () => void; + onSwipeRightToLeft?: () => void; + + swipeConfig?: { + /** + * @default 0.3 + * The minimum velocity per axis (in pixels / ms) the drag gesture needs to + * reach before the pointer is released. + */ + velocity?: number | Vector2; + /** + * @default 50 + * The minimum distance per axis (in pixels) the drag gesture needs to + * travel to trigger a swipe. Defaults to 50. + */ + distance?: number | Vector2; + /** + * @default 250 + * The maximum duration in milliseconds that a swipe is detected. Defaults + * to 250. + */ + duration?: number; + }; +} + +export const useSwipeable = (props: UseSwipeableProps) => { + const { isSwipeable = true, swipeConfig, onSwipeLeftToRight, onSwipeRightToLeft } = props; + + const { onDrag, onDragEnd, onDragStart, swipeMoveX, swipeStatus } = useSwipeableState({ + isSwipeable, + }); + + const getDragProps = useGesture( + { + onDragStart, + + onDragEnd: ({ swipe: [swipeX] }) => { + if (!isSwipeable) return; + + if (swipeX === -1) onSwipeRightToLeft?.(); + + if (swipeX === 1) onSwipeLeftToRight?.(); + + onDragEnd(); + }, + + onDrag, + }, + { + drag: { + preventScrollAxis: "y", + preventDefault: true, + swipe: { + distance: swipeConfig?.distance || 50, + velocity: swipeConfig?.velocity || 0.3, + duration: swipeConfig?.duration || 250, + }, + }, + }, + ); + + return { + swipeMoveX, + swipeStatus, + getDragProps, + }; +}; diff --git a/packages/react-headless/tabs/src/useTabs.test.tsx b/packages/react-headless/tabs/src/useTabs.test.tsx new file mode 100644 index 000000000..c39746dfb --- /dev/null +++ b/packages/react-headless/tabs/src/useTabs.test.tsx @@ -0,0 +1,188 @@ +import "@testing-library/jest-dom/vitest"; +import { cleanup, render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { afterEach, describe, expect, it, vi } from "vitest"; + +import type { ReactElement } from "react"; +import * as React from "react"; + +import { useTabs, type ContentProps, type TriggerProps, type UseTabsProps } from "./index"; + +function setUp(jsx: ReactElement) { + return { + user: userEvent.setup(), + ...render(jsx), + }; +} + +const TabsContext = React.createContext<{ + api: ReturnType; + shouldRender?: (value: string) => boolean; +} | null>(null); + +const useTabsContext = () => { + const context = React.useContext(TabsContext); + if (!context) { + throw new Error("Tabs cannot be rendered outside the Tabs"); + } + return context; +}; + +function Tabs(props: React.PropsWithChildren) { + const api = useTabs(props); + const { rootProps } = api; + + return ( +
+ {props.children} +
+ ); +} + +function TabTriggerList(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { tabTriggerListProps } = api; + return
{props.children}
; +} + +function TabTrigger(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { getTabTriggerProps } = api; + const { labelProps, notificationProps, rootProps } = getTabTriggerProps(props); + + return ( + + ); +} + +function TabContentList(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { tabContentListProps, tabContentCameraProps } = api; + return ( +
+
{props.children}
+
+ ); +} + +function TabContent(props: React.PropsWithChildren) { + const { api } = useTabsContext(); + const { getTabContentProps } = api; + const tabContentProps = getTabContentProps(props); + + return
{props.children}
; +} + +interface TabItem extends TriggerProps { + value: string; + label: string; + content: string; +} + +function UncontrolledTabs({ + items, + tabsProps, +}: { items: Record; tabsProps: UseTabsProps }) { + return ( + + + {Object.values(items).map(({ value, label, ...restProps }) => ( + + {label} + + ))} + + + {Object.values(items).map(({ value, content }) => ( + + {content} + + ))} + + + ); +} + +// ------------------------------------------------------------------- // +// ------------------------------ Tests ------------------------------ // +// ------------------------------------------------------------------- // + +afterEach(cleanup); + +describe("useTabs", () => { + const tabItems: Record = { + tab1: { + value: "Tab 1", + label: "Label 1", + content: "Content 1", + }, + tab2: { + value: "Tab 2", + label: "Label 2", + content: "Content 2", + }, + tab3: { + value: "Tab 3", + label: "Label 3", + content: "Content 3", + }, + }; + + it("should render the tabs", () => { + const { queryByText } = setUp( + , + ); + + expect(queryByText(tabItems.tab1.label)).toBeInTheDocument(); + expect(queryByText(tabItems.tab2.label)).toBeInTheDocument(); + expect(queryByText(tabItems.tab1.content)).toBeInTheDocument(); + expect(queryByText(tabItems.tab2.content)).toBeInTheDocument(); + }); + + describe("disabled tab test", () => { + const tabItemsWithDisabled: Record = { + tab1: { + value: "Tab 1", + label: "Label 1", + content: "Content 1", + }, + tab2: { + value: "Tab 2", + label: "Label 2", + content: "Content 2", + isDisabled: true, + }, + tab3: { + value: "Tab 3", + label: "Label 3", + content: "Content 3", + }, + }; + + it("should not trigger the disabled tab", async () => { + const { queryByText, user } = setUp( + , + ); + + const disabledTrigger = queryByText(tabItemsWithDisabled.tab2.label); + + await user.click(disabledTrigger); + + expect(disabledTrigger).toHaveAttribute("aria-disabled"); + expect(disabledTrigger).not.toHaveAttribute("aria-selected"); + }); + }); +}); diff --git a/packages/react-headless/tabs/src/useTabs.ts b/packages/react-headless/tabs/src/useTabs.ts new file mode 100644 index 000000000..61a75897c --- /dev/null +++ b/packages/react-headless/tabs/src/useTabs.ts @@ -0,0 +1,233 @@ +import { useControllableState } from "@radix-ui/react-use-controllable-state"; +import { ariaAttr, buttonProps, dataAttr, elementProps } from "@seed-design/dom-utils"; +import * as React from "react"; +import * as dom from "./dom"; +import type { ContentProps, TriggerProps, UseTabsProps, UseTabsStateProps } from "./types"; + +import { useSize } from "@radix-ui/react-use-size"; + +function useTabsState(props: UseTabsStateProps & { id: string }) { + const [value, setValue] = useControllableState({ + prop: props.value, + defaultProp: props.defaultValue, + onChange: props.onValueChange, + }); + const [hoveredValue, setHoveredValue] = React.useState(null); + const [activeValue, setActiveValue] = React.useState(null); + const [focusedValue, setFocusedValue] = React.useState(null); + const [isFocusVisible, setIsFocusVisible] = React.useState(false); + const triggerEl = dom.getTabTriggerEl(value, props.id); + const triggerSize = useSize(triggerEl); + + const tabValues = dom.getAllValues(props.id); + const tabEnabledValues = dom.getEnabledValues(props.id); + const currentTabIndex = dom.getTabIndex(value, props.id); + const currentTabEnabledIndex = dom.getTabIndexOnlyEnabled(value, props.id); + + const events = { + moveNext: () => { + const isLast = currentTabEnabledIndex === tabEnabledValues.length - 1; + if (isLast) return; + + const nextIndex = (tabEnabledValues.indexOf(value) + 1) % tabEnabledValues.length; + setValue(tabEnabledValues[nextIndex]); + }, + movePrev: () => { + const isFirst = currentTabEnabledIndex === 0; + if (isFirst) return; + + const prevIndex = + (tabEnabledValues.indexOf(value) - 1 + tabEnabledValues.length) % tabEnabledValues.length; + setValue(tabEnabledValues[prevIndex]); + }, + setValue, + setHoveredValue, + setActiveValue, + setFocusedValue, + setIsFocusVisible, + }; + + return { + value, + triggerSize: { + width: triggerSize?.width || 0, + height: triggerSize?.height || 0, + left: triggerEl?.offsetLeft || 0, + }, + hoveredValue, + activeValue, + focusedValue, + isFocusVisible, + currentTabIndex, + currentTabEnabledIndex, + tabValues, + tabEnabledValues, + events, + }; +} + +export function useTabs(props: UseTabsProps) { + const id = React.useId(); + const { + value, + currentTabIndex, + currentTabEnabledIndex, + events, + tabValues, + tabEnabledValues, + triggerSize, + activeValue, + focusedValue, + hoveredValue, + isFocusVisible, + } = useTabsState({ + id, + ...props, + }); + const { + value: omitValue, + defaultValue: omitDefaultValue, + layout, + onValueChange: omitOnValueChange, + isSwipeable = false, + orientation = "horizontal", + swipeConfig, + ...restProps + } = props; + + return { + value, + triggerSize, + currentTabIndex, + currentTabEnabledIndex, + tabCount: tabValues.length, + tabEnabledCount: tabEnabledValues.length, + + moveNext: events.moveNext, + movePrev: events.movePrev, + + restProps, + rootProps: elementProps({ + id: dom.getRootId(id), + "data-orientation": orientation, + }), + + tabTriggerListProps: elementProps({ + id: dom.getTabTriggerListId(id), + "aria-orientation": orientation, + "data-orientation": orientation, + }), + getTabTriggerProps: (props: TriggerProps) => { + const { isDisabled, value: triggerValue } = props; + + const itemState = { + isDisabled, + isSelected: value === triggerValue, + isFocused: focusedValue === triggerValue, + isHovered: hoveredValue === triggerValue, + isActive: activeValue === triggerValue, + }; + + const itemStateProps = { + "data-focus": dataAttr(itemState.isFocused), + "data-focus-visible": dataAttr(itemState.isFocused && isFocusVisible), + "data-active": dataAttr(itemState.isActive), + "data-hover": dataAttr(itemState.isHovered), + "data-selected": dataAttr(itemState.isSelected), + "data-disabled": dataAttr(itemState.isDisabled), + "aria-disabled": ariaAttr(itemState.isDisabled), + "aria-selected": ariaAttr(itemState.isSelected), + tabIndex: itemState.isSelected ? 0 : -1, + disabled: isDisabled, + }; + + return { + rootProps: buttonProps({ + id: dom.getTabTriggerRootId(triggerValue, id), + role: "tab", + type: "button", + ...itemStateProps, + "data-value": triggerValue, + "data-orientation": orientation, + "data-ownedby": dom.getTabTriggerListId(id), + "aria-controls": dom.getTabTriggerRootId(triggerValue, id), + onClick() { + if (itemState.isDisabled) return; + events.setValue(triggerValue); + }, + onPointerMove() { + if (itemState.isDisabled) return; + events.setHoveredValue(triggerValue); + }, + onPointerLeave() { + if (itemState.isDisabled) return; + events.setHoveredValue(null); + events.setActiveValue(null); + }, + onPointerDown(event) { + if (itemState.isDisabled) return; + // On pointerdown, the input blurs and returns focus to the `body`, + // we need to prevent this. + if (itemState.isFocused && event.pointerType === "mouse") { + event.preventDefault(); + } + events.setActiveValue(triggerValue); + }, + onPointerUp() { + if (itemState.isDisabled) return; + events.setActiveValue(null); + }, + }), + labelProps: elementProps({ + id: dom.getTabTriggerLabelId(triggerValue, id), + ...itemStateProps, + "data-value": triggerValue, + "data-orientation": orientation, + "data-ownedby": dom.getTabTriggerListId(id), + "aria-controls": dom.getTabTriggerRootId(triggerValue, id), + }), + notificationProps: elementProps({ + id: dom.getTabTriggerNotificationId(triggerValue, id), + ...itemStateProps, + "data-value": triggerValue, + "data-orientation": orientation, + "data-ownedby": dom.getTabTriggerListId(id), + "aria-controls": dom.getTabTriggerRootId(triggerValue, id), + }), + }; + }, + + tabContentListProps: elementProps({ + id: dom.getTabContentListId(id), + "data-orientation": orientation, + }), + tabContentCameraProps: elementProps({ + id: dom.getTabContentCameraId(id), + "data-orientation": orientation, + }), + getTabContentProps: (props: ContentProps) => { + const { value: contentValue, visibilityMode = "keep" } = props; + const tabContentId = dom.getTabTriggerRootId(contentValue, id); + const isSelected = value === contentValue; + const isDisabled = !!dom.itemById(dom.getDisabledElements(id), tabContentId); + const hidden = visibilityMode === "hidden" ? !isSelected || isDisabled : isDisabled; + + return elementProps({ + id: tabContentId, + role: "tabpanel", + "data-selected": dataAttr(isSelected), + "data-orientation": orientation, + "data-ownedby": dom.getTabTriggerListId(id), + "aria-labelledby": dom.getTabTriggerRootId(contentValue, id), + "aria-selected": ariaAttr(isSelected), + "aria-hidden": isDisabled ? undefined : !isSelected, + hidden, + }); + }, + + tabIndicatorProps: elementProps({ + id: dom.getIndicatorId(id), + "data-orientation": orientation, + }), + }; +} diff --git a/packages/react-headless/tabs/tsconfig.json b/packages/react-headless/tabs/tsconfig.json new file mode 100644 index 000000000..00abb5428 --- /dev/null +++ b/packages/react-headless/tabs/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "Bundler", + "rootDir": "src", + "outDir": "lib", + "jsx": "react" + } +} diff --git a/packages/recipe-generator/preset/src/__generated__/box-button.vars.ts b/packages/recipe-generator/preset/src/__generated__/box-button.vars.ts index 03fad0cdb..fc3a40a31 100644 --- a/packages/recipe-generator/preset/src/__generated__/box-button.vars.ts +++ b/packages/recipe-generator/preset/src/__generated__/box-button.vars.ts @@ -9,7 +9,7 @@ export const vars = { "variantBrand": { "enabled": { "root": { - "color": "var(--seed-color-bg-brand-emphasis)" + "color": "var(--seed-color-bg-brand-solid)" }, "label": { "color": "var(--seed-color-fg-static-white)" @@ -20,12 +20,12 @@ export const vars = { }, "pressed": { "root": { - "color": "var(--seed-color-bg-brand-emphasis-pressed)" + "color": "var(--seed-color-bg-brand-solid-pressed)" } }, "disabled": { "root": { - "color": "var(--seed-color-bg-disabled)" + "color": "var(--seed-color-bg-disabled-1)" } } }, diff --git a/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts b/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts new file mode 100644 index 000000000..cca71f757 --- /dev/null +++ b/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts @@ -0,0 +1,45 @@ +export const vars = { + "base": { + "enabled": { + "root": { + "paddingX": "var(--seed-unit-3\\.5)", + "paddingY": "var(--seed-unit-2)", + "cornerRadius": "var(--seed-radii-full)", + "minHeight": "36px" + }, + "label": { + "color": "var(--seed-color-fg-neutral)", + "fontSize": "var(--seed-font-size-100)", + "fontWeight": "var(--seed-font-weight-bold)" + } + }, + "enabledPressed": { + "root": { + "color": "var(--seed-color-bg-layer-1-pressed)" + } + }, + "selected": { + "root": { + "color": "var(--seed-color-bg-neutral-inverted)" + }, + "label": { + "color": "var(--seed-color-fg-neutral-inverted)" + } + }, + "selectedPressed": { + "root": { + "color": "var(--seed-color-bg-neutral-inverted-pressed)" + } + }, + "disabled": { + "label": { + "color": "var(--seed-color-fg-disabled-1)" + } + }, + "selectedDisabled": { + "root": { + "color": "var(--seed-color-bg-disabled-2)" + } + } + } +} \ No newline at end of file diff --git a/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts b/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts new file mode 100644 index 000000000..63bd28ba9 --- /dev/null +++ b/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts @@ -0,0 +1,9 @@ +export const vars = { + "base": { + "enabled": { + "root": { + "paddingX": "var(--seed-unit-4)" + } + } + } +} \ No newline at end of file diff --git a/packages/recipe-generator/preset/src/__generated__/tab.vars.ts b/packages/recipe-generator/preset/src/__generated__/tab.vars.ts index 9ba696fa7..98a1ebc01 100644 --- a/packages/recipe-generator/preset/src/__generated__/tab.vars.ts +++ b/packages/recipe-generator/preset/src/__generated__/tab.vars.ts @@ -7,8 +7,8 @@ export const vars = { "notification": { "size": "var(--seed-unit-1)", "cornerRadius": "var(--seed-radii-full)", - "color": "var(--seed-color-bg-brand)", - "paddingLeft": "var(--seed-unit-0\\.5)" + "color": "var(--seed-color-bg-brand-solid)", + "marginLeft": "var(--seed-unit-0\\.5)" } }, "selected": { diff --git a/packages/recipe-generator/preset/src/__generated__/tablist.vars.ts b/packages/recipe-generator/preset/src/__generated__/tablist.vars.ts index 99a7ac262..234e05d08 100644 --- a/packages/recipe-generator/preset/src/__generated__/tablist.vars.ts +++ b/packages/recipe-generator/preset/src/__generated__/tablist.vars.ts @@ -2,6 +2,7 @@ export const vars = { "base": { "enabled": { "root": { + "color": "var(--seed-color-bg-layer-1)", "strokeBottomWidth": "1px", "strokeColor": "var(--seed-color-stroke-neutral)" }, @@ -14,7 +15,7 @@ export const vars = { "layoutHug": { "enabled": { "root": { - "paddingX": "var(--seed-spacing-global-gutter)" + "paddingX": "var(--seed-unit-4)" } } }, diff --git a/packages/recipe-generator/preset/src/__generated__/tabs.vars.ts b/packages/recipe-generator/preset/src/__generated__/tabs.vars.ts new file mode 100644 index 000000000..41a88d0fd --- /dev/null +++ b/packages/recipe-generator/preset/src/__generated__/tabs.vars.ts @@ -0,0 +1,27 @@ +export const vars = { + "base": { + "enabled": { + "tabTriggerList": { + "color": "var(--seed-color-bg-layer-1)", + "borderColor": "var(--seed-color-stroke-decorative)" + }, + "tabTrigger": { + "color": "var(--seed-color-fg-neutral-subtle)" + }, + "indicator": { + "color": "var(--seed-color-fg-neutral)", + "borderColor": "var(--seed-color-fg-neutral)" + } + }, + "selected": { + "tabTrigger": { + "color": "var(--seed-color-fg-neutral)" + } + }, + "disabled": { + "tabTrigger": { + "color": "var(--seed-color-fg-disabled)" + } + } + } +} \ No newline at end of file diff --git a/packages/recipe-generator/preset/src/chip-tab.recipe.ts b/packages/recipe-generator/preset/src/chip-tab.recipe.ts new file mode 100644 index 000000000..94d95cdec --- /dev/null +++ b/packages/recipe-generator/preset/src/chip-tab.recipe.ts @@ -0,0 +1,59 @@ +import { vars } from "./__generated__/chip-tab.vars"; +import { defineRecipe } from "./helper"; +import { pseudo, selected, active, disabled, not } from "./pseudo"; + +const chipTab = defineRecipe({ + name: "chipTab", + slots: ["root", "label"], + base: { + root: { + display: "flex", + justifyContent: "center", + alignItems: "center", + padding: `${vars.base.enabled.root.paddingY} ${vars.base.enabled.root.paddingX}`, + cursor: "pointer", + border: "none", + borderRadius: vars.base.enabled.root.cornerRadius, + boxSizing: "border-box", + whiteSpace: "nowrap", + minHeight: vars.base.enabled.root.minHeight, + + [pseudo(selected)]: { + backgroundColor: vars.base.selected.root.color, + }, + + [pseudo(active, not(disabled))]: { + backgroundColor: vars.base.enabledPressed.root.color, + }, + + [pseudo(selected, active)]: { + backgroundColor: vars.base.selectedPressed.root.color, + }, + + [pseudo(disabled)]: { + cursor: "not-allowed", + backgroundColor: undefined, + }, + + [pseudo(disabled, selected)]: { + backgroundColor: vars.base.selectedDisabled.root.color, + }, + }, + label: { + color: vars.base.enabled.label.color, + fontSize: vars.base.enabled.label.fontSize, + fontWeight: vars.base.enabled.label.fontWeight, + + [pseudo(selected)]: { + color: vars.base.selected.label.color, + }, + + [pseudo(disabled)]: { + color: vars.base.disabled.label.color, + }, + }, + }, + variants: {}, +}); + +export default chipTab; diff --git a/packages/recipe-generator/preset/src/chip-tabs.recipe.ts b/packages/recipe-generator/preset/src/chip-tabs.recipe.ts new file mode 100644 index 000000000..ec8e3660b --- /dev/null +++ b/packages/recipe-generator/preset/src/chip-tabs.recipe.ts @@ -0,0 +1,45 @@ +import { vars } from "./__generated__/chip-tablist.vars"; +import { defineRecipe } from "./helper"; + +const chipTabs = defineRecipe({ + name: "chipTabs", + slots: ["root", "triggerList", "contentList", "contentCamera", "content"], + base: { + root: { + overflowX: "hidden", + }, + triggerList: { + position: "relative", + display: "flex", + flexDirection: "row", + flexWrap: "nowrap", + alignItems: "stretch", + alignContent: "stretch", + + overflowX: "auto", + msOverflowStyle: "none", + scrollbarWidth: "none", + + padding: `0px ${vars.base.enabled.root.paddingX}`, + + "&::-webkit-scrollbar": { + display: "none", + }, + }, + contentList: {}, + contentCamera: { + display: "flex", + width: "100%", + height: "100%", + }, + content: { + width: "100%", + height: "100%", + flexShrink: 0, + overflow: "auto", + }, + }, + variants: {}, +}); + +export default chipTabs; diff --git a/packages/recipe-generator/preset/src/index.ts b/packages/recipe-generator/preset/src/index.ts index bec2f1bb4..e41486a97 100644 --- a/packages/recipe-generator/preset/src/index.ts +++ b/packages/recipe-generator/preset/src/index.ts @@ -8,6 +8,9 @@ import helpBubble from "./help-bubble.recipe"; import radio from "./radio.recipe"; import switchRecipe from "./switch.recipe"; import tab from "./tab.recipe"; +import tabs from "./tabs.recipe"; +import chipTab from "./chip-tab.recipe"; +import chipTabs from "./chip-tabs.recipe"; const recipes = { avatar, @@ -20,6 +23,9 @@ const recipes = { switch: switchRecipe, helpBubble, tab, + tabs, + chipTab, + chipTabs, }; export default recipes; diff --git a/packages/recipe-generator/preset/src/pseudo.ts b/packages/recipe-generator/preset/src/pseudo.ts index 2e0ae072c..26813d74c 100644 --- a/packages/recipe-generator/preset/src/pseudo.ts +++ b/packages/recipe-generator/preset/src/pseudo.ts @@ -8,6 +8,8 @@ export const disabled = ":is(:disabled, [disabled], [data-disabled])"; export const checked = ":is(:checked, [data-checked])"; +export const selected = ":is(:selected, [data-selected])"; + export const open = ':is([data-state="open"], [data-open])'; export function pseudo(selectorA: T): `&${T}`; diff --git a/packages/recipe-generator/preset/src/tab.recipe.ts b/packages/recipe-generator/preset/src/tab.recipe.ts index b7fe2f221..fd3d9c047 100644 --- a/packages/recipe-generator/preset/src/tab.recipe.ts +++ b/packages/recipe-generator/preset/src/tab.recipe.ts @@ -1,6 +1,6 @@ import { vars } from "./__generated__/tab.vars"; import { defineRecipe } from "./helper"; -import { active, disabled, pseudo } from "./pseudo"; +import { disabled, pseudo, selected } from "./pseudo"; const tab = defineRecipe({ name: "tab", @@ -14,18 +14,34 @@ const tab = defineRecipe({ border: "none", boxSizing: "border-box", whiteSpace: "nowrap", + [pseudo(disabled)]: { + cursor: "not-allowed", + }, }, label: { + position: "relative", color: vars.base.enabled.label.color, - [pseudo(active)]: { + [pseudo(selected)]: { color: vars.base.selected.label.color, }, [pseudo(disabled)]: { color: vars.base.disabled.label.color, - cursor: "not-allowed", }, }, notification: { + position: "absolute", + top: 0, + + /** + * notification이 Tabs의 박스 사이즈에 잡히지 않도록 하기 위한 트릭 + * notification의 위치를 absolute로 잡아주고, right를 음수로 설정하여 박스 밖으로 나가게 함 + * 이때, 텍스트에서 marginLeft만큼 떨어진 위치에 위치해야하기 위해서는 + * 우선 notification의 size만큼 오른쪽으로 한번 이동하고 거기서 marginLeft만큼 오른쪽으로 이동해야함 + * 그래서 아래와 같은 식이 나옴 + */ + right: `calc(-1 * ${vars.base.enabled.notification.size} - ${vars.base.enabled.notification.marginLeft})`, + + alignSelf: "flex-start", backgroundColor: vars.base.enabled.notification.color, width: vars.base.enabled.notification.size, height: vars.base.enabled.notification.size, @@ -33,6 +49,14 @@ const tab = defineRecipe({ }, }, variants: { + layout: { + fill: { + root: { + flex: 1, + }, + }, + hug: {}, + }, size: { medium: { root: { @@ -60,6 +84,7 @@ const tab = defineRecipe({ }, defaultVariants: { size: "medium", + layout: "hug", }, }); diff --git a/packages/recipe-generator/preset/src/tabs.recipe.ts b/packages/recipe-generator/preset/src/tabs.recipe.ts new file mode 100644 index 000000000..f1d66a0d6 --- /dev/null +++ b/packages/recipe-generator/preset/src/tabs.recipe.ts @@ -0,0 +1,69 @@ +import { vars } from "./__generated__/tablist.vars"; +import { defineRecipe } from "./helper"; + +const tabs = defineRecipe({ + name: "tabs", + slots: ["root", "triggerList", "contentList", "contentCamera", "content", "indicator"], + base: { + root: { + overflowX: "hidden", + }, + triggerList: { + position: "relative", + display: "flex", + flexDirection: "row", + flexWrap: "nowrap", + alignItems: "stretch", + alignContent: "stretch", + + overflowX: "auto", + msOverflowStyle: "none", + scrollbarWidth: "none", + + background: vars.base.enabled.root.color, + borderBottom: `${vars.base.enabled.root.strokeBottomWidth} solid ${vars.base.enabled.root.strokeColor}`, + + "&::-webkit-scrollbar": { + display: "none", + }, + }, + contentList: {}, + contentCamera: { + display: "flex", + width: "100%", + height: "100%", + }, + content: { + width: "100%", + height: "100%", + flexShrink: 0, + overflow: "auto", + }, + indicator: { + color: vars.base.enabled.indicator.color, + borderBottom: `${vars.base.enabled.indicator.height} solid ${vars.base.enabled.indicator.color}`, + bottom: 0, + }, + }, + variants: { + layout: { + fill: { + triggerList: { + padding: `0px ${vars.layoutFill.enabled.root.paddingX}`, + justifyContent: "space-around", + }, + }, + hug: { + triggerList: { + padding: `0px ${vars.layoutHug.enabled.root.paddingX}`, + justifyContent: "flex-start", + }, + }, + }, + }, + defaultVariants: { + layout: "hug", + }, +}); + +export default tabs; diff --git a/packages/recipe/.gitignore b/packages/recipe/.gitignore new file mode 100644 index 000000000..ebf4281dc --- /dev/null +++ b/packages/recipe/.gitignore @@ -0,0 +1 @@ +!lib diff --git a/packages/recipe/lib/avatar.d.ts b/packages/recipe/lib/avatar.d.ts new file mode 100644 index 000000000..07bf45dc3 --- /dev/null +++ b/packages/recipe/lib/avatar.d.ts @@ -0,0 +1,17 @@ +interface AvatarVariant { + size: "20" | "24" | "36" | "48" | "64" | "80" | "96" +} + +type AvatarVariantMap = { + [key in keyof AvatarVariant]: Array; +}; + +export type AvatarVariantProps = Partial; + +export type AvatarSlotName = "root" | "image" | "fallback" | "badge"; + +export const avatarVariantMap: AvatarVariantMap; + +export function avatar( + props?: AvatarVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/avatar.mjs b/packages/recipe/lib/avatar.mjs new file mode 100644 index 000000000..c358079dd --- /dev/null +++ b/packages/recipe/lib/avatar.mjs @@ -0,0 +1,49 @@ +import { createClassName } from "./className.mjs"; + +const avatarSlotNames = [ + [ + "root", + "avatar__root" + ], + [ + "image", + "avatar__image" + ], + [ + "fallback", + "avatar__fallback" + ], + [ + "badge", + "avatar__badge" + ] +]; + +const defaultVariant = {}; + +const compoundVariants = []; + +export const avatarVariantMap = { + "size": [ + "20", + "24", + "36", + "48", + "64", + "80", + "96" + ] +}; + +export const avatarVariantKeys = Object.keys(avatarVariantMap); + +export function avatar(props) { + return Object.fromEntries( + avatarSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/recipe/lib/chipTab.d.ts b/packages/recipe/lib/chipTab.d.ts new file mode 100644 index 000000000..f6d232348 --- /dev/null +++ b/packages/recipe/lib/chipTab.d.ts @@ -0,0 +1,17 @@ +interface ChipTabVariant { + +} + +type ChipTabVariantMap = { + [key in keyof ChipTabVariant]: Array; +}; + +export type ChipTabVariantProps = Partial; + +export type ChipTabSlotName = "root" | "label"; + +export const chipTabVariantMap: ChipTabVariantMap; + +export function chipTab( + props?: ChipTabVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/chipTab.mjs b/packages/recipe/lib/chipTab.mjs new file mode 100644 index 000000000..c11fd4b98 --- /dev/null +++ b/packages/recipe/lib/chipTab.mjs @@ -0,0 +1,31 @@ +import { createClassName } from "./className.mjs"; + +const chipTabSlotNames = [ + [ + "root", + "chipTab__root" + ], + [ + "label", + "chipTab__label" + ] +]; + +const defaultVariant = {}; + +const compoundVariants = []; + +export const chipTabVariantMap = {}; + +export const chipTabVariantKeys = Object.keys(chipTabVariantMap); + +export function chipTab(props) { + return Object.fromEntries( + chipTabSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/recipe/lib/chipTabs.d.ts b/packages/recipe/lib/chipTabs.d.ts new file mode 100644 index 000000000..a2b3a6a33 --- /dev/null +++ b/packages/recipe/lib/chipTabs.d.ts @@ -0,0 +1,17 @@ +interface ChipTabsVariant { + +} + +type ChipTabsVariantMap = { + [key in keyof ChipTabsVariant]: Array; +}; + +export type ChipTabsVariantProps = Partial; + +export type ChipTabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content"; + +export const chipTabsVariantMap: ChipTabsVariantMap; + +export function chipTabs( + props?: ChipTabsVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/chipTabs.mjs b/packages/recipe/lib/chipTabs.mjs new file mode 100644 index 000000000..0b10a85e5 --- /dev/null +++ b/packages/recipe/lib/chipTabs.mjs @@ -0,0 +1,43 @@ +import { createClassName } from "./className.mjs"; + +const chipTabsSlotNames = [ + [ + "root", + "chipTabs__root" + ], + [ + "triggerList", + "chipTabs__triggerList" + ], + [ + "contentList", + "chipTabs__contentList" + ], + [ + "contentCamera", + "chipTabs__contentCamera" + ], + [ + "content", + "chipTabs__content" + ] +]; + +const defaultVariant = {}; + +const compoundVariants = []; + +export const chipTabsVariantMap = {}; + +export const chipTabsVariantKeys = Object.keys(chipTabsVariantMap); + +export function chipTabs(props) { + return Object.fromEntries( + chipTabsSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/recipe/lib/helpBubble.d.ts b/packages/recipe/lib/helpBubble.d.ts new file mode 100644 index 000000000..3db414628 --- /dev/null +++ b/packages/recipe/lib/helpBubble.d.ts @@ -0,0 +1,17 @@ +interface HelpBubbleVariant { + variant: "nonModal" | "modal" +} + +type HelpBubbleVariantMap = { + [key in keyof HelpBubbleVariant]: Array; +}; + +export type HelpBubbleVariantProps = Partial; + +export type HelpBubbleSlotName = "positioner" | "backdrop" | "content" | "arrow" | "title" | "description"; + +export const helpBubbleVariantMap: HelpBubbleVariantMap; + +export function helpBubble( + props?: HelpBubbleVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/helpBubble.mjs b/packages/recipe/lib/helpBubble.mjs new file mode 100644 index 000000000..2d6ce6695 --- /dev/null +++ b/packages/recipe/lib/helpBubble.mjs @@ -0,0 +1,54 @@ +import { createClassName } from "./className.mjs"; + +const helpBubbleSlotNames = [ + [ + "positioner", + "helpBubble__positioner" + ], + [ + "backdrop", + "helpBubble__backdrop" + ], + [ + "content", + "helpBubble__content" + ], + [ + "arrow", + "helpBubble__arrow" + ], + [ + "title", + "helpBubble__title" + ], + [ + "description", + "helpBubble__description" + ] +]; + +const defaultVariant = { + "variant": "nonModal" +}; + +const compoundVariants = []; + +export const helpBubbleVariantMap = { + "variant": [ + "nonModal", + "modal" + ] +}; + +export const helpBubbleVariantKeys = Object.keys(helpBubbleVariantMap); + +export function helpBubble(props) { + return Object.fromEntries( + helpBubbleSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/recipe/lib/switch.d.ts b/packages/recipe/lib/switch.d.ts new file mode 100644 index 000000000..01f381a05 --- /dev/null +++ b/packages/recipe/lib/switch.d.ts @@ -0,0 +1,17 @@ +interface SwitchVariant { + +} + +type SwitchVariantMap = { + [key in keyof SwitchVariant]: Array; +}; + +export type SwitchVariantProps = Partial; + +export type SwitchSlotName = "root" | "control" | "thumb"; + +export const switchVariantMap: SwitchVariantMap; + +export function switchStyle( + props?: SwitchVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/switch.mjs b/packages/recipe/lib/switch.mjs new file mode 100644 index 000000000..5e7532667 --- /dev/null +++ b/packages/recipe/lib/switch.mjs @@ -0,0 +1,35 @@ +import { createClassName } from "./className.mjs"; + +const switchSlotNames = [ + [ + "root", + "switch__root" + ], + [ + "control", + "switch__control" + ], + [ + "thumb", + "switch__thumb" + ] +]; + +const defaultVariant = {}; + +const compoundVariants = []; + +export const switchVariantMap = {}; + +export const switchVariantKeys = Object.keys(switchVariantMap); + +export function switchStyle(props) { + return Object.fromEntries( + switchSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/recipe/lib/tab.d.ts b/packages/recipe/lib/tab.d.ts new file mode 100644 index 000000000..64bdded4b --- /dev/null +++ b/packages/recipe/lib/tab.d.ts @@ -0,0 +1,18 @@ +interface TabVariant { + layout: "fill" | "hug"; + size: "medium" | "small" +} + +type TabVariantMap = { + [key in keyof TabVariant]: Array; +}; + +export type TabVariantProps = Partial; + +export type TabSlotName = "root" | "label" | "notification"; + +export const tabVariantMap: TabVariantMap; + +export function tab( + props?: TabVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/tab.mjs b/packages/recipe/lib/tab.mjs new file mode 100644 index 000000000..569a058ce --- /dev/null +++ b/packages/recipe/lib/tab.mjs @@ -0,0 +1,47 @@ +import { createClassName } from "./className.mjs"; + +const tabSlotNames = [ + [ + "root", + "tab__root" + ], + [ + "label", + "tab__label" + ], + [ + "notification", + "tab__notification" + ] +]; + +const defaultVariant = { + "size": "medium", + "layout": "hug" +}; + +const compoundVariants = []; + +export const tabVariantMap = { + "layout": [ + "fill", + "hug" + ], + "size": [ + "medium", + "small" + ] +}; + +export const tabVariantKeys = Object.keys(tabVariantMap); + +export function tab(props) { + return Object.fromEntries( + tabSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/recipe/lib/tabs.d.ts b/packages/recipe/lib/tabs.d.ts new file mode 100644 index 000000000..2f7d5afb7 --- /dev/null +++ b/packages/recipe/lib/tabs.d.ts @@ -0,0 +1,17 @@ +interface TabsVariant { + layout: "fill" | "hug" +} + +type TabsVariantMap = { + [key in keyof TabsVariant]: Array; +}; + +export type TabsVariantProps = Partial; + +export type TabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content" | "indicator"; + +export const tabsVariantMap: TabsVariantMap; + +export function tabs( + props?: TabsVariantProps, +): Record; \ No newline at end of file diff --git a/packages/recipe/lib/tabs.mjs b/packages/recipe/lib/tabs.mjs new file mode 100644 index 000000000..5fdad5d3c --- /dev/null +++ b/packages/recipe/lib/tabs.mjs @@ -0,0 +1,54 @@ +import { createClassName } from "./className.mjs"; + +const tabsSlotNames = [ + [ + "root", + "tabs__root" + ], + [ + "triggerList", + "tabs__triggerList" + ], + [ + "contentList", + "tabs__contentList" + ], + [ + "contentCamera", + "tabs__contentCamera" + ], + [ + "content", + "tabs__content" + ], + [ + "indicator", + "tabs__indicator" + ] +]; + +const defaultVariant = { + "layout": "hug" +}; + +const compoundVariants = []; + +export const tabsVariantMap = { + "layout": [ + "fill", + "hug" + ] +}; + +export const tabsVariantKeys = Object.keys(tabsVariantMap); + +export function tabs(props) { + return Object.fromEntries( + tabsSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, { ...defaultVariant, ...props }, compoundVariants), + ]; + }), + ); +} \ No newline at end of file diff --git a/packages/stylesheet/boxButton.css b/packages/stylesheet/boxButton.css index a7dfa454a..0985a8058 100644 --- a/packages/stylesheet/boxButton.css +++ b/packages/stylesheet/boxButton.css @@ -25,13 +25,13 @@ justify-content: center; } .boxButton__root--variant_brand { - background: var(--seed-color-bg-brand-emphasis); + background: var(--seed-color-bg-brand-solid); } .boxButton__root--variant_brand:is(:active, [data-active]) { - background: var(--seed-color-bg-brand-emphasis-pressed); + background: var(--seed-color-bg-brand-solid-pressed); } .boxButton__root--variant_brand:is(:disabled, [disabled], [data-disabled]) { - background: var(--seed-color-bg-disabled); + background: var(--seed-color-bg-disabled-1); } .boxButton__label--variant_brand { color: var(--seed-color-fg-static-white); diff --git a/packages/stylesheet/chipTab.css b/packages/stylesheet/chipTab.css new file mode 100644 index 000000000..734bb2076 --- /dev/null +++ b/packages/stylesheet/chipTab.css @@ -0,0 +1,38 @@ +.chipTab__root { + display: flex; + justify-content: center; + align-items: center; + padding: var(--seed-unit-2) var(--seed-unit-3\.5); + cursor: pointer; + border: none; + border-radius: var(--seed-radii-full); + box-sizing: border-box; + white-space: nowrap; + min-height: 36px; +} +.chipTab__root:is(:selected, [data-selected]) { + background-color: var(--seed-color-bg-neutral-inverted); +} +.chipTab__root:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) { + background-color: var(--seed-color-bg-layer-1-pressed); +} +.chipTab__root:is(:selected, [data-selected]):is(:active, [data-active]) { + background-color: var(--seed-color-bg-neutral-inverted-pressed); +} +.chipTab__root:is(:disabled, [disabled], [data-disabled]) { + cursor: not-allowed; +} +.chipTab__root:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) { + background-color: var(--seed-color-bg-disabled-2); +} +.chipTab__label { + color: var(--seed-color-fg-neutral); + font-size: var(--seed-font-size-100); + font-weight: var(--seed-font-weight-bold); +} +.chipTab__label:is(:selected, [data-selected]) { + color: var(--seed-color-fg-neutral-inverted); +} +.chipTab__label:is(:disabled, [disabled], [data-disabled]) { + color: var(--seed-color-fg-disabled-1); +} \ No newline at end of file diff --git a/packages/stylesheet/chipTabs.css b/packages/stylesheet/chipTabs.css new file mode 100644 index 000000000..9e7f7d6a2 --- /dev/null +++ b/packages/stylesheet/chipTabs.css @@ -0,0 +1,30 @@ +.chipTabs__root { + overflow-x: hidden; +} +.chipTabs__triggerList { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + align-content: stretch; + overflow-x: auto; + -ms-overflow-style: none; + scrollbar-width: none; + padding: 0px var(--seed-unit-4); +} +.chipTabs__triggerList::-webkit-scrollbar { + display: none; +} +.chipTabs__contentList {} +.chipTabs__contentCamera { + display: flex; + width: 100%; + height: 100%; +} +.chipTabs__content { + width: 100%; + height: 100%; + flex-shrink: 0; + overflow: auto; +} \ No newline at end of file diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 3e459f992..71f85070b 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -27,6 +27,9 @@ "./switch.css": "./switch.css", "./helpBubble.css": "./helpBubble.css", "./tab.css": "./tab.css", + "./tabs.css": "./tabs.css", + "./chipTab.css": "./chipTab.css", + "./chipTabs.css": "./chipTabs.css", "./package.json": "./package.json" }, "files": [ diff --git a/packages/stylesheet/tab.css b/packages/stylesheet/tab.css index 78bd0a0ff..25314fc3c 100644 --- a/packages/stylesheet/tab.css +++ b/packages/stylesheet/tab.css @@ -7,22 +7,32 @@ box-sizing: border-box; white-space: nowrap; } +.tab__root:is(:disabled, [disabled], [data-disabled]) { + cursor: not-allowed; +} .tab__label { + position: relative; color: var(--seed-color-fg-neutral-subtle); } -.tab__label:is(:active, [data-active]) { +.tab__label:is(:selected, [data-selected]) { color: var(--seed-color-fg-neutral); } .tab__label:is(:disabled, [disabled], [data-disabled]) { color: var(--seed-color-fg-disabled-1); - cursor: not-allowed; } .tab__notification { - background-color: var(--seed-color-bg-brand); + position: absolute; + top: 0; + right: calc(-1 * var(--seed-unit-1) - var(--seed-unit-0\.5)); + align-self: flex-start; + background-color: var(--seed-color-bg-brand-solid); width: var(--seed-unit-1); height: var(--seed-unit-1); border-radius: var(--seed-radii-full); } +.tab__root--layout_fill { + flex: 1; +} .tab__root--size_medium { min-height: 44px; padding-inline: var(--seed-unit-2\.5); diff --git a/packages/stylesheet/tabs.css b/packages/stylesheet/tabs.css new file mode 100644 index 000000000..e19d34a41 --- /dev/null +++ b/packages/stylesheet/tabs.css @@ -0,0 +1,44 @@ +.tabs__root { + overflow-x: hidden; +} +.tabs__triggerList { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + align-content: stretch; + overflow-x: auto; + -ms-overflow-style: none; + scrollbar-width: none; + background: var(--seed-color-bg-layer-1); + border-bottom: 1px solid var(--seed-color-stroke-neutral); +} +.tabs__triggerList::-webkit-scrollbar { + display: none; +} +.tabs__contentList {} +.tabs__contentCamera { + display: flex; + width: 100%; + height: 100%; +} +.tabs__content { + width: 100%; + height: 100%; + flex-shrink: 0; + overflow: auto; +} +.tabs__indicator { + color: var(--seed-color-fg-neutral); + border-bottom: 2px solid var(--seed-color-fg-neutral); + bottom: 0; +} +.tabs__triggerList--layout_fill { + padding: 0px 0px; + justify-content: space-around; +} +.tabs__triggerList--layout_hug { + padding: 0px var(--seed-unit-4); + justify-content: flex-start; +} \ No newline at end of file diff --git a/packages/utils/dom-utils/src/index.ts b/packages/utils/dom-utils/src/index.ts index 3fc9d2015..6e3be6821 100644 --- a/packages/utils/dom-utils/src/index.ts +++ b/packages/utils/dom-utils/src/index.ts @@ -8,23 +8,15 @@ export const ariaAttr = (guard: boolean | undefined) => { return guard ? "true" : (undefined as Booleanish); }; -export const elementProps = ( - props: React.HTMLAttributes & Record<`data-${string}`, string | undefined>, -) => props; +type DataAttr = Record<`data-${string}`, string | undefined>; -export const inputProps = ( - props: React.InputHTMLAttributes & Record<`data-${string}`, string | undefined>, -) => props; +export const elementProps = (props: React.HTMLAttributes & DataAttr) => props; -export const labelProps = ( - props: React.LabelHTMLAttributes & Record<`data-${string}`, string | undefined>, -) => props; +export const inputProps = (props: React.InputHTMLAttributes & DataAttr) => props; -export const buttonProps = ( - props: React.ButtonHTMLAttributes & - Record<`data-${string}`, string | undefined>, -) => props; +export const labelProps = (props: React.LabelHTMLAttributes & DataAttr) => props; -export const imgProps = ( - props: React.ImgHTMLAttributes & Record<`data-${string}`, string | undefined>, -) => props; +export const buttonProps = (props: React.ButtonHTMLAttributes & DataAttr) => + props; + +export const imgProps = (props: React.ImgHTMLAttributes & DataAttr) => props; diff --git a/yarn.lock b/yarn.lock index 0785d0dbf..8d5d7fa7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,8 +43,8 @@ __metadata: linkType: hard "@antfu/ni@npm:^0.22.0": - version: 0.22.0 - resolution: "@antfu/ni@npm:0.22.0" + version: 0.22.4 + resolution: "@antfu/ni@npm:0.22.4" bin: na: bin/na.mjs nci: bin/nci.mjs @@ -53,7 +53,7 @@ __metadata: nr: bin/nr.mjs nu: bin/nu.mjs nun: bin/nun.mjs - checksum: 2e3434a606c95a350d3937cf301c7be887144ef08aa2b9c9233b39c198b22148e98b9bf1c45f0ea7846177393dacf55ef64f5851352d1562d829d8a6fada148f + checksum: a10675c78edcc449a751d017fa56f62ca780a53d52087168a4a17f02455237fc8714ec2974596720b0b0fe158e50917ef6e6bef266aaf568891be91c63609604 languageName: node linkType: hard @@ -175,10 +175,10 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.24.8": - version: 7.24.9 - resolution: "@babel/compat-data@npm:7.24.9" - checksum: 3590be0f7028bca0565a83f66752c0f0283b818e9e1bb7fc12912822768e379a6ff84c59d77dc64ba62c140b8500a3828d95c0ce013cd62d254a179bae38709b +"@babel/compat-data@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/compat-data@npm:7.25.2" + checksum: b61bc9da7cfe249f19d08da00f4f0c20550cd9ad5bffcde787c2bf61a8a6fa5b66d92bbd89031f3a6e5495a799a2a2499f2947b6cc7964be41979377473ab132 languageName: node linkType: hard @@ -228,6 +228,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.23.9, @babel/core@npm:^7.24.9": + version: 7.25.2 + resolution: "@babel/core@npm:7.25.2" + dependencies: + "@ampproject/remapping": ^2.2.0 + "@babel/code-frame": ^7.24.7 + "@babel/generator": ^7.25.0 + "@babel/helper-compilation-targets": ^7.25.2 + "@babel/helper-module-transforms": ^7.25.2 + "@babel/helpers": ^7.25.0 + "@babel/parser": ^7.25.0 + "@babel/template": ^7.25.0 + "@babel/traverse": ^7.25.2 + "@babel/types": ^7.25.2 + convert-source-map: ^2.0.0 + debug: ^4.1.0 + gensync: ^1.0.0-beta.2 + json5: ^2.2.3 + semver: ^6.3.1 + checksum: 9a1ef604a7eb62195f70f9370cec45472a08114e3934e3eaaedee8fd754edf0730e62347c7b4b5e67d743ce57b5bb8cf3b92459482ca94d06e06246ef021390a + languageName: node + linkType: hard + "@babel/core@npm:^7.24.5": version: 7.24.5 resolution: "@babel/core@npm:7.24.5" @@ -251,29 +274,6 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.24.9": - version: 7.24.9 - resolution: "@babel/core@npm:7.24.9" - dependencies: - "@ampproject/remapping": ^2.2.0 - "@babel/code-frame": ^7.24.7 - "@babel/generator": ^7.24.9 - "@babel/helper-compilation-targets": ^7.24.8 - "@babel/helper-module-transforms": ^7.24.9 - "@babel/helpers": ^7.24.8 - "@babel/parser": ^7.24.8 - "@babel/template": ^7.24.7 - "@babel/traverse": ^7.24.8 - "@babel/types": ^7.24.9 - convert-source-map: ^2.0.0 - debug: ^4.1.0 - gensync: ^1.0.0-beta.2 - json5: ^2.2.3 - semver: ^6.3.1 - checksum: eae273bee154d6a059e742a2bb7a58b03438a1f70d7909887a28258b29556dc99bcd5cbd41f13cd4755a20b0baf5e82731acb1d3690e02b7a9300fb6d1950e2c - languageName: node - linkType: hard - "@babel/eslint-parser@npm:^7.19.1": version: 7.22.5 resolution: "@babel/eslint-parser@npm:7.22.5" @@ -335,15 +335,15 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.24.8, @babel/generator@npm:^7.24.9": - version: 7.24.10 - resolution: "@babel/generator@npm:7.24.10" +"@babel/generator@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/generator@npm:7.25.0" dependencies: - "@babel/types": ^7.24.9 + "@babel/types": ^7.25.0 "@jridgewell/gen-mapping": ^0.3.5 "@jridgewell/trace-mapping": ^0.3.25 jsesc: ^2.5.1 - checksum: eb13806e9eb76932ea5205502a85ea650a991c7a6f757fbe859176f6d9b34b3da5a2c1f52a2c24fdbe0045a90438fe6889077e338cdd6c727619dee925af1ba6 + checksum: bf25649dde4068bff8e387319bf820f2cb3b1af7b8c0cfba0bd90880656427c8bad96cd5cb6db7058d20cffe93149ee59da16567018ceaa21ecaefbf780a785c languageName: node linkType: hard @@ -436,16 +436,16 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/helper-compilation-targets@npm:7.24.8" +"@babel/helper-compilation-targets@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/helper-compilation-targets@npm:7.25.2" dependencies: - "@babel/compat-data": ^7.24.8 + "@babel/compat-data": ^7.25.2 "@babel/helper-validator-option": ^7.24.8 browserslist: ^4.23.1 lru-cache: ^5.1.1 semver: ^6.3.1 - checksum: 40c9e87212fffccca387504b259a629615d7df10fc9080c113da6c51095d3e8b622a1409d9ed09faf2191628449ea28d582179c5148e2e993a3140234076b8da + checksum: aed33c5496cb9db4b5e2d44e26bf8bc474074cc7f7bb5ebe1d4a20fdeb362cb3ba9e1596ca18c7484bcd6e5c3a155ab975e420d520c0ae60df81f9de04d0fd16 languageName: node linkType: hard @@ -504,22 +504,20 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/helper-create-class-features-plugin@npm:7.24.8" +"@babel/helper-create-class-features-plugin@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/helper-create-class-features-plugin@npm:7.25.0" dependencies: "@babel/helper-annotate-as-pure": ^7.24.7 - "@babel/helper-environment-visitor": ^7.24.7 - "@babel/helper-function-name": ^7.24.7 "@babel/helper-member-expression-to-functions": ^7.24.8 "@babel/helper-optimise-call-expression": ^7.24.7 - "@babel/helper-replace-supers": ^7.24.7 + "@babel/helper-replace-supers": ^7.25.0 "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 - "@babel/helper-split-export-declaration": ^7.24.7 + "@babel/traverse": ^7.25.0 semver: ^6.3.1 peerDependencies: "@babel/core": ^7.0.0 - checksum: b4707e2c4a2cb504d7656168d887bf653db6fbe8ece4502e28e5798f2ec624dc606f2d6bc4820d31b4dc1b80f7d83d98db83516dda321a76c075e5f531abed0b + checksum: e986c1187e16837b71f12920bd77e672b4bc19ac6dfe30b9d9d515a311c5cc5a085a8e337ac8597b1cb7bd0efdbfcc66f69bf652786c9a022070f9b782deec0d languageName: node linkType: hard @@ -616,15 +614,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-environment-visitor@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/helper-environment-visitor@npm:7.24.7" - dependencies: - "@babel/types": ^7.24.7 - checksum: 079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6 - languageName: node - linkType: hard - "@babel/helper-explode-assignable-expression@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-explode-assignable-expression@npm:7.18.6" @@ -664,16 +653,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-function-name@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/helper-function-name@npm:7.24.7" - dependencies: - "@babel/template": ^7.24.7 - "@babel/types": ^7.24.7 - checksum: 142ee08922074dfdc0ff358e09ef9f07adf3671ab6eef4fca74dcf7a551f1a43717e7efa358c9e28d7eea84c28d7f177b7a58c70452fc312ae3b1893c5dab2a4 - languageName: node - linkType: hard - "@babel/helper-hoist-variables@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-hoist-variables@npm:7.18.6" @@ -692,15 +671,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-hoist-variables@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/helper-hoist-variables@npm:7.24.7" - dependencies: - "@babel/types": ^7.24.7 - checksum: 6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d - languageName: node - linkType: hard - "@babel/helper-member-expression-to-functions@npm:^7.18.9": version: 7.18.9 resolution: "@babel/helper-member-expression-to-functions@npm:7.18.9" @@ -728,7 +698,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-member-expression-to-functions@npm:^7.24.7, @babel/helper-member-expression-to-functions@npm:^7.24.8": +"@babel/helper-member-expression-to-functions@npm:^7.24.8": version: 7.24.8 resolution: "@babel/helper-member-expression-to-functions@npm:7.24.8" dependencies: @@ -822,18 +792,17 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-transforms@npm:^7.24.9": - version: 7.24.9 - resolution: "@babel/helper-module-transforms@npm:7.24.9" +"@babel/helper-module-transforms@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/helper-module-transforms@npm:7.25.2" dependencies: - "@babel/helper-environment-visitor": ^7.24.7 "@babel/helper-module-imports": ^7.24.7 "@babel/helper-simple-access": ^7.24.7 - "@babel/helper-split-export-declaration": ^7.24.7 "@babel/helper-validator-identifier": ^7.24.7 + "@babel/traverse": ^7.25.2 peerDependencies: "@babel/core": ^7.0.0 - checksum: ffcf11b678a8d3e6a243285cb5262c37f4d47d507653420c1f7f0bd27076e88177f2b7158850d1a470fcfe923426a2e6571c554c455a90c9755ff488ac36ac40 + checksum: 282d4e3308df6746289e46e9c39a0870819630af5f84d632559171e4fae6045684d771a65f62df3d569e88ccf81dc2def78b8338a449ae3a94bb421aa14fc367 languageName: node linkType: hard @@ -959,16 +928,16 @@ __metadata: languageName: node linkType: hard -"@babel/helper-replace-supers@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/helper-replace-supers@npm:7.24.7" +"@babel/helper-replace-supers@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/helper-replace-supers@npm:7.25.0" dependencies: - "@babel/helper-environment-visitor": ^7.24.7 - "@babel/helper-member-expression-to-functions": ^7.24.7 + "@babel/helper-member-expression-to-functions": ^7.24.8 "@babel/helper-optimise-call-expression": ^7.24.7 + "@babel/traverse": ^7.25.0 peerDependencies: "@babel/core": ^7.0.0 - checksum: 2bf0d113355c60d86a04e930812d36f5691f26c82d4ec1739e5ec0a4c982c9113dad3167f7c74f888a96328bd5e696372232406d8200e5979e6e0dc2af5e7c76 + checksum: f669fc2487c22d40b808f94b9c3ee41129484d5ef0ba689bdd70f216ff91e10b6b021d2f8cd37e7bdd700235a2a6ae6622526344f064528190383bf661ac65f8 languageName: node linkType: hard @@ -1073,15 +1042,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-split-export-declaration@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/helper-split-export-declaration@npm:7.24.7" - dependencies: - "@babel/types": ^7.24.7 - checksum: e3ddc91273e5da67c6953f4aa34154d005a00791dc7afa6f41894e768748540f6ebcac5d16e72541aea0c89bee4b89b4da6a3d65972a0ea8bfd2352eda5b7e22 - languageName: node - linkType: hard - "@babel/helper-string-parser@npm:^7.19.4": version: 7.19.4 resolution: "@babel/helper-string-parser@npm:7.19.4" @@ -1229,13 +1189,13 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/helpers@npm:7.24.8" +"@babel/helpers@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/helpers@npm:7.25.0" dependencies: - "@babel/template": ^7.24.7 - "@babel/types": ^7.24.8 - checksum: 2d7301b1b9c91e518c4766bae171230e243d98461c15eabbd44f8f9c83c297fad5c4a64ad80cfec9ca8e90412fc2b41ee86d7eb35dc8a7611c268bcf1317fe46 + "@babel/template": ^7.25.0 + "@babel/types": ^7.25.0 + checksum: 739e3704ff41a30f5eaac469b553f4d3ab02be6ced083f5925851532dfbd9efc5c347728e77b754ed0b262a4e5e384e60932a62c192d338db7e4b7f3adf9f4a7 languageName: node linkType: hard @@ -1332,12 +1292,14 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.24.7, @babel/parser@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/parser@npm:7.24.8" +"@babel/parser@npm:^7.24.8, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.3": + version: 7.25.3 + resolution: "@babel/parser@npm:7.25.3" + dependencies: + "@babel/types": ^7.25.2 bin: parser: ./bin/babel-parser.js - checksum: 76f866333bfbd53800ac027419ae523bb0137fc63daa968232eb780e4390136bb6e497cb4a2cf6051a2c318aa335c2e6d2adc17079d60691ae7bde89b28c5688 + checksum: b55aba64214fa1d66ccd0d29f476d2e55a48586920d280f88c546f81cbbececc0e01c9d05a78d6bf206e8438b9c426caa344942c1a581eecc4d365beaab8a20e languageName: node linkType: hard @@ -1877,6 +1839,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-typescript@npm:^7.23.3": + version: 7.25.4 + resolution: "@babel/plugin-syntax-typescript@npm:7.25.4" + dependencies: + "@babel/helper-plugin-utils": ^7.24.8 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 9b89b8930cd5983f64251d75c9fcdc17a8dc73837d6de12220ff972888ecff4054a6467cf0c423cad242aa96c0f0564a39a0823073728cc02239b80d13f02230 + languageName: node + linkType: hard + "@babel/plugin-syntax-typescript@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-syntax-typescript@npm:7.24.7" @@ -2984,16 +2957,17 @@ __metadata: linkType: hard "@babel/plugin-transform-typescript@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/plugin-transform-typescript@npm:7.24.8" + version: 7.25.2 + resolution: "@babel/plugin-transform-typescript@npm:7.25.2" dependencies: "@babel/helper-annotate-as-pure": ^7.24.7 - "@babel/helper-create-class-features-plugin": ^7.24.8 + "@babel/helper-create-class-features-plugin": ^7.25.0 "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 "@babel/plugin-syntax-typescript": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 4dcdc0ca2b523ccfb216ad7e68d2954576e42d83956e0e65626ad1ece17da85cb1122b6c350c4746db927996060466c879945d40cde156a94019f30587fef41a + checksum: b0267128d93560a4350919f7230a3b497e20fb8611d9f04bb3560d6b38877305ccad4c40903160263361c6930a84dbcb5b21b8ea923531bda51f67bffdc2dd0b languageName: node linkType: hard @@ -3439,14 +3413,14 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/template@npm:7.24.7" +"@babel/template@npm:^7.25.0": + version: 7.25.0 + resolution: "@babel/template@npm:7.25.0" dependencies: "@babel/code-frame": ^7.24.7 - "@babel/parser": ^7.24.7 - "@babel/types": ^7.24.7 - checksum: ea90792fae708ddf1632e54c25fe1a86643d8c0132311f81265d2bdbdd42f9f4fac65457056c1b6ca87f7aa0d6a795b549566774bba064bdcea2034ab3960ee9 + "@babel/parser": ^7.25.0 + "@babel/types": ^7.25.0 + checksum: 3f2db568718756d0daf2a16927b78f00c425046b654cd30b450006f2e84bdccaf0cbe6dc04994aa1f5f6a4398da2f11f3640a4d3ee31722e43539c4c919c817b languageName: node linkType: hard @@ -3486,21 +3460,18 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/traverse@npm:7.24.8" +"@babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.24.8, @babel/traverse@npm:^7.25.0, @babel/traverse@npm:^7.25.2": + version: 7.25.3 + resolution: "@babel/traverse@npm:7.25.3" dependencies: "@babel/code-frame": ^7.24.7 - "@babel/generator": ^7.24.8 - "@babel/helper-environment-visitor": ^7.24.7 - "@babel/helper-function-name": ^7.24.7 - "@babel/helper-hoist-variables": ^7.24.7 - "@babel/helper-split-export-declaration": ^7.24.7 - "@babel/parser": ^7.24.8 - "@babel/types": ^7.24.8 + "@babel/generator": ^7.25.0 + "@babel/parser": ^7.25.3 + "@babel/template": ^7.25.0 + "@babel/types": ^7.25.2 debug: ^4.3.1 globals: ^11.1.0 - checksum: ee7955476ce031613249f2b0ce9e74a3b7787c9d52e84534fcf39ad61aeb0b811a4cd83edc157608be4886f04c6ecf210861e211ba2a3db4fda729cc2048b5ed + checksum: 5661308b1357816f1d4e2813a5dd82c6053617acc08c5c95db051b8b6577d07c4446bc861c9a5e8bf294953ac8266ae13d7d9d856b6b889fc0d34c1f51abbd8c languageName: node linkType: hard @@ -3548,14 +3519,14 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.24.9": - version: 7.24.9 - resolution: "@babel/types@npm:7.24.9" +"@babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2": + version: 7.25.2 + resolution: "@babel/types@npm:7.25.2" dependencies: "@babel/helper-string-parser": ^7.24.8 "@babel/helper-validator-identifier": ^7.24.7 to-fast-properties: ^2.0.0 - checksum: 15cb05c45be5d4c49a749575d3742bd005d0e2e850c13fb462754983a5bc1063fbc8f6566246fc064e3e8b21a5a75a37a948f1b3f27189cc90b236fee93f5e51 + checksum: f73f66ba903c6f7e38f519a33d53a67d49c07e208e59ea65250362691dc546c6da7ab90ec66ee79651ef697329872f6f97eb19a6dfcacc026fd05e76a563c5d2 languageName: node linkType: hard @@ -4100,6 +4071,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/aix-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/aix-ppc64@npm:0.21.5" + conditions: os=aix & cpu=ppc64 + languageName: node + linkType: hard + +"@esbuild/aix-ppc64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/aix-ppc64@npm:0.23.1" + conditions: os=aix & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/android-arm64@npm:0.16.12" @@ -4142,6 +4127,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm64@npm:0.21.5" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/android-arm64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/android-arm64@npm:0.23.1" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/android-arm@npm:0.15.18": version: 0.15.18 resolution: "@esbuild/android-arm@npm:0.15.18" @@ -4191,6 +4190,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm@npm:0.21.5" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + +"@esbuild/android-arm@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/android-arm@npm:0.23.1" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@esbuild/android-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/android-x64@npm:0.16.12" @@ -4233,6 +4246,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-x64@npm:0.21.5" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/android-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/android-x64@npm:0.23.1" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + "@esbuild/darwin-arm64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/darwin-arm64@npm:0.16.12" @@ -4275,6 +4302,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-arm64@npm:0.21.5" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/darwin-arm64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/darwin-arm64@npm:0.23.1" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/darwin-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/darwin-x64@npm:0.16.12" @@ -4317,6 +4358,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-x64@npm:0.21.5" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/darwin-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/darwin-x64@npm:0.23.1" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@esbuild/freebsd-arm64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/freebsd-arm64@npm:0.16.12" @@ -4359,6 +4414,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-arm64@npm:0.21.5" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/freebsd-arm64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/freebsd-arm64@npm:0.23.1" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/freebsd-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/freebsd-x64@npm:0.16.12" @@ -4401,6 +4470,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-x64@npm:0.21.5" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/freebsd-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/freebsd-x64@npm:0.23.1" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/linux-arm64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-arm64@npm:0.16.12" @@ -4443,6 +4526,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm64@npm:0.21.5" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/linux-arm64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-arm64@npm:0.23.1" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/linux-arm@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-arm@npm:0.16.12" @@ -4485,6 +4582,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm@npm:0.21.5" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@esbuild/linux-arm@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-arm@npm:0.23.1" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@esbuild/linux-ia32@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-ia32@npm:0.16.12" @@ -4527,6 +4638,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ia32@npm:0.21.5" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + +"@esbuild/linux-ia32@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-ia32@npm:0.23.1" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/linux-loong64@npm:0.15.18": version: 0.15.18 resolution: "@esbuild/linux-loong64@npm:0.15.18" @@ -4576,6 +4701,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-loong64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-loong64@npm:0.21.5" + conditions: os=linux & cpu=loong64 + languageName: node + linkType: hard + +"@esbuild/linux-loong64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-loong64@npm:0.23.1" + conditions: os=linux & cpu=loong64 + languageName: node + linkType: hard + "@esbuild/linux-mips64el@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-mips64el@npm:0.16.12" @@ -4618,6 +4757,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-mips64el@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-mips64el@npm:0.21.5" + conditions: os=linux & cpu=mips64el + languageName: node + linkType: hard + +"@esbuild/linux-mips64el@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-mips64el@npm:0.23.1" + conditions: os=linux & cpu=mips64el + languageName: node + linkType: hard + "@esbuild/linux-ppc64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-ppc64@npm:0.16.12" @@ -4660,6 +4813,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ppc64@npm:0.21.5" + conditions: os=linux & cpu=ppc64 + languageName: node + linkType: hard + +"@esbuild/linux-ppc64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-ppc64@npm:0.23.1" + conditions: os=linux & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/linux-riscv64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-riscv64@npm:0.16.12" @@ -4702,6 +4869,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-riscv64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-riscv64@npm:0.21.5" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + +"@esbuild/linux-riscv64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-riscv64@npm:0.23.1" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + "@esbuild/linux-s390x@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-s390x@npm:0.16.12" @@ -4744,6 +4925,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-s390x@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-s390x@npm:0.21.5" + conditions: os=linux & cpu=s390x + languageName: node + linkType: hard + +"@esbuild/linux-s390x@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-s390x@npm:0.23.1" + conditions: os=linux & cpu=s390x + languageName: node + linkType: hard + "@esbuild/linux-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/linux-x64@npm:0.16.12" @@ -4786,6 +4981,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-x64@npm:0.21.5" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/linux-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/linux-x64@npm:0.23.1" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + "@esbuild/netbsd-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/netbsd-x64@npm:0.16.12" @@ -4828,6 +5037,27 @@ __metadata: languageName: node linkType: hard +"@esbuild/netbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/netbsd-x64@npm:0.21.5" + conditions: os=netbsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/netbsd-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/netbsd-x64@npm:0.23.1" + conditions: os=netbsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/openbsd-arm64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/openbsd-arm64@npm:0.23.1" + conditions: os=openbsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/openbsd-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/openbsd-x64@npm:0.16.12" @@ -4870,6 +5100,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/openbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/openbsd-x64@npm:0.21.5" + conditions: os=openbsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/openbsd-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/openbsd-x64@npm:0.23.1" + conditions: os=openbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/sunos-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/sunos-x64@npm:0.16.12" @@ -4912,6 +5156,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/sunos-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/sunos-x64@npm:0.21.5" + conditions: os=sunos & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/sunos-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/sunos-x64@npm:0.23.1" + conditions: os=sunos & cpu=x64 + languageName: node + linkType: hard + "@esbuild/win32-arm64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/win32-arm64@npm:0.16.12" @@ -4954,6 +5212,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-arm64@npm:0.21.5" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/win32-arm64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/win32-arm64@npm:0.23.1" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/win32-ia32@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/win32-ia32@npm:0.16.12" @@ -4996,6 +5268,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-ia32@npm:0.21.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@esbuild/win32-ia32@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/win32-ia32@npm:0.23.1" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/win32-x64@npm:0.16.12": version: 0.16.12 resolution: "@esbuild/win32-x64@npm:0.16.12" @@ -5038,6 +5324,20 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-x64@npm:0.21.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/win32-x64@npm:0.23.1": + version: 0.23.1 + resolution: "@esbuild/win32-x64@npm:0.23.1" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@eslint-community/eslint-utils@npm:^4.2.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" @@ -7038,6 +7338,19 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-layout-effect@npm:1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 271ea0bf1cd74718895a68414a6e95537737f36e02ad08eeb61a82b229d6abda9cff3135a479e134e1f0ce2c3ff97bb85babbdce751985fb755a39b231d7ccf2 + languageName: node + linkType: hard + "@radix-ui/react-use-layout-effect@npm:^1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" @@ -7053,6 +7366,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-size@npm:^1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-use-size@npm:1.1.0" + dependencies: + "@radix-ui/react-use-layout-effect": 1.1.0 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 01a11d4c07fc620b8a081e53d7ec8495b19a11e02688f3d9f47cf41a5fe0428d1e52ed60b2bf88dfd447dc2502797b9dad2841097389126dd108530913c4d90d + languageName: node + linkType: hard + "@rollup/pluginutils@npm:^4.2.0": version: 4.2.1 resolution: "@rollup/pluginutils@npm:4.2.1" @@ -7086,6 +7414,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm-eabi@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.21.1" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-android-arm64@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-android-arm64@npm:4.18.0" @@ -7093,6 +7428,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm64@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-android-arm64@npm:4.21.1" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-arm64@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-darwin-arm64@npm:4.18.0" @@ -7100,6 +7442,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-arm64@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-darwin-arm64@npm:4.21.1" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-x64@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-darwin-x64@npm:4.18.0" @@ -7107,6 +7456,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-x64@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-darwin-x64@npm:4.21.1" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-linux-arm-gnueabihf@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.18.0" @@ -7114,6 +7470,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm-gnueabihf@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.21.1" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm-musleabihf@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.18.0" @@ -7121,6 +7484,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm-musleabihf@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.21.1" + conditions: os=linux & cpu=arm & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-gnu@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.18.0" @@ -7128,6 +7498,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-gnu@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.21.1" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-musl@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-arm64-musl@npm:4.18.0" @@ -7135,6 +7512,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-musl@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.21.1" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-powerpc64le-gnu@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.18.0" @@ -7142,6 +7526,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.21.1" + conditions: os=linux & cpu=ppc64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-riscv64-gnu@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.18.0" @@ -7149,6 +7540,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-riscv64-gnu@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.21.1" + conditions: os=linux & cpu=riscv64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-s390x-gnu@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.18.0" @@ -7156,6 +7554,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-s390x-gnu@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.21.1" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-gnu@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-x64-gnu@npm:4.18.0" @@ -7163,6 +7568,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-gnu@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.21.1" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-musl@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-linux-x64-musl@npm:4.18.0" @@ -7170,6 +7582,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-musl@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.21.1" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-win32-arm64-msvc@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.18.0" @@ -7177,6 +7596,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-arm64-msvc@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.21.1" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-win32-ia32-msvc@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.18.0" @@ -7184,6 +7610,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-ia32-msvc@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.21.1" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@rollup/rollup-win32-x64-msvc@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-win32-x64-msvc@npm:4.18.0" @@ -7191,6 +7624,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-x64-msvc@npm:4.21.1": + version: 4.21.1 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.21.1" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@sec-ant/readable-stream@npm:^0.4.1": version: 0.4.1 resolution: "@sec-ant/readable-stream@npm:0.4.1" @@ -7465,7 +7905,7 @@ __metadata: languageName: unknown linkType: soft -"@seed-design/react-checkbox@workspace:packages/react-headless/checkbox": +"@seed-design/react-checkbox@0.0.0, @seed-design/react-checkbox@workspace:packages/react-headless/checkbox": version: 0.0.0-use.local resolution: "@seed-design/react-checkbox@workspace:packages/react-headless/checkbox" dependencies: @@ -7518,6 +7958,21 @@ __metadata: languageName: unknown linkType: soft +"@seed-design/react-tabs@0.0.0, @seed-design/react-tabs@workspace:packages/react-headless/tabs": + version: 0.0.0-use.local + resolution: "@seed-design/react-tabs@workspace:packages/react-headless/tabs" + dependencies: + "@radix-ui/react-use-controllable-state": 1.0.1 + "@radix-ui/react-use-size": ^1.1.0 + "@seed-design/dom-utils": 0.0.0 + "@use-gesture/react": ^10.3.1 + nanobundle: ^1.6.0 + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + languageName: unknown + linkType: soft + "@seed-design/react-text-field@0.0.0, @seed-design/react-text-field@workspace:packages/react-headless/text-field": version: 0.0.0-use.local resolution: "@seed-design/react-text-field@workspace:packages/react-headless/text-field" @@ -7608,6 +8063,7 @@ __metadata: "@seed-design/react-popover": 0.0.0 "@seed-design/react-radio-group": 0.0.0 "@seed-design/react-switch": 0.0.0 + "@seed-design/react-tabs": 0.0.0 "@seed-design/react-text-field": 0.0.0 "@seed-design/recipe": 0.0.0 "@seed-design/stylesheet": 1.0.4 @@ -7757,72 +8213,85 @@ __metadata: linkType: hard "@stackflow/core@npm:^1.0.13": - version: 1.0.13 - resolution: "@stackflow/core@npm:1.0.13" + version: 1.1.0 + resolution: "@stackflow/core@npm:1.1.0" dependencies: react-fast-compare: ^3.2.2 - checksum: f4706f58bd1f7385f6afac1ab02dea5ba8c4ce3cb283478d9f3acc359ea7504b20dad1b520a7d63732e555aa4d8d9a2ef6dc97f9f69ac14f35087572a181419a + checksum: 5fb1908da5d04e84e0dc9faac29d6789bb79db273ebd53b5ddef830ab7752e280e0bd409bc01b057888e1629a1f69fd915cbd451d19837138f3584ff651d17fd languageName: node linkType: hard "@stackflow/plugin-basic-ui@npm:^1.8.4": - version: 1.8.4 - resolution: "@stackflow/plugin-basic-ui@npm:1.8.4" + version: 1.9.1 + resolution: "@stackflow/plugin-basic-ui@npm:1.9.1" dependencies: + "@stackflow/react-ui-core": ^1.1.1 "@vanilla-extract/css": ^1.15.3 "@vanilla-extract/dynamic": ^2.1.1 "@vanilla-extract/private": ^1.0.5 "@vanilla-extract/recipes": ^0.5.3 peerDependencies: - "@stackflow/core": ^1 - "@stackflow/react": ^1.2.0-canary.0 + "@stackflow/core": ^1.1.0-canary.0 + "@stackflow/react": ^1.3.0-canary.0 "@types/react": ">=16.8.0" react: ">=16.8.0" - checksum: 98df6bf7188cbfe8ba3243bb1a9808f870d9c1cdfe12cb5685b4ce172ccbe9a3112884d0134387fe3963f8bf062d97f87d43b54f027a4b4a4d86bbb4474e290d + checksum: efaa31168ccf807086d04feaa5b754d1b5075745ab6241c3e89fd7c5c82dfb465d94e841bdbfdf99f7c48806547b039407bb33c81a6bc0cdacd934cea756eb01 languageName: node linkType: hard "@stackflow/plugin-history-sync@npm:^1.6.0": - version: 1.6.0 - resolution: "@stackflow/plugin-history-sync@npm:1.6.0" + version: 1.6.2 + resolution: "@stackflow/plugin-history-sync@npm:1.6.2" dependencies: history: ^5.3.0 url-pattern: ^1.0.3 peerDependencies: "@stackflow/config": ^1.0.1-canary.0 - "@stackflow/core": ^1 - "@stackflow/react": ^1.2.0-canary.0 + "@stackflow/core": ^1.1.0-canary.0 + "@stackflow/react": ^1.3.0-canary.0 "@types/react": ">=16.8.0" react: ">=16.8.0" - checksum: 70fb8b93ca4288903d6045cf563bde7d4f2071ed67ab1f0d58fe63edb507d9438fc83b50f63627a214dc1b7d9f6d173d6871435c6574f1f5e92c107d5fdfa5dd + checksum: f288ba4e3d44630028476d5e1a04ebed2e41c1ab85cc73d82306bc7c5987f9009f6efe9b972eb2c6ab052eca1d2dcb813b4ed601a2096fb507302427f0f5cc5a languageName: node linkType: hard "@stackflow/plugin-renderer-basic@npm:^1.1.11": - version: 1.1.11 - resolution: "@stackflow/plugin-renderer-basic@npm:1.1.11" + version: 1.1.12 + resolution: "@stackflow/plugin-renderer-basic@npm:1.1.12" peerDependencies: - "@stackflow/core": ^1 - "@stackflow/react": ^1.2.0-canary.0 + "@stackflow/core": ^1.1.0-canary.0 + "@stackflow/react": ^1.3.0-canary.0 "@types/react": ">=16.8.0" react: ">=16.8.0" - checksum: 38e5383e5fe9d401153628c5efa98232e166b50631dc5d43881204c82cfdc675d96357843f6a4c1c45b445ef3bdadd4f80ca1cccadb32e7727ed15ec3fcdeea5 + checksum: c15aeb0eb726a441a6333c210636ecd3f174e7d8d1bb7b4bf17a705ba9599ffc3a635255c74627b4cf6318eb65ac61f86ac7804318a156a48989a5a320edc29e + languageName: node + linkType: hard + +"@stackflow/react-ui-core@npm:^1.1.1": + version: 1.1.1 + resolution: "@stackflow/react-ui-core@npm:1.1.1" + peerDependencies: + "@stackflow/core": ^1.1.0-canary.0 + "@stackflow/react": ^1.3.0-canary.0 + "@types/react": ">=16.8.0" + react: ">=16.8.0" + checksum: ab178979eeae1ca45b2bea4fea56dfa16b16d8170afbaacb05ff538ec8174c6e27ff56bdd938930d9e18d11144468a0b32ad76b0bc291e8cda5b578ed3fb261d languageName: node linkType: hard "@stackflow/react@npm:^1.2.1": - version: 1.2.1 - resolution: "@stackflow/react@npm:1.2.1" + version: 1.3.1 + resolution: "@stackflow/react@npm:1.3.1" dependencies: history: ^5.3.0 react-fast-compare: ^3.2.2 url-pattern: ^1.0.3 peerDependencies: "@stackflow/config": ^1.0.1-canary.0 - "@stackflow/core": ^1 + "@stackflow/core": ^1.1.0-canary.0 "@types/react": ">=16.8.0" react: ">=16.8.0" - checksum: 37f365fb153c03058a67627c6762928d99b95c6b1ab7e2915fe14bd8265088065508fc76aaa0ebd4fc38f62a64e6bf36080ae838fab4b64ae4a52e737e31c347 + checksum: a6aff9781bb01de76d10278f3b5dfbe62d0548f3f98add7c8febbc778ec6acd99a5a6774063c9060238834a8a4d4ad958b2725d42bdec4add52b2da007cd25ab languageName: node linkType: hard @@ -8990,21 +9459,21 @@ __metadata: linkType: hard "@tanstack/react-virtual@npm:^3.0.0-beta.60": - version: 3.8.4 - resolution: "@tanstack/react-virtual@npm:3.8.4" + version: 3.10.1 + resolution: "@tanstack/react-virtual@npm:3.10.1" dependencies: - "@tanstack/virtual-core": 3.8.4 + "@tanstack/virtual-core": 3.10.1 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 297bcc941d307662f513eb724431ca863857872f6c77805049dff5633c57620feb43a51b2d4da988c6c8dc607ea4144e42eed6e1ea2561e6b607b2af998bf7f3 + checksum: 8a894d12befedd4a95179392be2d2ff83659027b3f82a7f1484bc2c849b26b97ffa5b8d33eb682f793d893090b5d29ec3ffee17c6214e036e9e6f0c94b4b5e7e languageName: node linkType: hard -"@tanstack/virtual-core@npm:3.8.4": - version: 3.8.4 - resolution: "@tanstack/virtual-core@npm:3.8.4" - checksum: 6774e50582410b913feb8fc7f0e39e1e57e8a72a97f6b96e354a2a9affe9679a8283ac1e8a0616eb0e63b9851aed7040d184e4eb13ed14fe7342d1497574caed +"@tanstack/virtual-core@npm:3.10.1": + version: 3.10.1 + resolution: "@tanstack/virtual-core@npm:3.10.1" + checksum: 02d5c71e0486b248335a257cf5d95628f221f44755167234b5526dfba78bcd743931fd704d097a5a6ee55d3b1121b2b121e0d420a9544a2bc32d22e19e5689cb languageName: node linkType: hard @@ -9769,11 +10238,11 @@ __metadata: linkType: hard "@types/node@npm:^20.14.12": - version: 20.14.12 - resolution: "@types/node@npm:20.14.12" + version: 20.16.1 + resolution: "@types/node@npm:20.16.1" dependencies: - undici-types: ~5.26.4 - checksum: 1dd493d9e27da43fc374b17cf4b956dbd1dfe20ecf4749408a1db046c79b5a39261a2aa7a3f59b79fd1b5632b861ba72837779d812e0d3b6cf5b22f1650fe722 + undici-types: ~6.19.2 + checksum: 2b8f30f416f5c1851ffa8a13ef6c464a5e355edfd763713c22813a7839f6419a64e27925f9e89c972513d78432263179332f0bffb273d16498233bfdf495d096 languageName: node linkType: hard @@ -9890,6 +10359,16 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:^18.3.4": + version: 18.3.4 + resolution: "@types/react@npm:18.3.4" + dependencies: + "@types/prop-types": "*" + csstype: ^3.0.2 + checksum: 555ccd1af86a23c781dea0360de64b2f7a0708cdcbf9e6496744b77630065868526fd55147c727dc5ef11b7fd712b04f7898757a84c67e2eb9dfd4c4ead10d95 + languageName: node + linkType: hard + "@types/responselike@npm:^1.0.0": version: 1.0.0 resolution: "@types/responselike@npm:1.0.0" @@ -9973,9 +10452,9 @@ __metadata: linkType: hard "@types/unist@npm:^3.0.0": - version: 3.0.2 - resolution: "@types/unist@npm:3.0.2" - checksum: 3d04d0be69316e5f14599a0d993a208606c12818cf631fd399243d1dc7a9bd8a3917d6066baa6abc290814afbd744621484756803c80cba892c39cd4b4a85616 + version: 3.0.3 + resolution: "@types/unist@npm:3.0.3" + checksum: 96e6453da9e075aaef1dc22482463898198acdc1eeb99b465e65e34303e2ec1e3b1ed4469a9118275ec284dc98019f63c3f5d49422f0e4ac707e5ab90fb3b71a languageName: node linkType: hard @@ -10139,6 +10618,24 @@ __metadata: languageName: node linkType: hard +"@use-gesture/core@npm:10.3.1": + version: 10.3.1 + resolution: "@use-gesture/core@npm:10.3.1" + checksum: 6d1a00dcb39a28fb6aeb816e0bbf94a5cf8e466b912f4f6f35c2658f9b27a00ee7f0f488d736e6a54675deb8073bccdc3cb12a08b72a490a37a9f48fc4d86b2e + languageName: node + linkType: hard + +"@use-gesture/react@npm:^10.3.1": + version: 10.3.1 + resolution: "@use-gesture/react@npm:10.3.1" + dependencies: + "@use-gesture/core": 10.3.1 + peerDependencies: + react: ">= 16.8.0" + checksum: 763ef5fe5e91715a20beac0d430b0ffd815f1ab761ffdd8a0c8352fa680411123b3855815a77b4e2d1018878ba515424f9daa863ea797c3dd089032fb539ec22 + languageName: node + linkType: hard + "@vanilla-extract/babel-plugin-debug-ids@npm:^1.0.0": version: 1.0.0 resolution: "@vanilla-extract/babel-plugin-debug-ids@npm:1.0.0" @@ -10148,6 +10645,15 @@ __metadata: languageName: node linkType: hard +"@vanilla-extract/babel-plugin-debug-ids@npm:^1.0.6": + version: 1.0.6 + resolution: "@vanilla-extract/babel-plugin-debug-ids@npm:1.0.6" + dependencies: + "@babel/core": ^7.23.9 + checksum: 55f173c0c6a95a8da35a8625e6400dd90a126a4cd3d52d6a5583573e957c0f13c408fd86873d1d65ac1cfa9dfd743306ed866ad8ed1793370b3857e0636b88df + languageName: node + linkType: hard + "@vanilla-extract/babel-plugin@npm:^1.2.0": version: 1.2.0 resolution: "@vanilla-extract/babel-plugin@npm:1.2.0" @@ -10159,22 +10665,23 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/css@npm:^1.15.3": - version: 1.15.3 - resolution: "@vanilla-extract/css@npm:1.15.3" +"@vanilla-extract/css@npm:^1.15.3, @vanilla-extract/css@npm:^1.15.5": + version: 1.15.5 + resolution: "@vanilla-extract/css@npm:1.15.5" dependencies: "@emotion/hash": ^0.9.0 - "@vanilla-extract/private": ^1.0.5 + "@vanilla-extract/private": ^1.0.6 css-what: ^6.1.0 cssesc: ^3.0.0 csstype: ^3.0.7 dedent: ^1.5.3 deep-object-diff: ^1.1.9 deepmerge: ^4.2.2 + lru-cache: ^10.4.3 media-query-parser: ^2.0.2 modern-ahocorasick: ^1.0.0 picocolors: ^1.0.0 - checksum: 9f54c51708c300f37d2ce23db0942787b6c82fe3040691104ef54efadcadcd82488adaac3fc32e601f918a0332a7f4921dcccf70bd0923d7117d941d361ba81a + checksum: 0c260e55a1648a827df74cae4475a1a61767e4ef3a7a3a299853ae3f77ed220d7a4b604737886140ea9e72a379eda4ee45b7349a4651cf3d5a4f2c8697448d6d languageName: node linkType: hard @@ -10198,11 +10705,11 @@ __metadata: linkType: hard "@vanilla-extract/dynamic@npm:^2.1.1": - version: 2.1.1 - resolution: "@vanilla-extract/dynamic@npm:2.1.1" + version: 2.1.2 + resolution: "@vanilla-extract/dynamic@npm:2.1.2" dependencies: - "@vanilla-extract/private": ^1.0.5 - checksum: 03fd6bcd477dcb022f0186e17ad7caa4d30b2db7e39df61ae778fb129ee005585a70eb56ebf656b9deba2354ce3b41a7db18823714566538f64d582b27ff57fa + "@vanilla-extract/private": ^1.0.6 + checksum: ec6ec9b02c7ec8a9d60aebf63225fd3f930c06ad824321f03f683f1948eb6d4e554d934303da140b3230b4af2fa15bab494c6da2a3b9a172e4118c245b4f942a languageName: node linkType: hard @@ -10239,6 +10746,37 @@ __metadata: languageName: node linkType: hard +"@vanilla-extract/integration@npm:^7.1.9": + version: 7.1.9 + resolution: "@vanilla-extract/integration@npm:7.1.9" + dependencies: + "@babel/core": ^7.23.9 + "@babel/plugin-syntax-typescript": ^7.23.3 + "@vanilla-extract/babel-plugin-debug-ids": ^1.0.6 + "@vanilla-extract/css": ^1.15.5 + dedent: ^1.5.3 + esbuild: "npm:esbuild@>=0.17.6 <0.24.0" + eval: 0.1.8 + find-up: ^5.0.0 + javascript-stringify: ^2.0.1 + mlly: ^1.4.2 + vite: ^5.0.11 + vite-node: ^1.2.0 + checksum: 6f6b1eab9f67091c47c070cdf8128034458f7cc649a3188037b85f7cd466466405b91321e3d909b8a5b81452280bc885a4c08530ab8bad20d6c22b5e69ec4602 + languageName: node + linkType: hard + +"@vanilla-extract/next-plugin@npm:^2.4.5": + version: 2.4.5 + resolution: "@vanilla-extract/next-plugin@npm:2.4.5" + dependencies: + "@vanilla-extract/webpack-plugin": ^2.3.13 + peerDependencies: + next: ">=12.1.7" + checksum: 6800fb584275b521a6d0133005ccf253a9666a1acfb70cea126d664c39e5dcd5f344dc6ded174439df0751c791d54db2b4be4a3e6d65b035143c82ad47512b34 + languageName: node + linkType: hard + "@vanilla-extract/private@npm:^1.0.3": version: 1.0.3 resolution: "@vanilla-extract/private@npm:1.0.3" @@ -10253,6 +10791,13 @@ __metadata: languageName: node linkType: hard +"@vanilla-extract/private@npm:^1.0.6": + version: 1.0.6 + resolution: "@vanilla-extract/private@npm:1.0.6" + checksum: 2265b02af29d8cd40f6ddeeed197fb2df1a7695f5a9821d5e3597677179be8b83bcd8fe4df4a6178544f89123d745a3c6a13599d4fe4e5873b065a8ad329f690 + languageName: node + linkType: hard + "@vanilla-extract/recipes@npm:^0.2.5": version: 0.2.5 resolution: "@vanilla-extract/recipes@npm:0.2.5" @@ -10263,11 +10808,11 @@ __metadata: linkType: hard "@vanilla-extract/recipes@npm:^0.5.3": - version: 0.5.3 - resolution: "@vanilla-extract/recipes@npm:0.5.3" + version: 0.5.5 + resolution: "@vanilla-extract/recipes@npm:0.5.5" peerDependencies: "@vanilla-extract/css": ^1.0.0 - checksum: 2ddf10ce3413ad892cec2cc03480af987c59d01bc23f4dfcefb5426cfafd3a4107277a560418332603f8f4c8e8a51032500e522db128d205821a488d05b71875 + checksum: 8d2b4f8163369424226ec9a47e754002b8a095bcf86c1a60a91b2183f59508519bd31ed41baefc950ad7ca225d75b3184c3b84d3c741c5c60d91618dd70452aa languageName: node linkType: hard @@ -10295,7 +10840,21 @@ __metadata: loader-utils: ^2.0.0 peerDependencies: webpack: ^4.30.0 || ^5.20.2 - checksum: 3e1741062eb849192558718e85c99d2e1aeefab01f17863d2381d493ec337a1a5137b8aef7bb60687ad754facda184d15ba763231f7bdad307170761755abf67 + checksum: 3e1741062eb849192558718e85c99d2e1aeefab01f17863d2381d493ec337a1a5137b8aef7bb60687ad754facda184d15ba763231f7bdad307170761755abf67 + languageName: node + linkType: hard + +"@vanilla-extract/webpack-plugin@npm:^2.3.13": + version: 2.3.13 + resolution: "@vanilla-extract/webpack-plugin@npm:2.3.13" + dependencies: + "@vanilla-extract/integration": ^7.1.9 + debug: ^4.3.1 + loader-utils: ^2.0.0 + picocolors: ^1.0.0 + peerDependencies: + webpack: ^4.30.0 || ^5.20.2 + checksum: 939b864f258ccd971cd52845d80f2d30d71861ca5c4668ddc49d92dd060115466e6d67b3398a2df0cfd80837643e8d4f31ed8016d67f8a3c4c183312371e31e4 languageName: node linkType: hard @@ -12164,21 +12723,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.23.1": - version: 4.23.2 - resolution: "browserslist@npm:4.23.2" - dependencies: - caniuse-lite: ^1.0.30001640 - electron-to-chromium: ^1.4.820 - node-releases: ^2.0.14 - update-browserslist-db: ^1.1.0 - bin: - browserslist: cli.js - checksum: 8212af37f6ca6355da191cf2d4ad49bd0b82854888b9a7e103638fada70d38cbe36d28feeeaa98344cb15d9128f9f74bcc8ce1bfc9011b5fd14381c1c6fb542c - languageName: node - linkType: hard - -"browserslist@npm:^4.23.3": +"browserslist@npm:^4.23.1, browserslist@npm:^4.23.3": version: 4.23.3 resolution: "browserslist@npm:4.23.3" dependencies: @@ -12486,10 +13031,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001579": - version: 1.0.30001646 - resolution: "caniuse-lite@npm:1.0.30001646" - checksum: 53d45b990d21036aaab7547e164174a0ac9a117acdd14a6c33822c4983e2671b1df48686d5383002d0ef158b208b0047a7dc404312a6229bf8ee629de3351b44 +"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001651 + resolution: "caniuse-lite@npm:1.0.30001651" + checksum: c31a5a01288e70cdbbfb5cd94af3df02f295791673173b8ce6d6a16db4394a6999197d44190be5a6ff06b8c2c7d2047e94dfd5e5eb4c103ab000fca2d370afc7 languageName: node linkType: hard @@ -12507,20 +13052,6 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001643 - resolution: "caniuse-lite@npm:1.0.30001643" - checksum: e39991c13a0fd8f5c2aa99c9128188e4c4e9d6a203c3da6270c36285460ef152c5e9410ee4db560aa723904668946afe50541dce9636ab5e61434ba71dc22955 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001649 - resolution: "caniuse-lite@npm:1.0.30001649" - checksum: 7952512a243f22c942e0e99249def19d781ad1900db101f2d8de9d83de37db000a7dc7f226c9c99134001975e22852becf1677539c24c7ecae53467b681c400f - languageName: node - linkType: hard - "capital-case@npm:^1.0.4": version: 1.0.4 resolution: "capital-case@npm:1.0.4" @@ -13046,9 +13577,9 @@ __metadata: linkType: hard "code-block-writer@npm:^13.0.1": - version: 13.0.1 - resolution: "code-block-writer@npm:13.0.1" - checksum: 678b740d1723c7cc3c5addcbc1a91d9a7a3f033510eb8e0639154fcaae456c80630dbd40d16aefdffaf3edb5ffb352d7d46f195f69c8be692c4d7debb1dc7933 + version: 13.0.2 + resolution: "code-block-writer@npm:13.0.2" + checksum: 8052ae6f27ef73366bd5df04b6f9beced493261fcaef5cbd0f3853644b5e0aa5af18d099b96448be88ea3d000c7b180207d371044edd9fcf98fea22c9f8ba3a1 languageName: node linkType: hard @@ -13236,6 +13767,9 @@ __metadata: dependencies: "@radix-ui/react-slot": ^1.1.0 "@seed-design/cli": "workspace:^" + "@seed-design/design-token": ^1.0.3 + "@seed-design/react-checkbox": 0.0.0 + "@seed-design/react-tabs": 0.0.0 "@seed-design/recipe": 0.0.0 "@seed-design/stylesheet": 1.0.4 "@stackflow/config": ^1.1.0 @@ -13244,13 +13778,16 @@ __metadata: "@stackflow/plugin-renderer-basic": ^1.1.11 "@stackflow/react": ^1.2.1 "@types/node": ^20.14.12 + "@types/react": ^18.3.4 + "@vanilla-extract/css": ^1.15.5 + "@vanilla-extract/next-plugin": ^2.4.5 autoprefixer: ^10.4.20 chalk: ^5.3.0 next: ^14.2.5 nextra: ^2.13.4 nextra-theme-docs: ^2.13.4 - react: ^18.3.1 - react-dom: ^18.3.1 + react: ^18.2.0 + react-dom: ^18.2.0 simple-reveal: ^0.8.0 ts-morph: ^23.0.0 ts-node: ^10.9.2 @@ -14041,9 +14578,9 @@ __metadata: linkType: hard "cytoscape@npm:^3.28.1": - version: 3.30.1 - resolution: "cytoscape@npm:3.30.1" - checksum: 9083ce604cc6c18c00d1034e6e7d50b985340bc4cd13aac1644be653bad197c338abec235b22c3361bf1cbf5ca9e4459207397565a7d147fa24f1f78c30ebefa + version: 3.30.2 + resolution: "cytoscape@npm:3.30.2" + checksum: 45ec8f256b6bb59d505bf92f937d86d2547c62cd45e02e7e873320f321d39bb57261aad0dad06d0903f2af50decb367aa0a05193043da5332dc6feb37dce888c languageName: node linkType: hard @@ -14447,9 +14984,9 @@ __metadata: linkType: hard "dayjs@npm:^1.11.7": - version: 1.11.12 - resolution: "dayjs@npm:1.11.12" - checksum: 40a4f67c2df3af125ae0ddec68d3a6d806d3009a7414bf45479aaf82f1dd82f3e139e6642e72391abccc37488897830c56afcabb4c819014130d283644df8128 + version: 1.11.13 + resolution: "dayjs@npm:1.11.13" + checksum: f388db88a6aa93956c1f6121644e783391c7b738b73dbc54485578736565c8931bdfba4bb94e9b1535c6e509c97d5deb918bbe1ae6b34358d994de735055cca9 languageName: node linkType: hard @@ -15185,17 +15722,10 @@ __metadata: languageName: node linkType: hard -"electron-to-chromium@npm:^1.4.820": - version: 1.5.0 - resolution: "electron-to-chromium@npm:1.5.0" - checksum: 82e362dd5851f5ad312ab6699c5d36221deb1fbd4ab2c28f43c3244dd7d28aee28c3239491564dd4bb57f3ed8291a88c4f7983c61aad6db98459e96400923b8d - languageName: node - linkType: hard - "electron-to-chromium@npm:^1.5.4": - version: 1.5.5 - resolution: "electron-to-chromium@npm:1.5.5" - checksum: fcdd2797ece1ece6764b88b5fc36cfc6a571e08b832c6777d8bbefa19cae22a36614411aacc5687d9fea7e1db86469f53c3952ca2579c5fe705dea7ed270d8cc + version: 1.5.12 + resolution: "electron-to-chromium@npm:1.5.12" + checksum: 9ce8d5be88357e71213c12f3d2d47b74666bb17d5dfbd30be77e4c1ed6782c7349803018b0fbefd95bf99ae69ab5918a50cdebf0d5b2c4c9a2e5d0e897d2e32b languageName: node linkType: hard @@ -16217,6 +16747,169 @@ __metadata: languageName: node linkType: hard +"esbuild@npm:^0.21.3": + version: 0.21.5 + resolution: "esbuild@npm:0.21.5" + dependencies: + "@esbuild/aix-ppc64": 0.21.5 + "@esbuild/android-arm": 0.21.5 + "@esbuild/android-arm64": 0.21.5 + "@esbuild/android-x64": 0.21.5 + "@esbuild/darwin-arm64": 0.21.5 + "@esbuild/darwin-x64": 0.21.5 + "@esbuild/freebsd-arm64": 0.21.5 + "@esbuild/freebsd-x64": 0.21.5 + "@esbuild/linux-arm": 0.21.5 + "@esbuild/linux-arm64": 0.21.5 + "@esbuild/linux-ia32": 0.21.5 + "@esbuild/linux-loong64": 0.21.5 + "@esbuild/linux-mips64el": 0.21.5 + "@esbuild/linux-ppc64": 0.21.5 + "@esbuild/linux-riscv64": 0.21.5 + "@esbuild/linux-s390x": 0.21.5 + "@esbuild/linux-x64": 0.21.5 + "@esbuild/netbsd-x64": 0.21.5 + "@esbuild/openbsd-x64": 0.21.5 + "@esbuild/sunos-x64": 0.21.5 + "@esbuild/win32-arm64": 0.21.5 + "@esbuild/win32-ia32": 0.21.5 + "@esbuild/win32-x64": 0.21.5 + dependenciesMeta: + "@esbuild/aix-ppc64": + optional: true + "@esbuild/android-arm": + optional: true + "@esbuild/android-arm64": + optional: true + "@esbuild/android-x64": + optional: true + "@esbuild/darwin-arm64": + optional: true + "@esbuild/darwin-x64": + optional: true + "@esbuild/freebsd-arm64": + optional: true + "@esbuild/freebsd-x64": + optional: true + "@esbuild/linux-arm": + optional: true + "@esbuild/linux-arm64": + optional: true + "@esbuild/linux-ia32": + optional: true + "@esbuild/linux-loong64": + optional: true + "@esbuild/linux-mips64el": + optional: true + "@esbuild/linux-ppc64": + optional: true + "@esbuild/linux-riscv64": + optional: true + "@esbuild/linux-s390x": + optional: true + "@esbuild/linux-x64": + optional: true + "@esbuild/netbsd-x64": + optional: true + "@esbuild/openbsd-x64": + optional: true + "@esbuild/sunos-x64": + optional: true + "@esbuild/win32-arm64": + optional: true + "@esbuild/win32-ia32": + optional: true + "@esbuild/win32-x64": + optional: true + bin: + esbuild: bin/esbuild + checksum: 2911c7b50b23a9df59a7d6d4cdd3a4f85855787f374dce751148dbb13305e0ce7e880dde1608c2ab7a927fc6cec3587b80995f7fc87a64b455f8b70b55fd8ec1 + languageName: node + linkType: hard + +"esbuild@npm:esbuild@>=0.17.6 <0.24.0": + version: 0.23.1 + resolution: "esbuild@npm:0.23.1" + dependencies: + "@esbuild/aix-ppc64": 0.23.1 + "@esbuild/android-arm": 0.23.1 + "@esbuild/android-arm64": 0.23.1 + "@esbuild/android-x64": 0.23.1 + "@esbuild/darwin-arm64": 0.23.1 + "@esbuild/darwin-x64": 0.23.1 + "@esbuild/freebsd-arm64": 0.23.1 + "@esbuild/freebsd-x64": 0.23.1 + "@esbuild/linux-arm": 0.23.1 + "@esbuild/linux-arm64": 0.23.1 + "@esbuild/linux-ia32": 0.23.1 + "@esbuild/linux-loong64": 0.23.1 + "@esbuild/linux-mips64el": 0.23.1 + "@esbuild/linux-ppc64": 0.23.1 + "@esbuild/linux-riscv64": 0.23.1 + "@esbuild/linux-s390x": 0.23.1 + "@esbuild/linux-x64": 0.23.1 + "@esbuild/netbsd-x64": 0.23.1 + "@esbuild/openbsd-arm64": 0.23.1 + "@esbuild/openbsd-x64": 0.23.1 + "@esbuild/sunos-x64": 0.23.1 + "@esbuild/win32-arm64": 0.23.1 + "@esbuild/win32-ia32": 0.23.1 + "@esbuild/win32-x64": 0.23.1 + dependenciesMeta: + "@esbuild/aix-ppc64": + optional: true + "@esbuild/android-arm": + optional: true + "@esbuild/android-arm64": + optional: true + "@esbuild/android-x64": + optional: true + "@esbuild/darwin-arm64": + optional: true + "@esbuild/darwin-x64": + optional: true + "@esbuild/freebsd-arm64": + optional: true + "@esbuild/freebsd-x64": + optional: true + "@esbuild/linux-arm": + optional: true + "@esbuild/linux-arm64": + optional: true + "@esbuild/linux-ia32": + optional: true + "@esbuild/linux-loong64": + optional: true + "@esbuild/linux-mips64el": + optional: true + "@esbuild/linux-ppc64": + optional: true + "@esbuild/linux-riscv64": + optional: true + "@esbuild/linux-s390x": + optional: true + "@esbuild/linux-x64": + optional: true + "@esbuild/netbsd-x64": + optional: true + "@esbuild/openbsd-arm64": + optional: true + "@esbuild/openbsd-x64": + optional: true + "@esbuild/sunos-x64": + optional: true + "@esbuild/win32-arm64": + optional: true + "@esbuild/win32-ia32": + optional: true + "@esbuild/win32-x64": + optional: true + bin: + esbuild: bin/esbuild + checksum: 0413c3b9257327fb598427688b7186ea335bf1693746fe5713cc93c95854d6388b8ed4ad643fddf5b5ace093f7dcd9038dd58e087bf2da1f04dfb4c5571660af + languageName: node + linkType: hard + "escalade@npm:^3.1.1": version: 3.1.1 resolution: "escalade@npm:3.1.1" @@ -16716,6 +17409,16 @@ __metadata: languageName: node linkType: hard +"eval@npm:0.1.8": + version: 0.1.8 + resolution: "eval@npm:0.1.8" + dependencies: + "@types/node": "*" + require-like: ">= 0.1.1" + checksum: d005567f394cfbe60948e34982e4637d2665030f9aa7dcac581ea6f9ec6eceb87133ed3dc0ae21764aa362485c242a731dbb6371f1f1a86807c58676431e9d1a + languageName: node + linkType: hard + "event-emitter@npm:^0.3.5": version: 0.3.5 resolution: "event-emitter@npm:0.3.5" @@ -16805,14 +17508,14 @@ __metadata: linkType: hard "execa@npm:^9.3.0": - version: 9.3.0 - resolution: "execa@npm:9.3.0" + version: 9.3.1 + resolution: "execa@npm:9.3.1" dependencies: "@sindresorhus/merge-streams": ^4.0.0 cross-spawn: ^7.0.3 figures: ^6.1.0 get-stream: ^9.0.0 - human-signals: ^7.0.0 + human-signals: ^8.0.0 is-plain-obj: ^4.1.0 is-stream: ^4.0.1 npm-run-path: ^5.2.0 @@ -16820,7 +17523,7 @@ __metadata: signal-exit: ^4.1.0 strip-final-newline: ^4.0.0 yoctocolors: ^2.0.0 - checksum: d07b28405edf74e3db7ec63b07e54318c58f1a97522064e4e760a257b4d3a9888d9fa7add62ff28c9c26b062a3a311bceea52dea23bf27433a8a19d85a95bdf4 + checksum: 8a7529de3c99a7039eb7b9063afb423332c1b8255002e0414983454f06efb915225ac79011db0a0b55f3144086d409a1daf47e1066b7cd09eba596dae87dba49 languageName: node linkType: hard @@ -17394,9 +18097,9 @@ __metadata: linkType: hard "focus-visible@npm:^5.2.0": - version: 5.2.0 - resolution: "focus-visible@npm:5.2.0" - checksum: 876f646ef453680d3d34e9f9b23961527ffd5ccaed8690f423d4fbfa37ff023d98a490972bc1387850e37ec2e44958c81f6096ef95b67462e5c4b5404cf1dbb9 + version: 5.2.1 + resolution: "focus-visible@npm:5.2.1" + checksum: 9da7388e703315a8f933bb4fec4e2be5f1d655dfc91c388d1802ad53a99e1fa31a5be90866b7db83d48d8f7f771dd2df7d51445a37f48f7069823eceb5f34e64 languageName: node linkType: hard @@ -19873,10 +20576,10 @@ __metadata: languageName: node linkType: hard -"human-signals@npm:^7.0.0": - version: 7.0.0 - resolution: "human-signals@npm:7.0.0" - checksum: 5e05a7dbb6d021371ddb854c58b19aa372cc616b34e8eec0d27098d699be0571e29b2b98869053d898badb9594b7ed5058642660b04fb1e41b7bd1f83e472d16 +"human-signals@npm:^8.0.0": + version: 8.0.0 + resolution: "human-signals@npm:8.0.0" + checksum: ccaca470e8b5509d89cd9af82e88fc497a4b4b9149b7964bcd9dd1463f9d9676fb5488f50cd1bc0f12ed8875a7c1c5e7019cbe238992b444919e8cf056688eba languageName: node linkType: hard @@ -21956,6 +22659,13 @@ __metadata: languageName: node linkType: hard +"lru-cache@npm:^10.4.3": + version: 10.4.3 + resolution: "lru-cache@npm:10.4.3" + checksum: 6476138d2125387a6d20f100608c2583d415a4f64a0fecf30c9e2dda976614f09cad4baa0842447bd37dd459a7bd27f57d9d8f8ce558805abd487c583f3d774a + languageName: node + linkType: hard + "lru-cache@npm:^4.0.1": version: 4.1.5 resolution: "lru-cache@npm:4.1.5" @@ -26286,6 +26996,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.41": + version: 8.4.41 + resolution: "postcss@npm:8.4.41" + dependencies: + nanoid: ^3.3.7 + picocolors: ^1.0.1 + source-map-js: ^1.2.0 + checksum: f865894929eb0f7fc2263811cc853c13b1c75103028b3f4f26df777e27b201f1abe21cb4aa4c2e901c80a04f6fb325ee22979688fe55a70e2ea82b0a517d3b6f + languageName: node + linkType: hard + "preact@npm:>=10": version: 10.22.0 resolution: "preact@npm:10.22.0" @@ -26810,18 +27531,6 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" - dependencies: - loose-envify: ^1.1.0 - scheduler: ^0.23.2 - peerDependencies: - react: ^18.3.1 - checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9 - languageName: node - linkType: hard - "react-element-to-jsx-string@npm:^15.0.0": version: 15.0.0 resolution: "react-element-to-jsx-string@npm:15.0.0" @@ -26940,15 +27649,6 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: ^1.1.0 - checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376 - languageName: node - linkType: hard - "read-pkg-up@npm:^7.0.1": version: 7.0.1 resolution: "read-pkg-up@npm:7.0.1" @@ -27349,8 +28049,8 @@ __metadata: linkType: hard "rehype-katex@npm:^7.0.0": - version: 7.0.0 - resolution: "rehype-katex@npm:7.0.0" + version: 7.0.1 + resolution: "rehype-katex@npm:7.0.1" dependencies: "@types/hast": ^3.0.0 "@types/katex": ^0.16.0 @@ -27359,7 +28059,7 @@ __metadata: katex: ^0.16.0 unist-util-visit-parents: ^6.0.0 vfile: ^6.0.0 - checksum: 3184cf7635e63039a5d455e27718cbc99998cc7bfcc15422badf5da892887f4200f3ee54a6617aa231aa15d46cb678716c112b6b7f9cef11a8653e5d518ad6f0 + checksum: d8f90f2b481fcf8a922410b812dbaed253a488bf61f4981b7b37d4983845060c1fcefb1690063e31ecfb941fb6ef6858e1a044e2f8c6146687266df1f6423a7b languageName: node linkType: hard @@ -27939,6 +28639,69 @@ __metadata: languageName: node linkType: hard +"rollup@npm:^4.20.0": + version: 4.21.1 + resolution: "rollup@npm:4.21.1" + dependencies: + "@rollup/rollup-android-arm-eabi": 4.21.1 + "@rollup/rollup-android-arm64": 4.21.1 + "@rollup/rollup-darwin-arm64": 4.21.1 + "@rollup/rollup-darwin-x64": 4.21.1 + "@rollup/rollup-linux-arm-gnueabihf": 4.21.1 + "@rollup/rollup-linux-arm-musleabihf": 4.21.1 + "@rollup/rollup-linux-arm64-gnu": 4.21.1 + "@rollup/rollup-linux-arm64-musl": 4.21.1 + "@rollup/rollup-linux-powerpc64le-gnu": 4.21.1 + "@rollup/rollup-linux-riscv64-gnu": 4.21.1 + "@rollup/rollup-linux-s390x-gnu": 4.21.1 + "@rollup/rollup-linux-x64-gnu": 4.21.1 + "@rollup/rollup-linux-x64-musl": 4.21.1 + "@rollup/rollup-win32-arm64-msvc": 4.21.1 + "@rollup/rollup-win32-ia32-msvc": 4.21.1 + "@rollup/rollup-win32-x64-msvc": 4.21.1 + "@types/estree": 1.0.5 + fsevents: ~2.3.2 + dependenciesMeta: + "@rollup/rollup-android-arm-eabi": + optional: true + "@rollup/rollup-android-arm64": + optional: true + "@rollup/rollup-darwin-arm64": + optional: true + "@rollup/rollup-darwin-x64": + optional: true + "@rollup/rollup-linux-arm-gnueabihf": + optional: true + "@rollup/rollup-linux-arm-musleabihf": + optional: true + "@rollup/rollup-linux-arm64-gnu": + optional: true + "@rollup/rollup-linux-arm64-musl": + optional: true + "@rollup/rollup-linux-powerpc64le-gnu": + optional: true + "@rollup/rollup-linux-riscv64-gnu": + optional: true + "@rollup/rollup-linux-s390x-gnu": + optional: true + "@rollup/rollup-linux-x64-gnu": + optional: true + "@rollup/rollup-linux-x64-musl": + optional: true + "@rollup/rollup-win32-arm64-msvc": + optional: true + "@rollup/rollup-win32-ia32-msvc": + optional: true + "@rollup/rollup-win32-x64-msvc": + optional: true + fsevents: + optional: true + bin: + rollup: dist/bin/rollup + checksum: d275e1ab9c860a0be97f527a5dfa9bc1234b7cd1e547c057ed28d5697af2f537a210268bcd84bcf884ff23e61f6ceaf8552397279cd3ab627e1b364622aaa053 + languageName: node + linkType: hard + "rrweb-cssom@npm:^0.6.0": version: 0.6.0 resolution: "rrweb-cssom@npm:0.6.0" @@ -28067,15 +28830,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: ^1.1.0 - checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4 - languageName: node - linkType: hard - "schema-utils@npm:2.7.0": version: 2.7.0 resolution: "schema-utils@npm:2.7.0" @@ -29740,13 +30494,20 @@ __metadata: languageName: node linkType: hard -"tinybench@npm:^2.5.0, tinybench@npm:^2.5.1, tinybench@npm:^2.8.0": +"tinybench@npm:^2.5.0, tinybench@npm:^2.5.1": version: 2.8.0 resolution: "tinybench@npm:2.8.0" checksum: 024a307c6a71f6e2903e110952457ee3dfa606093b45d7f49efcfd01d452650e099474080677ff650b0fd76b49074425ac68ff2a70561699a78515a278bf0862 languageName: node linkType: hard +"tinybench@npm:^2.8.0": + version: 2.9.0 + resolution: "tinybench@npm:2.9.0" + checksum: 1ab00d7dfe0d1f127cbf00822bacd9024f7a50a3ecd1f354a8168e0b7d2b53a639a24414e707c27879d1adc0f5153141d51d76ebd7b4d37fe245e742e5d91fe8 + languageName: node + linkType: hard + "tinypool@npm:^0.7.0": version: 0.7.0 resolution: "tinypool@npm:0.7.0" @@ -29762,9 +30523,9 @@ __metadata: linkType: hard "tinypool@npm:^1.0.0": - version: 1.0.0 - resolution: "tinypool@npm:1.0.0" - checksum: 59dab87b0811da2dc1ecbac9a99cde93d45450744d4a9fca628d805c452bbb5e5f214fd191127f665d062cae9cc159225dea5508d766e40a0c6c33f573e5c3b6 + version: 1.0.1 + resolution: "tinypool@npm:1.0.1" + checksum: 5cd6b8cbccd9b88d461f400c9599e69f66563ddf75a2b8ab6b48250481f1b254d180a68ee735f379fa6eb88f11c3b1814735bb1f3306b1a860bf6d8f08074d6b languageName: node linkType: hard @@ -30252,9 +31013,9 @@ __metadata: linkType: hard "type-fest@npm:^4.23.0": - version: 4.23.0 - resolution: "type-fest@npm:4.23.0" - checksum: 75466563be2d3d116a0b70ffe76a7f72947e3350ceacbc8509a7d841670dddc2fbb008109f0307888137794cf25681fd50f65bf8873bcdc17bc7ac8912c70114 + version: 4.25.0 + resolution: "type-fest@npm:4.25.0" + checksum: 4c318d0fbfc6e51bb52db6ce4609066888e45346594db502e6040681fc1985a9f5845a80b6bd46ca64310271d1cdee52a9110ccabaf199b978388b098bbc5985 languageName: node linkType: hard @@ -30465,6 +31226,13 @@ __metadata: languageName: node linkType: hard +"undici-types@npm:~6.19.2": + version: 6.19.8 + resolution: "undici-types@npm:6.19.8" + checksum: de51f1b447d22571cf155dfe14ff6d12c5bdaec237c765085b439c38ca8518fc360e88c70f99469162bf2e14188a7b0bcb06e1ed2dc031042b984b0bb9544017 + languageName: node + linkType: hard + "unfetch@npm:^4.2.0": version: 4.2.0 resolution: "unfetch@npm:4.2.0" @@ -31296,7 +32064,7 @@ __metadata: languageName: node linkType: hard -"vite-node@npm:1.6.0": +"vite-node@npm:1.6.0, vite-node@npm:^1.2.0": version: 1.6.0 resolution: "vite-node@npm:1.6.0" dependencies: @@ -31496,6 +32264,49 @@ __metadata: languageName: node linkType: hard +"vite@npm:^5.0.11": + version: 5.4.2 + resolution: "vite@npm:5.4.2" + dependencies: + esbuild: ^0.21.3 + fsevents: ~2.3.3 + postcss: ^8.4.41 + rollup: ^4.20.0 + peerDependencies: + "@types/node": ^18.0.0 || >=20.0.0 + less: "*" + lightningcss: ^1.21.0 + sass: "*" + sass-embedded: "*" + stylus: "*" + sugarss: "*" + terser: ^5.4.0 + dependenciesMeta: + fsevents: + optional: true + peerDependenciesMeta: + "@types/node": + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + bin: + vite: bin/vite.js + checksum: 7d25c1b2366ae4d9eb515ba9efc2619c544ec6d806d636977fac93f59cdf63e22ea9b4592c69c496a313cf95c88e374c81870d4bb4b11f401ec003793dfd2830 + languageName: node + linkType: hard + "vitest@npm:^0.34.6": version: 0.34.6 resolution: "vitest@npm:0.34.6"