Material Web Components for React

- - Star us on GitHub - -

- - {children} -

+ +

+ {children} +

diff --git a/apps/demo/src/app/page.tsx b/apps/demo/src/app/page.tsx index 95ec939..13fbb26 100644 --- a/apps/demo/src/app/page.tsx +++ b/apps/demo/src/app/page.tsx @@ -1,42 +1,52 @@ "use client"; -// @TODO: Fix this. Right now, static generation doesn't seem to work with some -// Material Web Components. -// From my observation, it seems like the Dialog component relies on `document` even at its initialization. -// Specially the TreeWalker code. -// We should abstract that to allow it to work in SSG. -import dynamic from "next/dynamic"; - -import Button from "@packages/ui/src/button"; -import Card from "@packages/ui/src/card"; -import Checkbox from "@packages/ui/src/checkbox"; -import Chip, { ChipSet } from "@packages/ui/src/chip"; -const Dialog = dynamic(() => import("@packages/ui/src/dialog"), { ssr: false }); -import Divider from "@packages/ui/src/divider"; -import Elevation from "@packages/ui/src/elevation"; -import FAB from "@packages/ui/src/fab"; -import FocusRing from "@packages/ui/src/focus-ring"; -import Icon from "@packages/ui/src/icon"; -import IconButton from "@packages/ui/src/icon-button"; -import List, { ListItem } from "@packages/ui/src/list"; -import Menu, { MenuItem } from "@packages/ui/src/menu"; -import Progress from "@packages/ui/src/progress"; -import Radio from "@packages/ui/src/radio"; -import Ripple from "@packages/ui/src/ripple"; -import SegmentedButton, { SegmentedButtonSet } from "@packages/ui/src/segmented-button"; -import Select, { SelectOption } from "@packages/ui/src/select"; -import Slider from "@packages/ui/src/slider"; -import Switch from "@packages/ui/src/switch"; -import Tabs, { PrimaryTab } from "@packages/ui/src/tabs"; -import TextField from "@packages/ui/src/textfield"; - -import React, { useState } from "react"; +import AppBar from "material-web-components-react/app-bar"; +import Badge from "material-web-components-react/badge"; +import Button from "material-web-components-react/button"; +import Card from "material-web-components-react/card"; +import Checkbox from "material-web-components-react/checkbox"; +import Chip, { ChipSet } from "material-web-components-react/chip"; +import Dialog from "material-web-components-react/dialog"; +import Divider from "material-web-components-react/divider"; +import Elevation from "material-web-components-react/elevation"; +import FAB from "material-web-components-react/fab"; +import FocusRing from "material-web-components-react/focus-ring"; +import Icon from "material-web-components-react/icon"; +import IconButton from "material-web-components-react/icon-button"; +import Item from "material-web-components-react/item"; +import List, { ListItem } from "material-web-components-react/list"; +import Menu, { MenuItem } from "material-web-components-react/menu"; +import NavigationBar from "material-web-components-react/navigation-bar"; +import { NavigationDrawerModal } from "material-web-components-react/navigation-drawer"; +import NavigationTab from "material-web-components-react/navigation-tab"; +import NavigationRail from "material-web-components-react/navigation-rail"; +import Progress from "material-web-components-react/progress"; +import Radio from "material-web-components-react/radio"; +import Ripple from "material-web-components-react/ripple"; +import SegmentedButton, { + SegmentedButtonSet, +} from "material-web-components-react/segmented-button"; +import Select, { SelectOption } from "material-web-components-react/select"; +import { BottomSheet } from "material-web-components-react/sheet"; +import Slider from "material-web-components-react/slider"; +import Switch from "material-web-components-react/switch"; +import Tabs, { PrimaryTab } from "material-web-components-react/tabs"; +import TextField from "material-web-components-react/text-field"; +import {snackbar} from "material-web-components-react/snackbar"; + +import Stack from "material-web-components-react/stack"; + +// @ts-expect-error +import pkgJson from "material-web-components-react/package.json?module=json"; + +import React, { useEffect, useState } from "react"; import { renderToString } from "react-dom/server"; +import Link from "next/link"; const Column = ({ children, ...props }: { children: any; id: string }) => { return (

{children} @@ -53,6 +63,91 @@ const DemoSection = ({ title, children }: { title: any; children: any }) => { ); }; +const NavigationContent = ({ + setShowNavigationModal, +}: { + setShowNavigationModal: (value: boolean) => void; +}) => { + return ( + <> + + setShowNavigationModal?.(false)} + className="mt-4 rounded-r-full w-full flex flex-row justify-between pr-2 select-none" + > + +

+ stacked_inbox + All inboxes +

+ + + + + setShowNavigationModal?.(false)} + className="mt-4 rounded-r-full w-full flex flex-row justify-between pr-2 select-none" + > + +

+ inbox + Primary +

+ + + + setShowNavigationModal?.(false)} + className="mt-4 rounded-r-full w-full flex flex-row justify-between pr-2 select-none" + > + +

+ group + Social +

+ + + + setShowNavigationModal?.(false)} + className="mt-4 rounded-r-full w-full flex flex-row justify-between pr-2 select-none" + > + +

+ info + Updates +

+ + + + setShowNavigationModal?.(false)} + className="mt-4 rounded-r-full w-full flex flex-row justify-between pr-2 select-none" + > + +

+ forum + Forums +

+ + +

All labels

+ + setShowNavigationModal?.(false)} + className="mt-4 rounded-r-full w-full flex flex-row justify-between pr-2 select-none" + > + +

+ star + Starred +

+ + + + ); +}; + const ComponentDemo = ({ title, docsLink, @@ -96,89 +191,204 @@ const ComponentDemo = ({ export default function Home() { const [showDialog, setShowDialog] = useState(false); + const [showBottomSheet, setShowBottomSheet] = useState(false); + const [showModalBottomSheet, setShowModalBottomSheet] = useState(false); const [showMenu, setShowMenu] = useState(false); const [isPlayingProgressIndicators, setIsPlayingProgressIndicators] = useState(false); + const [showNavigationModal, setShowNavigationModal] = useState(false); + const [extendRail, setExtendRail] = useState(false); + + const [isExpanded, setIsExpanded] = useState(false); + + useEffect(() => { + if (typeof window !== "undefined") { + if (showNavigationModal) { + document.body.style.position = "fixed"; + document.body.style.top = `-${window.scrollY}px`; + } else { + const scrollY = document.body.style.top; + document.body.style.position = ""; + document.body.style.top = ""; + document.body.style.position = ""; + document.body.style.top = ""; + window.scrollTo(0, parseInt(scrollY || "0") * -1); + } + } + }, [showNavigationModal]); + return ( <> + +

+ {/* @ts-expect-error */} + + + + search + + + + home + home + + + + + + + + + + + + + + deployed_code + deployed_code + + + + + book + book + + + + + interests + interests + + + +

- - - - - -

+ + -

+ {/* @ts-ignore */} + add @@ -191,11 +401,12 @@ export default function Home() { add -

+ -

+ {/* @ts-ignore */} + Settings @@ -211,8 +422,9 @@ export default function Home() { Settings -

+ + {/* @ts-ignore */} + Settings @@ -228,7 +440,7 @@ export default function Home() { Settings -

+ @@ -261,8 +473,35 @@ export default function Home() { + + {/* @ts-ignore */} + + + + + notifications + + + + + + mail + + + + + -

+ {/* @ts-ignore */} + setIsPlayingProgressIndicators((oldState) => !oldState) @@ -270,7 +509,7 @@ export default function Home() { > {isPlayingProgressIndicators ? "pause" : "play_arrow"} @@ -285,7 +524,7 @@ export default function Home() { indeterminate={isPlayingProgressIndicators} value={isPlayingProgressIndicators ? undefined : 0.6} > -

@@ -320,8 +559,15 @@ export default function Home() {

- Tap me for effect +

{ + // @ts-expect-error + const snackbarId = snackbar.show("Tapped on an element.", { + actionText: "Close me", + onAction: () => snackbar.dismiss(snackbarId), + className: 'bg-[#313033] text-[#F4EFF4]' + }) + }}> + Tap me for ripple effect (also for a snackbar!)

@@ -337,6 +583,22 @@ export default function Home() { + +

+ + +

@@ -402,16 +664,60 @@ export default function Home() { A simple dialog with free-form content.

+ + + + Fruits + + Apple + Banana + +

Cucumber

+ Cucumbers are long green fruits that are just as long as this + multi-line description +

+ + +

Shop for Kiwis

+ This will link you out in a new tab +

+ open_in_new + + + + + +

Fruits

Apple

Banana

Cucumber

+ Cucumbers are long green fruits that are just as long as this + multi-line description +

+ @@ -569,69 +875,192 @@ export default function Home() { - - - Fruits - - Apple - Banana - -

Cucumber

- Cucumbers are long green fruits that are just as long as this - multi-line description + + + + + home + + home + + + + group + + group + + { + alert("clicked!"); + }} + > + + notifications + + notifications + + + + + +

+ +

+ + + +

+ + + arrow_back + + +

+ Center-aligned

- - + more_vert + + +

+ + + arrow_back + + +

Small

+ + + attach_file + + + calendar_today + + + more_vert + + +

+ + setIsExpanded(expanded) + } + style={{ + // @ts-ignore + "--md-elevation-level": 1, + }} > -

Shop for Kiwis

- This will link you out in a new tab + {isExpanded && } + + + arrow_back + + +

+ Medium (with Elevation)

- open_in_new - - +

Medium (with Elevation)

+ + + attach_file + + + calendar_today + + + more_vert + + + +

+ + + arrow_back + + +

Large

+ + + attach_file + + + calendar_today + + + more_vert + + + +

- search + + search + close - - search + + + search + close - search + + search + close - - search + + + search + close @@ -639,6 +1068,127 @@ export default function Home() { + + setShowBottomSheet(open)} + className="z-50" + > +

+ Actions +

+ + + share + + + Share +

+ + + add + + + Add to +

+ + + delete + + + Trash +

+ + + archive + + + Archive +

+ + + settings + + + Settings +

+ + + favorite + + + Favorite +

+ + setShowModalBottomSheet(open)} + className="z-50" + > +

+ Actions +

+ + + share + + + Share +

+ + + add + + + Add to +

+ + + delete + + + Trash +

+ + + archive + + + Archive +

+ + + settings + + + Settings +

+ + + favorite + + + Favorite +

+ + ); } diff --git a/apps/demo/src/app/providers.tsx b/apps/demo/src/app/providers.tsx new file mode 100644 index 0000000..5c0dc5a --- /dev/null +++ b/apps/demo/src/app/providers.tsx @@ -0,0 +1,7 @@ +"use client"; + +import {SnackbarProvider} from "material-web-components-react/snackbar"; + +const SnackbarClientProvider = (props: any) => + +export default SnackbarClientProvider \ No newline at end of file diff --git a/apps/demo/src/components/GitHubButton/index.tsx b/apps/demo/src/components/GitHubButton/index.tsx index ca1d9f1..6459ea7 100644 --- a/apps/demo/src/components/GitHubButton/index.tsx +++ b/apps/demo/src/components/GitHubButton/index.tsx @@ -1,6 +1,8 @@ -"use client" +"use client"; import GHButton from "react-github-btn"; -const GitHubButton = (props: any) => {props.children} +const GitHubButton = (props: any) => ( + {props.children} +); -export default GitHubButton \ No newline at end of file +export default GitHubButton; diff --git a/apps/demo/tailwind.config.ts b/apps/demo/tailwind.config.ts index e9a0944..c9019e8 100644 --- a/apps/demo/tailwind.config.ts +++ b/apps/demo/tailwind.config.ts @@ -6,6 +6,41 @@ const config: Config = { "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], + safelist: [ + { + pattern: /opacity-(.)/, + }, + { + pattern: /text-(xs|sm|md|lg|xl|2xl|3xl)/, + }, + { + pattern: /rounded-(xs|sm|md|lg|xl|2xl|3xl)/, + }, + { + pattern: /p(y|t|x|b|l|r)-(.)/, + }, + { + pattern: /gap-(y|t|x|b)-(.)/, + }, + { + pattern: /flex-(.)/, + }, + { + pattern: /bg-(.)/, + }, + { + pattern: /bg-[#313033]/, + }, + { + pattern: /min-(w|h)-(.)/, + }, + { + pattern: /max-(w|h)-(.)/, + }, + { + pattern: /([a-zA-Z]+)-./, + }, + ], theme: { extend: { backgroundImage: { diff --git a/package.json b/package.json index b1bd497..a83985b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "dev": "turbo dev", "lint": "turbo lint", "format": "prettier --write \"**/*.{ts,tsx,md}\"", - "publish-packages": "turbo run build lint && changeset version && changeset publish" + "publish-packages": "turbo run build lint --filter=material-web-components-react && changeset version && changeset publish" }, "devDependencies": { "@changesets/cli": "^2.27.7", diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.cjs similarity index 90% rename from packages/ui/.eslintrc.js rename to packages/ui/.eslintrc.cjs index 68e6309..2f11dfc 100644 --- a/packages/ui/.eslintrc.js +++ b/packages/ui/.eslintrc.cjs @@ -8,6 +8,6 @@ module.exports = { tsconfigRootDir: __dirname, }, rules: { - "no-redeclare": 0 - } + "no-redeclare": 0, + }, }; diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index f6c28d8..0a58567 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,138 @@ # material-web-react +## 0.3.17 + +### Patch Changes + +- chore: update base lib + +## 0.3.16 + +### Patch Changes + +- use latest material version + +## 0.3.15 + +### Patch Changes + +- add custom classname option to snackbar + +## 0.3.14 + +### Patch Changes + +- fix: appbar + +## 0.3.13 + +### Patch Changes + +- ttomsheet content to top + +## 0.3.12 + +### Patch Changes + +- Make bottom sheet take highest precedence + +## 0.3.11 + +### Patch Changes + +- add snackbar component + +## 0.3.10 + +### Patch Changes + +- feat: add snackbar component + +## 0.3.9 + +### Patch Changes + +- chore: clean typescript + +## 0.3.8 + +### Patch Changes + +- fix: appbar center-aligned balancing + +## 0.3.7 + +### Patch Changes + +- Add two new components for MUI junkies; Container and Typography + +## 0.3.6 + +### Patch Changes + +- add navigation rail + +## 0.3.5 + +### Patch Changes + +- Add bottom sheet + +## 0.3.4 + +### Patch Changes + +- d84f889: add latest material/web, make SSG compatible + +## 0.3.3 + +### Patch Changes + +- Keep animations in tailwind classes only + +## 0.3.2 + +### Patch Changes + +- b0c82e6: Add app bars implementation v1 + +## 0.3.1 + +### Patch Changes + +- add navigation drawer and an example of its usage + +## 0.3.0 + +### Minor Changes + +- feat: add new components + +## 0.2.8 + +### Patch Changes + +- add package json metadata + +## 0.2.7 + +### Patch Changes + +- 1b43630: add postbuild +- f895d71: add publish directory + +## 0.2.6 + +### Patch Changes + +- 20b989b: feat: add minification in dist + +## 0.2.5 + +### Patch Changes + +- docs: add shields + ## 0.2.4 ### Patch Changes diff --git a/packages/ui/LICENSE.md b/packages/ui/LICENSE.md new file mode 100644 index 0000000..28b8a5c --- /dev/null +++ b/packages/ui/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Grayhat Developers Private Limited + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/ui/README.md b/packages/ui/README.md index ecfff18..46bf6f7 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -1,18 +1,40 @@ # Material Web Components for React -> Warning: This is beta software. Use at your own discretion. +[![npm version](https://badge.fury.io/js/material-web-components-react.svg)](https://www.npmjs.com/package/material-web-components-react) +![release](https://img.shields.io/badge/release-beta-blue) +[![docs](https://img.shields.io/badge/read%20the%20docs-8A2BE2)](https://material-web.dev) +[![docs](https://img.shields.io/badge/live%20demo-FFA500)](https://material-web-components-react.grayhat.studio) A thin React wrapper over [@material/web](https://github.com/material-components/material-web/). Aims to be a locally-installable, accessible and customizable Material standard for React. Recommended to use with [MUI](https://mui.com/). Free. Open Source. **Looking for maintainers**. ![hero](https://material-web-components-react.grayhat.studio/opengraph-image.jpg) ## Installation + To use Material Web Components for React as a **library** in your project, run: + ```sh npm install material-web-components-react ``` -## Documentation +## Usage + +Here's a general example of how the components can be used: + +```tsx +import React from 'react'; +import Button from 'material-web-components-react/button'; + +function Example() { + return ( +

+ +

+ ); +} +``` + +For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](https://github.com/grayhatdevelopers/material-web-components-react/blob/main/apps/demo/src/app/page.tsx). It's simple! Under the hood, this library simply uses the official [@material/web](https://github.com/material-components/material-web/) components. Visit [the official Material Web Components docs](https://github.com/material-components/material-web/blob/main/docs/intro.md) to learn how to use those components. The props remain the same! @@ -21,16 +43,44 @@ Under the hood, this library simply uses the official [@material/web](https://gi We're looking for maintainers and contributors! ### Roadmap 🚀 + - [ ] Make sure all native Web Components are properly working - - [x] Demo all components - - [x] Add all missing events - - [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores) + - [x] Demo all components + - [x] Add all missing events + - [ ] [Need help] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores) (https://github.com/grayhatdevelopers/material-web-components-react/pull/2) - [x] Resolve SSR/SSG issues, make compatible with NextJS (i.e. remove all dynamic imports) - [x] Separate the demo from the actual UI code -- [ ] Make installable as a package. Preferably keep the code in-project, like shadcn/ui, so developers have more control -- [ ] Add better TypeScript support +- [x] Make installable as a package. +- [ ] [Need help] Make installable as code-in-project, like shadcn/ui, so developers have more control (https://github.com/grayhatdevelopers/material-web-components-react/pull/11) +- [ ] [Need help] Add better TypeScript support (https://github.com/grayhatdevelopers/material-web-components-react/issues/12) - [ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations - - [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream - - [ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code. - - [ ] Create a PR with the new Component code. + - [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream + - [ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code. + - [ ] Create a PR with the new Component code. - [ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications + - [x] App Bars + - [x] Top App Bar + - [x] Bottom App Bar + - [x] Stack + - [x] Box + - [x] Navigation Rail + - [x] Container + - [x] Typography + +### Credits + +Huge shout out to Elizabeth Mitchell ([asyncLiz](https://github.com/asyncliz/)) and the rest of the Material Design team for their awesome Web Components implementation. + +Thank you [Travis Reeder](https://github.com/treeder) for your Web Component implementation of Navigation Rail. I had to copy it to this project. I couldn't use yours directly because it would import `@material/web` again and bring conflicts. + +Thanks for making the crappy, brain-dead wrapper components: + +- [ChatGPT](https://chatgpt.com/share/574a9601-8927-4992-884e-16c58f24a982) + +Thanks for improving the demo: + +- [TalhaHere12](https://github.com/TalhaHere12) + +Thanks for building BottomSheet and Snackbar: + +- [Aroonaongithhub](https://github.com/Aroonaongithhub/) diff --git a/packages/ui/WHY.md b/packages/ui/WHY.md new file mode 100644 index 0000000..737e1f9 --- /dev/null +++ b/packages/ui/WHY.md @@ -0,0 +1,35 @@ +# Why another React Material library? + +Let's evaluate our options. + +## Libraries which implement Material 2 + +These are libraries which were built upon an older specification of Google's official Material Web Components, but those followed the Material 2 specification. Such libraries are either discontinued, or slowly dying out. Those include, but are not limited to: + +- material-tailwind (currently looks like the best!): https://github.com/creativetimofficial/material-tailwind +- material-web-components-react (Official): https://github.com/material-components/material-components-web-react +- react-mdc: https://react-mdc.github.io/#/ +- muicss: https://www.muicss.com/ + +Check out more libraries listed at https://m2.material.io/develop/web/guides/framework-wrappers . + +## Libraries which implement Material 3 + +These are libraries which implement Material 3, the latest specification (so far) from the Material Design team. Some look great, others... not really. These include, but are not limited to: + +- beercss (insane work, totally framework independent. I should consider using this): https://www.beercss.com/ +- actifyjs (currently looks like the best React-only implementation!): https://actifyjs.com/ + +I'd love to add more. Send in a Pull Request if you'd like to contribute more. + +## Popular, but slow + +[MUI](https://mui.com/) is the library which fits this category. While I love their work, [they are slow](https://github.com/mui/material-ui/issues/29345) at keeping up with latest design philosophies and practices (And rightly so! A lot of software depends on their stability). MUI has announced better Material 3 support in Q4 of 2024. Too far away, at least for when this project started! + +For MUI, and similar libraries, I recommend using them alongside this library to "fill in" the missing parts. + +## The future: Web Components! + +The library we use under the hood, [@material/web](https://github.com/material-components/material-web) fits here. Web Components are the future, we must accept it. But while we build towards that future, it's obvious that current applications must be maintained. Hence the existence of this library. Our aim would be to keep this library synced with this underlying new technology as much as possible, so when we transition, it's seamless! + +Another great library to plug in here would be: https://www.mdui.org/en/docs/2/ diff --git a/packages/ui/package.json b/packages/ui/package.json index 85bd839..9cae44b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,15 +1,37 @@ { "name": "material-web-components-react", - "version": "0.2.4", + "version": "0.3.17", + "author": "Grayhat Team", + "type": "module", + "keywords": [ + "react", + "react-component", + "web-components", + "material", + "material-ui", + "material design" + ], + "repository": { + "type": "git", + "url": "https://github.com/grayhatdevelopers/material-web-components-react", + "directory": "packages/ui" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/grayhatdevelopers/material-web-components-react/issues" + }, + "homepage": "https://material-web-components-react.grayhat.studio", "publishConfig": { - "access": "public" + "access": "public", + "directory": "./dist" }, "scripts": { "lint": "eslint . --max-warnings 0", "generate:component": "turbo gen react-component", - "build": "tsup && cp ../../*.md ./dist && cp ./*.md ./dist", + "build": "tsup", + "postbuild": "cp ../../*.md . && cp ./*.md ./dist && cp package.json ./dist", "dev": "tsup --watch", - "release": "build && changeset publish" + "release": "build && cd dist && npx changeset publish" }, "devDependencies": { "@repo/eslint-config": "workspace:*", @@ -21,14 +43,22 @@ "@types/react": "^18.2.61", "@types/react-dom": "^18.2.19", "eslint": "^8.57.0", - "tiny-glob": "^0.2.9", + "postcss": "^8", "tsup": "^8.2.0", - "typescript": "^5.3.3" + "typescript": "^5.3.3", + "fast-glob": "^3.3.2" }, "dependencies": { - "@lit-labs/ssr-react": "^0.3.0", "@lit/react": "^1.0.5", - "@material/web": "^1.5.1", - "react": "^18.2.0" + "@material/web": "^2.2.0", + "autoprefixer": "^10.4.19", + "lit": "^3.2.0", + "react": "^18.2.0", + "react-hot-toast": "^2.4.1", + "react-swipeable": "^7.0.1", + "tailwind-merge": "^2.4.0", + "tailwindcss": "^3.4.1", + "tslib": "^2.6.3", + "vaul": "^0.9.1" } } diff --git a/packages/ui/src/app-bar/index.tsx b/packages/ui/src/app-bar/index.tsx new file mode 100644 index 0000000..b30a137 --- /dev/null +++ b/packages/ui/src/app-bar/index.tsx @@ -0,0 +1,164 @@ +import React, { useEffect, useRef, useState } from "react"; +import { twMerge } from "tailwind-merge"; +import { findSlotProp, removeSlotProps } from "../utils/index.js"; + +const AppBar = ({ + className, + variant = null, + leadingElements, + headlineElement, + headlineExpandedElement, + trailingElements, + children, + onExpansionChange, + ...props +}: { + className?: string; + variant?: null | "center-aligned" | "small" | "medium" | "large"; + leadingElements?: any; + headlineElement?: any; + headlineExpandedElement?: any; + trailingElements?: any; + children?: React.ReactNode; + // eslint-disable-next-line no-unused-vars + onExpansionChange?: (expanded: boolean) => void; +}) => { + const _leadingElements = leadingElements + ? leadingElements + : children + ? findSlotProp(children, "leading", true) + : null; + const _headlineElement = headlineElement + ? headlineElement + : children + ? findSlotProp(children, "headline") + : null; + + const hasHeadlineExpandedElement = findSlotProp( + children, + "headline-expanded" + ); + const _headlineExpandedElement = headlineExpandedElement + ? headlineExpandedElement + : children + ? hasHeadlineExpandedElement + : _headlineElement; + const _trailingElements = trailingElements + ? trailingElements + : children + ? findSlotProp(children, "trailing", true) + : null; + + const remainingElements = removeSlotProps(children, [ + "leading", + "headline", + "headline-expanded", + "trailing", + ]); + + const _variant = variant + ? variant + : _trailingElements?.length > 1 || _leadingElements?.length === 0 + ? hasHeadlineExpandedElement + ? "medium" + : "small" + : "center-aligned"; + + const showExpandedHeadline = _variant === "medium" || _variant === "large"; + + const headlineExpandedRef = useRef(); + + const [isHeadlineExpandedVisible, setIsHeadlineExpandedVisible] = + useState(showExpandedHeadline); + + useEffect(() => { + let observer: IntersectionObserver; + if (headlineExpandedRef?.current) { + observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + setIsHeadlineExpandedVisible(entry.isIntersecting); + onExpansionChange?.(!entry.isIntersecting); + }); + }, + { + rootMargin: "-20px 0px", + threshold: 0, + } + ); + observer.observe(headlineExpandedRef.current); + } + return () => { + observer?.disconnect(); + }; + }, [headlineExpandedRef]); + + return ( + <> +

+ {_leadingElements} +

+ +

+ {_headlineElement} +

+ +

+ {_trailingElements} +

+ + {remainingElements} +

+ {showExpandedHeadline && ( +

+ {_headlineExpandedElement} +

+ )} + + ); +}; + +export default AppBar; diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx new file mode 100644 index 0000000..01e10b3 --- /dev/null +++ b/packages/ui/src/badge/index.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { MdBadge } from "@material/web/labs/badge/badge"; +import { createComponent } from "@lit/react"; + +export type { MdBadge as MdBadgeType } from "@material/web/labs/badge/badge"; + +// const events = { +// 'onOpen': 'open', +// 'onOpened': 'opened', +// 'onClose': 'close', +// 'onClosed': 'closed', +// 'onCancel': 'cancel', +// } + +export const Badge = createComponent({ + tagName: "md-badge", + elementClass: MdBadge, + react: React, + // events: events, +}); + +export default Badge; diff --git a/packages/ui/src/box/index.tsx b/packages/ui/src/box/index.tsx new file mode 100644 index 0000000..a8a5d8d --- /dev/null +++ b/packages/ui/src/box/index.tsx @@ -0,0 +1,24 @@ +import React, { Ref } from "react"; +import { twMerge } from "tailwind-merge"; + +const Box = React.forwardRef( + ( + { + component: Component = "div", + className, + ...props + }: { component: string } & HTMLElement, + ref: Ref, + ) => { + return ( + + ); + }, +); + +export default Box; diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx index af787a1..3e411de 100644 --- a/packages/ui/src/button/index.tsx +++ b/packages/ui/src/button/index.tsx @@ -1,52 +1,54 @@ -"use client" // file: Fab.react.tsx -import {MdElevatedButton} from '@material/web/button/elevated-button'; -import {MdFilledButton} from '@material/web/button/filled-button'; -import {MdFilledTonalButton} from '@material/web/button/filled-tonal-button'; -import {MdOutlinedButton} from '@material/web/button/outlined-button'; -import {MdTextButton} from '@material/web/button/text-button'; -import React from 'react'; -import {createComponent} from '@lit/react'; -import { matchVariant } from '../utils'; +import { MdElevatedButton } from "@material/web/button/elevated-button"; +import { MdFilledButton } from "@material/web/button/filled-button"; +import { MdFilledTonalButton } from "@material/web/button/filled-tonal-button"; +import { MdOutlinedButton } from "@material/web/button/outlined-button"; +import { MdTextButton } from "@material/web/button/text-button"; +import React from "react"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; -export type {MdElevatedButton} from '@material/web/button/elevated-button.js'; -export type {MdFilledButton} from '@material/web/button/filled-button.js'; -export type {MdFilledTonalButton} from '@material/web/button/filled-tonal-button.js'; -export type {MdTextButton} from '@material/web/button/text-button'; +export type { MdElevatedButton } from "@material/web/button/elevated-button.js"; +export type { MdFilledButton } from "@material/web/button/filled-button.js"; +export type { MdFilledTonalButton } from "@material/web/button/filled-tonal-button.js"; +export type { MdTextButton } from "@material/web/button/text-button"; export const FilledButton = createComponent({ - tagName: 'md-filled-button', - elementClass: MdFilledButton, - react: React, + tagName: "md-filled-button", + elementClass: MdFilledButton, + react: React, }); export const FilledTonalButton = createComponent({ - tagName: 'md-filled-tonal-button', - elementClass: MdFilledTonalButton, - react: React, + tagName: "md-filled-tonal-button", + elementClass: MdFilledTonalButton, + react: React, }); export const ElevatedButton = createComponent({ - tagName: 'md-elevated-button', - elementClass: MdElevatedButton, - react: React, + tagName: "md-elevated-button", + elementClass: MdElevatedButton, + react: React, }); export const OutlinedButton = createComponent({ - tagName: 'md-outlined-button', - elementClass: MdOutlinedButton, - react: React, + tagName: "md-outlined-button", + elementClass: MdOutlinedButton, + react: React, }); export const TextButton = createComponent({ - tagName: 'md-text-button', - elementClass: MdTextButton, - react: React, + tagName: "md-text-button", + elementClass: MdTextButton, + react: React, }); const Button = (props: any) => { - if (matchVariant(props.variant, 'md-filled-button')) return {props.children} - if (matchVariant(props.variant, 'md-filled-tonal-button')) return {props.children} - if (matchVariant(props.variant, 'md-outlined-button')) return {props.children} - if (matchVariant(props.variant, 'md-text-button')) return {props.children} - return {props.children} -} - -export default Button + if (matchVariant(props.variant, "md-filled-button")) + return {props.children}; + if (matchVariant(props.variant, "md-filled-tonal-button")) + return {props.children}; + if (matchVariant(props.variant, "md-outlined-button")) + return {props.children}; + if (matchVariant(props.variant, "md-text-button")) + return {props.children}; + return {props.children}; +}; +export default Button; diff --git a/packages/ui/src/card/index.tsx b/packages/ui/src/card/index.tsx index ea57a41..4658f5b 100644 --- a/packages/ui/src/card/index.tsx +++ b/packages/ui/src/card/index.tsx @@ -1,37 +1,37 @@ -"use client" // file: Fab.react.tsx -import {MdElevatedCard} from '@material/web/labs/card/elevated-card'; -import {MdFilledCard} from '@material/web/labs/card/filled-card'; -import {MdOutlinedCard} from '@material/web/labs/card/outlined-card'; -import React from 'react'; -import {createComponent} from '@lit/react'; -import { matchVariant } from '../utils'; +import { MdElevatedCard } from "@material/web/labs/card/elevated-card"; +import { MdFilledCard } from "@material/web/labs/card/filled-card"; +import { MdOutlinedCard } from "@material/web/labs/card/outlined-card"; +import React from "react"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; -export type {MdElevatedCard} from '@material/web/labs/card/elevated-card.js'; -export type {MdFilledCard} from '@material/web/labs/card/filled-card.js'; -export type {MdOutlinedCard} from '@material/web/labs/card/outlined-card.js'; +export type { MdElevatedCard } from "@material/web/labs/card/elevated-card.js"; +export type { MdFilledCard } from "@material/web/labs/card/filled-card.js"; +export type { MdOutlinedCard } from "@material/web/labs/card/outlined-card.js"; export const FilledCard = createComponent({ - tagName: 'md-filled-card', - elementClass: MdElevatedCard, - react: React, + tagName: "md-filled-card", + elementClass: MdElevatedCard, + react: React, }); export const ElevatedCard = createComponent({ - tagName: 'md-elevated-card', - elementClass: MdFilledCard, - react: React, + tagName: "md-elevated-card", + elementClass: MdFilledCard, + react: React, }); export const OutlinedCard = createComponent({ - tagName: 'md-outlined-card', - elementClass: MdOutlinedCard, - react: React, + tagName: "md-outlined-card", + elementClass: MdOutlinedCard, + react: React, }); const Card = (props: any) => { - if (matchVariant(props.variant, 'md-filled-card')) return {props.children} - if (matchVariant(props.variant, 'md-outlined-card')) return {props.children} - return {props.children} -} - -export default Card + if (matchVariant(props.variant, "md-filled-card")) + return {props.children}; + if (matchVariant(props.variant, "md-outlined-card")) + return {props.children}; + return {props.children}; +}; +export default Card; diff --git a/packages/ui/src/checkbox/index.tsx b/packages/ui/src/checkbox/index.tsx index a719f61..196deaa 100644 --- a/packages/ui/src/checkbox/index.tsx +++ b/packages/ui/src/checkbox/index.tsx @@ -1,19 +1,18 @@ -"use client" // file: Checkbox.react.tsx -import { MdCheckbox } from '@material/web/checkbox/checkbox'; -import React from 'react'; -import { createComponent } from '@lit/react'; +import { MdCheckbox } from "@material/web/checkbox/checkbox"; +import React from "react"; +import { createComponent } from "@lit/react"; -export type { MdCheckbox } from '@material/web/checkbox/checkbox.js'; +export type { MdCheckbox } from "@material/web/checkbox/checkbox.js"; const events = { - 'onChange': 'change', - 'onInput': 'input' -} + onChange: "change", + onInput: "input", +}; export default createComponent({ - tagName: 'md-checkbox', - elementClass: MdCheckbox, - react: React, - events -}); \ No newline at end of file + tagName: "md-checkbox", + elementClass: MdCheckbox, + react: React, + events, +}); diff --git a/packages/ui/src/chip/index.tsx b/packages/ui/src/chip/index.tsx index cd8f53b..c5eae2d 100644 --- a/packages/ui/src/chip/index.tsx +++ b/packages/ui/src/chip/index.tsx @@ -1,63 +1,65 @@ -"use client" // file: Icon.react.tsx -import {MdChipSet} from '@material/web/chips/chip-set'; -import {MdAssistChip} from '@material/web/chips/assist-chip' -import {MdFilterChip} from '@material/web/chips/filter-chip' -import {MdInputChip} from '@material/web/chips/input-chip' -import {MdSuggestionChip} from '@material/web/chips/suggestion-chip' +import { MdChipSet } from "@material/web/chips/chip-set"; +import { MdAssistChip } from "@material/web/chips/assist-chip"; +import { MdFilterChip } from "@material/web/chips/filter-chip"; +import { MdInputChip } from "@material/web/chips/input-chip"; +import { MdSuggestionChip } from "@material/web/chips/suggestion-chip"; -import React from 'react'; -import {createComponent} from '@lit/react'; -import { matchVariant } from '../utils'; +import React from "react"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; -export type {FabSize, FabVariant} from '@material/web/fab/fab.js'; +export type { FabSize, FabVariant } from "@material/web/fab/fab.js"; const events = { - 'onUpdateFocus': 'update-focus' -} + onUpdateFocus: "update-focus", +}; export const ChipSet = createComponent({ - tagName: 'md-chip-set', + tagName: "md-chip-set", elementClass: MdChipSet, react: React, }); export const AssistChip = createComponent({ - tagName: 'md-assist-chip', - elementClass: MdAssistChip, - react: React, - events, + tagName: "md-assist-chip", + elementClass: MdAssistChip, + react: React, + events, }); export const FilterChip = createComponent({ - tagName: 'md-filter-chip', - elementClass: MdFilterChip, - react: React, - events: { - ...events, - 'onRemove': 'remove' - } + tagName: "md-filter-chip", + elementClass: MdFilterChip, + react: React, + events: { + ...events, + onRemove: "remove", + }, }); export const InputChip = createComponent({ - tagName: 'md-input-chip', - elementClass: MdInputChip, - react: React, - events: { - ...events, - 'onRemove': 'remove' - } + tagName: "md-input-chip", + elementClass: MdInputChip, + react: React, + events: { + ...events, + onRemove: "remove", + }, }); export const SuggestionChip = createComponent({ - tagName: 'md-suggestion-chip', - elementClass: MdSuggestionChip, - react: React, - events, + tagName: "md-suggestion-chip", + elementClass: MdSuggestionChip, + react: React, + events, }); const Chip = (props: any) => { - if (matchVariant(props.variant, 'md-filter-chip')) return {props.children} - if (matchVariant(props.variant, 'md-input-chip')) return {props.children} - if (matchVariant(props.variant, 'md-suggestion-chip')) return {props.children} - return {props.children} -} + if (matchVariant(props.variant, "md-filter-chip")) + return {props.children}; + if (matchVariant(props.variant, "md-input-chip")) + return {props.children}; + if (matchVariant(props.variant, "md-suggestion-chip")) + return {props.children}; + return {props.children}; +}; -export default Chip; \ No newline at end of file +export default Chip; diff --git a/packages/ui/src/container/index.tsx b/packages/ui/src/container/index.tsx new file mode 100644 index 0000000..5c1918d --- /dev/null +++ b/packages/ui/src/container/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { twMerge } from "tailwind-merge"; +const Container = React.forwardRef( + ( + { + component: Component = "div", + disableGutters = false, + fixed = false, + maxWidth = "lg", + className, + ...props + }: any, + ref + ) => { + const maxWidthClasses = { + xs: "max-w-xs", + sm: "max-w-sm", + md: "max-w-md", + lg: "max-w-lg", + xl: "max-w-xl", + false: "", + }; + + return ( + + {props.children} + + ); + } +); + +export default Container; diff --git a/packages/ui/src/dialog/index.tsx b/packages/ui/src/dialog/index.tsx index 43df059..2a5ade3 100644 --- a/packages/ui/src/dialog/index.tsx +++ b/packages/ui/src/dialog/index.tsx @@ -1,25 +1,23 @@ -"use client" +import React from "react"; -import React from 'react'; +import { MdDialog } from "@material/web/dialog/dialog.js"; +import { createComponent } from "@lit/react"; -import {MdDialog} from '@material/web/dialog/dialog.js'; -import {createComponent} from '@lit/react'; - -export type { MdDialog as MdDialogType } from '@material/web/dialog/dialog'; +export type { MdDialog as MdDialogType } from "@material/web/dialog/dialog"; const events = { - 'onOpen': 'open', - 'onOpened': 'opened', - 'onClose': 'close', - 'onClosed': 'closed', - 'onCancel': 'cancel', -} + onOpen: "open", + onOpened: "opened", + onClose: "close", + onClosed: "closed", + onCancel: "cancel", +}; export const Dialog = createComponent({ - tagName: 'md-dialog', + tagName: "md-dialog", elementClass: MdDialog, react: React, events: events, }); -export default Dialog; \ No newline at end of file +export default Dialog; diff --git a/packages/ui/src/divider/index.tsx b/packages/ui/src/divider/index.tsx index ca6390a..f4ddf28 100644 --- a/packages/ui/src/divider/index.tsx +++ b/packages/ui/src/divider/index.tsx @@ -1,13 +1,12 @@ -"use client" // file: Divider.react.tsx -import { MdDivider } from '@material/web/divider/divider'; -import React from 'react'; -import { createComponent } from '@lit/react'; +import { MdDivider } from "@material/web/divider/divider"; +import React from "react"; +import { createComponent } from "@lit/react"; -export type { MdDivider } from '@material/web/divider/divider.js'; +export type { MdDivider } from "@material/web/divider/divider.js"; export default createComponent({ - tagName: 'md-divider', - elementClass: MdDivider, - react: React, -}); \ No newline at end of file + tagName: "md-divider", + elementClass: MdDivider, + react: React, +}); diff --git a/packages/ui/src/elevation/index.tsx b/packages/ui/src/elevation/index.tsx index 095a3b6..57ce7c6 100644 --- a/packages/ui/src/elevation/index.tsx +++ b/packages/ui/src/elevation/index.tsx @@ -1,13 +1,12 @@ -"use client" // file: Elevation.react.tsx -import { MdElevation } from '@material/web/elevation/elevation'; -import React from 'react'; -import { createComponent } from '@lit/react'; +import { MdElevation } from "@material/web/elevation/elevation"; +import React from "react"; +import { createComponent } from "@lit/react"; -export type { MdElevation } from '@material/web/elevation/elevation.js'; +export type { MdElevation } from "@material/web/elevation/elevation.js"; export default createComponent({ - tagName: 'md-elevation', - elementClass: MdElevation, - react: React, + tagName: "md-elevation", + elementClass: MdElevation, + react: React, }); diff --git a/packages/ui/src/fab/index.tsx b/packages/ui/src/fab/index.tsx index 6ea4c77..f383beb 100644 --- a/packages/ui/src/fab/index.tsx +++ b/packages/ui/src/fab/index.tsx @@ -1,27 +1,27 @@ -"use client" // file: Fab.react.tsx -import {MdFab} from '@material/web/fab/fab.js'; -import {MdBrandedFab} from '@material/web/fab/branded-fab'; -import React from 'react'; -import {createComponent} from '@lit/react'; -import { matchVariant } from '../utils'; +import { MdFab } from "@material/web/fab/fab.js"; +import { MdBrandedFab } from "@material/web/fab/branded-fab"; +import React from "react"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; -export type {FabSize, FabVariant} from '@material/web/fab/fab.js'; +export type { FabSize, FabVariant } from "@material/web/fab/fab.js"; export const DefaultFab = createComponent({ - tagName: 'md-fab', + tagName: "md-fab", elementClass: MdFab, react: React, }); export const BrandedFab = createComponent({ - tagName: 'md-text-button', + tagName: "md-text-button", elementClass: MdBrandedFab, react: React, }); const Fab = (props: any) => { - if (matchVariant(props.variant, 'md-branded-fab')) return {props.children} - return {props.children} -} + if (matchVariant(props.variant, "md-branded-fab")) + return {props.children}; + return {props.children}; +}; -export default Fab; \ No newline at end of file +export default Fab; diff --git a/packages/ui/src/focus-ring/index.tsx b/packages/ui/src/focus-ring/index.tsx index 8d568b8..fc346b4 100644 --- a/packages/ui/src/focus-ring/index.tsx +++ b/packages/ui/src/focus-ring/index.tsx @@ -1,17 +1,16 @@ -"use client" // file: FocusRing.react.tsx -import { MdFocusRing } from '@material/web/focus/md-focus-ring'; -import React from 'react'; -import { createComponent } from '@lit/react'; +import { MdFocusRing } from "@material/web/focus/md-focus-ring"; +import React from "react"; +import { createComponent } from "@lit/react"; -export type { MdFocusRing } from '@material/web/focus/md-focus-ring.js'; +export type { MdFocusRing } from "@material/web/focus/md-focus-ring.js"; const events = { - 'onVisibilityChanged': 'visibility-changed' -} + onVisibilityChanged: "visibility-changed", +}; export default createComponent({ - tagName: 'md-focus-ring', - elementClass: MdFocusRing, - react: React, - events, + tagName: "md-focus-ring", + elementClass: MdFocusRing, + react: React, + events, }); diff --git a/packages/ui/src/icon-button/index.tsx b/packages/ui/src/icon-button/index.tsx index 68c6cfe..ed317a6 100644 --- a/packages/ui/src/icon-button/index.tsx +++ b/packages/ui/src/icon-button/index.tsx @@ -1,56 +1,60 @@ -"use client" // file: IconButton.react.tsx -import { MdIconButton } from '@material/web/iconbutton/icon-button'; -import { MdFilledIconButton } from '@material/web/iconbutton/filled-icon-button'; -import { MdFilledTonalIconButton } from '@material/web/iconbutton/filled-tonal-icon-button'; -import { MdOutlinedIconButton } from '@material/web/iconbutton/outlined-icon-button'; -import React from 'react'; -import { createComponent } from '@lit/react'; -import { matchVariant } from '../utils'; - -export type { MdIconButton } from '@material/web/iconbutton/icon-button.js'; -export type { MdFilledIconButton } from '@material/web/iconbutton/filled-icon-button.js'; -export type { MdFilledTonalIconButton } from '@material/web/iconbutton/filled-tonal-icon-button.js'; -export type { MdOutlinedIconButton } from '@material/web/iconbutton/outlined-icon-button.js'; +import { MdIconButton } from "@material/web/iconbutton/icon-button"; +import { MdFilledIconButton } from "@material/web/iconbutton/filled-icon-button"; +import { MdFilledTonalIconButton } from "@material/web/iconbutton/filled-tonal-icon-button"; +import { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button"; +import React from "react"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; + +export type { MdIconButton } from "@material/web/iconbutton/icon-button.js"; +export type { MdFilledIconButton } from "@material/web/iconbutton/filled-icon-button.js"; +export type { MdFilledTonalIconButton } from "@material/web/iconbutton/filled-tonal-icon-button.js"; +export type { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button.js"; const events = { - 'onInput': 'input', - 'onChange': 'change', -} + onInput: "input", + onChange: "change", +}; export const DefaultIconButton = createComponent({ - tagName: 'md-icon-button', - elementClass: MdIconButton, - react: React, - events, + tagName: "md-icon-button", + elementClass: MdIconButton, + react: React, + events, }); export const FilledIconButton = createComponent({ - tagName: 'md-filled-icon-button', - elementClass: MdFilledIconButton, - react: React, - events, + tagName: "md-filled-icon-button", + elementClass: MdFilledIconButton, + react: React, + events, }); export const FilledTonalIconButton = createComponent({ - tagName: 'md-filled-tonal-icon-button', - elementClass: MdFilledTonalIconButton, - react: React, - events, + tagName: "md-filled-tonal-icon-button", + elementClass: MdFilledTonalIconButton, + react: React, + events, }); export const OutlinedIconButton = createComponent({ - tagName: 'md-outlined-icon-button', - elementClass: MdOutlinedIconButton, - react: React, - events, + tagName: "md-outlined-icon-button", + elementClass: MdOutlinedIconButton, + react: React, + events, }); const IconButton = (props: any) => { - if (matchVariant(props.variant, 'md-filled-icon-button', 'icon-button')) return {props.children}; - if (matchVariant(props.variant, 'md-filled-tonal-icon-button', 'icon-button')) return {props.children}; - if (matchVariant(props.variant, 'md-outlined-icon-button', 'icon-button')) return {props.children}; - return {props.children}; + if (matchVariant(props.variant, "md-filled-icon-button", "icon-button")) + return {props.children}; + if (matchVariant(props.variant, "md-filled-tonal-icon-button", "icon-button")) + return ( + {props.children} + ); + if (matchVariant(props.variant, "md-outlined-icon-button", "icon-button")) + return {props.children}; + return {props.children}; }; export default IconButton; diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx index 4f2335c..d259615 100644 --- a/packages/ui/src/icon/index.tsx +++ b/packages/ui/src/icon/index.tsx @@ -1,16 +1,15 @@ -"use client" // file: Icon.react.tsx -import {MdIcon} from '@material/web/icon/icon.js'; -import React from 'react'; -import {createComponent} from '@lit/react'; +import { MdIcon } from "@material/web/icon/icon.js"; +import React from "react"; +import { createComponent } from "@lit/react"; -export type {FabSize, FabVariant} from '@material/web/fab/fab.js'; +export type { FabSize, FabVariant } from "@material/web/fab/fab.js"; export default createComponent({ - tagName: 'md-icon', + tagName: "md-icon", elementClass: MdIcon, react: React, events: { - onClick: 'click', + onClick: "click", }, -}); \ No newline at end of file +}); diff --git a/packages/ui/src/internal/aria/aria.js b/packages/ui/src/internal/aria/aria.js new file mode 100644 index 0000000..b061f70 --- /dev/null +++ b/packages/ui/src/internal/aria/aria.js @@ -0,0 +1,82 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Accessibility Object Model reflective aria properties. + */ +export const ARIA_PROPERTIES = [ + "ariaAtomic", + "ariaAutoComplete", + "ariaBusy", + "ariaChecked", + "ariaColCount", + "ariaColIndex", + "ariaColSpan", + "ariaCurrent", + "ariaDisabled", + "ariaExpanded", + "ariaHasPopup", + "ariaHidden", + "ariaInvalid", + "ariaKeyShortcuts", + "ariaLabel", + "ariaLevel", + "ariaLive", + "ariaModal", + "ariaMultiLine", + "ariaMultiSelectable", + "ariaOrientation", + "ariaPlaceholder", + "ariaPosInSet", + "ariaPressed", + "ariaReadOnly", + "ariaRequired", + "ariaRoleDescription", + "ariaRowCount", + "ariaRowIndex", + "ariaRowSpan", + "ariaSelected", + "ariaSetSize", + "ariaSort", + "ariaValueMax", + "ariaValueMin", + "ariaValueNow", + "ariaValueText", +]; +/** + * Accessibility Object Model aria attributes. + */ +export const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute); +/** + * Checks if an attribute is one of the AOM aria attributes. + * + * @example + * isAriaAttribute('aria-label'); // true + * + * @param attribute The attribute to check. + * @return True if the attribute is an aria attribute, or false if not. + */ +export function isAriaAttribute(attribute) { + return attribute.startsWith("aria-"); +} +/** + * Converts an AOM aria property into its corresponding attribute. + * + * @example + * ariaPropertyToAttribute('ariaLabel'); // 'aria-label' + * + * @param property The aria property. + * @return The aria attribute. + */ +export function ariaPropertyToAttribute(property) { + return ( + property + .replace("aria", "aria-") + // IDREF attributes also include an "Element" or "Elements" suffix + .replace(/Elements?/g, "") + .toLowerCase() + ); +} +//# sourceMappingURL=aria.js.map diff --git a/packages/ui/src/internal/aria/delegate.js b/packages/ui/src/internal/aria/delegate.js new file mode 100644 index 0000000..1c4e252 --- /dev/null +++ b/packages/ui/src/internal/aria/delegate.js @@ -0,0 +1,53 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import { ARIA_PROPERTIES, ariaPropertyToAttribute } from "./aria.js"; +/** + * Sets up a `ReactiveElement` constructor to enable updates when delegating + * aria attributes. Elements may bind `this.aria*` properties to `aria-*` + * attributes in their render functions. + * + * This function will: + * - Call `requestUpdate()` when an aria attribute changes. + * - Add `role="presentation"` to the host. + * + * NOTE: The following features are not currently supported: + * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`) + * - Delegating the `role` attribute + * + * @example + * class XButton extends LitElement { + * static { + * requestUpdateOnAriaChange(XButton); + * } + * + * protected override render() { + * return html` + * + * `; + * } + * } + * + * @param ctor The `ReactiveElement` constructor to patch. + */ +export function requestUpdateOnAriaChange(ctor) { + for (const ariaProperty of ARIA_PROPERTIES) { + ctor.createProperty(ariaProperty, { + attribute: ariaPropertyToAttribute(ariaProperty), + reflect: true, + }); + } + ctor.addInitializer((element) => { + const controller = { + hostConnected() { + element.setAttribute("role", "presentation"); + }, + }; + element.addController(controller); + }); +} +//# sourceMappingURL=delegate.js.map diff --git a/packages/ui/src/internal/controller/attachable-controller.js b/packages/ui/src/internal/controller/attachable-controller.js new file mode 100644 index 0000000..04be53f --- /dev/null +++ b/packages/ui/src/internal/controller/attachable-controller.js @@ -0,0 +1,119 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import { isServer } from "lit"; +/** + * A key to retrieve an `Attachable` element's `AttachableController` from a + * global `MutationObserver`. + */ +const ATTACHABLE_CONTROLLER = Symbol("attachableController"); +let FOR_ATTRIBUTE_OBSERVER; +if (!isServer) { + /** + * A global `MutationObserver` that reacts to `for` attribute changes on + * `Attachable` elements. If the `for` attribute changes, the controller will + * re-attach to the new referenced element. + */ + FOR_ATTRIBUTE_OBSERVER = new MutationObserver((records) => { + for (const record of records) { + // When a control's `for` attribute changes, inform its + // `AttachableController` to update to a new control. + record.target[ATTACHABLE_CONTROLLER]?.hostConnected(); + } + }); +} +/** + * A controller that provides an implementation for `Attachable` elements. + * + * @example + * ```ts + * class MyElement extends LitElement implements Attachable { + * get control() { return this.attachableController.control; } + * + * private readonly attachableController = new AttachableController( + * this, + * (previousControl, newControl) => { + * previousControl?.removeEventListener('click', this.handleClick); + * newControl?.addEventListener('click', this.handleClick); + * } + * ); + * + * // Implement remaining `Attachable` properties/methods that call the + * // controller's properties/methods. + * } + * ``` + */ +export class AttachableController { + get htmlFor() { + return this.host.getAttribute("for"); + } + set htmlFor(htmlFor) { + if (htmlFor === null) { + this.host.removeAttribute("for"); + } else { + this.host.setAttribute("for", htmlFor); + } + } + get control() { + if (this.host.hasAttribute("for")) { + if (!this.htmlFor || !this.host.isConnected) { + return null; + } + return this.host.getRootNode().querySelector(`#${this.htmlFor}`); + } + return this.currentControl || this.host.parentElement; + } + set control(control) { + if (control) { + this.attach(control); + } else { + this.detach(); + } + } + /** + * Creates a new controller for an `Attachable` element. + * + * @param host The `Attachable` element. + * @param onControlChange A callback with two parameters for the previous and + * next control. An `Attachable` element may perform setup or teardown + * logic whenever the control changes. + */ + constructor(host, onControlChange) { + this.host = host; + this.onControlChange = onControlChange; + this.currentControl = null; + host.addController(this); + host[ATTACHABLE_CONTROLLER] = this; + FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ["for"] }); + } + attach(control) { + if (control === this.currentControl) { + return; + } + this.setCurrentControl(control); + // When imperatively attaching, remove the `for` attribute so + // that the attached control is used instead of a referenced one. + this.host.removeAttribute("for"); + } + detach() { + this.setCurrentControl(null); + // When imperatively detaching, add an empty `for=""` attribute. This will + // ensure the control is `null` rather than the `parentElement`. + this.host.setAttribute("for", ""); + } + /** @private */ + hostConnected() { + this.setCurrentControl(this.control); + } + /** @private */ + hostDisconnected() { + this.setCurrentControl(null); + } + setCurrentControl(control) { + this.onControlChange(this.currentControl, control); + this.currentControl = control; + } +} +//# sourceMappingURL=attachable-controller.js.map diff --git a/packages/ui/src/internal/controller/form-submitter.js b/packages/ui/src/internal/controller/form-submitter.js new file mode 100644 index 0000000..cb12148 --- /dev/null +++ b/packages/ui/src/internal/controller/form-submitter.js @@ -0,0 +1,73 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import { isServer } from "lit"; +import { internals } from "../../labs/behaviors/element-internals.js"; +/** + * Sets up an element's constructor to enable form submission. The element + * instance should be form associated and have a `type` property. + * + * A click listener is added to each element instance. If the click is not + * default prevented, it will submit the element's form, if any. + * + * @example + * ```ts + * class MyElement extends mixinElementInternals(LitElement) { + * static { + * setupFormSubmitter(MyElement); + * } + * + * static formAssociated = true; + * + * type: FormSubmitterType = 'submit'; + * } + * ``` + * + * @param ctor The form submitter element's constructor. + */ +export function setupFormSubmitter(ctor) { + if (isServer) { + return; + } + ctor.addInitializer((instance) => { + const submitter = instance; + submitter.addEventListener("click", async (event) => { + const { type, [internals]: elementInternals } = submitter; + const { form } = elementInternals; + if (!form || type === "button") { + return; + } + // Wait a full task for event bubbling to complete. + await new Promise((resolve) => { + setTimeout(resolve); + }); + if (event.defaultPrevented) { + return; + } + if (type === "reset") { + form.reset(); + return; + } + // form.requestSubmit(submitter) does not work with form associated custom + // elements. This patches the dispatched submit event to add the correct + // `submitter`. + // See https://github.com/WICG/webcomponents/issues/814 + form.addEventListener( + "submit", + (submitEvent) => { + Object.defineProperty(submitEvent, "submitter", { + configurable: true, + enumerable: true, + get: () => submitter, + }); + }, + { capture: true, once: true }, + ); + elementInternals.setFormValue(submitter.value); + form.requestSubmit(); + }); + }); +} +//# sourceMappingURL=form-submitter.js.map diff --git a/packages/ui/src/internal/controller/is-rtl.js b/packages/ui/src/internal/controller/is-rtl.js new file mode 100644 index 0000000..3bf89a4 --- /dev/null +++ b/packages/ui/src/internal/controller/is-rtl.js @@ -0,0 +1,20 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Returns `true` if the given element is in a right-to-left direction. + * + * @param el Element to determine direction from + * @param shouldCheck Optional. If `false`, return `false` without checking + * direction. Determining the direction of `el` is somewhat expensive, so + * this parameter can be used as a conditional guard. Defaults to `true`. + */ +export function isRtl(el, shouldCheck = true) { + return ( + shouldCheck && + getComputedStyle(el).getPropertyValue("direction").trim() === "rtl" + ); +} +//# sourceMappingURL=is-rtl.js.map diff --git a/packages/ui/src/internal/controller/string-converter.js b/packages/ui/src/internal/controller/string-converter.js new file mode 100644 index 0000000..9f0f7fd --- /dev/null +++ b/packages/ui/src/internal/controller/string-converter.js @@ -0,0 +1,14 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +export const stringConverter = { + fromAttribute(value) { + return value ?? ""; + }, + toAttribute(value) { + return value || null; + }, +}; +//# sourceMappingURL=string-converter.js.map diff --git a/packages/ui/src/internal/events/dispatch-hooks.js b/packages/ui/src/internal/events/dispatch-hooks.js new file mode 100644 index 0000000..7e0e7d7 --- /dev/null +++ b/packages/ui/src/internal/events/dispatch-hooks.js @@ -0,0 +1,155 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A symbol used to access dispatch hooks on an event. + */ +const dispatchHooks = Symbol("dispatchHooks"); +/** + * Add a hook for an event that is called after the event is dispatched and + * propagates to other event listeners. + * + * This is useful for behaviors that need to check if an event is canceled. + * + * The callback is invoked synchronously, which allows for better integration + * with synchronous platform APIs (like `

` or `` clicking). + * + * Note: `setupDispatchHooks()` must be called on the element before adding any + * other event listeners. Call it in the constructor of an element or + * controller. + * + * @example + * ```ts + * class MyControl extends LitElement { + * constructor() { + * super(); + * setupDispatchHooks(this, 'click'); + * this.addEventListener('click', event => { + * afterDispatch(event, () => { + * if (event.defaultPrevented) { + * return + * } + * + * // ... perform logic + * }); + * }); + * } + * } + * ``` + * + * @example + * ```ts + * class MyController implements ReactiveController { + * constructor(host: ReactiveElement) { + * // setupDispatchHooks() may be called multiple times for the same + * // element and events, making it safe for multiple controllers to use it. + * setupDispatchHooks(host, 'click'); + * host.addEventListener('click', event => { + * afterDispatch(event, () => { + * if (event.defaultPrevented) { + * return; + * } + * + * // ... perform logic + * }); + * }); + * } + * } + * ``` + * + * @param event The event to add a hook to. + * @param callback A hook that is called after the event finishes dispatching. + */ +export function afterDispatch(event, callback) { + const hooks = event[dispatchHooks]; + if (!hooks) { + throw new Error(`'${event.type}' event needs setupDispatchHooks().`); + } + hooks.addEventListener("after", callback); +} +/** + * A lookup map of elements and event types that have a dispatch hook listener + * set up. Used to ensure we don't set up multiple hook listeners on the same + * element for the same event. + */ +const ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap(); +/** + * Sets up an element to add dispatch hooks to given event types. This must be + * called before adding any event listeners that need to use dispatch hooks + * like `afterDispatch()`. + * + * This function is safe to call multiple times with the same element or event + * types. Call it in the constructor of elements, mixins, and controllers to + * ensure it is set up before external listeners. + * + * @example + * ```ts + * class MyControl extends LitElement { + * constructor() { + * super(); + * setupDispatchHooks(this, 'click'); + * this.addEventListener('click', this.listenerUsingAfterDispatch); + * } + * } + * ``` + * + * @param element The element to set up event dispatch hooks for. + * @param eventTypes The event types to add dispatch hooks to. + */ +export function setupDispatchHooks(element, ...eventTypes) { + let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element); + if (!typesAlreadySetUp) { + typesAlreadySetUp = new Set(); + ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp); + } + for (const eventType of eventTypes) { + // Don't register multiple dispatch hook listeners. A second registration + // would lead to the second listener re-dispatching a re-dispatched event, + // which can cause an infinite loop inside the other one. + if (typesAlreadySetUp.has(eventType)) { + continue; + } + // When we re-dispatch the event, it's going to immediately trigger this + // listener again. Use a flag to ignore it. + let isRedispatching = false; + element.addEventListener( + eventType, + (event) => { + if (isRedispatching) { + return; + } + // Do not let the event propagate to any other listener (not just + // bubbling listeners with `stopPropagation()`). + event.stopImmediatePropagation(); + // Make a copy. + const eventCopy = Reflect.construct(event.constructor, [ + event.type, + event, + ]); + // Add hooks onto the event. + const hooks = new EventTarget(); + eventCopy[dispatchHooks] = hooks; + // Re-dispatch the event. We can't reuse `redispatchEvent()` since we + // need to add the hooks to the copy before it's dispatched. + isRedispatching = true; + const dispatched = element.dispatchEvent(eventCopy); + isRedispatching = false; + if (!dispatched) { + event.preventDefault(); + } + // Synchronously call afterDispatch() hooks. + hooks.dispatchEvent(new Event("after")); + }, + { + // Ensure this listener runs before other listeners. + // `setupDispatchHooks()` should be called in constructors to also + // ensure they run before any other externally-added capture listeners. + capture: true, + }, + ); + typesAlreadySetUp.add(eventType); + } +} +//# sourceMappingURL=dispatch-hooks.js.map diff --git a/packages/ui/src/internal/events/form-label-activation.js b/packages/ui/src/internal/events/form-label-activation.js new file mode 100644 index 0000000..76ca077 --- /dev/null +++ b/packages/ui/src/internal/events/form-label-activation.js @@ -0,0 +1,96 @@ +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Dispatches a click event to the given element that triggers a native action, + * but is not composed and therefore is not seen outside the element. + * + * This is useful for responding to an external click event on the host element + * that should trigger an internal action like a button click. + * + * Note, a helper is provided because setting this up correctly is a bit tricky. + * In particular, calling `click` on an element creates a composed event, which + * is not desirable, and a manually dispatched event must specifically be a + * `MouseEvent` to trigger a native action. + * + * @example + * hostClickListener = (event: MouseEvent) { + * if (isActivationClick(event)) { + * this.dispatchActivationClick(this.buttonElement); + * } + * } + * + */ +export function dispatchActivationClick(element) { + const event = new MouseEvent("click", { bubbles: true }); + element.dispatchEvent(event); + return event; +} +/** + * Returns true if the click event should trigger an activation behavior. The + * behavior is defined by the element and is whatever it should do when + * clicked. + * + * Typically when an element needs to handle a click, the click is generated + * from within the element and an event listener within the element implements + * the needed behavior; however, it's possible to fire a click directly + * at the element that the element should handle. This method helps + * distinguish these "external" clicks. + * + * An "external" click can be triggered in a number of ways: via a click + * on an associated label for a form associated element, calling + * `element.click()`, or calling + * `element.dispatchEvent(new MouseEvent('click', ...))`. + * + * Also works around Firefox issue + * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching + * events for a microtask after called. + * + * @example + * hostClickListener = (event: MouseEvent) { + * if (isActivationClick(event)) { + * this.dispatchActivationClick(this.buttonElement); + * } + * } + * + */ +export function isActivationClick(event) { + // Event must start at the event target. + if (event.currentTarget !== event.target) { + return false; + } + // Event must not be retargeted from shadowRoot. + if (event.composedPath()[0] !== event.target) { + return false; + } + // Target must not be disabled; this should only occur for a synthetically + // dispatched click. + if (event.target.disabled) { + return false; + } + // This is an activation if the event should not be squelched. + return !squelchEvent(event); +} +// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576) +// Remove when Firefox bug is addressed. +function squelchEvent(event) { + const squelched = isSquelchingEvents; + if (squelched) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + squelchEventsForMicrotask(); + return squelched; +} +// Ignore events for one microtask only. +let isSquelchingEvents = false; +async function squelchEventsForMicrotask() { + isSquelchingEvents = true; + // Need to pause for just one microtask. + // tslint:disable-next-line + await null; + isSquelchingEvents = false; +} +//# sourceMappingURL=form-label-activation.js.map diff --git a/packages/ui/src/internal/events/redispatch-event.js b/packages/ui/src/internal/events/redispatch-event.js new file mode 100644 index 0000000..ee9ddd1 --- /dev/null +++ b/packages/ui/src/internal/events/redispatch-event.js @@ -0,0 +1,40 @@ +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Re-dispatches an event from the provided element. + * + * This function is useful for forwarding non-composed events, such as `change` + * events. + * + * @example + * class MyInput extends LitElement { + * render() { + * return html``; + * } + * + * protected redispatchEvent(event: Event) { + * redispatchEvent(this, event); + * } + * } + * + * @param element The element to dispatch the event from. + * @param event The event to re-dispatch. + * @return Whether or not the event was dispatched (if cancelable). + */ +export function redispatchEvent(element, event) { + // For bubbling events in SSR light DOM (or composed), stop their propagation + // and dispatch the copy. + if (event.bubbles && (!element.shadowRoot || event.composed)) { + event.stopPropagation(); + } + const copy = Reflect.construct(event.constructor, [event.type, event]); + const dispatched = element.dispatchEvent(copy); + if (!dispatched) { + event.preventDefault(); + } + return dispatched; +} +//# sourceMappingURL=redispatch-event.js.map diff --git a/packages/ui/src/internal/motion/animation.js b/packages/ui/src/internal/motion/animation.js new file mode 100644 index 0000000..e9bff89 --- /dev/null +++ b/packages/ui/src/internal/motion/animation.js @@ -0,0 +1,105 @@ +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Easing functions to use for web animations. + * + * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy. + * + * TODO(b/241113345): replace with tokens + */ +export const EASING = { + STANDARD: "cubic-bezier(0.2, 0, 0, 1)", + STANDARD_ACCELERATE: "cubic-bezier(.3,0,1,1)", + STANDARD_DECELERATE: "cubic-bezier(0,0,0,1)", + EMPHASIZED: "cubic-bezier(.3,0,0,1)", + EMPHASIZED_ACCELERATE: "cubic-bezier(.3,0,.8,.15)", + EMPHASIZED_DECELERATE: "cubic-bezier(.05,.7,.1,1)", +}; +/** + * Creates an `AnimationSignal` that can be used to cancel a previous task. + * + * @example + * class MyClass { + * private labelAnimationSignal = createAnimationSignal(); + * + * private async animateLabel() { + * // Start of the task. Previous tasks will be canceled. + * const signal = this.labelAnimationSignal.start(); + * + * // Do async work... + * if (signal.aborted) { + * // Use AbortSignal to check if a request was made to abort after some + * // asynchronous work. + * return; + * } + * + * const animation = this.animate(...); + * // Add event listeners to be notified when the task should be canceled. + * signal.addEventListener('abort', () => { + * animation.cancel(); + * }); + * + * animation.addEventListener('finish', () => { + * // Tell the signal that the current task is finished. + * this.labelAnimationSignal.finish(); + * }); + * } + * } + * + * @return An `AnimationSignal`. + */ +export function createAnimationSignal() { + // The current animation's AbortController + let animationAbortController = null; + return { + start() { + // Tell the previous animation to cancel. + animationAbortController?.abort(); + // Set up a new AbortController for the current animation. + animationAbortController = new AbortController(); + // Provide the AbortSignal so that the caller can check aborted status + // and add listeners. + return animationAbortController.signal; + }, + finish() { + animationAbortController = null; + }, + }; +} +/** + * Returns a function which can be used to throttle function calls + * mapped to a key via a given function that should produce a promise that + * determines the throttle amount (defaults to requestAnimationFrame). + */ +export function createThrottle() { + const stack = new Set(); + return async ( + key = "", + cb, + timeout = async () => { + await new Promise(requestAnimationFrame); + }, + ) => { + if (!stack.has(key)) { + stack.add(key); + await timeout(); + if (stack.has(key)) { + stack.delete(key); + cb(); + } + } + }; +} +/** + * Parses an number in milliseconds from a css time value + */ +export function msFromTimeCSSValue(value) { + const match = value.trim().match(/([\d.]+)(\s*s$)?/); + const time = match?.[1]; + const seconds = match?.[2]; + return Number(time ?? 0) * (seconds ? 1000 : 1); +} +//# sourceMappingURL=animation.js.map diff --git a/packages/ui/src/item/index.tsx b/packages/ui/src/item/index.tsx new file mode 100644 index 0000000..a937889 --- /dev/null +++ b/packages/ui/src/item/index.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { MdItem } from "@material/web/labs/item/item"; +import { createComponent } from "@lit/react"; + +export type { MdItem as MdItemType } from "@material/web/labs/item/item"; + +// const events = { +// 'onOpen': 'open', +// 'onOpened': 'opened', +// 'onClose': 'close', +// 'onClosed': 'closed', +// 'onCancel': 'cancel', +// } + +export const Item = createComponent({ + tagName: "md-Item", + elementClass: MdItem, + react: React, + // events: events, +}); + +export default Item; diff --git a/packages/ui/src/list/index.tsx b/packages/ui/src/list/index.tsx index 627a861..599e462 100644 --- a/packages/ui/src/list/index.tsx +++ b/packages/ui/src/list/index.tsx @@ -1,23 +1,22 @@ // File: MaterialList.tsx -"use client"; -import { MdList } from '@material/web/list/list'; -import { MdListItem } from '@material/web/list/list-item'; +import { MdList } from "@material/web/list/list"; +import { MdListItem } from "@material/web/list/list-item"; -import React from 'react'; -import { createComponent } from '@lit/react'; +import React from "react"; +import { createComponent } from "@lit/react"; const events = { - 'onRequestActivation': 'request-activation' -} + onRequestActivation: "request-activation", +}; export const List = createComponent({ - tagName: 'md-list', + tagName: "md-list", elementClass: MdList, react: React, }); export const ListItem = createComponent({ - tagName: 'md-list-item', + tagName: "md-list-item", elementClass: MdListItem, react: React, events, diff --git a/packages/ui/src/menu/index.tsx b/packages/ui/src/menu/index.tsx index bf09d1f..2b20e30 100644 --- a/packages/ui/src/menu/index.tsx +++ b/packages/ui/src/menu/index.tsx @@ -1,51 +1,48 @@ // File: MaterialMenu.tsx -"use client"; -import { MdMenu } from '@material/web/menu/menu'; -import { MdMenuItem } from '@material/web/menu/menu-item'; -import { MdSubMenu } from '@material/web/menu/sub-menu'; +import { MdMenu } from "@material/web/menu/menu"; +import { MdMenuItem } from "@material/web/menu/menu-item"; +import { MdSubMenu } from "@material/web/menu/sub-menu"; -import React from 'react'; -import { createComponent } from '@lit/react'; +import React from "react"; +import { createComponent } from "@lit/react"; const events = { - 'onOpening': 'opening', - 'onOpened': 'opened', - 'onClosing': 'closing', - 'onClosed': 'closed', -} + onOpening: "opening", + onOpened: "opened", + onClosing: "closing", + onClosed: "closed", +}; export const MenuInternal = createComponent({ - tagName: 'md-menu', + tagName: "md-menu", elementClass: MdMenu, react: React, events, }); export const MenuItem = createComponent({ - tagName: 'md-menu-item', + tagName: "md-menu-item", elementClass: MdMenuItem, react: React, events: { - 'onCloseMenu': 'close-menu' - } + onCloseMenu: "close-menu", + }, }); export const SubMenu = createComponent({ - tagName: 'md-sub-menu', + tagName: "md-sub-menu", elementClass: MdSubMenu, react: React, events: { - 'onDeactivateItems': 'deactivate-items', - 'onRequestActivation': 'request-activation', - 'onDeactivateTypeahead': 'deactivate-typeahead', - 'onActivateTypeahead': 'activate-typeahead', - } + onDeactivateItems: "deactivate-items", + onRequestActivation: "request-activation", + onDeactivateTypeahead: "deactivate-typeahead", + onActivateTypeahead: "activate-typeahead", + }, }); const Menu = (props: any) => { - return ( - {props.children} - ) -} + return {props.children}; +}; export default Menu; diff --git a/packages/ui/src/navigation-bar/index.tsx b/packages/ui/src/navigation-bar/index.tsx new file mode 100644 index 0000000..cbaa5ed --- /dev/null +++ b/packages/ui/src/navigation-bar/index.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { MdNavigationBar } from "@material/web/labs/navigationbar/navigation-bar"; +import { createComponent } from "@lit/react"; + +export type { MdNavigationBar as MdNavigationBarType } from "@material/web/labs/navigationbar/navigation-bar"; + +// const events = { +// 'onOpen': 'open', +// 'onOpened': 'opened', +// 'onClose': 'close', +// 'onClosed': 'closed', +// 'onCancel': 'cancel', +// } + +export const NavigationBar = createComponent({ + tagName: "md-navigation-bar", + elementClass: MdNavigationBar, + react: React, + // events: events, +}); + +export default NavigationBar; diff --git a/packages/ui/src/navigation-drawer/index.tsx b/packages/ui/src/navigation-drawer/index.tsx index 090734f..9086acc 100644 --- a/packages/ui/src/navigation-drawer/index.tsx +++ b/packages/ui/src/navigation-drawer/index.tsx @@ -1,25 +1,33 @@ -"use client" +import React from "react"; -import React from 'react'; +import { MdNavigationDrawer } from "@material/web/labs/navigationdrawer/navigation-drawer"; +import { MdNavigationDrawerModal } from "@material/web/labs/navigationdrawer/navigation-drawer-modal"; -import {MdNavigationDrawer} from '@material/web/labs/navigationdrawer/navigation-drawer'; -import {createComponent} from '@lit/react'; +import { createComponent } from "@lit/react"; -export type { MdNavigationDrawer as MdNavigationDrawerType } from '@material/web/labs/navigationdrawer/navigation-drawer'; +export type { MdNavigationDrawer as MdNavigationDrawerType } from "@material/web/labs/navigationdrawer/navigation-drawer"; -// const events = { -// 'onOpen': 'open', -// 'onOpened': 'opened', -// 'onClose': 'close', -// 'onClosed': 'closed', -// 'onCancel': 'cancel', -// } +const events = { + onOpen: "open", + onOpened: "opened", + onClose: "close", + onClosed: "closed", + onCancel: "cancel", + onNavigationDrawerChanged: "navigation-drawer-changed", +}; export const NavigationDrawer = createComponent({ - tagName: 'md-navigation-drawer', + tagName: "md-navigation-drawer", elementClass: MdNavigationDrawer, react: React, - // events: events, + events: events, }); -export default NavigationDrawer; \ No newline at end of file +export const NavigationDrawerModal = createComponent({ + tagName: "md-navigation-drawer-modal", + elementClass: MdNavigationDrawerModal, + react: React, + events: events, +}); + +export default NavigationDrawer; diff --git a/packages/ui/src/navigation-rail/index.tsx b/packages/ui/src/navigation-rail/index.tsx new file mode 100644 index 0000000..5fbfd11 --- /dev/null +++ b/packages/ui/src/navigation-rail/index.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { MdNavigationRail } from "./web-component/navigation-rail"; + +import { createComponent } from "@lit/react"; + +const events = { + onOpen: "open", + onOpened: "opened", + onClose: "close", + onClosed: "closed", + onCancel: "cancel", + // 'onNavigationDrawerChanged': 'navigation-drawer-changed' +}; + +export const NavigationRail = createComponent({ + tagName: "md-navigation-rail", + elementClass: MdNavigationRail, + react: React, + events: events, +}); + +export default NavigationRail; diff --git a/packages/ui/src/navigation-rail/web-component/harness.js b/packages/ui/src/navigation-rail/web-component/harness.js new file mode 100644 index 0000000..78f95db --- /dev/null +++ b/packages/ui/src/navigation-rail/web-component/harness.js @@ -0,0 +1,29 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import { Harness } from "../../testing/harness.js"; +import { NavigationTabHarness } from "@material/web/navigationtab/harness.js"; +/** + * Test harness for navigation bars. + */ +export class NavigationRailHarness extends Harness { + constructor() { + super(...arguments); + this.tab = this.getTab(); + } + /** + * Returns the active tab to be used for interaction simulation. + */ + async getInteractiveElement() { + await this.element.updateComplete; + return (await this.tab).getInteractiveElement(); + } + async getTab() { + await this.element.updateComplete; + const tab = this.element.tabs[this.element.activeIndex]; + return new NavigationTabHarness(tab); + } +} +//# sourceMappingURL=harness.js.map diff --git a/packages/ui/src/navigation-rail/web-component/internal/constants.js b/packages/ui/src/navigation-rail/web-component/internal/constants.js new file mode 100644 index 0000000..522578f --- /dev/null +++ b/packages/ui/src/navigation-rail/web-component/internal/constants.js @@ -0,0 +1,7 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +export {}; +//# sourceMappingURL=constants.js.map diff --git a/packages/ui/src/navigation-rail/web-component/internal/navigation-rail-styles.js b/packages/ui/src/navigation-rail/web-component/internal/navigation-rail-styles.js new file mode 100644 index 0000000..f2f01d4 --- /dev/null +++ b/packages/ui/src/navigation-rail/web-component/internal/navigation-rail-styles.js @@ -0,0 +1,62 @@ +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./labs/navigationbar/internal/navigation-bar-styles.css. +import { css } from "lit"; +export const styles = css` + .md3-navigation-rail { + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 80px; + min-width: 80px; + position: sticky; + top: 0; + padding-left: 10px; + padding-right: 10px; + /* height: 100%; */ + } + + .md3-navigation-rail.extended { + width: fit-content; + align-items: flex-start; + } + + .md3-navigation-rail__tabs-slot-container { + display: flex; + flex-direction: column; + /* height: 100vh; */ + gap: 32px; + /* justify-content: space-between; */ + align-items: center; + } + + .md3-navigation-rail-top { + padding-top: 24px; + display: flex; + flex-direction: column; + gap: 12px; + align-items: center; + width: 100%; + } + + .md3-navigation-rail-top.extended { + align-items: flex-start; + } + + .md3-navigation-rail-middle { + /* + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + */ + display: inherit; + width: inherit; + justify-content: space-between; + align-items: center; + } +`; +//# sourceMappingURL=navigation-bar-styles.js.map diff --git a/packages/ui/src/navigation-rail/web-component/internal/navigation-rail.js b/packages/ui/src/navigation-rail/web-component/internal/navigation-rail.js new file mode 100644 index 0000000..18ffc1f --- /dev/null +++ b/packages/ui/src/navigation-rail/web-component/internal/navigation-rail.js @@ -0,0 +1,170 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import { __decorate } from "tslib"; +import { html, nothing } from "lit"; +import { property, queryAssignedElements } from "lit/decorators.js"; +import { requestUpdateOnAriaChange } from "../../../internal/aria/delegate.js"; +import { isRtl } from "../../../internal/controller/is-rtl.js"; +import { NavigationBar } from "@material/web/labs/navigationbar/internal/navigation-bar.js"; +/** + * b/265346501 - add docs + * + * @fires navigation-bar-activated {CustomEvent} + * Dispatched whenever the `activeIndex` changes. --bubbles --composed + */ +export class NavigationRail extends NavigationBar { + constructor() { + super(...arguments); + } + render() { + // Needed for closure conformance + const { ariaLabel, extended } = this; + return html` `; + } + updated(changedProperties) { + if (changedProperties.has("activeIndex")) { + this.onActiveIndexChange(this.activeIndex); + this.dispatchEvent( + new CustomEvent("navigation-bar-activated", { + detail: { + tab: this.tabs[this.activeIndex], + activeIndex: this.activeIndex, + }, + bubbles: true, + composed: true, + }), + ); + } + if (changedProperties.has("hideInactiveLabels")) { + this.onHideInactiveLabelsChange(this.hideInactiveLabels); + } + if (changedProperties.has("tabs")) { + this.onHideInactiveLabelsChange(this.hideInactiveLabels); + this.onActiveIndexChange(this.activeIndex); + } + } + firstUpdated(changedProperties) { + super.firstUpdated(changedProperties); + this.layout(); + } + layout() { + if (!this.tabsElement) return; + const navTabs = []; + for (const node of this.tabsElement) { + navTabs.push(node); + } + this.tabs = navTabs; + } + handleNavigationTabConnected(event) { + const target = event.target; + if (this.tabs.indexOf(target) === -1) { + this.layout(); + } + } + handleNavigationTabInteraction(event) { + this.activeIndex = this.tabs.indexOf(event.detail.state); + } + handleKeydown(event) { + const key = event.key; + const focusedTabIndex = this.tabs.findIndex((tab) => { + return tab.matches(":focus-within"); + }); + const isRTL = isRtl(this); + const maxIndex = this.tabs.length - 1; + if (key === "Enter" || key === " ") { + this.activeIndex = focusedTabIndex; + return; + } + if (key === "Home") { + this.tabs[0].focus(); + return; + } + if (key === "End") { + this.tabs[maxIndex].focus(); + return; + } + const toNextTab = + (key === "ArrowRight" && !isRTL) || (key === "ArrowLeft" && isRTL); + if (toNextTab && focusedTabIndex === maxIndex) { + this.tabs[0].focus(); + return; + } + if (toNextTab) { + this.tabs[focusedTabIndex + 1].focus(); + return; + } + const toPreviousTab = + (key === "ArrowLeft" && !isRTL) || (key === "ArrowRight" && isRTL); + if (toPreviousTab && focusedTabIndex === 0) { + this.tabs[maxIndex].focus(); + return; + } + if (toPreviousTab) { + this.tabs[focusedTabIndex - 1].focus(); + return; + } + } + onActiveIndexChange(value) { + if (!this.tabs[value]) { + throw new Error("NavigationBar: activeIndex is out of bounds."); + } + for (let i = 0; i < this.tabs.length; i++) { + this.tabs[i].active = i === value; + } + } + onHideInactiveLabelsChange(value) { + for (const tab of this.tabs) { + tab.hideInactiveLabel = value; + } + } +} +(() => { + requestUpdateOnAriaChange(NavigationBar); +})(); +__decorate( + [property({ type: Number, attribute: "active-index" })], + NavigationBar.prototype, + "activeIndex", + void 0, +); +__decorate( + [property({ type: Boolean, attribute: "hide-inactive-labels" })], + NavigationBar.prototype, + "hideInactiveLabels", + void 0, +); +__decorate( + [property({ type: Boolean, attribute: "extended" })], + NavigationBar.prototype, + "extended", + void 0, +); +__decorate( + [queryAssignedElements({ flatten: true })], + NavigationBar.prototype, + "tabsElement", + void 0, +); +//# sourceMappingURL=navigation-bar.js.map diff --git a/packages/ui/src/navigation-rail/web-component/internal/state.js b/packages/ui/src/navigation-rail/web-component/internal/state.js new file mode 100644 index 0000000..0b90dda --- /dev/null +++ b/packages/ui/src/navigation-rail/web-component/internal/state.js @@ -0,0 +1,7 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +export {}; +//# sourceMappingURL=state.js.map diff --git a/packages/ui/src/navigation-rail/web-component/navigation-rail.js b/packages/ui/src/navigation-rail/web-component/navigation-rail.js new file mode 100644 index 0000000..24dd854 --- /dev/null +++ b/packages/ui/src/navigation-rail/web-component/navigation-rail.js @@ -0,0 +1,20 @@ +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +import { __decorate } from "tslib"; +import { customElement } from "lit/decorators.js"; +import { NavigationRail } from "./internal/navigation-rail.js"; +import { styles } from "./internal/navigation-rail-styles.js"; +/** + * @final + * @suppress {visibility} + */ +export let MdNavigationRail = class MdNavigationRail extends NavigationRail {}; +MdNavigationRail.styles = [styles]; +MdNavigationRail = __decorate( + [customElement("md-navigation-rail")], + MdNavigationRail, +); +//# sourceMappingURL=navigation-rail.js.map diff --git a/packages/ui/src/navigation-tab/index.tsx b/packages/ui/src/navigation-tab/index.tsx new file mode 100644 index 0000000..3309381 --- /dev/null +++ b/packages/ui/src/navigation-tab/index.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { MdNavigationTab } from "@material/web/labs/navigationtab/navigation-tab"; +import { createComponent } from "@lit/react"; + +export type { MdNavigationTab as MdNavigationTabType } from "@material/web/labs/navigationtab/navigation-tab"; + +// const events = { +// 'onOpen': 'open', +// 'onOpened': 'opened', +// 'onClose': 'close', +// 'onClosed': 'closed', +// 'onCancel': 'cancel', +// } + +export const NavigationTab = createComponent({ + tagName: "md-navigation-tab", + elementClass: MdNavigationTab, + react: React, + // events: events, +}); + +export default NavigationTab; diff --git a/packages/ui/src/progress/index.tsx b/packages/ui/src/progress/index.tsx index 319aada..137250d 100644 --- a/packages/ui/src/progress/index.tsx +++ b/packages/ui/src/progress/index.tsx @@ -1,32 +1,28 @@ // File: ProgressIndicators.tsx -import React from 'react'; -import { - MdLinearProgress, -} from '@material/web/progress/linear-progress'; +import React from "react"; +import { MdLinearProgress } from "@material/web/progress/linear-progress"; -import { - MdCircularProgress, -} from '@material/web/progress/circular-progress'; +import { MdCircularProgress } from "@material/web/progress/circular-progress"; - -import { createComponent } from '@lit/react'; -import { matchVariant } from '../utils'; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; export const CircularProgress = createComponent({ - tagName: 'md-circular-progress', + tagName: "md-circular-progress", elementClass: MdCircularProgress, react: React, }); export const LinearProgress = createComponent({ - tagName: 'md-linear-progress', + tagName: "md-linear-progress", elementClass: MdLinearProgress, react: React, }); const Progress = (props: any) => { - if (matchVariant(props.variant, 'md-linear-progress')) return {props.children}; + if (matchVariant(props.variant, "md-linear-progress")) + return {props.children}; return {props.children}; }; diff --git a/packages/ui/src/radio/index.tsx b/packages/ui/src/radio/index.tsx index 3af62d4..5583839 100644 --- a/packages/ui/src/radio/index.tsx +++ b/packages/ui/src/radio/index.tsx @@ -1,20 +1,20 @@ // File: RadioButtons.tsx -import React from 'react'; -import { MdRadio } from '@material/web/radio/radio'; +import React from "react"; +import { MdRadio } from "@material/web/radio/radio"; -import { createComponent } from '@lit/react'; +import { createComponent } from "@lit/react"; -export type { MdRadio } from '@material/web/radio/radio.js'; +export type { MdRadio } from "@material/web/radio/radio.js"; const events = { - 'onInput': 'input', - 'onChange': 'change' -} + onInput: "input", + onChange: "change", +}; export default createComponent({ - tagName: 'md-radio', + tagName: "md-radio", elementClass: MdRadio, react: React, events, -}); \ No newline at end of file +}); diff --git a/packages/ui/src/ripple/index.tsx b/packages/ui/src/ripple/index.tsx index 023d66f..8552dfa 100644 --- a/packages/ui/src/ripple/index.tsx +++ b/packages/ui/src/ripple/index.tsx @@ -1,13 +1,13 @@ // File: Ripple.tsx -import React from 'react'; -import { MdRipple } from '@material/web/ripple/ripple'; -import { createComponent } from '@lit/react'; +import React from "react"; +import { MdRipple } from "@material/web/ripple/ripple"; +import { createComponent } from "@lit/react"; -export type { MdRipple } from '@material/web/ripple/ripple'; +export type { MdRipple } from "@material/web/ripple/ripple"; export default createComponent({ - tagName: 'md-ripple', - elementClass: MdRipple, - react: React, + tagName: "md-ripple", + elementClass: MdRipple, + react: React, }); diff --git a/packages/ui/src/segmented-button/index.tsx b/packages/ui/src/segmented-button/index.tsx index bfeb425..3c15954 100644 --- a/packages/ui/src/segmented-button/index.tsx +++ b/packages/ui/src/segmented-button/index.tsx @@ -1,31 +1,34 @@ -"use client" // file: Icon.react.tsx -import {MdOutlinedSegmentedButtonSet} from '@material/web/labs/segmentedbuttonset/outlined-segmented-button-set'; -import {MdOutlinedSegmentedButton} from '@material/web/labs/segmentedbutton/outlined-segmented-button' +import { MdOutlinedSegmentedButtonSet } from "@material/web/labs/segmentedbuttonset/outlined-segmented-button-set"; +import { MdOutlinedSegmentedButton } from "@material/web/labs/segmentedbutton/outlined-segmented-button"; -import React from 'react'; -import {createComponent} from '@lit/react'; +import React from "react"; +import { createComponent } from "@lit/react"; -export type {FabSize, FabVariant} from '@material/web/fab/fab.js'; +export type { FabSize, FabVariant } from "@material/web/fab/fab.js"; const events = { - 'onUpdateFocus': 'update-focus' -} + onUpdateFocus: "update-focus", +}; export const SegmentedButtonSet = createComponent({ - tagName: 'md-outlined-segmented-button-set', + tagName: "md-outlined-segmented-button-set", elementClass: MdOutlinedSegmentedButtonSet, react: React, }); export const OutlinedSegmentedButton = createComponent({ - tagName: 'md-outlined-segmented-button', - elementClass: MdOutlinedSegmentedButton, - react: React, - events, + tagName: "md-outlined-segmented-button", + elementClass: MdOutlinedSegmentedButton, + react: React, + events, }); const SegmentedButton = (props: any) => { - return {props.children} -} + return ( + + {props.children} + + ); +}; -export default SegmentedButton; \ No newline at end of file +export default SegmentedButton; diff --git a/packages/ui/src/select/index.tsx b/packages/ui/src/select/index.tsx index 073c98f..1b586d4 100644 --- a/packages/ui/src/select/index.tsx +++ b/packages/ui/src/select/index.tsx @@ -1,66 +1,55 @@ // File: Select.tsx -import React from 'react'; -import { - MdFilledSelect, -} from '@material/web/select/filled-select'; -import { - MdOutlinedSelect, -} from '@material/web/select/outlined-select'; -import { - MdSelectOption, -} from '@material/web/select/select-option'; -import { createComponent } from '@lit/react'; -import { matchVariant } from '../utils'; +import React from "react"; +import { MdFilledSelect } from "@material/web/select/filled-select"; +import { MdOutlinedSelect } from "@material/web/select/outlined-select"; +import { MdSelectOption } from "@material/web/select/select-option"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; -export type { - MdFilledSelect, -} from '@material/web/select/filled-select'; +export type { MdFilledSelect } from "@material/web/select/filled-select"; -export type { - MdOutlinedSelect, -} from '@material/web/select/outlined-select'; -export type { - MdSelectOption -} from '@material/web/select/select-option'; +export type { MdOutlinedSelect } from "@material/web/select/outlined-select"; +export type { MdSelectOption } from "@material/web/select/select-option"; const events = { - 'onChange': 'change', - 'onInput': 'input', - 'onOpening': 'opening', - 'onOpened': 'opened', - 'onClosing': 'closing', - 'onClosed': 'closed', - } + onChange: "change", + onInput: "input", + onOpening: "opening", + onOpened: "opened", + onClosing: "closing", + onClosed: "closed", +}; export const FilledSelect = createComponent({ - tagName: 'md-filled-select', - elementClass: MdFilledSelect, - react: React, - events, + tagName: "md-filled-select", + elementClass: MdFilledSelect, + react: React, + events, }); export const OutlinedSelect = createComponent({ - tagName: 'md-outlined-select', - elementClass: MdOutlinedSelect, - react: React, - events, + tagName: "md-outlined-select", + elementClass: MdOutlinedSelect, + react: React, + events, }); const Select = (props: any) => { - if (matchVariant(props.variant, 'md-filled-select')) return {props.children} - return {props.children} -} + if (matchVariant(props.variant, "md-filled-select")) + return {props.children}; + return {props.children}; +}; export default Select; export const SelectOption = createComponent({ - tagName: 'md-select-option', - elementClass: MdSelectOption, - react: React, - events: { - 'onCloseMenu': 'close-menu', - 'onRequestSelection': 'request-selection', - 'onRequestDeselection': 'request-deselection', - } + tagName: "md-select-option", + elementClass: MdSelectOption, + react: React, + events: { + onCloseMenu: "close-menu", + onRequestSelection: "request-selection", + onRequestDeselection: "request-deselection", + }, }); diff --git a/packages/ui/src/sheet/index.tsx b/packages/ui/src/sheet/index.tsx new file mode 100644 index 0000000..245ab8d --- /dev/null +++ b/packages/ui/src/sheet/index.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { Drawer } from "vaul"; +import { twMerge } from "tailwind-merge"; +import { findSlotProp, removeSlotProps } from "../utils"; + +type BottomSheetProps = { + open: boolean; + // eslint-disable-next-line no-unused-vars + onOpenChange: (open: boolean) => void; + showHandle?: boolean; + variant?: "standard" | "modal"; + children: React.ReactNode; +}; + +export const BottomSheet: React.FC = ({ + showHandle = null, + variant = "standard", + children, + ...props +}) => { + const _titleElement = findSlotProp(children, "title"); + const _contentElements = findSlotProp(children, "content", true); + const remainingElements = removeSlotProps(children, ["title", "content"]); + + const _showHandle = showHandle + ? showHandle + : variant === "modal" + ? true + : false; + + return ( + + + + + {_showHandle && ( +

+ )} + {_contentElements?.length || _titleElement ? ( +

+ {_titleElement && {_titleElement}} + {_contentElements} +

+ ) : ( + <> + )} + {remainingElements} + + + + ); +}; diff --git a/packages/ui/src/slider/index.tsx b/packages/ui/src/slider/index.tsx index 74e0ceb..b32dd41 100644 --- a/packages/ui/src/slider/index.tsx +++ b/packages/ui/src/slider/index.tsx @@ -1,25 +1,21 @@ // File: Slider.tsx -import React from 'react'; -import { - MdSlider, -} from '@material/web/slider/slider'; +import React from "react"; +import { MdSlider } from "@material/web/slider/slider"; -import { createComponent } from '@lit/react'; +import { createComponent } from "@lit/react"; -export type { - MdSlider -} from '@material/web/slider/slider'; +export type { MdSlider } from "@material/web/slider/slider"; const events = { - 'onChange': 'change', - 'onInput': 'input' -} + onChange: "change", + onInput: "input", +}; const Slider = createComponent({ - tagName: 'md-slider', - elementClass: MdSlider, - react: React, - events, + tagName: "md-slider", + elementClass: MdSlider, + react: React, + events, }); -export default Slider; \ No newline at end of file +export default Slider; diff --git a/packages/ui/src/snackbar/index.tsx b/packages/ui/src/snackbar/index.tsx new file mode 100644 index 0000000..73d813a --- /dev/null +++ b/packages/ui/src/snackbar/index.tsx @@ -0,0 +1,184 @@ +"use client"; +import React, { ReactNode, useState } from "react"; + +import Button from "../button/index.js"; +import Icon from "../icon/index.js"; +import IconButton from "../icon-button/index.js"; + +import { ToastOptions, toast } from "react-hot-toast"; +import { useSwipeable } from "react-swipeable"; +import { twMerge } from "tailwind-merge"; + +import { Toaster, ToasterProps } from "react-hot-toast"; + +export type SnackbarProviderProps = ToasterProps +export const SnackbarProvider = (props: SnackbarProviderProps) => { + return ( + <> + + {props.children} + + ) +} + +export type SnackbarProps = { + icon?: React.ReactNode; + variant?: string; + children: React.ReactNode; + showClose?: boolean; + onAction?: () => void; + onClose?: () => void; + actionText?: string; + className?: string; +}; + +export const Snackbar = ({ + icon, + variant, + children, + showClose, + onAction, + onClose, + actionText, + className, +}: SnackbarProps) => { + const [translateX, setTranslateX] = useState(0); + const [isSwiped, setIsSwiped] = useState(false); + + // Handle swipe + const handlers = useSwipeable({ + onSwiping: (eventData) => { + setTranslateX(eventData.deltaX); // Update the translateX value dynamically + if (Math.abs(eventData.deltaX) > 100) { + setIsSwiped(true); // Swipe threshold for dismissing + } else { + setIsSwiped(false); // Swipe threshold for dismissing + } + }, + onSwiped: (eventData) => { + if (Math.abs(eventData.deltaX) > 100) { + setIsSwiped(true); // Swipe threshold for dismissing + setTimeout(() => { + onClose?.(); + }, 300); // Delay to allow animation to complete + } else { + setTranslateX(0); // Reset if swipe is not sufficient + setIsSwiped(false); // Swipe threshold for dismissing + } + }, + preventScrollOnSwipe: true, + trackTouch: true, + trackMouse: false, + }); + + const _showClose = showClose || !actionText; + const _variant = variant + ? variant + : (actionText?.length ?? 0) > 10 || actionText?.includes(" ") + ? "extended" + : "standard"; + const useLongerAction = _variant === "extended"; + + return ( +

+ {icon && {icon}} + + {children} + +

+ {actionText && ( + + )} +

+ {_showClose && ( + + close + + )} +

+ ); +}; + +const showSnackbar = ( + message: string | ReactNode, + options?: ToastOptions & Partial +) => { + const _options = options; + const { icon, style = {}, ...toastOptions } = _options || {}; + const toastId = toast( + { + toast.dismiss(toastId); + }} + {...toastOptions} + > + {message} + , + { + position: "bottom-center", + style: { + padding: "0rem 1rem", + margin: 0, + boxShadow: "none", + background: "transparent", + display: "flex", + justifyContent: "center", + alignItems: "center", + ...style, + }, + icon, + ...toastOptions, + } + ); + + return toastId; +}; + +// @ts-expect-error +const snackbar: typeof toast & { + show: ( + // eslint-disable-next-line no-unused-vars + message: string | ReactNode, + // eslint-disable-next-line no-unused-vars + options?: ToastOptions & Partial + ) => void; +} = toast; +snackbar.show = showSnackbar; + +export { snackbar }; diff --git a/packages/ui/src/stack/index.tsx b/packages/ui/src/stack/index.tsx new file mode 100644 index 0000000..0ba15a7 --- /dev/null +++ b/packages/ui/src/stack/index.tsx @@ -0,0 +1,46 @@ +import React, { Ref } from "react"; +import { twMerge } from "tailwind-merge"; + +const Stack = React.forwardRef( + ( + { + component: Component = "div", + direction = "column", + spacing = 3, + className, + ...props + }: { + component: string; + direction: string; + spacing: number | string; + } & HTMLElement, + ref: Ref, + ) => { + if (typeof spacing === "number") { + spacing = "gap-" + spacing; + } + + direction = + direction === "column" + ? "flex-col" + : direction === "row" + ? "flex-row" + : direction; + + return ( + + ); + }, +); + +export default Stack; diff --git a/packages/ui/src/switch/index.tsx b/packages/ui/src/switch/index.tsx index a0274eb..d6dd04d 100644 --- a/packages/ui/src/switch/index.tsx +++ b/packages/ui/src/switch/index.tsx @@ -1,19 +1,18 @@ -"use client" // file: Icon.react.tsx -import {MdSwitch} from '@material/web/switch/switch'; -import React from 'react'; -import {createComponent} from '@lit/react'; +import { MdSwitch } from "@material/web/switch/switch"; +import React from "react"; +import { createComponent } from "@lit/react"; -export type {FabSize, FabVariant} from '@material/web/fab/fab.js'; +export type { FabSize, FabVariant } from "@material/web/fab/fab.js"; const events = { - 'onInput': 'input', - 'onChange': 'change', -} + onInput: "input", + onChange: "change", +}; export default createComponent({ - tagName: 'md-switch', + tagName: "md-switch", elementClass: MdSwitch, react: React, events, -}); \ No newline at end of file +}); diff --git a/packages/ui/src/tabs/index.tsx b/packages/ui/src/tabs/index.tsx index 80c3abb..70edcec 100644 --- a/packages/ui/src/tabs/index.tsx +++ b/packages/ui/src/tabs/index.tsx @@ -1,53 +1,41 @@ // File: Tabs.tsx -import React from 'react'; -import { - MdTabs, -} from '@material/web/tabs/tabs'; +import React from "react"; +import { MdTabs } from "@material/web/tabs/tabs"; -import { - MdPrimaryTab, -} from '@material/web/tabs/primary-tab'; +import { MdPrimaryTab } from "@material/web/tabs/primary-tab"; -import { - MdSecondaryTab, -} from '@material/web/tabs/secondary-tab'; +import { MdSecondaryTab } from "@material/web/tabs/secondary-tab"; -import { createComponent } from '@lit/react'; +import { createComponent } from "@lit/react"; -export type { - MdTabs, -} from '@material/web/tabs/tabs'; +export type { MdTabs } from "@material/web/tabs/tabs"; -export type { - MdPrimaryTab, -} from '@material/web/tabs/primary-tab'; +export type { MdPrimaryTab } from "@material/web/tabs/primary-tab"; -export type { - MdSecondaryTab, -} from '@material/web/tabs/secondary-tab'; +export type { MdSecondaryTab } from "@material/web/tabs/secondary-tab"; const events = { - 'onChange': 'change', - } + onChange: "change", +}; export const Tabs = createComponent({ - tagName: 'md-tabs', - elementClass: MdTabs, - react: React, - events, + tagName: "md-tabs", + elementClass: MdTabs, + react: React, + events, }); export const PrimaryTab = createComponent({ - tagName: 'md-primary-tab', - elementClass: MdPrimaryTab, - react: React, + tagName: "md-primary-tab", + elementClass: MdPrimaryTab, + react: React, }); export const SecondaryTab = createComponent({ - tagName: 'md-secondary-tab', - elementClass: MdSecondaryTab, - react: React, + tagName: "md-secondary-tab", + elementClass: MdSecondaryTab, + react: React, }); -export default Tabs; \ No newline at end of file +export default Tabs; diff --git a/packages/ui/src/text-field/index.tsx b/packages/ui/src/text-field/index.tsx new file mode 100644 index 0000000..f63ca71 --- /dev/null +++ b/packages/ui/src/text-field/index.tsx @@ -0,0 +1,37 @@ +// file: TextField.react.tsx +import { MdFilledTextField } from "@material/web/textfield/filled-text-field"; +import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field"; +import React from "react"; +import { createComponent } from "@lit/react"; +import { matchVariant } from "../utils"; + +export type { MdFilledTextField } from "@material/web/textfield/filled-text-field.js"; +export type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js"; + +const events = { + onSelect: "select", + onChange: "change", + onInput: "input", +}; + +export const FilledTextField = createComponent({ + tagName: "md-filled-text-field", + elementClass: MdFilledTextField, + react: React, + events, +}); + +export const OutlinedTextField = createComponent({ + tagName: "md-outlined-text-field", + elementClass: MdOutlinedTextField, + react: React, + events, +}); + +const TextField = (props: any) => { + if (matchVariant(props.variant, "md-filled-text-field", "text-field")) + return {props.children}; + return {props.children}; +}; + +export default TextField; diff --git a/packages/ui/src/textfield/index.tsx b/packages/ui/src/textfield/index.tsx deleted file mode 100644 index a4ce9bd..0000000 --- a/packages/ui/src/textfield/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -"use client"; -// file: TextField.react.tsx -import { MdFilledTextField } from '@material/web/textfield/filled-text-field'; -import { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field'; -import React from 'react'; -import { createComponent } from '@lit/react'; -import { matchVariant } from '../utils'; - -export type { MdFilledTextField } from '@material/web/textfield/filled-text-field.js'; -export type { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field.js'; - -const events = { - 'onSelect': 'select', - 'onChange': 'change', - 'onInput': 'input', -} - -export const FilledTextField = createComponent({ - tagName: 'md-filled-text-field', - elementClass: MdFilledTextField, - react: React, - events, -}); - -export const OutlinedTextField = createComponent({ - tagName: 'md-outlined-text-field', - elementClass: MdOutlinedTextField, - react: React, - events, -}); - -const TextField = (props: any) => { - if (matchVariant(props.variant, 'md-filled-text-field', 'text-field')) - return {props.children}; - return {props.children}; -}; - -export default TextField; diff --git a/packages/ui/src/typography/index.tsx b/packages/ui/src/typography/index.tsx new file mode 100644 index 0000000..7bf9a75 --- /dev/null +++ b/packages/ui/src/typography/index.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import { twMerge } from "tailwind-merge"; + +const defaultVariantMapping = { + h1: { component: "h1", className: "text-4xl font-bold" }, + h2: { component: "h2", className: "text-3xl font-bold" }, + h3: { component: "h3", className: "text-2xl font-bold" }, + h4: { component: "h4", className: "text-xl font-bold" }, + h5: { component: "h5", className: "text-lg font-bold" }, + h6: { component: "h6", className: "text-base font-bold" }, + subtitle1: { component: "h6", className: "text-base font-medium" }, + subtitle2: { component: "h6", className: "text-sm font-medium" }, + body1: { component: "p", className: "text-base" }, + body2: { component: "p", className: "text-sm" }, + button: { component: "span", className: "text-sm uppercase font-medium" }, + caption: { component: "span", className: "text-xs" }, + overline: { component: "span", className: "text-xs uppercase" }, + inherit: { component: "p", className: "" }, +}; + +const alignClasses = { + center: "text-center", + justify: "text-justify", + left: "text-left", + right: "text-right", + inherit: "", +}; + +const Typography = React.forwardRef( + ( + { + component: _Component, + variant = "body1", + align = "inherit", + gutterBottom = false, + noWrap = false, + paragraph = false, + className, + variantMapping, + ...props + }: any, + ref + ) => { + const _variantMapping = variantMapping || defaultVariantMapping + + const variantProps = (!paragraph && _variantMapping[variant]) || { component: _Component || "p", className: "" }; + + const appliedClasses = twMerge( + variantProps.className, + alignClasses[align], + gutterBottom && "mb-2", + noWrap && "truncate line-clamp-1", + // paragraph && "mb-6", + className + ); + + const Component = _Component || (variantProps.component || variantProps); + + return {props.children}; + } +); + +export default Typography; diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts index fa7f877..b6f185f 100644 --- a/packages/ui/src/utils/index.ts +++ b/packages/ui/src/utils/index.ts @@ -1,10 +1,90 @@ -export const matchVariant = (str: string, variantStr: string, componentName?: string) => { - let strippedVariantStr = variantStr - if (!componentName) { - strippedVariantStr = variantStr.split("-").filter(Boolean).slice(1, -1).join("-").trim() +import React from "react"; + +export const matchVariant = ( + str: string, + variantStr: string, + componentName?: string, +) => { + let strippedVariantStr = variantStr; + if (!componentName) { + strippedVariantStr = variantStr + .split("-") + .filter(Boolean) + .slice(1, -1) + .join("-") + .trim(); + } else { + strippedVariantStr = variantStr + .replaceAll(componentName, "") + .split("-") + .filter(Boolean) + .slice(1) + .join("-") + .trim(); + } + return str === variantStr || str === strippedVariantStr; +}; + +export function findSlotProp( + children: React.ReactNode, + slotName: string, + findAll = false, +) { + const foundElements: React.ReactNode[] = []; + + // @ts-ignore + function searchChildren(childrenArray: React.ReactNode) { + for (let child of React.Children.toArray(childrenArray)) { + // @ts-ignore + if (child.props && child.props.slot === slotName) { + if (!findAll) { + return child; // Return the first found instance immediately + } + foundElements.push(child); + } + // @ts-ignore + if (child.props && child.props.children) { + // @ts-ignore + const found = searchChildren(child.props.children); + if (found && !findAll) { + return found; // Return immediately if the first instance is found + } + } } - else { - strippedVariantStr = variantStr.replaceAll(componentName, "").split("-").filter(Boolean).slice(1).join("-").trim() - } - return (str === variantStr || str === strippedVariantStr) -} \ No newline at end of file + return null; // Return null if no instance is found + } + + const result = searchChildren(children); + return findAll ? foundElements : result; +} + +export function removeSlotProps( + children: React.ReactNode, + slotNames: string[], +): React.ReactNode { + // Helper function to recursively search and filter children + function filterChildren(childrenArray: React.ReactNode): React.ReactNode { + return React.Children.map(childrenArray, (child) => { + if (React.isValidElement(child)) { + if (slotNames.includes(child.props.slot)) { + // Skip this child as it matches one of the slot names + return null; + } + if (child.props.children) { + // Recursively filter the child elements + const filteredChildren = filterChildren(child.props.children); + // Return the child with filtered children + return React.cloneElement(child, { + ...child.props, + children: filteredChildren, + }); + } + } + // Return the child as it doesn't match any slot name + return child; + }); + } + + // Start filtering from the top-level children + return filterChildren(children); +} diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index e1e973f..c904f6a 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -1,8 +1,9 @@ { "extends": "@repo/typescript-config/react-library.json", "compilerOptions": { - "outDir": "dist" + "outDir": "dist", + "baseUrl": "." }, - "include": ["**/*"], + "include": ["**/*", "*.cjs"], "exclude": ["node_modules", "dist"] } diff --git a/packages/ui/tsconfig.lint.json b/packages/ui/tsconfig.lint.json index 0973ecd..2f1b5eb 100644 --- a/packages/ui/tsconfig.lint.json +++ b/packages/ui/tsconfig.lint.json @@ -3,6 +3,6 @@ "compilerOptions": { "outDir": "dist" }, - "include": ["src", "turbo", "./*.ts"], + "include": ["src", "turbo", "**/*.ts*", "*.cjs"], "exclude": ["node_modules", "dist"] } diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts index 7274a28..97c75ad 100644 --- a/packages/ui/tsup.config.ts +++ b/packages/ui/tsup.config.ts @@ -1,15 +1,14 @@ -import glob from 'tiny-glob' -import { defineConfig } from 'tsup' +import fg from "fast-glob"; +import { defineConfig } from "tsup"; -export default defineConfig([ - { - entry: await glob('./src/**/!(*.d|*.spec).tsx'), - splitting: true, - target: 'es5', - format: 'esm', - // dts: true, - treeshake: true, - bundle: true, - outDir: "./dist" - }, - ]); \ No newline at end of file +export default defineConfig(async (options) => ({ + clean: true, + entry: await fg("./src/**/!(*.d|*.spec).tsx"), + splitting: true, + target: "es5", + format: "esm", + treeshake: true, + bundle: true, + outDir: "./dist", + minify: !options.watch, +})); diff --git a/packages/ui/turbo/generators/templates/component.hbs b/packages/ui/turbo/generators/templates/component.hbs index d968b9e..5a3ace4 100644 --- a/packages/ui/turbo/generators/templates/component.hbs +++ b/packages/ui/turbo/generators/templates/component.hbs @@ -1,8 +1,8 @@ -export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => { - return ( -

{{ pascalCase name }} Component

- {children} -

- ); -}; +export const +{{pascalCase name}} += ({ children }: { children: React.ReactNode }) => { return ( +

{{pascalCase name}} Component

+ {children} +

+); }; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8641093..bf5ea1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,16 +25,16 @@ importers: dependencies: '@lit-labs/nextjs': specifier: ^0.2.0 - version: 0.2.0(@types/react@18.2.61)(next@14.2.5(react-dom@18.3.1(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.93.0) + version: 0.2.0(@types/react@18.2.61)(next@14.2.5(react-dom@18.3.1(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5))) '@lit-labs/ssr-react': specifier: ^0.3.0 version: 0.3.0(@types/react@18.2.61)(react@18.2.0) - '@repo/ui': - specifier: workspace:* - version: link:../../packages/ui material-symbols: specifier: ^0.21.2 version: 0.21.2 + material-web-components-react: + specifier: workspace:* + version: link:../../packages/ui/dist next: specifier: ^14.2.4 version: 14.2.5(react-dom@18.3.1(react@18.2.0))(react@18.2.0) @@ -52,7 +52,7 @@ importers: version: 1.4.0(react@18.2.0) tailwindcss: specifier: ^3.4.1 - version: 3.4.4(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)) + version: 3.4.4(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.4.5)) devDependencies: '@types/node': specifier: ^20 @@ -104,18 +104,42 @@ importers: packages/ui: dependencies: - '@lit-labs/ssr-react': - specifier: ^0.3.0 - version: 0.3.0(@types/react@18.2.61)(react@18.2.0) '@lit/react': specifier: ^1.0.5 version: 1.0.5(@types/react@18.2.61) '@material/web': - specifier: ^1.5.1 - version: 1.5.1 + specifier: ^2.2.0 + version: 2.2.0 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.31) + fast-glob: + specifier: ^3.3.2 + version: 3.3.2 + lit: + specifier: ^3.2.0 + version: 3.2.0 react: specifier: ^18.2.0 version: 18.2.0 + react-hot-toast: + specifier: ^2.4.1 + version: 2.4.1(csstype@3.1.2)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + react-swipeable: + specifier: ^7.0.1 + version: 7.0.1(react@18.2.0) + tailwind-merge: + specifier: ^2.4.0 + version: 2.4.0 + tailwindcss: + specifier: ^3.4.1 + version: 3.4.4(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.3.3)) + tslib: + specifier: ^2.6.3 + version: 2.6.3 + vaul: + specifier: ^0.9.1 + version: 0.9.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) devDependencies: '@repo/eslint-config': specifier: workspace:* @@ -144,15 +168,16 @@ importers: eslint: specifier: ^8.57.0 version: 8.57.0 - tiny-glob: - specifier: ^0.2.9 - version: 0.2.9 + postcss: + specifier: ^8 + version: 8.4.31 tsup: specifier: ^8.2.0 version: 8.2.0(@swc/core@1.7.0(@swc/helpers@0.5.5))(jiti@1.21.6)(postcss@8.4.31)(typescript@5.3.3)(yaml@2.4.5) typescript: specifier: ^5.3.3 version: 5.3.3 + publishDirectory: ./dist packages: @@ -581,8 +606,8 @@ packages: '@manypkg/get-packages@1.1.3': resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} - '@material/web@1.5.1': - resolution: {integrity: sha512-S9iQV1Biq6JhNpAkqXcsFdVrLW0BC1Tez8C36MEQ/VuhT3YLQySbJkUiG+1U+J1jUqlsG8fT5XsEFbhomCY39w==} + '@material/web@2.2.0': + resolution: {integrity: sha512-k1Pi7f04qDRkHfIEdcnL++udN+x5Oq34R47n0Fk7Xo49uz9aKb6ZkO42jC6uvMH0ahOiFDktX9txHgYMDvNa+A==} '@microsoft/tsdoc-config@0.16.2': resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==} @@ -676,6 +701,168 @@ packages: resolution: {integrity: sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} + '@radix-ui/primitive@1.1.0': + resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} + + '@radix-ui/react-compose-refs@1.1.0': + resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-context@1.1.0': + resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-dialog@1.1.1': + resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-dismissable-layer@1.1.0': + resolution: {integrity: sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-focus-guards@1.1.0': + resolution: {integrity: sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-focus-scope@1.1.0': + resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-id@1.1.0': + resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-portal@1.1.1': + resolution: {integrity: sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-presence@1.1.0': + resolution: {integrity: sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-primitive@2.0.0': + resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-slot@1.1.0': + resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-callback-ref@1.1.0': + resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-controllable-state@1.1.0': + resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-escape-keydown@1.1.0': + resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-layout-effect@1.1.0': + resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@rollup/rollup-android-arm-eabi@4.18.1': resolution: {integrity: sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==} cpu: [arm] @@ -1220,6 +1407,10 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + aria-hidden@1.2.4: + resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==} + engines: {node: '>=10'} + aria-query@5.3.0: resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} @@ -1263,6 +1454,13 @@ packages: asynciterator.prototype@1.0.0: resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==} + autoprefixer@10.4.19: + resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + available-typed-arrays@1.0.5: resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} engines: {node: '>= 0.4'} @@ -1318,6 +1516,11 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + browserslist@4.23.2: + resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -1366,6 +1569,9 @@ packages: caniuse-lite@1.0.30001593: resolution: {integrity: sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==} + caniuse-lite@1.0.30001643: + resolution: {integrity: sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==} + chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -1572,6 +1778,9 @@ packages: resolution: {integrity: sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + detect-node-es@1.1.0: + resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} + didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} @@ -1607,6 +1816,9 @@ packages: electron-to-chromium@1.4.583: resolution: {integrity: sha512-93y1gcONABZ7uqYe/JWDVQP/Pj/sQSunF0HVAPdlg/pfBnOyBMLlQUxWvkqcljJg1+W6cjvPuYD+r1Th9Tn8mA==} + electron-to-chromium@1.4.832: + resolution: {integrity: sha512-cTen3SB0H2SGU7x467NRe1eVcQgcuS6jckKfWJHia2eo0cHIGOqHoAxevIYZD4eRHcWjkvFzo93bi3vJ9W+1lA==} + emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -1662,6 +1874,10 @@ packages: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} + escalade@3.1.2: + resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} + engines: {node: '>=6'} + escape-string-regexp@1.0.5: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} engines: {node: '>=0.8.0'} @@ -1831,6 +2047,7 @@ packages: eslint@8.57.0: resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@9.6.1: @@ -1888,6 +2105,10 @@ packages: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} + fast-glob@3.3.2: + resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} + engines: {node: '>=8.6.0'} + fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} @@ -1942,6 +2163,9 @@ packages: resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} engines: {node: '>=12.20.0'} + fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + fs-extra@10.1.0: resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} engines: {node: '>=12'} @@ -1979,6 +2203,10 @@ packages: get-intrinsic@1.2.2: resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==} + get-nonce@1.0.1: + resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} + engines: {node: '>=6'} + get-stdin@9.0.0: resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==} engines: {node: '>=12'} @@ -2036,9 +2264,6 @@ packages: resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==} engines: {node: '>= 0.4'} - globalyzer@0.1.0: - resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} - globby@10.0.2: resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==} engines: {node: '>=8'} @@ -2051,8 +2276,10 @@ packages: resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - globrex@0.1.2: - resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} + goober@2.1.14: + resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==} + peerDependencies: + csstype: ^3.0.10 gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} @@ -2178,6 +2405,9 @@ packages: resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==} engines: {node: '>= 0.4'} + invariant@2.2.4: + resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} + ip@1.1.8: resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==} @@ -2460,11 +2690,17 @@ packages: lit-element@4.0.6: resolution: {integrity: sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==} + lit-element@4.1.0: + resolution: {integrity: sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==} + lit-html@3.1.4: resolution: {integrity: sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==} - lit@3.1.4: - resolution: {integrity: sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==} + lit-html@3.2.0: + resolution: {integrity: sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==} + + lit@3.2.0: + resolution: {integrity: sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==} load-tsconfig@0.2.5: resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==} @@ -2656,6 +2892,9 @@ packages: node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} + node-releases@2.0.18: + resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} + normalize-package-data@2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} @@ -2663,6 +2902,10 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + npm-run-path@4.0.1: resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==} engines: {node: '>=8'} @@ -2832,6 +3075,9 @@ packages: picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + picocolors@1.0.1: + resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -2984,12 +3230,54 @@ packages: peerDependencies: react: '>=16.3.0' + react-hot-toast@2.4.1: + resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==} + engines: {node: '>=10'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} react-is@18.1.0: resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==} + react-remove-scroll-bar@2.3.6: + resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + react-remove-scroll@2.5.7: + resolution: {integrity: sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + react-style-singleton@2.2.1: + resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + react-swipeable@7.0.1: + resolution: {integrity: sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==} + peerDependencies: + react: ^16.8.3 || ^17 || ^18 + react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -3342,6 +3630,9 @@ packages: resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==} engines: {node: ^14.18.0 || >=16.0.0} + tailwind-merge@2.4.0: + resolution: {integrity: sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==} + tailwindcss@3.4.4: resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==} engines: {node: '>=14.0.0'} @@ -3389,9 +3680,6 @@ packages: through@2.3.8: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} - tiny-glob@0.2.9: - resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} - tinycolor2@1.6.0: resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} @@ -3453,8 +3741,8 @@ packages: tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} - tslib@2.6.2: - resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} + tslib@2.6.3: + resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==} tsup@8.2.0: resolution: {integrity: sha512-XoarnVlfXxbv8ODHtxUq8D2XPc9luX+pamnp1kHSKLknKCDcX0Rkc21NHdbpugH6hKoNiETXypKKVgVu46vVRg==} @@ -3589,6 +3877,12 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + update-browserslist-db@1.1.0: + resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + update-check@1.5.4: resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==} @@ -3601,6 +3895,26 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + use-callback-ref@1.3.2: + resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + use-sidecar@1.1.2: + resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -3614,6 +3928,12 @@ packages: resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + vaul@0.9.1: + resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + watchpack@2.4.1: resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==} engines: {node: '>=10.13.0'} @@ -4183,11 +4503,11 @@ snapshots: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 - '@lit-labs/nextjs@0.2.0(@types/react@18.2.61)(next@14.2.5(react-dom@18.3.1(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.93.0)': + '@lit-labs/nextjs@0.2.0(@types/react@18.2.61)(next@14.2.5(react-dom@18.3.1(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5)))': dependencies: '@lit-labs/ssr-react': 0.3.0(@types/react@18.2.61)(react@18.2.0) '@webcomponents/template-shadowroot': 0.2.1 - imports-loader: 4.0.1(webpack@5.93.0) + imports-loader: 4.0.1(webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5))) next: 14.2.5(react-dom@18.3.1(react@18.2.0))(react@18.2.0) transitivePeerDependencies: - '@types/react' @@ -4197,7 +4517,7 @@ snapshots: '@lit-labs/ssr-client@1.1.7': dependencies: '@lit/reactive-element': 2.0.4 - lit: 3.1.4 + lit: 3.2.0 lit-html: 3.1.4 '@lit-labs/ssr-dom-shim@1.2.0': {} @@ -4217,7 +4537,7 @@ snapshots: '@parse5/tools': 0.3.0 '@types/node': 16.18.101 enhanced-resolve: 5.17.0 - lit: 3.1.4 + lit: 3.2.0 lit-element: 4.0.6 lit-html: 3.1.4 node-fetch: 3.3.2 @@ -4247,10 +4567,10 @@ snapshots: globby: 11.1.0 read-yaml-file: 1.1.0 - '@material/web@1.5.1': + '@material/web@2.2.0': dependencies: - lit: 3.1.4 - tslib: 2.6.2 + lit: 3.2.0 + tslib: 2.6.3 '@microsoft/tsdoc-config@0.16.2': dependencies: @@ -4324,7 +4644,142 @@ snapshots: is-glob: 4.0.3 open: 9.1.0 picocolors: 1.0.0 - tslib: 2.6.2 + tslib: 2.6.3 + + '@radix-ui/primitive@1.1.0': {} + + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-context@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-context': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-id': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-slot': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.61)(react@18.2.0) + aria-hidden: 1.2.4 + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + react-remove-scroll: 2.5.7(@types/react@18.2.61)(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + + '@radix-ui/react-dismissable-layer@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + + '@radix-ui/react-focus-guards@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + + '@radix-ui/react-id@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-portal@1.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + + '@radix-ui/react-presence@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.61)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + + '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-slot': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + + '@radix-ui/react-slot@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + + '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.2.61)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 '@rollup/rollup-android-arm-eabi@4.18.1': optional: true @@ -4428,7 +4883,7 @@ snapshots: '@swc/helpers@0.5.5': dependencies: '@swc/counter': 0.1.3 - tslib: 2.6.2 + tslib: 2.6.3 '@swc/types@0.1.9': dependencies: @@ -4469,7 +4924,7 @@ snapshots: chalk: 2.4.2 commander: 10.0.1 execa: 5.1.1 - fast-glob: 3.3.1 + fast-glob: 3.3.2 fs-extra: 10.1.0 gradient-string: 2.0.2 inquirer: 8.2.6 @@ -4792,7 +5247,7 @@ snapshots: '@typescript-eslint/eslint-plugin': 6.17.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/parser': 6.17.0(eslint@8.57.0)(typescript@5.3.3) eslint-config-prettier: 9.1.0(eslint@8.57.0) - eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)) + eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.29.0) eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-plugin-import@2.29.0)(eslint@8.57.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.0) eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0) @@ -4969,6 +5424,10 @@ snapshots: argparse@2.0.1: {} + aria-hidden@1.2.4: + dependencies: + tslib: 2.6.3 + aria-query@5.3.0: dependencies: dequal: 2.0.3 @@ -5032,12 +5491,22 @@ snapshots: ast-types@0.13.4: dependencies: - tslib: 2.6.2 + tslib: 2.6.3 asynciterator.prototype@1.0.0: dependencies: has-symbols: 1.0.3 + autoprefixer@10.4.19(postcss@8.4.31): + dependencies: + browserslist: 4.23.2 + caniuse-lite: 1.0.30001643 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.0 + postcss: 8.4.31 + postcss-value-parser: 4.2.0 + available-typed-arrays@1.0.5: {} axe-core@4.7.0: {} @@ -5090,6 +5559,13 @@ snapshots: node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) + browserslist@4.23.2: + dependencies: + caniuse-lite: 1.0.30001643 + electron-to-chromium: 1.4.832 + node-releases: 2.0.18 + update-browserslist-db: 1.1.0(browserslist@4.23.2) + buffer-from@1.1.2: {} buffer@5.7.1: @@ -5135,6 +5611,8 @@ snapshots: caniuse-lite@1.0.30001593: {} + caniuse-lite@1.0.30001643: {} + chalk@2.4.2: dependencies: ansi-styles: 3.2.1 @@ -5334,6 +5812,8 @@ snapshots: detect-newline@4.0.1: {} + detect-node-es@1.1.0: {} + didyoumean@1.2.2: {} diff@4.0.2: {} @@ -5362,6 +5842,8 @@ snapshots: electron-to-chromium@1.4.583: {} + electron-to-chromium@1.4.832: {} + emoji-regex@8.0.0: {} emoji-regex@9.2.2: {} @@ -5493,6 +5975,8 @@ snapshots: escalade@3.1.1: {} + escalade@3.1.2: {} + escape-string-regexp@1.0.5: {} escape-string-regexp@4.0.0: {} @@ -5532,7 +6016,7 @@ snapshots: eslint: 8.57.0 eslint-plugin-turbo: 2.0.0(eslint@8.57.0) - eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)): + eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.29.0): dependencies: eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0) @@ -5549,7 +6033,7 @@ snapshots: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.57.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0) fast-glob: 3.3.1 get-tsconfig: 4.7.2 @@ -5566,7 +6050,7 @@ snapshots: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.57.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) fast-glob: 3.3.1 get-tsconfig: 4.7.2 @@ -5578,7 +6062,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -5598,7 +6082,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -5652,7 +6136,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) hasown: 2.0.0 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -5891,6 +6375,14 @@ snapshots: merge2: 1.4.1 micromatch: 4.0.5 + fast-glob@3.3.2: + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + fast-json-stable-stringify@2.1.0: {} fast-levenshtein@2.0.6: {} @@ -5951,6 +6443,8 @@ snapshots: dependencies: fetch-blob: 3.2.0 + fraction.js@4.3.7: {} + fs-extra@10.1.0: dependencies: graceful-fs: 4.2.11 @@ -5994,6 +6488,8 @@ snapshots: has-symbols: 1.0.3 hasown: 2.0.0 + get-nonce@1.0.1: {} + get-stdin@9.0.0: {} get-stream@6.0.1: {} @@ -6057,14 +6553,12 @@ snapshots: dependencies: define-properties: 1.2.1 - globalyzer@0.1.0: {} - globby@10.0.2: dependencies: '@types/glob': 7.2.0 array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.3.1 + fast-glob: 3.3.2 glob: 7.2.3 ignore: 5.3.1 merge2: 1.4.1 @@ -6074,7 +6568,7 @@ snapshots: dependencies: array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.3.1 + fast-glob: 3.3.2 ignore: 5.3.1 merge2: 1.4.1 slash: 3.0.0 @@ -6087,7 +6581,9 @@ snapshots: merge2: 1.4.1 slash: 4.0.0 - globrex@0.1.2: {} + goober@2.1.14(csstype@3.1.2): + dependencies: + csstype: 3.1.2 gopd@1.0.1: dependencies: @@ -6173,11 +6669,11 @@ snapshots: parent-module: 1.0.1 resolve-from: 4.0.0 - imports-loader@4.0.1(webpack@5.93.0): + imports-loader@4.0.1(webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5))): dependencies: source-map: 0.6.1 strip-comments: 2.0.1 - webpack: 5.93.0 + webpack: 5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5)) imurmurhash@0.1.4: {} @@ -6232,6 +6728,10 @@ snapshots: hasown: 2.0.0 side-channel: 1.0.4 + invariant@2.2.4: + dependencies: + loose-envify: 1.4.0 + ip@1.1.8: {} ip@2.0.0: {} @@ -6478,15 +6978,25 @@ snapshots: '@lit/reactive-element': 2.0.4 lit-html: 3.1.4 + lit-element@4.1.0: + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.0 + '@lit/reactive-element': 2.0.4 + lit-html: 3.2.0 + lit-html@3.1.4: dependencies: '@types/trusted-types': 2.0.7 - lit@3.1.4: + lit-html@3.2.0: + dependencies: + '@types/trusted-types': 2.0.7 + + lit@3.2.0: dependencies: '@lit/reactive-element': 2.0.4 - lit-element: 4.0.6 - lit-html: 3.1.4 + lit-element: 4.1.0 + lit-html: 3.2.0 load-tsconfig@0.2.5: {} @@ -6667,6 +7177,8 @@ snapshots: node-releases@2.0.13: {} + node-releases@2.0.18: {} + normalize-package-data@2.5.0: dependencies: hosted-git-info: 2.8.9 @@ -6676,6 +7188,8 @@ snapshots: normalize-path@3.0.0: {} + normalize-range@0.1.2: {} + npm-run-path@4.0.1: dependencies: path-key: 3.1.1 @@ -6878,6 +7392,8 @@ snapshots: picocolors@1.0.0: {} + picocolors@1.0.1: {} + picomatch@2.3.1: {} pify@2.3.0: {} @@ -6904,13 +7420,21 @@ snapshots: camelcase-css: 2.0.1 postcss: 8.4.31 - postcss-load-config@4.0.2(postcss@8.4.31)(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)): + postcss-load-config@4.0.2(postcss@8.4.31)(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.3.3)): + dependencies: + lilconfig: 3.1.2 + yaml: 2.4.5 + optionalDependencies: + postcss: 8.4.31 + ts-node: 10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.3.3) + + postcss-load-config@4.0.2(postcss@8.4.31)(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.4.5)): dependencies: lilconfig: 3.1.2 yaml: 2.4.5 optionalDependencies: postcss: 8.4.31 - ts-node: 10.9.1(@types/node@20.11.24)(typescript@5.4.5) + ts-node: 10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.4.5) postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.31)(yaml@2.4.5): dependencies: @@ -7015,10 +7539,50 @@ snapshots: github-buttons: 2.28.0 react: 18.2.0 + react-hot-toast@2.4.1(csstype@3.1.2)(react-dom@18.3.1(react@18.2.0))(react@18.2.0): + dependencies: + goober: 2.1.14(csstype@3.1.2) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + transitivePeerDependencies: + - csstype + react-is@16.13.1: {} react-is@18.1.0: {} + react-remove-scroll-bar@2.3.6(@types/react@18.2.61)(react@18.2.0): + dependencies: + react: 18.2.0 + react-style-singleton: 2.2.1(@types/react@18.2.61)(react@18.2.0) + tslib: 2.6.3 + optionalDependencies: + '@types/react': 18.2.61 + + react-remove-scroll@2.5.7(@types/react@18.2.61)(react@18.2.0): + dependencies: + react: 18.2.0 + react-remove-scroll-bar: 2.3.6(@types/react@18.2.61)(react@18.2.0) + react-style-singleton: 2.2.1(@types/react@18.2.61)(react@18.2.0) + tslib: 2.6.3 + use-callback-ref: 1.3.2(@types/react@18.2.61)(react@18.2.0) + use-sidecar: 1.1.2(@types/react@18.2.61)(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + + react-style-singleton@2.2.1(@types/react@18.2.61)(react@18.2.0): + dependencies: + get-nonce: 1.0.1 + invariant: 2.2.4 + react: 18.2.0 + tslib: 2.6.3 + optionalDependencies: + '@types/react': 18.2.61 + + react-swipeable@7.0.1(react@18.2.0): + dependencies: + react: 18.2.0 + react@18.2.0: dependencies: loose-envify: 1.4.0 @@ -7161,7 +7725,7 @@ snapshots: rxjs@7.8.1: dependencies: - tslib: 2.6.2 + tslib: 2.6.3 safe-array-concat@1.0.1: dependencies: @@ -7420,16 +7984,18 @@ snapshots: synckit@0.8.5: dependencies: '@pkgr/utils': 2.4.2 - tslib: 2.6.2 + tslib: 2.6.3 + + tailwind-merge@2.4.0: {} - tailwindcss@3.4.4(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)): + tailwindcss@3.4.4(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.3.3)): dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 chokidar: 3.6.0 didyoumean: 1.2.2 dlv: 1.1.3 - fast-glob: 3.3.1 + fast-glob: 3.3.2 glob-parent: 6.0.2 is-glob: 4.0.3 jiti: 1.21.6 @@ -7441,7 +8007,34 @@ snapshots: postcss: 8.4.31 postcss-import: 15.1.0(postcss@8.4.31) postcss-js: 4.0.1(postcss@8.4.31) - postcss-load-config: 4.0.2(postcss@8.4.31)(ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5)) + postcss-load-config: 4.0.2(postcss@8.4.31)(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.3.3)) + postcss-nested: 6.0.1(postcss@8.4.31) + postcss-selector-parser: 6.1.1 + resolve: 1.22.8 + sucrase: 3.35.0 + transitivePeerDependencies: + - ts-node + + tailwindcss@3.4.4(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.4.5)): + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.6.0 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.2 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.6 + lilconfig: 2.1.0 + micromatch: 4.0.5 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.0 + postcss: 8.4.31 + postcss-import: 15.1.0(postcss@8.4.31) + postcss-js: 4.0.1(postcss@8.4.31) + postcss-load-config: 4.0.2(postcss@8.4.31)(ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.4.5)) postcss-nested: 6.0.1(postcss@8.4.31) postcss-selector-parser: 6.1.1 resolve: 1.22.8 @@ -7453,14 +8046,16 @@ snapshots: term-size@2.2.1: {} - terser-webpack-plugin@5.3.10(webpack@5.93.0): + terser-webpack-plugin@5.3.10(@swc/core@1.7.0(@swc/helpers@0.5.5))(webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5))): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.2 - webpack: 5.93.0 + webpack: 5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5)) + optionalDependencies: + '@swc/core': 1.7.0(@swc/helpers@0.5.5) terser@5.31.2: dependencies: @@ -7481,11 +8076,6 @@ snapshots: through@2.3.8: {} - tiny-glob@0.2.9: - dependencies: - globalyzer: 0.1.0 - globrex: 0.1.2 - tinycolor2@1.6.0: {} tinygradient@1.1.5: @@ -7546,7 +8136,7 @@ snapshots: optionalDependencies: '@swc/core': 1.7.0(@swc/helpers@0.5.5) - ts-node@10.9.1(@types/node@20.11.24)(typescript@5.4.5): + ts-node@10.9.1(@swc/core@1.7.0(@swc/helpers@0.5.5))(@types/node@20.11.24)(typescript@5.4.5): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.9 @@ -7563,6 +8153,8 @@ snapshots: typescript: 5.4.5 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + optionalDependencies: + '@swc/core': 1.7.0(@swc/helpers@0.5.5) optional: true tsconfig-paths@3.14.2: @@ -7574,7 +8166,7 @@ snapshots: tslib@1.14.1: {} - tslib@2.6.2: {} + tslib@2.6.3: {} tsup@8.2.0(@swc/core@1.7.0(@swc/helpers@0.5.5))(jiti@1.21.6)(postcss@8.4.31)(typescript@5.3.3)(yaml@2.4.5): dependencies: @@ -7702,6 +8294,12 @@ snapshots: escalade: 3.1.1 picocolors: 1.0.0 + update-browserslist-db@1.1.0(browserslist@4.23.2): + dependencies: + browserslist: 4.23.2 + escalade: 3.1.2 + picocolors: 1.0.1 + update-check@1.5.4: dependencies: registry-auth-token: 3.3.2 @@ -7717,6 +8315,21 @@ snapshots: dependencies: punycode: 2.3.0 + use-callback-ref@1.3.2(@types/react@18.2.61)(react@18.2.0): + dependencies: + react: 18.2.0 + tslib: 2.6.3 + optionalDependencies: + '@types/react': 18.2.61 + + use-sidecar@1.1.2(@types/react@18.2.61)(react@18.2.0): + dependencies: + detect-node-es: 1.1.0 + react: 18.2.0 + tslib: 2.6.3 + optionalDependencies: + '@types/react': 18.2.61 + util-deprecate@1.0.2: {} v8-compile-cache-lib@3.0.1: {} @@ -7730,6 +8343,15 @@ snapshots: dependencies: builtins: 5.0.1 + vaul@0.9.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0): + dependencies: + '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + watchpack@2.4.1: dependencies: glob-to-regexp: 0.4.1 @@ -7745,7 +8367,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack@5.93.0: + webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5)): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.5 @@ -7754,7 +8376,7 @@ snapshots: '@webassemblyjs/wasm-parser': 1.12.1 acorn: 8.10.0 acorn-import-attributes: 1.9.5(acorn@8.10.0) - browserslist: 4.22.1 + browserslist: 4.23.2 chrome-trace-event: 1.0.4 enhanced-resolve: 5.17.0 es-module-lexer: 1.5.4 @@ -7768,7 +8390,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(webpack@5.93.0) + terser-webpack-plugin: 5.3.10(@swc/core@1.7.0(@swc/helpers@0.5.5))(webpack@5.93.0(@swc/core@1.7.0(@swc/helpers@0.5.5))) watchpack: 2.4.1 webpack-sources: 3.2.3 transitivePeerDependencies: