OfficialDakari
/
ReactMaterial3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create divider

This commit is contained in:
OfficialDakari 2025-04-03 18:19:40 +05:00
parent 2ecb81105d
commit 84f4c3bf46
44 changed files with 8021 additions and 7941 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/react-you-ui.js vendored
View File

@ -1 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./react-you-ui22.js"),s=require("./react-you-ui24.js"),i=require("./react-you-ui10.js"),c=require("./react-you-ui14.js"),p=require("./react-you-ui23.js"),u=require("./react-you-ui11.js"),a=require("./react-you-ui16.js"),m=require("./react-you-ui12.js"),h=require("./react-you-ui17.js"),l=require("./react-you-ui26.js"),q=require("./react-you-ui3.js"),_=require("./react-you-ui21.js"),e=require("./react-you-ui25.js"),t=require("./react-you-ui19.js"),n=require("./react-you-ui20.js"),B=require("./react-you-ui18.js"),T=require("./react-you-ui15.js"),d=require("./react-you-ui4.js"),C=require("./react-you-ui8.js"),F=require("./react-you-ui9.js"),b=require("./react-you-ui5.js"),o=require("./react-you-ui6.js"),g=require("./react-you-ui13.js");exports.TextField=r.TextField;exports.Button=s.Button;exports.Checkbox=i.Checkbox;exports.Radio=c.Radio;exports.Select=p.Select;exports.Switch=u.Switch;exports.Slider=a.Slider;exports.Dialog=m.Dialog;exports.List=h.List;exports.Box=l.Box;exports.Typography=q.Typography;exports.IconButton=_.IconButton;exports.AssistChip=e.AssistChip;exports.ChipSet=e.ChipSet;exports.FilterChip=e.FilterChip;exports.InputChip=e.InputChip;exports.BrandedFAB=t.BrandedFAB;exports.FAB=t.FAB;exports.Tab=n.Tab;exports.Tabs=n.Tabs;exports.CircularProgress=B.CircularProgress;exports.Menu=T.Menu;exports.Paper=d.Paper;exports.FormLabel=C.FormLabel;exports.AppBar=F.AppBar;exports.Link=b.Link;exports.ThemeProvider=o.ThemeProvider;exports.usePalette=o.usePalette;exports.useTheme=o.useTheme;exports.createTheme=g.createTheme; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./react-you-ui23.js"),s=require("./react-you-ui25.js"),i=require("./react-you-ui11.js"),c=require("./react-you-ui15.js"),p=require("./react-you-ui24.js"),u=require("./react-you-ui12.js"),a=require("./react-you-ui17.js"),m=require("./react-you-ui13.js"),h=require("./react-you-ui18.js"),l=require("./react-you-ui27.js"),q=require("./react-you-ui3.js"),_=require("./react-you-ui22.js"),e=require("./react-you-ui26.js"),t=require("./react-you-ui20.js"),n=require("./react-you-ui21.js"),B=require("./react-you-ui19.js"),T=require("./react-you-ui16.js"),d=require("./react-you-ui4.js"),C=require("./react-you-ui8.js"),F=require("./react-you-ui10.js"),b=require("./react-you-ui5.js"),o=require("./react-you-ui6.js"),g=require("./react-you-ui14.js");exports.TextField=r.TextField;exports.Button=s.Button;exports.Checkbox=i.Checkbox;exports.Radio=c.Radio;exports.Select=p.Select;exports.Switch=u.Switch;exports.Slider=a.Slider;exports.Dialog=m.Dialog;exports.List=h.List;exports.Box=l.Box;exports.Typography=q.Typography;exports.IconButton=_.IconButton;exports.AssistChip=e.AssistChip;exports.ChipSet=e.ChipSet;exports.FilterChip=e.FilterChip;exports.InputChip=e.InputChip;exports.BrandedFAB=t.BrandedFAB;exports.FAB=t.FAB;exports.Tab=n.Tab;exports.Tabs=n.Tabs;exports.CircularProgress=B.CircularProgress;exports.Menu=T.Menu;exports.Paper=d.Paper;exports.FormLabel=C.FormLabel;exports.AppBar=F.AppBar;exports.Link=b.Link;exports.ThemeProvider=o.ThemeProvider;exports.usePalette=o.usePalette;exports.useTheme=o.useTheme;exports.createTheme=g.createTheme;

36
dist/react-you-ui.mjs vendored
View File

@ -1,26 +1,26 @@
import { TextField as e } from "./react-you-ui22.mjs"; import { TextField as e } from "./react-you-ui23.mjs";
import { Button as p } from "./react-you-ui24.mjs"; import { Button as p } from "./react-you-ui25.mjs";
import { Checkbox as x } from "./react-you-ui10.mjs"; import { Checkbox as x } from "./react-you-ui11.mjs";
import { Radio as i } from "./react-you-ui14.mjs"; import { Radio as i } from "./react-you-ui15.mjs";
import { Select as h } from "./react-you-ui23.mjs"; import { Select as h } from "./react-you-ui24.mjs";
import { Switch as l } from "./react-you-ui11.mjs"; import { Switch as l } from "./react-you-ui12.mjs";
import { Slider as u } from "./react-you-ui16.mjs"; import { Slider as u } from "./react-you-ui17.mjs";
import { Dialog as T } from "./react-you-ui12.mjs"; import { Dialog as T } from "./react-you-ui13.mjs";
import { List as d } from "./react-you-ui17.mjs"; import { List as d } from "./react-you-ui18.mjs";
import { Box as F } from "./react-you-ui26.mjs"; import { Box as F } from "./react-you-ui27.mjs";
import { Typography as A } from "./react-you-ui3.mjs"; import { Typography as A } from "./react-you-ui3.mjs";
import { IconButton as S } from "./react-you-ui21.mjs"; import { IconButton as S } from "./react-you-ui22.mjs";
import { AssistChip as L, ChipSet as k, FilterChip as y, InputChip as I } from "./react-you-ui25.mjs"; import { AssistChip as L, ChipSet as k, FilterChip as y, InputChip as I } from "./react-you-ui26.mjs";
import { BrandedFAB as w, FAB as D } from "./react-you-ui19.mjs"; import { BrandedFAB as w, FAB as D } from "./react-you-ui20.mjs";
import { Tab as R, Tabs as j } from "./react-you-ui20.mjs"; import { Tab as R, Tabs as j } from "./react-you-ui21.mjs";
import { CircularProgress as z } from "./react-you-ui18.mjs"; import { CircularProgress as z } from "./react-you-ui19.mjs";
import { Menu as G } from "./react-you-ui15.mjs"; import { Menu as G } from "./react-you-ui16.mjs";
import { Paper as J } from "./react-you-ui4.mjs"; import { Paper as J } from "./react-you-ui4.mjs";
import { FormLabel as N } from "./react-you-ui8.mjs"; import { FormLabel as N } from "./react-you-ui8.mjs";
import { AppBar as Q } from "./react-you-ui9.mjs"; import { AppBar as Q } from "./react-you-ui10.mjs";
import { Link as V } from "./react-you-ui5.mjs"; import { Link as V } from "./react-you-ui5.mjs";
import { ThemeProvider as X, usePalette as Y, useTheme as Z } from "./react-you-ui6.mjs"; import { ThemeProvider as X, usePalette as Y, useTheme as Z } from "./react-you-ui6.mjs";
import { createTheme as $ } from "./react-you-ui13.mjs"; import { createTheme as $ } from "./react-you-ui14.mjs";
export { export {
Q as AppBar, Q as AppBar,
L as AssistChip, L as AssistChip,

39
dist/react-you-ui10.js vendored
View File

File diff suppressed because one or more lines are too long

193
dist/react-you-ui10.mjs vendored
View File

File diff suppressed because one or more lines are too long

68
dist/react-you-ui11.js vendored
View File

File diff suppressed because one or more lines are too long

330
dist/react-you-ui11.mjs vendored
View File

File diff suppressed because one or more lines are too long

99
dist/react-you-ui12.js vendored
View File

File diff suppressed because one or more lines are too long

677
dist/react-you-ui12.mjs vendored
View File

File diff suppressed because one or more lines are too long

131
dist/react-you-ui13.js vendored
View File

@ -1,76 +1,63 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./string_utils-Bad7L8P5.js");/** "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),F=require("react"),T=require("./create-component-D9KTUrcf.js"),t=require("./class-map-DV5418hw.js");require("./divider-B6Y1F7cS.js");const s=require("./animation-A38fZ1oY.js"),k=require("./delegate-4958lG3m.js"),D=require("./redispatch-event-C93E51ce.js");/**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2023 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License"); */const I={dialog:[[[{transform:"translateY(-50px)"},{transform:"translateY(0)"}],{duration:500,easing:s.EASING.EMPHASIZED}]],scrim:[[[{opacity:0},{opacity:.32}],{duration:500,easing:"linear"}]],container:[[[{opacity:0},{opacity:1}],{duration:50,easing:"linear",pseudoElement:"::before"}],[[{height:"35%"},{height:"100%"}],{duration:500,easing:s.EASING.EMPHASIZED,pseudoElement:"::before"}]],headline:[[[{opacity:0},{opacity:0,offset:.2},{opacity:1}],{duration:250,easing:"linear",fill:"forwards"}]],content:[[[{opacity:0},{opacity:0,offset:.2},{opacity:1}],{duration:250,easing:"linear",fill:"forwards"}]],actions:[[[{opacity:0},{opacity:0,offset:.5},{opacity:1}],{duration:300,easing:"linear",fill:"forwards"}]]},O={dialog:[[[{transform:"translateY(0)"},{transform:"translateY(-50px)"}],{duration:150,easing:s.EASING.EMPHASIZED_ACCELERATE}]],scrim:[[[{opacity:.32},{opacity:0}],{duration:150,easing:"linear"}]],container:[[[{height:"100%"},{height:"35%"}],{duration:150,easing:s.EASING.EMPHASIZED_ACCELERATE,pseudoElement:"::before"}],[[{opacity:"1"},{opacity:"0"}],{delay:100,duration:50,easing:"linear",pseudoElement:"::before"}]],headline:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]],content:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]],actions:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]]};/**
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/class p{static harmonize(r,t){const e=i.Hct.fromInt(r),n=i.Hct.fromInt(t),a=i.differenceDegrees(e.hue,n.hue),o=Math.min(a*.5,15),c=i.sanitizeDegreesDouble(e.hue+o*i.rotationDirection(e.hue,n.hue));return i.Hct.from(c,e.chroma,e.tone).toInt()}static hctHue(r,t,e){const n=p.cam16Ucs(r,t,e),a=i.Cam16.fromInt(n),o=i.Cam16.fromInt(r);return i.Hct.from(a.hue,o.chroma,i.lstarFromArgb(r)).toInt()}static cam16Ucs(r,t,e){const n=i.Cam16.fromInt(r),a=i.Cam16.fromInt(t),o=n.jstar,c=n.astar,f=n.bstar,C=a.jstar,d=a.astar,y=a.bstar,l=o+(C-o)*e,g=c+(d-c)*e,H=f+(y-f)*e;return i.Cam16.fromUcs(l,g,H).toInt()}}/**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2023 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License"); */const $=k.mixinDelegatesAria(t.r);let n=class extends ${get open(){return this.isOpen}set open(e){e!==this.isOpen&&(this.isOpen=e,e?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.quick=!1,this.returnValue="",this.noFocusTrap=!1,this.getOpenAnimation=()=>I,this.getCloseAnimation=()=>O,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,this.treewalker=document.createTreeWalker(this,NodeFilter.SHOW_ELEMENT),this.addEventListener("submit",this.handleSubmit)}async show(){var o;this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;const e=this.dialog;if(e.open||!this.isOpening){this.isOpening=!1;return}if(!this.dispatchEvent(new Event("open",{cancelable:!0}))){this.open=!1,this.isOpening=!1;return}e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),(o=this.querySelector("[autofocus]"))==null||o.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")),this.isOpening=!1}async close(e=this.returnValue){if(this.isOpening=!1,!this.isConnected){this.open=!1;return}await this.updateComplete;const i=this.dialog;if(!i.open||this.isOpening){this.open=!1;return}const o=this.returnValue;if(this.returnValue=e,!this.dispatchEvent(new Event("close",{cancelable:!0}))){this.returnValue=o;return}await this.animateDialog(this.getCloseAnimation()),i.close(e),this.open=!1,this.dispatchEvent(new Event("closed"))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){const e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),i={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom},o=this.open&&!this.noFocusTrap,r=t.x`
* you may not use this file except in compliance with the License. <div
* You may obtain a copy of the License at class="focus-trap"
* tabindex="0"
* http://www.apache.org/licenses/LICENSE-2.0 aria-hidden="true"
* @focus=${this.handleFocusTrapFocus}></div>
* Unless required by applicable law or agreed to in writing, software `,{ariaLabel:l}=this;return t.x`
* distributed under the License is distributed on an "AS IS" BASIS, <div class="scrim"></div>
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. <dialog
* See the License for the specific language governing permissions and class=${t.e$1(i)}
* limitations under the License. aria-label=${l||t.E}
*/class u{static fromInt(r){const t=i.Hct.fromInt(r);return u.fromHct(t)}static fromHct(r){return new u(r.hue,r.chroma,r)}static fromHueAndChroma(r,t){const e=new S(r,t).create();return new u(r,t,e)}constructor(r,t,e){this.hue=r,this.chroma=t,this.keyColor=e,this.cache=new Map}tone(r){let t=this.cache.get(r);return t===void 0&&(t=i.Hct.from(this.hue,this.chroma,r).toInt(),this.cache.set(r,t)),t}getHct(r){return i.Hct.fromInt(this.tone(r))}}class S{constructor(r,t){this.hue=r,this.requestedChroma=t,this.chromaCache=new Map,this.maxChromaValue=200}create(){let n=0,a=100;for(;n<a;){const o=Math.floor((n+a)/2),c=this.maxChroma(o)<this.maxChroma(o+1);if(this.maxChroma(o)>=this.requestedChroma-.01)if(Math.abs(n-50)<Math.abs(a-50))a=o;else{if(n===o)return i.Hct.from(this.hue,this.requestedChroma,n);n=o}else c?n=o+1:a=o}return i.Hct.from(this.hue,this.requestedChroma,n)}maxChroma(r){if(this.chromaCache.has(r))return this.chromaCache.get(r);const t=i.Hct.from(this.hue,this.maxChromaValue,r).chroma;return this.chromaCache.set(r,t),t}}/** aria-labelledby=${this.hasHeadline?"headline":t.E}
role=${this.type==="alert"?"alertdialog":t.E}
@cancel=${this.handleCancel}
@click=${this.handleDialogClick}
@close=${this.handleClose}
@keydown=${this.handleKeydown}
.returnValue=${this.returnValue||t.E}>
${o?r:t.E}
<div class="container" @click=${this.handleContentClick}>
<div class="headline">
<div class="icon" aria-hidden="true">
<slot name="icon" @slotchange=${this.handleIconChange}></slot>
</div>
<h2 id="headline" aria-hidden=${!this.hasHeadline||t.E}>
<slot
name="headline"
@slotchange=${this.handleHeadlineChange}></slot>
</h2>
<md-divider></md-divider>
</div>
<div class="scroller">
<div class="content">
<div class="top anchor"></div>
<slot name="content"></slot>
<div class="bottom anchor"></div>
</div>
</div>
<div class="actions">
<md-divider></md-divider>
<slot name="actions" @slotchange=${this.handleActionsChange}></slot>
</div>
</div>
${o?r:t.E}
</dialog>
`}firstUpdated(){this.intersectionObserver=new IntersectionObserver(e=>{for(const i of e)this.handleAnchorIntersection(i)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(){if(this.nextClickIsFromContent){this.nextClickIsFromContent=!1;return}this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close()}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){const i=e.target,{submitter:o}=e;i.method!=="dialog"||!o||this.close(o.getAttribute("value")??this.returnValue)}handleCancel(e){if(e.target!==this.dialog)return;this.escapePressedWithoutCancel=!1;const i=!D.redispatchEvent(this,e);e.preventDefault(),!i&&this.close()}handleClose(){var e;this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,(e=this.dialog)==null||e.dispatchEvent(new Event("cancel",{cancelable:!0})))}handleKeydown(e){e.key==="Escape"&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(e){var A;if((A=this.cancelAnimations)==null||A.abort(),this.cancelAnimations=new AbortController,this.quick)return;const{dialog:i,scrim:o,container:r,headline:l,content:d,actions:c}=this;if(!i||!o||!r||!l||!d||!c)return;const{container:h,dialog:u,scrim:m,headline:p,content:y,actions:b}=e,x=[[i,u??[]],[o,m??[]],[r,h??[]],[l,p??[]],[d,y??[]],[c,b??[]]],g=[];for(const[C,E]of x)for(const _ of E){const w=C.animate(..._);this.cancelAnimations.signal.addEventListener("abort",()=>{w.cancel()}),g.push(w)}await Promise.all(g.map(C=>C.finished.catch(()=>{})))}handleHeadlineChange(e){const i=e.target;this.hasHeadline=i.assignedElements().length>0}handleActionsChange(e){const i=e.target;this.hasActions=i.assignedElements().length>0}handleIconChange(e){const i=e.target;this.hasIcon=i.assignedElements().length>0}handleAnchorIntersection(e){const{target:i,isIntersecting:o}=e;i===this.topAnchor&&(this.isAtScrollTop=o),i===this.bottomAnchor&&(this.isAtScrollBottom=o)}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}handleFocusTrapFocus(e){var p;const[i,o]=this.getFirstAndLastFocusableChildren();if(!i||!o){(p=this.dialog)==null||p.focus();return}const r=e.target===this.firstFocusTrap,l=!r,d=e.relatedTarget===i,c=e.relatedTarget===o,h=!d&&!c;if(l&&c||r&&h){i.focus();return}if(r&&d||l&&h){o.focus();return}}getFirstAndLastFocusableChildren(){if(!this.treewalker)return[null,null];let e=null,i=null;for(this.treewalker.currentNode=this.treewalker.root;this.treewalker.nextNode();){const o=this.treewalker.currentNode;S(o)&&(e||(e=o),i=o)}return[e,i]}};t.__decorate([t.n({type:Boolean})],n.prototype,"open",null);t.__decorate([t.n({type:Boolean})],n.prototype,"quick",void 0);t.__decorate([t.n({attribute:!1})],n.prototype,"returnValue",void 0);t.__decorate([t.n()],n.prototype,"type",void 0);t.__decorate([t.n({type:Boolean,attribute:"no-focus-trap"})],n.prototype,"noFocusTrap",void 0);t.__decorate([s.e$1("dialog")],n.prototype,"dialog",void 0);t.__decorate([s.e$1(".scrim")],n.prototype,"scrim",void 0);t.__decorate([s.e$1(".container")],n.prototype,"container",void 0);t.__decorate([s.e$1(".headline")],n.prototype,"headline",void 0);t.__decorate([s.e$1(".content")],n.prototype,"content",void 0);t.__decorate([s.e$1(".actions")],n.prototype,"actions",void 0);t.__decorate([s.r()],n.prototype,"isAtScrollTop",void 0);t.__decorate([s.r()],n.prototype,"isAtScrollBottom",void 0);t.__decorate([s.e$1(".scroller")],n.prototype,"scroller",void 0);t.__decorate([s.e$1(".top.anchor")],n.prototype,"topAnchor",void 0);t.__decorate([s.e$1(".bottom.anchor")],n.prototype,"bottomAnchor",void 0);t.__decorate([s.e$1(".focus-trap")],n.prototype,"firstFocusTrap",void 0);t.__decorate([s.r()],n.prototype,"hasHeadline",void 0);t.__decorate([s.r()],n.prototype,"hasActions",void 0);t.__decorate([s.r()],n.prototype,"hasIcon",void 0);function S(a){var l;const e=":is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])",i=":not(:disabled,[disabled])";return a.matches(e+i+':not([tabindex^="-"])')?!0:!a.localName.includes("-")||!a.matches(i)?!1:((l=a.shadowRoot)==null?void 0:l.delegatesFocus)??!1}/**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2024 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License"); */const P=t.i$1`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));flex:1;font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}
* you may not use this file except in compliance with the License. `;/**
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/class s{static of(r){return new s(r,!1)}static contentOf(r){return new s(r,!0)}static fromColors(r){return s.createPaletteFromColors(!1,r)}static contentFromColors(r){return s.createPaletteFromColors(!0,r)}static createPaletteFromColors(r,t){const e=new s(t.primary,r);if(t.secondary){const n=new s(t.secondary,r);e.a2=n.a1}if(t.tertiary){const n=new s(t.tertiary,r);e.a3=n.a1}if(t.error){const n=new s(t.error,r);e.error=n.a1}if(t.neutral){const n=new s(t.neutral,r);e.n1=n.n1}if(t.neutralVariant){const n=new s(t.neutralVariant,r);e.n2=n.n2}return e}constructor(r,t){const e=i.Hct.fromInt(r),n=e.hue,a=e.chroma;t?(this.a1=u.fromHueAndChroma(n,a),this.a2=u.fromHueAndChroma(n,a/3),this.a3=u.fromHueAndChroma(n+60,a/2),this.n1=u.fromHueAndChroma(n,Math.min(a/12,4)),this.n2=u.fromHueAndChroma(n,Math.min(a/6,8))):(this.a1=u.fromHueAndChroma(n,Math.max(48,a)),this.a2=u.fromHueAndChroma(n,16),this.a3=u.fromHueAndChroma(n+60,24),this.n1=u.fromHueAndChroma(n,4),this.n2=u.fromHueAndChroma(n,8)),this.error=u.fromHueAndChroma(25,84)}}/**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2023 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License"); */let f=class extends n{};f.styles=[P];f=t.__decorate([t.t$1("md-dialog")],f);const N=T.o({react:F,tagName:"md-dialog",elementClass:f,events:{onClose:"close",onShow:"show",onOpen:"open",onOpened:"opened",onClosed:"closed",onCancel:"cancel"}}),L=a=>{const{children:e,quick:i,returnValue:o,noFocusTrap:r,open:l,fullScreen:d,style:c,className:h,id:u,onClose:m,onShow:p,onOpen:y,onOpened:b,onClosed:x,onCancel:g}=a;return v.jsx(N,{quick:i,returnValue:o,noFocusTrap:r,open:l,style:{...c,...d?{width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh"}:{}},className:h,id:u,onClose:m,onShow:p,onOpen:y,onOpened:b,onClosed:x,onCancel:g,children:e})},z=a=>v.jsx("div",{slot:"headline",...a,children:a.children}),H=a=>v.jsx("div",{slot:"content",...a,children:a.children}),q=a=>v.jsx("div",{slot:"actions",...a,children:a.children});exports.Dialog=L;exports.DialogActions=q;exports.DialogContent=H;exports.DialogTitle=z;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/class m{get primary(){return this.props.primary}get onPrimary(){return this.props.onPrimary}get primaryContainer(){return this.props.primaryContainer}get onPrimaryContainer(){return this.props.onPrimaryContainer}get secondary(){return this.props.secondary}get onSecondary(){return this.props.onSecondary}get secondaryContainer(){return this.props.secondaryContainer}get onSecondaryContainer(){return this.props.onSecondaryContainer}get tertiary(){return this.props.tertiary}get onTertiary(){return this.props.onTertiary}get tertiaryContainer(){return this.props.tertiaryContainer}get onTertiaryContainer(){return this.props.onTertiaryContainer}get error(){return this.props.error}get onError(){return this.props.onError}get errorContainer(){return this.props.errorContainer}get onErrorContainer(){return this.props.onErrorContainer}get background(){return this.props.background}get onBackground(){return this.props.onBackground}get surface(){return this.props.surface}get onSurface(){return this.props.onSurface}get surfaceVariant(){return this.props.surfaceVariant}get onSurfaceVariant(){return this.props.onSurfaceVariant}get outline(){return this.props.outline}get outlineVariant(){return this.props.outlineVariant}get shadow(){return this.props.shadow}get scrim(){return this.props.scrim}get inverseSurface(){return this.props.inverseSurface}get inverseOnSurface(){return this.props.inverseOnSurface}get inversePrimary(){return this.props.inversePrimary}static light(r){return m.lightFromCorePalette(s.of(r))}static dark(r){return m.darkFromCorePalette(s.of(r))}static lightContent(r){return m.lightFromCorePalette(s.contentOf(r))}static darkContent(r){return m.darkFromCorePalette(s.contentOf(r))}static lightFromCorePalette(r){return new m({primary:r.a1.tone(40),onPrimary:r.a1.tone(100),primaryContainer:r.a1.tone(90),onPrimaryContainer:r.a1.tone(10),secondary:r.a2.tone(40),onSecondary:r.a2.tone(100),secondaryContainer:r.a2.tone(90),onSecondaryContainer:r.a2.tone(10),tertiary:r.a3.tone(40),onTertiary:r.a3.tone(100),tertiaryContainer:r.a3.tone(90),onTertiaryContainer:r.a3.tone(10),error:r.error.tone(40),onError:r.error.tone(100),errorContainer:r.error.tone(90),onErrorContainer:r.error.tone(10),background:r.n1.tone(99),onBackground:r.n1.tone(10),surface:r.n1.tone(99),onSurface:r.n1.tone(10),surfaceVariant:r.n2.tone(90),onSurfaceVariant:r.n2.tone(30),outline:r.n2.tone(50),outlineVariant:r.n2.tone(80),shadow:r.n1.tone(0),scrim:r.n1.tone(0),inverseSurface:r.n1.tone(20),inverseOnSurface:r.n1.tone(95),inversePrimary:r.a1.tone(80)})}static darkFromCorePalette(r){return new m({primary:r.a1.tone(80),onPrimary:r.a1.tone(20),primaryContainer:r.a1.tone(30),onPrimaryContainer:r.a1.tone(90),secondary:r.a2.tone(80),onSecondary:r.a2.tone(20),secondaryContainer:r.a2.tone(30),onSecondaryContainer:r.a2.tone(90),tertiary:r.a3.tone(80),onTertiary:r.a3.tone(20),tertiaryContainer:r.a3.tone(30),onTertiaryContainer:r.a3.tone(90),error:r.error.tone(80),onError:r.error.tone(20),errorContainer:r.error.tone(30),onErrorContainer:r.error.tone(80),background:r.n1.tone(10),onBackground:r.n1.tone(90),surface:r.n1.tone(10),onSurface:r.n1.tone(90),surfaceVariant:r.n2.tone(30),onSurfaceVariant:r.n2.tone(80),outline:r.n2.tone(60),outlineVariant:r.n2.tone(30),shadow:r.n1.tone(0),scrim:r.n1.tone(0),inverseSurface:r.n1.tone(90),inverseOnSurface:r.n1.tone(20),inversePrimary:r.a1.tone(40)})}constructor(r){this.props=r}toJSON(){return{...this.props}}}/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/function w(h,r=[]){const t=s.of(h);return{source:h,schemes:{light:m.light(h),dark:m.dark(h)},palettes:{primary:t.a1,secondary:t.a2,tertiary:t.a3,neutral:t.n1,neutralVariant:t.n2,error:t.error},customColors:r.map(e=>b(h,e))}}function b(h,r){let t=r.value;const e=t,n=h;r.blend&&(t=p.harmonize(e,n));const o=s.of(t).a1;return{color:r,value:t,light:{color:o.tone(40),onColor:o.tone(100),colorContainer:o.tone(90),onColorContainer:o.tone(10)},dark:{color:o.tone(80),onColor:o.tone(20),colorContainer:o.tone(30),onColorContainer:o.tone(90)}}}function k(h){const r=i.argbFromHex(h);return w(r)}exports.createTheme=k;

907
dist/react-you-ui13.mjs vendored
View File

@ -1,504 +1,495 @@
import { H as u, d as w, s as k, r as v, C as f, l as V, a as b } from "./string_utils-B4bsIQ5w.mjs"; import { jsx as C } from "react/jsx-runtime";
import S from "react";
import { o as P } from "./create-component-CVXl33PD.mjs";
import { _ as o, n as u, r as $, x as O, c as L, E as h, a as N, b as z } from "./class-map-CwiboTfb.mjs";
import "./divider-Diu_1O5h.mjs";
import { E as b, r as g, a as l } from "./animation-DjClVFum.mjs";
import { m as H } from "./delegate-BXi1gVeU.mjs";
import { r as _ } from "./redispatch-event-taWUbWUt.mjs";
/** /**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2023 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/ */
class C { const M = {
/** dialog: [
* Blend the design color's HCT hue towards the key color's HCT [
* hue, in a way that leaves the original color recognizable and // Dialog slide down
* recognizably shifted towards the key color. [{ transform: "translateY(-50px)" }, { transform: "translateY(0)" }],
* { duration: 500, easing: b.EMPHASIZED }
* @param designColor ARGB representation of an arbitrary color. ]
* @param sourceColor ARGB representation of the main theme color. ],
* @return The design color with a hue shifted towards the scrim: [
* system's color, a slightly warmer/cooler variant of the design [
* color's hue. // Scrim fade in
*/ [{ opacity: 0 }, { opacity: 0.32 }],
static harmonize(r, t) { { duration: 500, easing: "linear" }
const e = u.fromInt(r), n = u.fromInt(t), a = w(e.hue, n.hue), o = Math.min(a * 0.5, 15), c = k(e.hue + o * v(e.hue, n.hue)); ]
return u.from(c, e.chroma, e.tone).toInt(); ],
} container: [
/** [
* Blends hue from one color into another. The chroma and tone of // Container fade in
* the original color are maintained. [{ opacity: 0 }, { opacity: 1 }],
* { duration: 50, easing: "linear", pseudoElement: "::before" }
* @param from ARGB representation of color ],
* @param to ARGB representation of color [
* @param amount how much blending to perform; 0.0 >= and <= 1.0 // Container grow
* @return from, with a hue blended towards to. Chroma and tone // Note: current spec says to grow from 0dp->100% and shrink from
* are constant. // 100%->35%. We change this to 35%->100% to simplify the animation that
*/ // is supposed to clip content as it grows. From 0dp it's possible to see
static hctHue(r, t, e) { // text/actions appear before the container has fully grown.
const n = C.cam16Ucs(r, t, e), a = f.fromInt(n), o = f.fromInt(r); [{ height: "35%" }, { height: "100%" }],
return u.from(a.hue, o.chroma, V(r)).toInt(); { duration: 500, easing: b.EMPHASIZED, pseudoElement: "::before" }
} ]
/** ],
* Blend in CAM16-UCS space. headline: [
* [
* @param from ARGB representation of color // Headline fade in
* @param to ARGB representation of color [{ opacity: 0 }, { opacity: 0, offset: 0.2 }, { opacity: 1 }],
* @param amount how much blending to perform; 0.0 >= and <= 1.0 { duration: 250, easing: "linear", fill: "forwards" }
* @return from, blended towards to. Hue, chroma, and tone will ]
* change. ],
*/ content: [
static cam16Ucs(r, t, e) { [
const n = f.fromInt(r), a = f.fromInt(t), o = n.jstar, c = n.astar, p = n.bstar, d = a.jstar, y = a.astar, l = a.bstar, g = o + (d - o) * e, S = c + (y - c) * e, H = p + (l - p) * e; // Content fade in
return f.fromUcs(g, S, H).toInt(); [{ opacity: 0 }, { opacity: 0, offset: 0.2 }, { opacity: 1 }],
} { duration: 250, easing: "linear", fill: "forwards" }
]
],
actions: [
[
// Actions fade in
[{ opacity: 0 }, { opacity: 0, offset: 0.5 }, { opacity: 1 }],
{ duration: 300, easing: "linear", fill: "forwards" }
]
]
}, V = {
dialog: [
[
// Dialog slide up
[{ transform: "translateY(0)" }, { transform: "translateY(-50px)" }],
{ duration: 150, easing: b.EMPHASIZED_ACCELERATE }
]
],
scrim: [
[
// Scrim fade out
[{ opacity: 0.32 }, { opacity: 0 }],
{ duration: 150, easing: "linear" }
]
],
container: [
[
// Container shrink
[{ height: "100%" }, { height: "35%" }],
{
duration: 150,
easing: b.EMPHASIZED_ACCELERATE,
pseudoElement: "::before"
} }
],
[
// Container fade out
[{ opacity: "1" }, { opacity: "0" }],
{ delay: 100, duration: 50, easing: "linear", pseudoElement: "::before" }
]
],
headline: [
[
// Headline fade out
[{ opacity: 1 }, { opacity: 0 }],
{ duration: 100, easing: "linear", fill: "forwards" }
]
],
content: [
[
// Content fade out
[{ opacity: 1 }, { opacity: 0 }],
{ duration: 100, easing: "linear", fill: "forwards" }
]
],
actions: [
[
// Actions fade out
[{ opacity: 1 }, { opacity: 0 }],
{ duration: 100, easing: "linear", fill: "forwards" }
]
]
};
/** /**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const W = H($);
let s = class extends W {
// We do not use `delegatesFocus: true` due to a Chromium bug with
// selecting text.
// See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
/**
* Opens the dialog when set to `true` and closes it when set to `false`.
*/
get open() {
return this.isOpen;
}
set open(e) {
e !== this.isOpen && (this.isOpen = e, e ? (this.setAttribute("open", ""), this.show()) : (this.removeAttribute("open"), this.close()));
}
constructor() {
super(), this.quick = !1, this.returnValue = "", this.noFocusTrap = !1, this.getOpenAnimation = () => M, this.getCloseAnimation = () => V, this.isOpen = !1, this.isOpening = !1, this.isConnectedPromise = this.getIsConnectedPromise(), this.isAtScrollTop = !1, this.isAtScrollBottom = !1, this.nextClickIsFromContent = !1, this.hasHeadline = !1, this.hasActions = !1, this.hasIcon = !1, this.escapePressedWithoutCancel = !1, this.treewalker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT), this.addEventListener("submit", this.handleSubmit);
}
/**
* Opens the dialog and fires a cancelable `open` event. After a dialog's
* animation, an `opened` event is fired.
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Add an `autofocus` attribute to a child of the dialog that should
* you may not use this file except in compliance with the License. * receive focus after opening.
* You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * @return A Promise that resolves after the animation is finished and the
* `opened` event was fired.
*/
async show() {
var i;
this.isOpening = !0, await this.isConnectedPromise, await this.updateComplete;
const e = this.dialog;
if (e.open || !this.isOpening) {
this.isOpening = !1;
return;
}
if (!this.dispatchEvent(new Event("open", { cancelable: !0 }))) {
this.open = !1, this.isOpening = !1;
return;
}
e.showModal(), this.open = !0, this.scroller && (this.scroller.scrollTop = 0), (i = this.querySelector("[autofocus]")) == null || i.focus(), await this.animateDialog(this.getOpenAnimation()), this.dispatchEvent(new Event("opened")), this.isOpening = !1;
}
/**
* Closes the dialog and fires a cancelable `close` event. After a dialog's
* animation, a `closed` event is fired.
* *
* Unless required by applicable law or agreed to in writing, software * @param returnValue A return value usually indicating which button was used
* distributed under the License is distributed on an "AS IS" BASIS, * to close a dialog. If a dialog is canceled by clicking the scrim or
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * pressing Escape, it will not change the return value after closing.
* See the License for the specific language governing permissions and * @return A Promise that resolves after the animation is finished and the
* limitations under the License. * `closed` event was fired.
*/ */
class i { async close(e = this.returnValue) {
/** if (this.isOpening = !1, !this.isConnected) {
* @param argb ARGB representation of a color this.open = !1;
* @return Tones matching that color's hue and chroma. return;
*/
static fromInt(r) {
const t = u.fromInt(r);
return i.fromHct(t);
} }
/** await this.updateComplete;
* @param hct Hct const t = this.dialog;
* @return Tones matching that color's hue and chroma. if (!t.open || this.isOpening) {
*/ this.open = !1;
static fromHct(r) { return;
return new i(r.hue, r.chroma, r);
} }
/** const i = this.returnValue;
* @param hue HCT hue if (this.returnValue = e, !this.dispatchEvent(new Event("close", { cancelable: !0 }))) {
* @param chroma HCT chroma this.returnValue = i;
* @return Tones matching hue and chroma. return;
*/
static fromHueAndChroma(r, t) {
const e = new A(r, t).create();
return new i(r, t, e);
} }
constructor(r, t, e) { await this.animateDialog(this.getCloseAnimation()), t.close(e), this.open = !1, this.dispatchEvent(new Event("closed"));
this.hue = r, this.chroma = t, this.keyColor = e, this.cache = /* @__PURE__ */ new Map();
} }
/** connectedCallback() {
* @param tone HCT tone, measured from 0 to 100. super.connectedCallback(), this.isConnectedPromiseResolve();
* @return ARGB representation of a color with that tone.
*/
tone(r) {
let t = this.cache.get(r);
return t === void 0 && (t = u.from(this.hue, this.chroma, r).toInt(), this.cache.set(r, t)), t;
} }
/** disconnectedCallback() {
* @param tone HCT tone. super.disconnectedCallback(), this.isConnectedPromise = this.getIsConnectedPromise();
* @return HCT representation of a color with that tone.
*/
getHct(r) {
return u.fromInt(this.tone(r));
} }
render() {
const e = this.open && !(this.isAtScrollTop && this.isAtScrollBottom), t = {
"has-headline": this.hasHeadline,
"has-actions": this.hasActions,
"has-icon": this.hasIcon,
scrollable: e,
"show-top-divider": e && !this.isAtScrollTop,
"show-bottom-divider": e && !this.isAtScrollBottom
}, i = this.open && !this.noFocusTrap, a = O`
<div
class="focus-trap"
tabindex="0"
aria-hidden="true"
@focus=${this.handleFocusTrapFocus}></div>
`, { ariaLabel: r } = this;
return O`
<div class="scrim"></div>
<dialog
class=${L(t)}
aria-label=${r || h}
aria-labelledby=${this.hasHeadline ? "headline" : h}
role=${this.type === "alert" ? "alertdialog" : h}
@cancel=${this.handleCancel}
@click=${this.handleDialogClick}
@close=${this.handleClose}
@keydown=${this.handleKeydown}
.returnValue=${this.returnValue || h}>
${i ? a : h}
<div class="container" @click=${this.handleContentClick}>
<div class="headline">
<div class="icon" aria-hidden="true">
<slot name="icon" @slotchange=${this.handleIconChange}></slot>
</div>
<h2 id="headline" aria-hidden=${!this.hasHeadline || h}>
<slot
name="headline"
@slotchange=${this.handleHeadlineChange}></slot>
</h2>
<md-divider></md-divider>
</div>
<div class="scroller">
<div class="content">
<div class="top anchor"></div>
<slot name="content"></slot>
<div class="bottom anchor"></div>
</div>
</div>
<div class="actions">
<md-divider></md-divider>
<slot name="actions" @slotchange=${this.handleActionsChange}></slot>
</div>
</div>
${i ? a : h}
</dialog>
`;
} }
class A { firstUpdated() {
constructor(r, t) { this.intersectionObserver = new IntersectionObserver((e) => {
this.hue = r, this.requestedChroma = t, this.chromaCache = /* @__PURE__ */ new Map(), this.maxChromaValue = 200; for (const t of e)
this.handleAnchorIntersection(t);
}, { root: this.scroller }), this.intersectionObserver.observe(this.topAnchor), this.intersectionObserver.observe(this.bottomAnchor);
} }
/** handleDialogClick() {
* Creates a key color from a [hue] and a [chroma]. if (this.nextClickIsFromContent) {
* The key color is the first tone, starting from T50, matching the given hue this.nextClickIsFromContent = !1;
* and chroma. return;
*
* @return Key color [Hct]
*/
create() {
let n = 0, a = 100;
for (; n < a; ) {
const o = Math.floor((n + a) / 2), c = this.maxChroma(o) < this.maxChroma(o + 1);
if (this.maxChroma(o) >= this.requestedChroma - 0.01)
if (Math.abs(n - 50) < Math.abs(a - 50))
a = o;
else {
if (n === o)
return u.from(this.hue, this.requestedChroma, n);
n = o;
} }
else this.dispatchEvent(new Event("cancel", { cancelable: !0 })) && this.close();
c ? n = o + 1 : a = o;
} }
return u.from(this.hue, this.requestedChroma, n); handleContentClick() {
this.nextClickIsFromContent = !0;
} }
// Find the maximum chroma for a given tone handleSubmit(e) {
maxChroma(r) { const t = e.target, { submitter: i } = e;
if (this.chromaCache.has(r)) t.method !== "dialog" || !i || this.close(i.getAttribute("value") ?? this.returnValue);
return this.chromaCache.get(r);
const t = u.from(this.hue, this.maxChromaValue, r).chroma;
return this.chromaCache.set(r, t), t;
} }
handleCancel(e) {
if (e.target !== this.dialog)
return;
this.escapePressedWithoutCancel = !1;
const t = !_(this, e);
e.preventDefault(), !t && this.close();
} }
/** handleClose() {
* @license var e;
* Copyright 2021 Google LLC this.escapePressedWithoutCancel && (this.escapePressedWithoutCancel = !1, (e = this.dialog) == null || e.dispatchEvent(new Event("cancel", { cancelable: !0 })));
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class s {
/**
* @param argb ARGB representation of a color
*/
static of(r) {
return new s(r, !1);
} }
/** handleKeydown(e) {
* @param argb ARGB representation of a color e.key === "Escape" && (this.escapePressedWithoutCancel = !0, setTimeout(() => {
*/ this.escapePressedWithoutCancel = !1;
static contentOf(r) { }));
return new s(r, !0);
} }
/** async animateDialog(e) {
* Create a [CorePalette] from a set of colors var k;
*/ if ((k = this.cancelAnimations) == null || k.abort(), this.cancelAnimations = new AbortController(), this.quick)
static fromColors(r) { return;
return s.createPaletteFromColors(!1, r); const { dialog: t, scrim: i, container: a, headline: r, content: d, actions: c } = this;
if (!t || !i || !a || !r || !d || !c)
return;
const { container: p, dialog: f, scrim: v, headline: m, content: w, actions: A } = e, E = [
[t, f ?? []],
[i, v ?? []],
[a, p ?? []],
[r, m ?? []],
[d, w ?? []],
[c, A ?? []]
], y = [];
for (const [F, I] of E)
for (const D of I) {
const T = F.animate(...D);
this.cancelAnimations.signal.addEventListener("abort", () => {
T.cancel();
}), y.push(T);
} }
/** await Promise.all(y.map((F) => F.finished.catch(() => {
* Create a content [CorePalette] from a set of colors })));
*/
static contentFromColors(r) {
return s.createPaletteFromColors(!0, r);
} }
static createPaletteFromColors(r, t) { handleHeadlineChange(e) {
const e = new s(t.primary, r); const t = e.target;
if (t.secondary) { this.hasHeadline = t.assignedElements().length > 0;
const n = new s(t.secondary, r);
e.a2 = n.a1;
} }
if (t.tertiary) { handleActionsChange(e) {
const n = new s(t.tertiary, r); const t = e.target;
e.a3 = n.a1; this.hasActions = t.assignedElements().length > 0;
} }
if (t.error) { handleIconChange(e) {
const n = new s(t.error, r); const t = e.target;
e.error = n.a1; this.hasIcon = t.assignedElements().length > 0;
} }
if (t.neutral) { handleAnchorIntersection(e) {
const n = new s(t.neutral, r); const { target: t, isIntersecting: i } = e;
e.n1 = n.n1; t === this.topAnchor && (this.isAtScrollTop = i), t === this.bottomAnchor && (this.isAtScrollBottom = i);
} }
if (t.neutralVariant) { getIsConnectedPromise() {
const n = new s(t.neutralVariant, r); return new Promise((e) => {
e.n2 = n.n2; this.isConnectedPromiseResolve = e;
}
return e;
}
constructor(r, t) {
const e = u.fromInt(r), n = e.hue, a = e.chroma;
t ? (this.a1 = i.fromHueAndChroma(n, a), this.a2 = i.fromHueAndChroma(n, a / 3), this.a3 = i.fromHueAndChroma(n + 60, a / 2), this.n1 = i.fromHueAndChroma(n, Math.min(a / 12, 4)), this.n2 = i.fromHueAndChroma(n, Math.min(a / 6, 8))) : (this.a1 = i.fromHueAndChroma(n, Math.max(48, a)), this.a2 = i.fromHueAndChroma(n, 16), this.a3 = i.fromHueAndChroma(n + 60, 24), this.n1 = i.fromHueAndChroma(n, 4), this.n2 = i.fromHueAndChroma(n, 8)), this.error = i.fromHueAndChroma(25, 84);
}
}
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class m {
get primary() {
return this.props.primary;
}
get onPrimary() {
return this.props.onPrimary;
}
get primaryContainer() {
return this.props.primaryContainer;
}
get onPrimaryContainer() {
return this.props.onPrimaryContainer;
}
get secondary() {
return this.props.secondary;
}
get onSecondary() {
return this.props.onSecondary;
}
get secondaryContainer() {
return this.props.secondaryContainer;
}
get onSecondaryContainer() {
return this.props.onSecondaryContainer;
}
get tertiary() {
return this.props.tertiary;
}
get onTertiary() {
return this.props.onTertiary;
}
get tertiaryContainer() {
return this.props.tertiaryContainer;
}
get onTertiaryContainer() {
return this.props.onTertiaryContainer;
}
get error() {
return this.props.error;
}
get onError() {
return this.props.onError;
}
get errorContainer() {
return this.props.errorContainer;
}
get onErrorContainer() {
return this.props.onErrorContainer;
}
get background() {
return this.props.background;
}
get onBackground() {
return this.props.onBackground;
}
get surface() {
return this.props.surface;
}
get onSurface() {
return this.props.onSurface;
}
get surfaceVariant() {
return this.props.surfaceVariant;
}
get onSurfaceVariant() {
return this.props.onSurfaceVariant;
}
get outline() {
return this.props.outline;
}
get outlineVariant() {
return this.props.outlineVariant;
}
get shadow() {
return this.props.shadow;
}
get scrim() {
return this.props.scrim;
}
get inverseSurface() {
return this.props.inverseSurface;
}
get inverseOnSurface() {
return this.props.inverseOnSurface;
}
get inversePrimary() {
return this.props.inversePrimary;
}
/**
* @param argb ARGB representation of a color.
* @return Light Material color scheme, based on the color's hue.
*/
static light(r) {
return m.lightFromCorePalette(s.of(r));
}
/**
* @param argb ARGB representation of a color.
* @return Dark Material color scheme, based on the color's hue.
*/
static dark(r) {
return m.darkFromCorePalette(s.of(r));
}
/**
* @param argb ARGB representation of a color.
* @return Light Material content color scheme, based on the color's hue.
*/
static lightContent(r) {
return m.lightFromCorePalette(s.contentOf(r));
}
/**
* @param argb ARGB representation of a color.
* @return Dark Material content color scheme, based on the color's hue.
*/
static darkContent(r) {
return m.darkFromCorePalette(s.contentOf(r));
}
/**
* Light scheme from core palette
*/
static lightFromCorePalette(r) {
return new m({
primary: r.a1.tone(40),
onPrimary: r.a1.tone(100),
primaryContainer: r.a1.tone(90),
onPrimaryContainer: r.a1.tone(10),
secondary: r.a2.tone(40),
onSecondary: r.a2.tone(100),
secondaryContainer: r.a2.tone(90),
onSecondaryContainer: r.a2.tone(10),
tertiary: r.a3.tone(40),
onTertiary: r.a3.tone(100),
tertiaryContainer: r.a3.tone(90),
onTertiaryContainer: r.a3.tone(10),
error: r.error.tone(40),
onError: r.error.tone(100),
errorContainer: r.error.tone(90),
onErrorContainer: r.error.tone(10),
background: r.n1.tone(99),
onBackground: r.n1.tone(10),
surface: r.n1.tone(99),
onSurface: r.n1.tone(10),
surfaceVariant: r.n2.tone(90),
onSurfaceVariant: r.n2.tone(30),
outline: r.n2.tone(50),
outlineVariant: r.n2.tone(80),
shadow: r.n1.tone(0),
scrim: r.n1.tone(0),
inverseSurface: r.n1.tone(20),
inverseOnSurface: r.n1.tone(95),
inversePrimary: r.a1.tone(80)
}); });
} }
/** handleFocusTrapFocus(e) {
* Dark scheme from core palette var m;
*/ const [t, i] = this.getFirstAndLastFocusableChildren();
static darkFromCorePalette(r) { if (!t || !i) {
return new m({ (m = this.dialog) == null || m.focus();
primary: r.a1.tone(80), return;
onPrimary: r.a1.tone(20),
primaryContainer: r.a1.tone(30),
onPrimaryContainer: r.a1.tone(90),
secondary: r.a2.tone(80),
onSecondary: r.a2.tone(20),
secondaryContainer: r.a2.tone(30),
onSecondaryContainer: r.a2.tone(90),
tertiary: r.a3.tone(80),
onTertiary: r.a3.tone(20),
tertiaryContainer: r.a3.tone(30),
onTertiaryContainer: r.a3.tone(90),
error: r.error.tone(80),
onError: r.error.tone(20),
errorContainer: r.error.tone(30),
onErrorContainer: r.error.tone(80),
background: r.n1.tone(10),
onBackground: r.n1.tone(90),
surface: r.n1.tone(10),
onSurface: r.n1.tone(90),
surfaceVariant: r.n2.tone(30),
onSurfaceVariant: r.n2.tone(80),
outline: r.n2.tone(60),
outlineVariant: r.n2.tone(30),
shadow: r.n1.tone(0),
scrim: r.n1.tone(0),
inverseSurface: r.n1.tone(90),
inverseOnSurface: r.n1.tone(20),
inversePrimary: r.a1.tone(40)
});
} }
constructor(r) { const a = e.target === this.firstFocusTrap, r = !a, d = e.relatedTarget === t, c = e.relatedTarget === i, p = !d && !c;
this.props = r; if (r && c || a && p) {
t.focus();
return;
}
if (a && d || r && p) {
i.focus();
return;
}
}
getFirstAndLastFocusableChildren() {
if (!this.treewalker)
return [null, null];
let e = null, t = null;
for (this.treewalker.currentNode = this.treewalker.root; this.treewalker.nextNode(); ) {
const i = this.treewalker.currentNode;
B(i) && (e || (e = i), t = i);
}
return [e, t];
} }
toJSON() {
return {
...this.props
}; };
} o([
u({ type: Boolean })
], s.prototype, "open", null);
o([
u({ type: Boolean })
], s.prototype, "quick", void 0);
o([
u({ attribute: !1 })
], s.prototype, "returnValue", void 0);
o([
u()
], s.prototype, "type", void 0);
o([
u({ type: Boolean, attribute: "no-focus-trap" })
], s.prototype, "noFocusTrap", void 0);
o([
l("dialog")
], s.prototype, "dialog", void 0);
o([
l(".scrim")
], s.prototype, "scrim", void 0);
o([
l(".container")
], s.prototype, "container", void 0);
o([
l(".headline")
], s.prototype, "headline", void 0);
o([
l(".content")
], s.prototype, "content", void 0);
o([
l(".actions")
], s.prototype, "actions", void 0);
o([
g()
], s.prototype, "isAtScrollTop", void 0);
o([
g()
], s.prototype, "isAtScrollBottom", void 0);
o([
l(".scroller")
], s.prototype, "scroller", void 0);
o([
l(".top.anchor")
], s.prototype, "topAnchor", void 0);
o([
l(".bottom.anchor")
], s.prototype, "bottomAnchor", void 0);
o([
l(".focus-trap")
], s.prototype, "firstFocusTrap", void 0);
o([
g()
], s.prototype, "hasHeadline", void 0);
o([
g()
], s.prototype, "hasActions", void 0);
o([
g()
], s.prototype, "hasIcon", void 0);
function B(n) {
var r;
const e = ":is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])", t = ":not(:disabled,[disabled])";
return n.matches(e + t + ':not([tabindex^="-"])') ? !0 : !n.localName.includes("-") || !n.matches(t) ? !1 : ((r = n.shadowRoot) == null ? void 0 : r.delegatesFocus) ?? !1;
} }
/** /**
* @license * @license
* Copyright 2021 Google LLC * Copyright 2024 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/ */
function I(h, r = []) { const R = N`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));flex:1;font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}
const t = s.of(h); `;
return { /**
source: h, * @license
schemes: { * Copyright 2023 Google LLC
light: m.light(h), * SPDX-License-Identifier: Apache-2.0
dark: m.dark(h) */
}, let x = class extends s {
palettes: {
primary: t.a1,
secondary: t.a2,
tertiary: t.a3,
neutral: t.n1,
neutralVariant: t.n2,
error: t.error
},
customColors: r.map((e) => F(h, e))
}; };
x.styles = [R];
x = o([
z("md-dialog")
], x);
const q = P({
react: S,
tagName: "md-dialog",
elementClass: x,
events: {
onClose: "close",
onShow: "show",
onOpen: "open",
onOpened: "opened",
onClosed: "closed",
onCancel: "cancel"
} }
function F(h, r) { }), te = (n) => {
let t = r.value; const { children: e, quick: t, returnValue: i, noFocusTrap: a, open: r, fullScreen: d, style: c, className: p, id: f, onClose: v, onShow: m, onOpen: w, onOpened: A, onClosed: E, onCancel: y } = n;
const e = t, n = h; return /* @__PURE__ */ C(
r.blend && (t = C.harmonize(e, n)); q,
const o = s.of(t).a1; {
return { quick: t,
color: r, returnValue: i,
value: t, noFocusTrap: a,
light: { open: r,
color: o.tone(40), style: {
onColor: o.tone(100), ...c,
colorContainer: o.tone(90), ...d ? {
onColorContainer: o.tone(10) width: "100vw",
height: "100vh",
maxWidth: "100vw",
maxHeight: "100vh"
} : {}
}, },
dark: { className: p,
color: o.tone(80), id: f,
onColor: o.tone(20), onClose: v,
colorContainer: o.tone(30), onShow: m,
onColorContainer: o.tone(90) onOpen: w,
} onOpened: A,
}; onClosed: E,
} onCancel: y,
function P(h) { children: e
const r = b(h);
return I(r);
} }
);
}, ie = (n) => /* @__PURE__ */ C("div", { slot: "headline", ...n, children: n.children }), oe = (n) => /* @__PURE__ */ C("div", { slot: "content", ...n, children: n.children }), se = (n) => /* @__PURE__ */ C("div", { slot: "actions", ...n, children: n.children });
export { export {
P as createTheme te as Dialog,
se as DialogActions,
oe as DialogContent,
ie as DialogTitle
}; };

111
dist/react-you-ui14.js vendored
View File

@ -1,45 +1,76 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),C=require("react"),E=require("./create-component-D9KTUrcf.js"),o=require("./class-map-DV5418hw.js");require("./ripple-DoKzzEey.js");const I=require("./animation-A38fZ1oY.js"),q=require("./form-label-activation-CYEOF_US.js"),f=require("./validator-DUxooTr6.js"),b=require("./element-internals-OOm6rgx-.js"),R=require("./focusable-D3uHX6nn.js"),k=require("./form-associated-CxXMoMPu.js");/** "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./string_utils-Bad7L8P5.js");/**
* @license * @license
* Copyright 2023 Google LLC * Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0 *
*/class S extends f.Validator{computeValidity(e){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let i=!1,t=!1;for(const{checked:r,required:a}of e)a&&(i=!0),r&&(t=!0);return this.radioElement.checked=t,this.radioElement.required=i,{validity:{valueMissing:i&&!t},validationMessage:this.radioElement.validationMessage}}equals(e,i){if(e.length!==i.length)return!1;for(let t=0;t<e.length;t++){const r=e[t],a=i[t];if(r.checked!==a.checked||r.required!==a.required)return!1}return!0}copy(e){return e.map(({checked:i,required:t})=>({checked:i,required:t}))}}/** * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/class p{static harmonize(r,t){const e=i.Hct.fromInt(r),n=i.Hct.fromInt(t),a=i.differenceDegrees(e.hue,n.hue),o=Math.min(a*.5,15),c=i.sanitizeDegreesDouble(e.hue+o*i.rotationDirection(e.hue,n.hue));return i.Hct.from(c,e.chroma,e.tone).toInt()}static hctHue(r,t,e){const n=p.cam16Ucs(r,t,e),a=i.Cam16.fromInt(n),o=i.Cam16.fromInt(r);return i.Hct.from(a.hue,o.chroma,i.lstarFromArgb(r)).toInt()}static cam16Ucs(r,t,e){const n=i.Cam16.fromInt(r),a=i.Cam16.fromInt(t),o=n.jstar,c=n.astar,f=n.bstar,C=a.jstar,d=a.astar,y=a.bstar,l=o+(C-o)*e,g=c+(d-c)*e,H=f+(y-f)*e;return i.Cam16.fromUcs(l,g,H).toInt()}}/**
* @license * @license
* Copyright 2022 Google LLC * Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0 *
*/class A{get controls(){const e=this.host.getAttribute("name");return!e||!this.root||!this.host.isConnected?[this.host]:Array.from(this.root.querySelectorAll(`[name="${e}"]`))}constructor(e){this.host=e,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=i=>{const t=i.key==="ArrowDown",r=i.key==="ArrowUp",a=i.key==="ArrowLeft",m=i.key==="ArrowRight";if(!a&&!m&&!t&&!r)return;const c=this.controls;if(!c.length)return;i.preventDefault();const p=getComputedStyle(this.host).direction==="rtl"?a||t:m||t,h=c.indexOf(this.host);let s=p?h+1:h-1;for(;s!==h;){s>=c.length?s=0:s<0&&(s=c.length-1);const n=c[s];if(n.hasAttribute("disabled")){p?s++:s--;continue}for(const d of c)d!==n&&(d.checked=!1,d.tabIndex=-1,d.blur());n.checked=!0,n.tabIndex=0,n.focus(),n.dispatchEvent(new Event("change",{bubbles:!0}));break}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const e of this.controls)e!==this.host&&(e.checked=!1)}updateTabIndices(){const e=this.controls,i=e.find(t=>t.checked);if(i||this.focused){const t=i||this.host;t.tabIndex=0;for(const r of e)r!==t&&(r.tabIndex=-1);return}for(const t of e)t.tabIndex=0}}/** * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/class u{static fromInt(r){const t=i.Hct.fromInt(r);return u.fromHct(t)}static fromHct(r){return new u(r.hue,r.chroma,r)}static fromHueAndChroma(r,t){const e=new S(r,t).create();return new u(r,t,e)}constructor(r,t,e){this.hue=r,this.chroma=t,this.keyColor=e,this.cache=new Map}tone(r){let t=this.cache.get(r);return t===void 0&&(t=i.Hct.from(this.hue,this.chroma,r).toInt(),this.cache.set(r,t)),t}getHct(r){return i.Hct.fromInt(this.tone(r))}}class S{constructor(r,t){this.hue=r,this.requestedChroma=t,this.chromaCache=new Map,this.maxChromaValue=200}create(){let n=0,a=100;for(;n<a;){const o=Math.floor((n+a)/2),c=this.maxChroma(o)<this.maxChroma(o+1);if(this.maxChroma(o)>=this.requestedChroma-.01)if(Math.abs(n-50)<Math.abs(a-50))a=o;else{if(n===o)return i.Hct.from(this.hue,this.requestedChroma,n);n=o}else c?n=o+1:a=o}return i.Hct.from(this.hue,this.requestedChroma,n)}maxChroma(r){if(this.chromaCache.has(r))return this.chromaCache.get(r);const t=i.Hct.from(this.hue,this.maxChromaValue,r).chroma;return this.chromaCache.set(r,t),t}}/**
* @license * @license
* Copyright 2018 Google LLC * Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0 *
*/var x;const y=Symbol("checked");let $=0;const L=f.mixinConstraintValidation(k.mixinFormAssociated(b.mixinElementInternals(R.mixinFocusable(o.r))));let u=class extends L{get checked(){return this[y]}set checked(e){const i=this.checked;i!==e&&(this[y]=e,this.requestUpdate("checked",i),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId=`cutout${++$}`,this[x]=!1,this.required=!1,this.value="on",this.selectionController=new A(this),this.addController(this.selectionController),this[b.internals].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}render(){const e={checked:this.checked};return o.x` * Licensed under the Apache License, Version 2.0 (the "License");
<div class="container ${o.e$1(e)}" aria-hidden="true"> * you may not use this file except in compliance with the License.
<md-ripple * You may obtain a copy of the License at
part="ripple" *
.control=${this} * http://www.apache.org/licenses/LICENSE-2.0
?disabled=${this.disabled}></md-ripple> *
<md-focus-ring part="focus-ring" .control=${this}></md-focus-ring> * Unless required by applicable law or agreed to in writing, software
<svg class="icon" viewBox="0 0 20 20"> * distributed under the License is distributed on an "AS IS" BASIS,
<mask id="${this.maskId}"> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
<rect width="100%" height="100%" fill="white" /> * See the License for the specific language governing permissions and
<circle cx="10" cy="10" r="8" fill="black" /> * limitations under the License.
</mask> */class s{static of(r){return new s(r,!1)}static contentOf(r){return new s(r,!0)}static fromColors(r){return s.createPaletteFromColors(!1,r)}static contentFromColors(r){return s.createPaletteFromColors(!0,r)}static createPaletteFromColors(r,t){const e=new s(t.primary,r);if(t.secondary){const n=new s(t.secondary,r);e.a2=n.a1}if(t.tertiary){const n=new s(t.tertiary,r);e.a3=n.a1}if(t.error){const n=new s(t.error,r);e.error=n.a1}if(t.neutral){const n=new s(t.neutral,r);e.n1=n.n1}if(t.neutralVariant){const n=new s(t.neutralVariant,r);e.n2=n.n2}return e}constructor(r,t){const e=i.Hct.fromInt(r),n=e.hue,a=e.chroma;t?(this.a1=u.fromHueAndChroma(n,a),this.a2=u.fromHueAndChroma(n,a/3),this.a3=u.fromHueAndChroma(n+60,a/2),this.n1=u.fromHueAndChroma(n,Math.min(a/12,4)),this.n2=u.fromHueAndChroma(n,Math.min(a/6,8))):(this.a1=u.fromHueAndChroma(n,Math.max(48,a)),this.a2=u.fromHueAndChroma(n,16),this.a3=u.fromHueAndChroma(n+60,24),this.n1=u.fromHueAndChroma(n,4),this.n2=u.fromHueAndChroma(n,8)),this.error=u.fromHueAndChroma(25,84)}}/**
<circle
class="outer circle"
cx="10"
cy="10"
r="10"
mask="url(#${this.maskId})" />
<circle class="inner circle" cx="10" cy="10" r="5" />
</svg>
<div class="touch-target"></div>
</div>
`}updated(){this[b.internals].ariaChecked=String(this.checked)}async handleClick(e){this.disabled||(await 0,!e.defaultPrevented&&(q.isActivationClick(e)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(e){await 0,!(e.key!==" "||e.defaultPrevented)&&this.click()}[(x=y,k.getFormValue)](){return this.checked?this.value:null}[k.getFormState](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(e){this.checked=e==="true"}[f.createValidator](){return new S(()=>this.selectionController?this.selectionController.controls:[this])}[f.getValidityAnchor](){return this.container}};o.__decorate([o.n({type:Boolean})],u.prototype,"checked",null);o.__decorate([o.n({type:Boolean})],u.prototype,"required",void 0);o.__decorate([o.n()],u.prototype,"value",void 0);o.__decorate([I.e$1(".container")],u.prototype,"container",void 0);/**
* @license * @license
* Copyright 2024 Google LLC * Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0 *
*/const _=o.i$1`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}} * Licensed under the Apache License, Version 2.0 (the "License");
`;/** * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/class m{get primary(){return this.props.primary}get onPrimary(){return this.props.onPrimary}get primaryContainer(){return this.props.primaryContainer}get onPrimaryContainer(){return this.props.onPrimaryContainer}get secondary(){return this.props.secondary}get onSecondary(){return this.props.onSecondary}get secondaryContainer(){return this.props.secondaryContainer}get onSecondaryContainer(){return this.props.onSecondaryContainer}get tertiary(){return this.props.tertiary}get onTertiary(){return this.props.onTertiary}get tertiaryContainer(){return this.props.tertiaryContainer}get onTertiaryContainer(){return this.props.onTertiaryContainer}get error(){return this.props.error}get onError(){return this.props.onError}get errorContainer(){return this.props.errorContainer}get onErrorContainer(){return this.props.onErrorContainer}get background(){return this.props.background}get onBackground(){return this.props.onBackground}get surface(){return this.props.surface}get onSurface(){return this.props.onSurface}get surfaceVariant(){return this.props.surfaceVariant}get onSurfaceVariant(){return this.props.onSurfaceVariant}get outline(){return this.props.outline}get outlineVariant(){return this.props.outlineVariant}get shadow(){return this.props.shadow}get scrim(){return this.props.scrim}get inverseSurface(){return this.props.inverseSurface}get inverseOnSurface(){return this.props.inverseOnSurface}get inversePrimary(){return this.props.inversePrimary}static light(r){return m.lightFromCorePalette(s.of(r))}static dark(r){return m.darkFromCorePalette(s.of(r))}static lightContent(r){return m.lightFromCorePalette(s.contentOf(r))}static darkContent(r){return m.darkFromCorePalette(s.contentOf(r))}static lightFromCorePalette(r){return new m({primary:r.a1.tone(40),onPrimary:r.a1.tone(100),primaryContainer:r.a1.tone(90),onPrimaryContainer:r.a1.tone(10),secondary:r.a2.tone(40),onSecondary:r.a2.tone(100),secondaryContainer:r.a2.tone(90),onSecondaryContainer:r.a2.tone(10),tertiary:r.a3.tone(40),onTertiary:r.a3.tone(100),tertiaryContainer:r.a3.tone(90),onTertiaryContainer:r.a3.tone(10),error:r.error.tone(40),onError:r.error.tone(100),errorContainer:r.error.tone(90),onErrorContainer:r.error.tone(10),background:r.n1.tone(99),onBackground:r.n1.tone(10),surface:r.n1.tone(99),onSurface:r.n1.tone(10),surfaceVariant:r.n2.tone(90),onSurfaceVariant:r.n2.tone(30),outline:r.n2.tone(50),outlineVariant:r.n2.tone(80),shadow:r.n1.tone(0),scrim:r.n1.tone(0),inverseSurface:r.n1.tone(20),inverseOnSurface:r.n1.tone(95),inversePrimary:r.a1.tone(80)})}static darkFromCorePalette(r){return new m({primary:r.a1.tone(80),onPrimary:r.a1.tone(20),primaryContainer:r.a1.tone(30),onPrimaryContainer:r.a1.tone(90),secondary:r.a2.tone(80),onSecondary:r.a2.tone(20),secondaryContainer:r.a2.tone(30),onSecondaryContainer:r.a2.tone(90),tertiary:r.a3.tone(80),onTertiary:r.a3.tone(20),tertiaryContainer:r.a3.tone(30),onTertiaryContainer:r.a3.tone(90),error:r.error.tone(80),onError:r.error.tone(20),errorContainer:r.error.tone(30),onErrorContainer:r.error.tone(80),background:r.n1.tone(10),onBackground:r.n1.tone(90),surface:r.n1.tone(10),onSurface:r.n1.tone(90),surfaceVariant:r.n2.tone(30),onSurfaceVariant:r.n2.tone(80),outline:r.n2.tone(60),outlineVariant:r.n2.tone(30),shadow:r.n1.tone(0),scrim:r.n1.tone(0),inverseSurface:r.n1.tone(90),inverseOnSurface:r.n1.tone(20),inversePrimary:r.a1.tone(40)})}constructor(r){this.props=r}toJSON(){return{...this.props}}}/**
* @license * @license
* Copyright 2022 Google LLC * Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0 *
*/let v=class extends u{};v.styles=[_];v=o.__decorate([o.t$1("md-radio")],v);const F=E.o({react:C,tagName:"md-radio",elementClass:v}),T=l=>{const{checked:e,value:i,required:t,disabled:r,name:a,ariaLabel:m,className:c,style:g,id:p,iconColor:h,selectedIconColor:s,iconSize:n,...d}=l;return w.jsx(F,{checked:e,value:i,required:t,disabled:r||!1,name:a,className:c,style:{...g,"--md-radio-icon-color":h||"var(--md-sys-on-surface-variant)","--md-radio-selected-icon-color":s||"var(--md-sys-color-primary)","--md-radio-icon-size":n||"20px"},id:p,"aria-label":m,...d})};exports.Radio=T; * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/function w(h,r=[]){const t=s.of(h);return{source:h,schemes:{light:m.light(h),dark:m.dark(h)},palettes:{primary:t.a1,secondary:t.a2,tertiary:t.a3,neutral:t.n1,neutralVariant:t.n2,error:t.error},customColors:r.map(e=>b(h,e))}}function b(h,r){let t=r.value;const e=t,n=h;r.blend&&(t=p.harmonize(e,n));const o=s.of(t).a1;return{color:r,value:t,light:{color:o.tone(40),onColor:o.tone(100),colorContainer:o.tone(90),onColorContainer:o.tone(10)},dark:{color:o.tone(80),onColor:o.tone(20),colorContainer:o.tone(30),onColorContainer:o.tone(90)}}}function k(h){const r=i.argbFromHex(h);return w(r)}exports.createTheme=k;

762
dist/react-you-ui14.mjs vendored
View File

@ -1,274 +1,504 @@
import { jsx as x } from "react/jsx-runtime"; import { H as u, d as w, s as k, r as v, C as f, l as V, a as b } from "./string_utils-B4bsIQ5w.mjs";
import w from "react";
import { o as C } from "./create-component-CVXl33PD.mjs";
import { _ as h, n as y, r as E, x as I, c as R, a as S, b as A } from "./class-map-CwiboTfb.mjs";
import "./ripple-pQcEjR05.mjs";
import { a as q } from "./animation-DjClVFum.mjs";
import { i as L } from "./form-label-activation-ed0HgVsy.mjs";
import { V as $, m as F, c as z, g as D } from "./validator-DZt1_yHv.mjs";
import { m as T, i as k } from "./element-internals-3IY9gE4L.mjs";
import { m as V } from "./focusable-CDJoU7XD.mjs";
import { m as K, g as M, a as _ } from "./form-associated-CyYeHPMb.mjs";
/** /**
* @license * @license
* Copyright 2023 Google LLC * Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0 *
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/ */
class B extends $ { class C {
computeValidity(e) { /**
this.radioElement || (this.radioElement = document.createElement("input"), this.radioElement.type = "radio", this.radioElement.name = "group"); * Blend the design color's HCT hue towards the key color's HCT
let i = !1, t = !1; * hue, in a way that leaves the original color recognizable and
for (const { checked: o, required: r } of e) * recognizably shifted towards the key color.
r && (i = !0), o && (t = !0); *
return this.radioElement.checked = t, this.radioElement.required = i, { * @param designColor ARGB representation of an arbitrary color.
validity: { * @param sourceColor ARGB representation of the main theme color.
valueMissing: i && !t * @return The design color with a hue shifted towards the
* system's color, a slightly warmer/cooler variant of the design
* color's hue.
*/
static harmonize(r, t) {
const e = u.fromInt(r), n = u.fromInt(t), a = w(e.hue, n.hue), o = Math.min(a * 0.5, 15), c = k(e.hue + o * v(e.hue, n.hue));
return u.from(c, e.chroma, e.tone).toInt();
}
/**
* Blends hue from one color into another. The chroma and tone of
* the original color are maintained.
*
* @param from ARGB representation of color
* @param to ARGB representation of color
* @param amount how much blending to perform; 0.0 >= and <= 1.0
* @return from, with a hue blended towards to. Chroma and tone
* are constant.
*/
static hctHue(r, t, e) {
const n = C.cam16Ucs(r, t, e), a = f.fromInt(n), o = f.fromInt(r);
return u.from(a.hue, o.chroma, V(r)).toInt();
}
/**
* Blend in CAM16-UCS space.
*
* @param from ARGB representation of color
* @param to ARGB representation of color
* @param amount how much blending to perform; 0.0 >= and <= 1.0
* @return from, blended towards to. Hue, chroma, and tone will
* change.
*/
static cam16Ucs(r, t, e) {
const n = f.fromInt(r), a = f.fromInt(t), o = n.jstar, c = n.astar, p = n.bstar, d = a.jstar, y = a.astar, l = a.bstar, g = o + (d - o) * e, S = c + (y - c) * e, H = p + (l - p) * e;
return f.fromUcs(g, S, H).toInt();
}
}
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class i {
/**
* @param argb ARGB representation of a color
* @return Tones matching that color's hue and chroma.
*/
static fromInt(r) {
const t = u.fromInt(r);
return i.fromHct(t);
}
/**
* @param hct Hct
* @return Tones matching that color's hue and chroma.
*/
static fromHct(r) {
return new i(r.hue, r.chroma, r);
}
/**
* @param hue HCT hue
* @param chroma HCT chroma
* @return Tones matching hue and chroma.
*/
static fromHueAndChroma(r, t) {
const e = new A(r, t).create();
return new i(r, t, e);
}
constructor(r, t, e) {
this.hue = r, this.chroma = t, this.keyColor = e, this.cache = /* @__PURE__ */ new Map();
}
/**
* @param tone HCT tone, measured from 0 to 100.
* @return ARGB representation of a color with that tone.
*/
tone(r) {
let t = this.cache.get(r);
return t === void 0 && (t = u.from(this.hue, this.chroma, r).toInt(), this.cache.set(r, t)), t;
}
/**
* @param tone HCT tone.
* @return HCT representation of a color with that tone.
*/
getHct(r) {
return u.fromInt(this.tone(r));
}
}
class A {
constructor(r, t) {
this.hue = r, this.requestedChroma = t, this.chromaCache = /* @__PURE__ */ new Map(), this.maxChromaValue = 200;
}
/**
* Creates a key color from a [hue] and a [chroma].
* The key color is the first tone, starting from T50, matching the given hue
* and chroma.
*
* @return Key color [Hct]
*/
create() {
let n = 0, a = 100;
for (; n < a; ) {
const o = Math.floor((n + a) / 2), c = this.maxChroma(o) < this.maxChroma(o + 1);
if (this.maxChroma(o) >= this.requestedChroma - 0.01)
if (Math.abs(n - 50) < Math.abs(a - 50))
a = o;
else {
if (n === o)
return u.from(this.hue, this.requestedChroma, n);
n = o;
}
else
c ? n = o + 1 : a = o;
}
return u.from(this.hue, this.requestedChroma, n);
}
// Find the maximum chroma for a given tone
maxChroma(r) {
if (this.chromaCache.has(r))
return this.chromaCache.get(r);
const t = u.from(this.hue, this.maxChromaValue, r).chroma;
return this.chromaCache.set(r, t), t;
}
}
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class s {
/**
* @param argb ARGB representation of a color
*/
static of(r) {
return new s(r, !1);
}
/**
* @param argb ARGB representation of a color
*/
static contentOf(r) {
return new s(r, !0);
}
/**
* Create a [CorePalette] from a set of colors
*/
static fromColors(r) {
return s.createPaletteFromColors(!1, r);
}
/**
* Create a content [CorePalette] from a set of colors
*/
static contentFromColors(r) {
return s.createPaletteFromColors(!0, r);
}
static createPaletteFromColors(r, t) {
const e = new s(t.primary, r);
if (t.secondary) {
const n = new s(t.secondary, r);
e.a2 = n.a1;
}
if (t.tertiary) {
const n = new s(t.tertiary, r);
e.a3 = n.a1;
}
if (t.error) {
const n = new s(t.error, r);
e.error = n.a1;
}
if (t.neutral) {
const n = new s(t.neutral, r);
e.n1 = n.n1;
}
if (t.neutralVariant) {
const n = new s(t.neutralVariant, r);
e.n2 = n.n2;
}
return e;
}
constructor(r, t) {
const e = u.fromInt(r), n = e.hue, a = e.chroma;
t ? (this.a1 = i.fromHueAndChroma(n, a), this.a2 = i.fromHueAndChroma(n, a / 3), this.a3 = i.fromHueAndChroma(n + 60, a / 2), this.n1 = i.fromHueAndChroma(n, Math.min(a / 12, 4)), this.n2 = i.fromHueAndChroma(n, Math.min(a / 6, 8))) : (this.a1 = i.fromHueAndChroma(n, Math.max(48, a)), this.a2 = i.fromHueAndChroma(n, 16), this.a3 = i.fromHueAndChroma(n + 60, 24), this.n1 = i.fromHueAndChroma(n, 4), this.n2 = i.fromHueAndChroma(n, 8)), this.error = i.fromHueAndChroma(25, 84);
}
}
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class m {
get primary() {
return this.props.primary;
}
get onPrimary() {
return this.props.onPrimary;
}
get primaryContainer() {
return this.props.primaryContainer;
}
get onPrimaryContainer() {
return this.props.onPrimaryContainer;
}
get secondary() {
return this.props.secondary;
}
get onSecondary() {
return this.props.onSecondary;
}
get secondaryContainer() {
return this.props.secondaryContainer;
}
get onSecondaryContainer() {
return this.props.onSecondaryContainer;
}
get tertiary() {
return this.props.tertiary;
}
get onTertiary() {
return this.props.onTertiary;
}
get tertiaryContainer() {
return this.props.tertiaryContainer;
}
get onTertiaryContainer() {
return this.props.onTertiaryContainer;
}
get error() {
return this.props.error;
}
get onError() {
return this.props.onError;
}
get errorContainer() {
return this.props.errorContainer;
}
get onErrorContainer() {
return this.props.onErrorContainer;
}
get background() {
return this.props.background;
}
get onBackground() {
return this.props.onBackground;
}
get surface() {
return this.props.surface;
}
get onSurface() {
return this.props.onSurface;
}
get surfaceVariant() {
return this.props.surfaceVariant;
}
get onSurfaceVariant() {
return this.props.onSurfaceVariant;
}
get outline() {
return this.props.outline;
}
get outlineVariant() {
return this.props.outlineVariant;
}
get shadow() {
return this.props.shadow;
}
get scrim() {
return this.props.scrim;
}
get inverseSurface() {
return this.props.inverseSurface;
}
get inverseOnSurface() {
return this.props.inverseOnSurface;
}
get inversePrimary() {
return this.props.inversePrimary;
}
/**
* @param argb ARGB representation of a color.
* @return Light Material color scheme, based on the color's hue.
*/
static light(r) {
return m.lightFromCorePalette(s.of(r));
}
/**
* @param argb ARGB representation of a color.
* @return Dark Material color scheme, based on the color's hue.
*/
static dark(r) {
return m.darkFromCorePalette(s.of(r));
}
/**
* @param argb ARGB representation of a color.
* @return Light Material content color scheme, based on the color's hue.
*/
static lightContent(r) {
return m.lightFromCorePalette(s.contentOf(r));
}
/**
* @param argb ARGB representation of a color.
* @return Dark Material content color scheme, based on the color's hue.
*/
static darkContent(r) {
return m.darkFromCorePalette(s.contentOf(r));
}
/**
* Light scheme from core palette
*/
static lightFromCorePalette(r) {
return new m({
primary: r.a1.tone(40),
onPrimary: r.a1.tone(100),
primaryContainer: r.a1.tone(90),
onPrimaryContainer: r.a1.tone(10),
secondary: r.a2.tone(40),
onSecondary: r.a2.tone(100),
secondaryContainer: r.a2.tone(90),
onSecondaryContainer: r.a2.tone(10),
tertiary: r.a3.tone(40),
onTertiary: r.a3.tone(100),
tertiaryContainer: r.a3.tone(90),
onTertiaryContainer: r.a3.tone(10),
error: r.error.tone(40),
onError: r.error.tone(100),
errorContainer: r.error.tone(90),
onErrorContainer: r.error.tone(10),
background: r.n1.tone(99),
onBackground: r.n1.tone(10),
surface: r.n1.tone(99),
onSurface: r.n1.tone(10),
surfaceVariant: r.n2.tone(90),
onSurfaceVariant: r.n2.tone(30),
outline: r.n2.tone(50),
outlineVariant: r.n2.tone(80),
shadow: r.n1.tone(0),
scrim: r.n1.tone(0),
inverseSurface: r.n1.tone(20),
inverseOnSurface: r.n1.tone(95),
inversePrimary: r.a1.tone(80)
});
}
/**
* Dark scheme from core palette
*/
static darkFromCorePalette(r) {
return new m({
primary: r.a1.tone(80),
onPrimary: r.a1.tone(20),
primaryContainer: r.a1.tone(30),
onPrimaryContainer: r.a1.tone(90),
secondary: r.a2.tone(80),
onSecondary: r.a2.tone(20),
secondaryContainer: r.a2.tone(30),
onSecondaryContainer: r.a2.tone(90),
tertiary: r.a3.tone(80),
onTertiary: r.a3.tone(20),
tertiaryContainer: r.a3.tone(30),
onTertiaryContainer: r.a3.tone(90),
error: r.error.tone(80),
onError: r.error.tone(20),
errorContainer: r.error.tone(30),
onErrorContainer: r.error.tone(80),
background: r.n1.tone(10),
onBackground: r.n1.tone(90),
surface: r.n1.tone(10),
onSurface: r.n1.tone(90),
surfaceVariant: r.n2.tone(30),
onSurfaceVariant: r.n2.tone(80),
outline: r.n2.tone(60),
outlineVariant: r.n2.tone(30),
shadow: r.n1.tone(0),
scrim: r.n1.tone(0),
inverseSurface: r.n1.tone(90),
inverseOnSurface: r.n1.tone(20),
inversePrimary: r.a1.tone(40)
});
}
constructor(r) {
this.props = r;
}
toJSON() {
return {
...this.props
};
}
}
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function I(h, r = []) {
const t = s.of(h);
return {
source: h,
schemes: {
light: m.light(h),
dark: m.dark(h)
}, },
validationMessage: this.radioElement.validationMessage palettes: {
}; primary: t.a1,
} secondary: t.a2,
equals(e, i) { tertiary: t.a3,
if (e.length !== i.length) neutral: t.n1,
return !1; neutralVariant: t.n2,
for (let t = 0; t < e.length; t++) { error: t.error
const o = e[t], r = i[t];
if (o.checked !== r.checked || o.required !== r.required)
return !1;
}
return !0;
}
copy(e) {
return e.map(({ checked: i, required: t }) => ({
checked: i,
required: t
}));
}
}
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
class O {
/**
* All single selection elements in the host element's root with the same
* `name` attribute, including the host element.
*/
get controls() {
const e = this.host.getAttribute("name");
return !e || !this.root || !this.host.isConnected ? [this.host] : Array.from(this.root.querySelectorAll(`[name="${e}"]`));
}
constructor(e) {
this.host = e, this.focused = !1, this.root = null, this.handleFocusIn = () => {
this.focused = !0, this.updateTabIndices();
}, this.handleFocusOut = () => {
this.focused = !1, this.updateTabIndices();
}, this.handleKeyDown = (i) => {
const t = i.key === "ArrowDown", o = i.key === "ArrowUp", r = i.key === "ArrowLeft", u = i.key === "ArrowRight";
if (!r && !u && !t && !o)
return;
const a = this.controls;
if (!a.length)
return;
i.preventDefault();
const p = getComputedStyle(this.host).direction === "rtl" ? r || t : u || t, l = a.indexOf(this.host);
let s = p ? l + 1 : l - 1;
for (; s !== l; ) {
s >= a.length ? s = 0 : s < 0 && (s = a.length - 1);
const c = a[s];
if (c.hasAttribute("disabled")) {
p ? s++ : s--;
continue;
}
for (const n of a)
n !== c && (n.checked = !1, n.tabIndex = -1, n.blur());
c.checked = !0, c.tabIndex = 0, c.focus(), c.dispatchEvent(new Event("change", { bubbles: !0 }));
break;
}
};
}
hostConnected() {
this.root = this.host.getRootNode(), this.host.addEventListener("keydown", this.handleKeyDown), this.host.addEventListener("focusin", this.handleFocusIn), this.host.addEventListener("focusout", this.handleFocusOut), this.host.checked && this.uncheckSiblings(), this.updateTabIndices();
}
hostDisconnected() {
this.host.removeEventListener("keydown", this.handleKeyDown), this.host.removeEventListener("focusin", this.handleFocusIn), this.host.removeEventListener("focusout", this.handleFocusOut), this.updateTabIndices(), this.root = null;
}
/**
* Should be called whenever the host's `checked` property changes
* synchronously.
*/
handleCheckedChange() {
this.host.checked && (this.uncheckSiblings(), this.updateTabIndices());
}
uncheckSiblings() {
for (const e of this.controls)
e !== this.host && (e.checked = !1);
}
/**
* Updates the `tabindex` of the host and its siblings.
*/
updateTabIndices() {
const e = this.controls, i = e.find((t) => t.checked);
if (i || this.focused) {
const t = i || this.host;
t.tabIndex = 0;
for (const o of e)
o !== t && (o.tabIndex = -1);
return;
}
for (const t of e)
t.tabIndex = 0;
}
}
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
var g;
const v = Symbol("checked");
let N = 0;
const U = F(K(T(V(E))));
let m = class extends U {
/**
* Whether or not the radio is selected.
*/
get checked() {
return this[v];
}
set checked(e) {
const i = this.checked;
i !== e && (this[v] = e, this.requestUpdate("checked", i), this.selectionController.handleCheckedChange());
}
constructor() {
super(), this.maskId = `cutout${++N}`, this[g] = !1, this.required = !1, this.value = "on", this.selectionController = new O(this), this.addController(this.selectionController), this[k].role = "radio", this.addEventListener("click", this.handleClick.bind(this)), this.addEventListener("keydown", this.handleKeydown.bind(this));
}
render() {
const e = { checked: this.checked };
return I`
<div class="container ${R(e)}" aria-hidden="true">
<md-ripple
part="ripple"
.control=${this}
?disabled=${this.disabled}></md-ripple>
<md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
<svg class="icon" viewBox="0 0 20 20">
<mask id="${this.maskId}">
<rect width="100%" height="100%" fill="white" />
<circle cx="10" cy="10" r="8" fill="black" />
</mask>
<circle
class="outer circle"
cx="10"
cy="10"
r="10"
mask="url(#${this.maskId})" />
<circle class="inner circle" cx="10" cy="10" r="5" />
</svg>
<div class="touch-target"></div>
</div>
`;
}
updated() {
this[k].ariaChecked = String(this.checked);
}
async handleClick(e) {
this.disabled || (await 0, !e.defaultPrevented && (L(e) && this.focus(), this.checked = !0, this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }))));
}
async handleKeydown(e) {
await 0, !(e.key !== " " || e.defaultPrevented) && this.click();
}
[(g = v, M)]() {
return this.checked ? this.value : null;
}
[_]() {
return String(this.checked);
}
formResetCallback() {
this.checked = this.hasAttribute("checked");
}
formStateRestoreCallback(e) {
this.checked = e === "true";
}
[z]() {
return new B(() => this.selectionController ? this.selectionController.controls : [this]);
}
[D]() {
return this.container;
}
};
h([
y({ type: Boolean })
], m.prototype, "checked", null);
h([
y({ type: Boolean })
], m.prototype, "required", void 0);
h([
y()
], m.prototype, "value", void 0);
h([
q(".container")
], m.prototype, "container", void 0);
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const P = S`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
`;
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
let f = class extends m {
};
f.styles = [P];
f = h([
A("md-radio")
], f);
const j = C({
react: w,
tagName: "md-radio",
elementClass: f
}), re = (d) => {
const {
checked: e,
value: i,
required: t,
disabled: o,
name: r,
ariaLabel: u,
className: a,
style: b,
id: p,
iconColor: l,
selectedIconColor: s,
iconSize: c,
...n
} = d;
return /* @__PURE__ */ x(
j,
{
checked: e,
value: i,
required: t,
disabled: o || !1,
name: r,
className: a,
style: {
...b,
"--md-radio-icon-color": l || "var(--md-sys-on-surface-variant)",
"--md-radio-selected-icon-color": s || "var(--md-sys-color-primary)",
"--md-radio-icon-size": c || "20px"
}, },
id: p, customColors: r.map((e) => F(h, e))
"aria-label": u,
...n
}
);
}; };
}
function F(h, r) {
let t = r.value;
const e = t, n = h;
r.blend && (t = C.harmonize(e, n));
const o = s.of(t).a1;
return {
color: r,
value: t,
light: {
color: o.tone(40),
onColor: o.tone(100),
colorContainer: o.tone(90),
onColorContainer: o.tone(10)
},
dark: {
color: o.tone(80),
onColor: o.tone(20),
colorContainer: o.tone(30),
onColorContainer: o.tone(90)
}
};
}
function P(h) {
const r = b(h);
return I(r);
}
export { export {
re as Radio P as createTheme
}; };

101
dist/react-you-ui15.js vendored
View File

@ -1,74 +1,45 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),b=require("react"),f=require("./create-component-D9KTUrcf.js"),o=require("./menuItemController-XIsQ9HIe.js"),t=require("./class-map-DV5418hw.js");require("./ripple-DoKzzEey.js");const l=require("./item-DvSwYnPq.js"),g=require("./animation-A38fZ1oY.js"),p=require("./query-assigned-elements-BYttmtWz.js"),E=require("./query-assigned-nodes-Dl8k4w_-.js"),c=require("./static-B9XIUGOk.js"),C=require("./delegate-4958lG3m.js");/** "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),C=require("react"),E=require("./create-component-D9KTUrcf.js"),o=require("./class-map-DV5418hw.js");require("./ripple-DoKzzEey.js");const I=require("./animation-A38fZ1oY.js"),q=require("./form-label-activation-CYEOF_US.js"),f=require("./validator-DUxooTr6.js"),b=require("./element-internals-OOm6rgx-.js"),R=require("./focusable-D3uHX6nn.js"),k=require("./form-associated-CxXMoMPu.js");/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/const T=C.mixinDelegatesAria(t.r);class n extends T{constructor(){super(...arguments),this.disabled=!1,this.type="menuitem",this.href="",this.target="",this.keepOpen=!1,this.selected=!1,this.menuItemController=new o.MenuItemController(this,{getHeadlineElements:()=>this.headlineElements,getSupportingTextElements:()=>this.supportingTextElements,getDefaultElements:()=>this.defaultElements,getInteractiveElement:()=>this.listItemRoot})}get typeaheadText(){return this.menuItemController.typeaheadText}set typeaheadText(e){this.menuItemController.setTypeaheadText(e)}render(){return this.renderListItem(t.x`
<md-item>
<div slot="container">
${this.renderRipple()} ${this.renderFocusRing()}
</div>
<slot name="start" slot="start"></slot>
<slot name="end" slot="end"></slot>
${this.renderBody()}
</md-item>
`)}renderListItem(e){const i=this.type==="link";let s;switch(this.menuItemController.tagName){case"a":s=c.i`a`;break;case"button":s=c.i`button`;break;default:case"li":s=c.i`li`;break}const r=i&&this.target?this.target:t.E;return c.u`
<${s}
id="item"
tabindex=${this.disabled&&!i?-1:0}
role=${this.menuItemController.role}
aria-label=${this.ariaLabel||t.E}
aria-selected=${this.ariaSelected||t.E}
aria-checked=${this.ariaChecked||t.E}
aria-expanded=${this.ariaExpanded||t.E}
aria-haspopup=${this.ariaHasPopup||t.E}
class="list-item ${t.e$1(this.getRenderClasses())}"
href=${this.href||t.E}
target=${r}
@click=${this.menuItemController.onClick}
@keydown=${this.menuItemController.onKeydown}
>${e}</${s}>
`}renderRipple(){return t.x` <md-ripple
part="ripple"
for="item"
?disabled=${this.disabled}></md-ripple>`}renderFocusRing(){return t.x` <md-focus-ring
part="focus-ring"
for="item"
inward></md-focus-ring>`}getRenderClasses(){return{disabled:this.disabled,selected:this.selected}}renderBody(){return t.x`
<slot></slot>
<slot name="overline" slot="overline"></slot>
<slot name="headline" slot="headline"></slot>
<slot name="supporting-text" slot="supporting-text"></slot>
<slot
name="trailing-supporting-text"
slot="trailing-supporting-text"></slot>
`}focus(){var e;(e=this.listItemRoot)==null||e.focus()}}n.shadowRootOptions={...t.r.shadowRootOptions,delegatesFocus:!0};t.__decorate([t.n({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);t.__decorate([t.n()],n.prototype,"type",void 0);t.__decorate([t.n()],n.prototype,"href",void 0);t.__decorate([t.n()],n.prototype,"target",void 0);t.__decorate([t.n({type:Boolean,attribute:"keep-open"})],n.prototype,"keepOpen",void 0);t.__decorate([t.n({type:Boolean})],n.prototype,"selected",void 0);t.__decorate([g.e$1(".list-item")],n.prototype,"listItemRoot",void 0);t.__decorate([p.o({slot:"headline"})],n.prototype,"headlineElements",void 0);t.__decorate([p.o({slot:"supporting-text"})],n.prototype,"supportingTextElements",void 0);t.__decorate([E.n({slot:""})],n.prototype,"defaultElements",void 0);t.__decorate([t.n({attribute:"typeahead-text"})],n.prototype,"typeaheadText",null);/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/let h=class extends n{};h.styles=[o.styles];h=t.__decorate([t.t$1("md-menu-item")],h);/**
* @license * @license
* Copyright 2023 Google LLC * Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/let u=class extends t.r{get item(){return this.items[0]??null}get menu(){return this.menus[0]??null}constructor(){super(),this.anchorCorner=o.Corner.START_END,this.menuCorner=o.Corner.START_START,this.hoverOpenDelay=400,this.hoverCloseDelay=400,this.isSubMenu=!0,this.previousOpenTimeout=0,this.previousCloseTimeout=0,this.onMouseenter=()=>{var e;clearTimeout(this.previousOpenTimeout),clearTimeout(this.previousCloseTimeout),!((e=this.menu)!=null&&e.open)&&(this.hoverOpenDelay?this.previousOpenTimeout=setTimeout(()=>{this.show()},this.hoverOpenDelay):this.show())},this.onMouseleave=()=>{clearTimeout(this.previousCloseTimeout),clearTimeout(this.previousOpenTimeout),this.hoverCloseDelay?this.previousCloseTimeout=setTimeout(()=>{this.close()},this.hoverCloseDelay):this.close()},this.addEventListener("mouseenter",this.onMouseenter),this.addEventListener("mouseleave",this.onMouseleave)}render(){return t.x` */class S extends f.Validator{computeValidity(e){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let i=!1,t=!1;for(const{checked:r,required:a}of e)a&&(i=!0),r&&(t=!0);return this.radioElement.checked=t,this.radioElement.required=i,{validity:{valueMissing:i&&!t},validationMessage:this.radioElement.validationMessage}}equals(e,i){if(e.length!==i.length)return!1;for(let t=0;t<e.length;t++){const r=e[t],a=i[t];if(r.checked!==a.checked||r.required!==a.required)return!1}return!0}copy(e){return e.map(({checked:i,required:t})=>({checked:i,required:t}))}}/**
<slot * @license
name="item" * Copyright 2022 Google LLC
@click=${this.onClick} * SPDX-License-Identifier: Apache-2.0
@keydown=${this.onKeydown} */class A{get controls(){const e=this.host.getAttribute("name");return!e||!this.root||!this.host.isConnected?[this.host]:Array.from(this.root.querySelectorAll(`[name="${e}"]`))}constructor(e){this.host=e,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=i=>{const t=i.key==="ArrowDown",r=i.key==="ArrowUp",a=i.key==="ArrowLeft",m=i.key==="ArrowRight";if(!a&&!m&&!t&&!r)return;const c=this.controls;if(!c.length)return;i.preventDefault();const p=getComputedStyle(this.host).direction==="rtl"?a||t:m||t,h=c.indexOf(this.host);let s=p?h+1:h-1;for(;s!==h;){s>=c.length?s=0:s<0&&(s=c.length-1);const n=c[s];if(n.hasAttribute("disabled")){p?s++:s--;continue}for(const d of c)d!==n&&(d.checked=!1,d.tabIndex=-1,d.blur());n.checked=!0,n.tabIndex=0,n.focus(),n.dispatchEvent(new Event("change",{bubbles:!0}));break}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const e of this.controls)e!==this.host&&(e.checked=!1)}updateTabIndices(){const e=this.controls,i=e.find(t=>t.checked);if(i||this.focused){const t=i||this.host;t.tabIndex=0;for(const r of e)r!==t&&(r.tabIndex=-1);return}for(const t of e)t.tabIndex=0}}/**
@slotchange=${this.onSlotchange}> * @license
</slot> * Copyright 2018 Google LLC
<slot * SPDX-License-Identifier: Apache-2.0
name="menu" */var x;const y=Symbol("checked");let $=0;const L=f.mixinConstraintValidation(k.mixinFormAssociated(b.mixinElementInternals(R.mixinFocusable(o.r))));let u=class extends L{get checked(){return this[y]}set checked(e){const i=this.checked;i!==e&&(this[y]=e,this.requestUpdate("checked",i),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId=`cutout${++$}`,this[x]=!1,this.required=!1,this.value="on",this.selectionController=new A(this),this.addController(this.selectionController),this[b.internals].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}render(){const e={checked:this.checked};return o.x`
@keydown=${this.onSubMenuKeydown} <div class="container ${o.e$1(e)}" aria-hidden="true">
@close-menu=${this.onCloseSubmenu} <md-ripple
@slotchange=${this.onSlotchange}> part="ripple"
</slot> .control=${this}
`}firstUpdated(){this.onSlotchange()}async show(){const e=this.menu;if(!e||e.open)return;e.addEventListener("closed",()=>{this.item.ariaExpanded="false",this.dispatchEvent(o.createActivateTypeaheadEvent()),this.dispatchEvent(l.createDeactivateItemsEvent()),e.ariaHidden="true"},{once:!0}),e.positioning==="document"&&(e.positioning="absolute"),e.quick=!0,e.hasOverflow=!0,e.anchorCorner=this.anchorCorner,e.menuCorner=this.menuCorner,e.anchorElement=this.item,e.defaultFocus="first-item",e.removeAttribute("aria-hidden"),e.skipRestoreFocus=!1;const i=e.open;if(e.show(),this.item.ariaExpanded="true",this.item.ariaHasPopup="menu",e.id&&this.item.setAttribute("aria-controls",e.id),this.dispatchEvent(l.createDeactivateItemsEvent()),this.dispatchEvent(o.createDeactivateTypeaheadEvent()),this.item.selected=!0,!i){let s=d=>{};const r=new Promise(d=>{s=d});e.addEventListener("opened",s,{once:!0}),await r}}async close(){const e=this.menu;if(!e||!e.open)return;this.dispatchEvent(o.createActivateTypeaheadEvent()),e.quick=!0,e.close(),this.dispatchEvent(l.createDeactivateItemsEvent());let i=r=>{};const s=new Promise(r=>{i=r});e.addEventListener("closed",i,{once:!0}),await s}onSlotchange(){var i;if(!this.item)return;this.item.ariaExpanded="false",this.item.ariaHasPopup="menu",(i=this.menu)!=null&&i.id&&this.item.setAttribute("aria-controls",this.menu.id),this.item.keepOpen=!0;const e=this.menu;e&&(e.isSubmenu=!0,e.ariaHidden="true")}onClick(){this.show()}async onKeydown(e){const i=this.isSubmenuOpenKey(e.code);if(e.defaultPrevented)return;const s=i&&(o.NavigableKey.LEFT===e.code||o.NavigableKey.RIGHT===e.code);if((e.code===o.SelectionKey.SPACE||s)&&(e.preventDefault(),s&&e.stopPropagation()),!i)return;const r=this.menu;if(!r)return;const d=r.items,y=l.getFirstActivatableItem(d);if(y){await this.show(),y.tabIndex=0,y.focus();return}}onCloseSubmenu(e){const{itemPath:i,reason:s}=e.detail;if(i.push(this.item),this.dispatchEvent(o.createActivateTypeaheadEvent()),s.kind===o.CloseReason.KEYDOWN&&s.key===o.KeydownCloseKey.ESCAPE){e.stopPropagation(),this.item.dispatchEvent(l.createRequestActivationEvent());return}this.dispatchEvent(l.createDeactivateItemsEvent())}async onSubMenuKeydown(e){var r;if(e.defaultPrevented)return;const{close:i,keyCode:s}=this.isSubmenuCloseKey(e.code);i&&(e.preventDefault(),(s===o.NavigableKey.LEFT||s===o.NavigableKey.RIGHT)&&e.stopPropagation(),await this.close(),l.deactivateActiveItem(this.menu.items),(r=this.item)==null||r.focus(),this.item.tabIndex=0,this.item.focus())}isSubmenuOpenKey(e){const s=getComputedStyle(this).direction==="rtl"?o.NavigableKey.LEFT:o.NavigableKey.RIGHT;switch(e){case s:case o.SelectionKey.SPACE:case o.SelectionKey.ENTER:return!0;default:return!1}}isSubmenuCloseKey(e){const s=getComputedStyle(this).direction==="rtl"?o.NavigableKey.RIGHT:o.NavigableKey.LEFT;switch(e){case s:case o.KeydownCloseKey.ESCAPE:return{close:!0,keyCode:e};default:return{close:!1}}}};t.__decorate([t.n({attribute:"anchor-corner"})],u.prototype,"anchorCorner",void 0);t.__decorate([t.n({attribute:"menu-corner"})],u.prototype,"menuCorner",void 0);t.__decorate([t.n({type:Number,attribute:"hover-open-delay"})],u.prototype,"hoverOpenDelay",void 0);t.__decorate([t.n({type:Number,attribute:"hover-close-delay"})],u.prototype,"hoverCloseDelay",void 0);t.__decorate([t.n({type:Boolean,reflect:!0,attribute:"md-sub-menu"})],u.prototype,"isSubMenu",void 0);t.__decorate([p.o({slot:"item",flatten:!0})],u.prototype,"items",void 0);t.__decorate([p.o({slot:"menu",flatten:!0})],u.prototype,"menus",void 0);/** ?disabled=${this.disabled}></md-ripple>
<md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
<svg class="icon" viewBox="0 0 20 20">
<mask id="${this.maskId}">
<rect width="100%" height="100%" fill="white" />
<circle cx="10" cy="10" r="8" fill="black" />
</mask>
<circle
class="outer circle"
cx="10"
cy="10"
r="10"
mask="url(#${this.maskId})" />
<circle class="inner circle" cx="10" cy="10" r="5" />
</svg>
<div class="touch-target"></div>
</div>
`}updated(){this[b.internals].ariaChecked=String(this.checked)}async handleClick(e){this.disabled||(await 0,!e.defaultPrevented&&(q.isActivationClick(e)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(e){await 0,!(e.key!==" "||e.defaultPrevented)&&this.click()}[(x=y,k.getFormValue)](){return this.checked?this.value:null}[k.getFormState](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(e){this.checked=e==="true"}[f.createValidator](){return new S(()=>this.selectionController?this.selectionController.controls:[this])}[f.getValidityAnchor](){return this.container}};o.__decorate([o.n({type:Boolean})],u.prototype,"checked",null);o.__decorate([o.n({type:Boolean})],u.prototype,"required",void 0);o.__decorate([o.n()],u.prototype,"value",void 0);o.__decorate([I.e$1(".container")],u.prototype,"container",void 0);/**
* @license * @license
* Copyright 2024 Google LLC * Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/const _=t.i$1`:host{position:relative;display:flex;flex-direction:column} */const _=o.i$1`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
`;/** `;/**
* @license * @license
* Copyright 2023 Google LLC * Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/let m=class extends u{};m.styles=[_];m=t.__decorate([t.t$1("md-sub-menu")],m);const S=f.o({react:b,tagName:"md-menu",elementClass:o.MdMenu}),x=f.o({react:b,tagName:"md-menu-item",elementClass:h,events:{"close-menu":"onCloseMenu"}}),M=f.o({react:b,tagName:"md-sub-menu",elementClass:m}),I=a=>v.jsx(S,{...a}),$=a=>v.jsx(M,{...a}),w=a=>v.jsx(x,{...a});exports.Menu=I;exports.MenuItem=w;exports.SubMenu=$; */let v=class extends u{};v.styles=[_];v=o.__decorate([o.t$1("md-radio")],v);const F=E.o({react:C,tagName:"md-radio",elementClass:v}),T=l=>{const{checked:e,value:i,required:t,disabled:r,name:a,ariaLabel:m,className:c,style:g,id:p,iconColor:h,selectedIconColor:s,iconSize:n,...d}=l;return w.jsx(F,{checked:e,value:i,required:t,disabled:r||!1,name:a,className:c,style:{...g,"--md-radio-icon-color":h||"var(--md-sys-on-surface-variant)","--md-radio-selected-icon-color":s||"var(--md-sys-color-primary)","--md-radio-icon-size":n||"20px"},id:p,"aria-label":m,...d})};exports.Radio=T;

623
dist/react-you-ui15.mjs vendored
View File

@ -1,411 +1,274 @@
import { jsx as E } from "react/jsx-runtime"; import { jsx as x } from "react/jsx-runtime";
import T from "react"; import w from "react";
import { o as S } from "./create-component-CVXl33PD.mjs"; import { o as C } from "./create-component-CVXl33PD.mjs";
import { M as I, s as R, C as M, c as b, a as k, N as l, S as g, b as O, K as x, d as A } from "./menuItemController-CeB921ip.mjs"; import { _ as h, n as y, r as E, x as I, c as R, a as S, b as A } from "./class-map-CwiboTfb.mjs";
import { r as $, _ as s, n as r, x as d, E as m, c as K, b as w, a as D } from "./class-map-CwiboTfb.mjs";
import "./ripple-pQcEjR05.mjs"; import "./ripple-pQcEjR05.mjs";
import { c as p, g as P, a as L, d as N } from "./item-CpL4zUlE.mjs"; import { a as q } from "./animation-DjClVFum.mjs";
import { a as F } from "./animation-DjClVFum.mjs"; import { i as L } from "./form-label-activation-ed0HgVsy.mjs";
import { o as f } from "./query-assigned-elements-DUhez03i.mjs"; import { V as $, m as F, c as z, g as D } from "./validator-DZt1_yHv.mjs";
import { n as H } from "./query-assigned-nodes-MKI2zKDb.mjs"; import { m as T, i as k } from "./element-internals-3IY9gE4L.mjs";
import { i as C, u as B } from "./static-DdXEOlS4.mjs"; import { m as V } from "./focusable-CDJoU7XD.mjs";
import { m as _ } from "./delegate-BXi1gVeU.mjs"; import { m as K, g as M, a as _ } from "./form-associated-CyYeHPMb.mjs";
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const G = _($);
class i extends G {
constructor() {
super(...arguments), this.disabled = !1, this.type = "menuitem", this.href = "", this.target = "", this.keepOpen = !1, this.selected = !1, this.menuItemController = new I(this, {
getHeadlineElements: () => this.headlineElements,
getSupportingTextElements: () => this.supportingTextElements,
getDefaultElements: () => this.defaultElements,
getInteractiveElement: () => this.listItemRoot
});
}
/**
* The text that is selectable via typeahead. If not set, defaults to the
* innerText of the item slotted into the `"headline"` slot.
*/
get typeaheadText() {
return this.menuItemController.typeaheadText;
}
set typeaheadText(e) {
this.menuItemController.setTypeaheadText(e);
}
render() {
return this.renderListItem(d`
<md-item>
<div slot="container">
${this.renderRipple()} ${this.renderFocusRing()}
</div>
<slot name="start" slot="start"></slot>
<slot name="end" slot="end"></slot>
${this.renderBody()}
</md-item>
`);
}
/**
* Renders the root list item.
*
* @param content the child content of the list item.
*/
renderListItem(e) {
const o = this.type === "link";
let t;
switch (this.menuItemController.tagName) {
case "a":
t = C`a`;
break;
case "button":
t = C`button`;
break;
default:
case "li":
t = C`li`;
break;
}
const n = o && this.target ? this.target : m;
return B`
<${t}
id="item"
tabindex=${this.disabled && !o ? -1 : 0}
role=${this.menuItemController.role}
aria-label=${this.ariaLabel || m}
aria-selected=${this.ariaSelected || m}
aria-checked=${this.ariaChecked || m}
aria-expanded=${this.ariaExpanded || m}
aria-haspopup=${this.ariaHasPopup || m}
class="list-item ${K(this.getRenderClasses())}"
href=${this.href || m}
target=${n}
@click=${this.menuItemController.onClick}
@keydown=${this.menuItemController.onKeydown}
>${e}</${t}>
`;
}
/**
* Handles rendering of the ripple element.
*/
renderRipple() {
return d` <md-ripple
part="ripple"
for="item"
?disabled=${this.disabled}></md-ripple>`;
}
/**
* Handles rendering of the focus ring.
*/
renderFocusRing() {
return d` <md-focus-ring
part="focus-ring"
for="item"
inward></md-focus-ring>`;
}
/**
* Classes applied to the list item root.
*/
getRenderClasses() {
return {
disabled: this.disabled,
selected: this.selected
};
}
/**
* Handles rendering the headline and supporting text.
*/
renderBody() {
return d`
<slot></slot>
<slot name="overline" slot="overline"></slot>
<slot name="headline" slot="headline"></slot>
<slot name="supporting-text" slot="supporting-text"></slot>
<slot
name="trailing-supporting-text"
slot="trailing-supporting-text"></slot>
`;
}
focus() {
var e;
(e = this.listItemRoot) == null || e.focus();
}
}
i.shadowRootOptions = {
...$.shadowRootOptions,
delegatesFocus: !0
};
s([
r({ type: Boolean, reflect: !0 })
], i.prototype, "disabled", void 0);
s([
r()
], i.prototype, "type", void 0);
s([
r()
], i.prototype, "href", void 0);
s([
r()
], i.prototype, "target", void 0);
s([
r({ type: Boolean, attribute: "keep-open" })
], i.prototype, "keepOpen", void 0);
s([
r({ type: Boolean })
], i.prototype, "selected", void 0);
s([
F(".list-item")
], i.prototype, "listItemRoot", void 0);
s([
f({ slot: "headline" })
], i.prototype, "headlineElements", void 0);
s([
f({ slot: "supporting-text" })
], i.prototype, "supportingTextElements", void 0);
s([
H({ slot: "" })
], i.prototype, "defaultElements", void 0);
s([
r({ attribute: "typeahead-text" })
], i.prototype, "typeaheadText", null);
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
let c = class extends i {
};
c.styles = [R];
c = s([
w("md-menu-item")
], c);
/** /**
* @license * @license
* Copyright 2023 Google LLC * Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/ */
let u = class extends $ { class B extends $ {
get item() { computeValidity(e) {
return this.items[0] ?? null; this.radioElement || (this.radioElement = document.createElement("input"), this.radioElement.type = "radio", this.radioElement.name = "group");
} let i = !1, t = !1;
get menu() { for (const { checked: o, required: r } of e)
return this.menus[0] ?? null; r && (i = !0), o && (t = !0);
} return this.radioElement.checked = t, this.radioElement.required = i, {
constructor() { validity: {
super(), this.anchorCorner = M.START_END, this.menuCorner = M.START_START, this.hoverOpenDelay = 400, this.hoverCloseDelay = 400, this.isSubMenu = !0, this.previousOpenTimeout = 0, this.previousCloseTimeout = 0, this.onMouseenter = () => { valueMissing: i && !t
var e; },
clearTimeout(this.previousOpenTimeout), clearTimeout(this.previousCloseTimeout), !((e = this.menu) != null && e.open) && (this.hoverOpenDelay ? this.previousOpenTimeout = setTimeout(() => { validationMessage: this.radioElement.validationMessage
this.show();
}, this.hoverOpenDelay) : this.show());
}, this.onMouseleave = () => {
clearTimeout(this.previousCloseTimeout), clearTimeout(this.previousOpenTimeout), this.hoverCloseDelay ? this.previousCloseTimeout = setTimeout(() => {
this.close();
}, this.hoverCloseDelay) : this.close();
}, this.addEventListener("mouseenter", this.onMouseenter), this.addEventListener("mouseleave", this.onMouseleave);
}
render() {
return d`
<slot
name="item"
@click=${this.onClick}
@keydown=${this.onKeydown}
@slotchange=${this.onSlotchange}>
</slot>
<slot
name="menu"
@keydown=${this.onSubMenuKeydown}
@close-menu=${this.onCloseSubmenu}
@slotchange=${this.onSlotchange}>
</slot>
`;
}
firstUpdated() {
this.onSlotchange();
}
/**
* Shows the submenu.
*/
async show() {
const e = this.menu;
if (!e || e.open)
return;
e.addEventListener("closed", () => {
this.item.ariaExpanded = "false", this.dispatchEvent(b()), this.dispatchEvent(p()), e.ariaHidden = "true";
}, { once: !0 }), e.positioning === "document" && (e.positioning = "absolute"), e.quick = !0, e.hasOverflow = !0, e.anchorCorner = this.anchorCorner, e.menuCorner = this.menuCorner, e.anchorElement = this.item, e.defaultFocus = "first-item", e.removeAttribute("aria-hidden"), e.skipRestoreFocus = !1;
const o = e.open;
if (e.show(), this.item.ariaExpanded = "true", this.item.ariaHasPopup = "menu", e.id && this.item.setAttribute("aria-controls", e.id), this.dispatchEvent(p()), this.dispatchEvent(k()), this.item.selected = !0, !o) {
let t = (h) => {
}; };
const n = new Promise((h) => {
t = h;
});
e.addEventListener("opened", t, { once: !0 }), await n;
} }
} equals(e, i) {
/** if (e.length !== i.length)
* Closes the submenu. return !1;
*/ for (let t = 0; t < e.length; t++) {
async close() { const o = e[t], r = i[t];
const e = this.menu; if (o.checked !== r.checked || o.required !== r.required)
if (!e || !e.open)
return;
this.dispatchEvent(b()), e.quick = !0, e.close(), this.dispatchEvent(p());
let o = (n) => {
};
const t = new Promise((n) => {
o = n;
});
e.addEventListener("closed", o, { once: !0 }), await t;
}
onSlotchange() {
var o;
if (!this.item)
return;
this.item.ariaExpanded = "false", this.item.ariaHasPopup = "menu", (o = this.menu) != null && o.id && this.item.setAttribute("aria-controls", this.menu.id), this.item.keepOpen = !0;
const e = this.menu;
e && (e.isSubmenu = !0, e.ariaHidden = "true");
}
onClick() {
this.show();
}
/**
* On item keydown handles opening the submenu.
*/
async onKeydown(e) {
const o = this.isSubmenuOpenKey(e.code);
if (e.defaultPrevented)
return;
const t = o && (l.LEFT === e.code || l.RIGHT === e.code);
if ((e.code === g.SPACE || t) && (e.preventDefault(), t && e.stopPropagation()), !o)
return;
const n = this.menu;
if (!n)
return;
const h = n.items, v = P(h);
if (v) {
await this.show(), v.tabIndex = 0, v.focus();
return;
}
}
onCloseSubmenu(e) {
const { itemPath: o, reason: t } = e.detail;
if (o.push(this.item), this.dispatchEvent(b()), t.kind === O.KEYDOWN && t.key === x.ESCAPE) {
e.stopPropagation(), this.item.dispatchEvent(L());
return;
}
this.dispatchEvent(p());
}
async onSubMenuKeydown(e) {
var n;
if (e.defaultPrevented)
return;
const { close: o, keyCode: t } = this.isSubmenuCloseKey(e.code);
o && (e.preventDefault(), (t === l.LEFT || t === l.RIGHT) && e.stopPropagation(), await this.close(), N(this.menu.items), (n = this.item) == null || n.focus(), this.item.tabIndex = 0, this.item.focus());
}
/**
* Determines whether the given KeyboardEvent code is one that should open
* the submenu. This is RTL-aware. By default, left, right, space, or enter.
*
* @param code The native KeyboardEvent code.
* @return Whether or not the key code should open the submenu.
*/
isSubmenuOpenKey(e) {
const t = getComputedStyle(this).direction === "rtl" ? l.LEFT : l.RIGHT;
switch (e) {
case t:
case g.SPACE:
case g.ENTER:
return !0;
default:
return !1; return !1;
} }
return !0;
}
copy(e) {
return e.map(({ checked: i, required: t }) => ({
checked: i,
required: t
}));
}
} }
/** /**
* Determines whether the given KeyboardEvent code is one that should close * @license
* the submenu. This is RTL-aware. By default right, left, or escape. * Copyright 2022 Google LLC
* * SPDX-License-Identifier: Apache-2.0
* @param code The native KeyboardEvent code.
* @return Whether or not the key code should close the submenu.
*/ */
isSubmenuCloseKey(e) { class O {
const t = getComputedStyle(this).direction === "rtl" ? l.RIGHT : l.LEFT; /**
switch (e) { * All single selection elements in the host element's root with the same
case t: * `name` attribute, including the host element.
case x.ESCAPE: */
return { close: !0, keyCode: e }; get controls() {
default: const e = this.host.getAttribute("name");
return { close: !1 }; return !e || !this.root || !this.host.isConnected ? [this.host] : Array.from(this.root.querySelectorAll(`[name="${e}"]`));
} }
constructor(e) {
this.host = e, this.focused = !1, this.root = null, this.handleFocusIn = () => {
this.focused = !0, this.updateTabIndices();
}, this.handleFocusOut = () => {
this.focused = !1, this.updateTabIndices();
}, this.handleKeyDown = (i) => {
const t = i.key === "ArrowDown", o = i.key === "ArrowUp", r = i.key === "ArrowLeft", u = i.key === "ArrowRight";
if (!r && !u && !t && !o)
return;
const a = this.controls;
if (!a.length)
return;
i.preventDefault();
const p = getComputedStyle(this.host).direction === "rtl" ? r || t : u || t, l = a.indexOf(this.host);
let s = p ? l + 1 : l - 1;
for (; s !== l; ) {
s >= a.length ? s = 0 : s < 0 && (s = a.length - 1);
const c = a[s];
if (c.hasAttribute("disabled")) {
p ? s++ : s--;
continue;
}
for (const n of a)
n !== c && (n.checked = !1, n.tabIndex = -1, n.blur());
c.checked = !0, c.tabIndex = 0, c.focus(), c.dispatchEvent(new Event("change", { bubbles: !0 }));
break;
} }
}; };
s([ }
r({ attribute: "anchor-corner" }) hostConnected() {
], u.prototype, "anchorCorner", void 0); this.root = this.host.getRootNode(), this.host.addEventListener("keydown", this.handleKeyDown), this.host.addEventListener("focusin", this.handleFocusIn), this.host.addEventListener("focusout", this.handleFocusOut), this.host.checked && this.uncheckSiblings(), this.updateTabIndices();
s([ }
r({ attribute: "menu-corner" }) hostDisconnected() {
], u.prototype, "menuCorner", void 0); this.host.removeEventListener("keydown", this.handleKeyDown), this.host.removeEventListener("focusin", this.handleFocusIn), this.host.removeEventListener("focusout", this.handleFocusOut), this.updateTabIndices(), this.root = null;
s([ }
r({ type: Number, attribute: "hover-open-delay" }) /**
], u.prototype, "hoverOpenDelay", void 0); * Should be called whenever the host's `checked` property changes
s([ * synchronously.
r({ type: Number, attribute: "hover-close-delay" }) */
], u.prototype, "hoverCloseDelay", void 0); handleCheckedChange() {
s([ this.host.checked && (this.uncheckSiblings(), this.updateTabIndices());
r({ type: Boolean, reflect: !0, attribute: "md-sub-menu" }) }
], u.prototype, "isSubMenu", void 0); uncheckSiblings() {
s([ for (const e of this.controls)
f({ slot: "item", flatten: !0 }) e !== this.host && (e.checked = !1);
], u.prototype, "items", void 0); }
s([ /**
f({ slot: "menu", flatten: !0 }) * Updates the `tabindex` of the host and its siblings.
], u.prototype, "menus", void 0); */
updateTabIndices() {
const e = this.controls, i = e.find((t) => t.checked);
if (i || this.focused) {
const t = i || this.host;
t.tabIndex = 0;
for (const o of e)
o !== t && (o.tabIndex = -1);
return;
}
for (const t of e)
t.tabIndex = 0;
}
}
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
var g;
const v = Symbol("checked");
let N = 0;
const U = F(K(T(V(E))));
let m = class extends U {
/**
* Whether or not the radio is selected.
*/
get checked() {
return this[v];
}
set checked(e) {
const i = this.checked;
i !== e && (this[v] = e, this.requestUpdate("checked", i), this.selectionController.handleCheckedChange());
}
constructor() {
super(), this.maskId = `cutout${++N}`, this[g] = !1, this.required = !1, this.value = "on", this.selectionController = new O(this), this.addController(this.selectionController), this[k].role = "radio", this.addEventListener("click", this.handleClick.bind(this)), this.addEventListener("keydown", this.handleKeydown.bind(this));
}
render() {
const e = { checked: this.checked };
return I`
<div class="container ${R(e)}" aria-hidden="true">
<md-ripple
part="ripple"
.control=${this}
?disabled=${this.disabled}></md-ripple>
<md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
<svg class="icon" viewBox="0 0 20 20">
<mask id="${this.maskId}">
<rect width="100%" height="100%" fill="white" />
<circle cx="10" cy="10" r="8" fill="black" />
</mask>
<circle
class="outer circle"
cx="10"
cy="10"
r="10"
mask="url(#${this.maskId})" />
<circle class="inner circle" cx="10" cy="10" r="5" />
</svg>
<div class="touch-target"></div>
</div>
`;
}
updated() {
this[k].ariaChecked = String(this.checked);
}
async handleClick(e) {
this.disabled || (await 0, !e.defaultPrevented && (L(e) && this.focus(), this.checked = !0, this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }))));
}
async handleKeydown(e) {
await 0, !(e.key !== " " || e.defaultPrevented) && this.click();
}
[(g = v, M)]() {
return this.checked ? this.value : null;
}
[_]() {
return String(this.checked);
}
formResetCallback() {
this.checked = this.hasAttribute("checked");
}
formStateRestoreCallback(e) {
this.checked = e === "true";
}
[z]() {
return new B(() => this.selectionController ? this.selectionController.controls : [this]);
}
[D]() {
return this.container;
}
};
h([
y({ type: Boolean })
], m.prototype, "checked", null);
h([
y({ type: Boolean })
], m.prototype, "required", void 0);
h([
y()
], m.prototype, "value", void 0);
h([
q(".container")
], m.prototype, "container", void 0);
/** /**
* @license * @license
* Copyright 2024 Google LLC * Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/ */
const q = D`:host{position:relative;display:flex;flex-direction:column} const P = S`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
`; `;
/** /**
* @license * @license
* Copyright 2023 Google LLC * Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/ */
let y = class extends u { let f = class extends m {
}; };
y.styles = [q]; f.styles = [P];
y = s([ f = h([
w("md-sub-menu") A("md-radio")
], y); ], f);
const W = S({ const j = C({
react: T, react: w,
tagName: "md-menu", tagName: "md-radio",
elementClass: A elementClass: f
}), j = S({ }), re = (d) => {
react: T, const {
tagName: "md-menu-item", checked: e,
elementClass: c, value: i,
events: { required: t,
"close-menu": "onCloseMenu" disabled: o,
} name: r,
}), U = S({ ariaLabel: u,
react: T, className: a,
tagName: "md-sub-menu", style: b,
elementClass: y id: p,
}), le = (a) => /* @__PURE__ */ E( iconColor: l,
W, selectedIconColor: s,
iconSize: c,
...n
} = d;
return /* @__PURE__ */ x(
j,
{ {
...a checked: e,
value: i,
required: t,
disabled: o || !1,
name: r,
className: a,
style: {
...b,
"--md-radio-icon-color": l || "var(--md-sys-on-surface-variant)",
"--md-radio-selected-icon-color": s || "var(--md-sys-color-primary)",
"--md-radio-icon-size": c || "20px"
},
id: p,
"aria-label": u,
...n
} }
), ue = (a) => /* @__PURE__ */ E( );
U, };
{
...a
}
), me = (a) => /* @__PURE__ */ E(j, { ...a });
export { export {
le as Menu, re as Radio
me as MenuItem,
ue as SubMenu
}; };

127
dist/react-you-ui16.js vendored
View File

File diff suppressed because one or more lines are too long

864
dist/react-you-ui16.mjs vendored
View File

File diff suppressed because one or more lines are too long

119
dist/react-you-ui17.js vendored
View File

File diff suppressed because one or more lines are too long

695
dist/react-you-ui17.mjs vendored
View File

File diff suppressed because one or more lines are too long

103
dist/react-you-ui18.js vendored
View File

File diff suppressed because one or more lines are too long

385
dist/react-you-ui18.mjs vendored
View File

File diff suppressed because one or more lines are too long

91
dist/react-you-ui19.js vendored
View File

File diff suppressed because one or more lines are too long

313
dist/react-you-ui19.mjs vendored
View File

File diff suppressed because one or more lines are too long

77
dist/react-you-ui20.js vendored
View File

File diff suppressed because one or more lines are too long

449
dist/react-you-ui20.mjs vendored
View File

File diff suppressed because one or more lines are too long

110
dist/react-you-ui21.js vendored
View File

File diff suppressed because one or more lines are too long

593
dist/react-you-ui21.mjs vendored
View File

File diff suppressed because one or more lines are too long

180
dist/react-you-ui22.js vendored
View File

File diff suppressed because one or more lines are too long

835
dist/react-you-ui22.mjs vendored
View File

File diff suppressed because one or more lines are too long

279
dist/react-you-ui23.js vendored
View File

File diff suppressed because one or more lines are too long

1183
dist/react-you-ui23.mjs vendored
View File

File diff suppressed because one or more lines are too long

284
dist/react-you-ui24.js vendored
View File

File diff suppressed because one or more lines are too long

990
dist/react-you-ui24.mjs vendored
View File

File diff suppressed because one or more lines are too long

242
dist/react-you-ui25.js vendored
View File

File diff suppressed because one or more lines are too long

778
dist/react-you-ui25.mjs vendored
View File

File diff suppressed because one or more lines are too long

208
dist/react-you-ui26.js vendored
View File

File diff suppressed because one or more lines are too long

1657
dist/react-you-ui26.mjs vendored
View File

File diff suppressed because one or more lines are too long

18
dist/react-you-ui27.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1047
dist/react-you-ui27.mjs vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
dist/react-you-ui4.js vendored
View File

@ -1 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("./react-you-ui26.js"),n=({children:e,style:o,...r})=>(console.log(r,o),s.jsx(c.Box,{...r,style:{borderRadius:"28px",backgroundColor:"var(--md-sys-color-surface)",color:"var(--md-sys-color-on-surface)",padding:"18px",display:"flex",...o},children:e}));exports.Paper=n; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("./react-you-ui27.js"),n=({children:e,style:o,...r})=>(console.log(r,o),s.jsx(c.Box,{...r,style:{borderRadius:"28px",backgroundColor:"var(--md-sys-color-surface)",color:"var(--md-sys-color-on-surface)",padding:"18px",display:"flex",...o},children:e}));exports.Paper=n;

2
dist/react-you-ui4.mjs vendored
View File

@ -1,5 +1,5 @@
import { jsx as a } from "react/jsx-runtime"; import { jsx as a } from "react/jsx-runtime";
import { Box as c } from "./react-you-ui26.mjs"; import { Box as c } from "./react-you-ui27.mjs";
const l = ({ children: s, style: o, ...r }) => (console.log(r, o), /* @__PURE__ */ a( const l = ({ children: s, style: o, ...r }) => (console.log(r, o), /* @__PURE__ */ a(
c, c,
{ {

2
dist/react-you-ui9.js vendored
View File

@ -1 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("./react-you-ui26.js"),i=e=>{const{className:t,id:n,children:r,style:s,...o}=e;return a.jsx(c.Box,{className:t,id:n,style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 16px",backgroundColor:"transparent",...s},...o,children:r})};exports.AppBar=i; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=({orientation:r="horizontal",className:e="",style:i,color:t="var(--md-sys-color-outline-variant)",...o})=>{const a={backgroundColor:t,...r==="horizontal"?{width:"100%",height:"1px",margin:"8px 0"}:{width:"1px",height:"100%",margin:"0 8px"},...i};return s.jsx("div",{role:"separator","aria-orientation":r,className:`md-divider ${e}`,style:a,...o})};exports.Divider=n;

42
dist/react-you-ui9.mjs vendored
View File

@ -1,25 +1,29 @@
import { jsx as p } from "react/jsx-runtime"; import { jsx as s } from "react/jsx-runtime";
import { Box as a } from "./react-you-ui26.mjs"; const d = ({ orientation: r = "horizontal", className: i = "", style: o, color: t = "var(--md-sys-color-outline-variant)", ...a }) => {
const c = (e) => { const e = {
const { className: t, id: r, children: n, style: s, ...o } = e; backgroundColor: t,
return /* @__PURE__ */ p( ...r === "horizontal" ? {
a, width: "100%",
{ height: "1px",
className: t, margin: "8px 0"
id: r, } : {
style: { width: "1px",
display: "flex", height: "100%",
alignItems: "center", margin: "0 8px"
justifyContent: "space-between",
padding: "16px 16px",
backgroundColor: "transparent",
...s
}, },
...o, ...o
children: n };
return /* @__PURE__ */ s(
"div",
{
role: "separator",
"aria-orientation": r,
className: `md-divider ${i}`,
style: e,
...a
} }
); );
}; };
export { export {
c as AppBar d as Divider
}; };

12
dist/src/components/Divider.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import { default as React } from 'react';
import { AriaProps } from '../types/aria';
type DividerProps = AriaProps & {
orientation?: 'horizontal' | 'vertical';
className?: string;
style?: React.CSSProperties;
id?: string;
color?: string;
};
export declare const Divider: ({ orientation, className, style, color, ...props }: DividerProps) => React.JSX.Element;
export {};

38
src/components/Divider.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import { AriaProps } from '../types/aria';
type DividerProps = AriaProps & {
orientation?: 'horizontal' | 'vertical';
className?: string;
style?: React.CSSProperties;
id?: string;
color?: string;
};
export const Divider = ({ orientation = 'horizontal', className = '', style, color = 'var(--md-sys-color-outline-variant)', ...props }: DividerProps) => {
const baseStyles: React.CSSProperties = {
backgroundColor: color,
...(orientation === 'horizontal'
? {
width: '100%',
height: '1px',
margin: '8px 0',
}
: {
width: '1px',
height: '100%',
margin: '0 8px',
}),
...style,
};
return (
<div
role="separator"
aria-orientation={orientation}
className={`md-divider ${className}`}
style={baseStyles}
{...props}
/>
);
};