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

Link component

This commit is contained in:
OfficialDakari 2025-04-03 10:51:44 +05:00
parent 4f329ae859
commit 331a9f6c3b
56 changed files with 8485 additions and 8402 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 n=require("./react-you-ui21.js"),s=require("./react-you-ui23.js"),i=require("./react-you-ui9.js"),c=require("./react-you-ui13.js"),p=require("./react-you-ui22.js"),u=require("./react-you-ui10.js"),a=require("./react-you-ui15.js"),m=require("./react-you-ui11.js"),h=require("./react-you-ui16.js"),l=require("./react-you-ui25.js"),q=require("./react-you-ui5.js"),_=require("./react-you-ui20.js"),e=require("./react-you-ui24.js"),t=require("./react-you-ui18.js"),r=require("./react-you-ui19.js"),B=require("./react-you-ui17.js"),T=require("./react-you-ui14.js"),d=require("./react-you-ui6.js"),C=require("./react-you-ui7.js"),F=require("./react-you-ui8.js"),o=require("./react-you-ui3.js"),b=require("./react-you-ui12.js");exports.TextField=n.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=r.Tab;exports.Tabs=r.Tabs;exports.CircularProgress=B.CircularProgress;exports.Menu=T.Menu;exports.Paper=d.Paper;exports.FormLabel=C.FormLabel;exports.AppBar=F.AppBar;exports.ThemeProvider=o.ThemeProvider;exports.usePalette=o.usePalette;exports.useTheme=o.useTheme;exports.createTheme=b.createTheme; "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;

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

131
dist/react-you-ui12.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-ui12.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-ui13.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-ui13.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-ui14.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-ui14.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-ui15.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load Diff

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

@ -1,98 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("./string_utils-Bad7L8P5.js"),l=require("react"),y=require("./react-you-ui4.js");;/* empty css */const n=l.createContext(void 0);function d({children:o,theme:s,scheme:e}){return a.jsxs(n.Provider,{value:s,children:[a.jsx("style",{children:` "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),d=require("react");;/* empty css */const p=({children:r,variant:s="span",className:a,color:t="",align:i,style:n,noWrap:l,id:y,size:m="auto",htmlFor:f})=>{const o=d.useMemo(()=>t==="primary"?"var(--md-sys-color-primary)":t==="secondary"?"var(--md-sys-color-secondary)":t==="tertiary"?"var(--md-sys-color-tertiary)":t==="error"?"var(--md-sys-color-error)":t==="on-primary"?"var(--md-sys-color-on-primary)":t==="on-secondary"?"var(--md-sys-color-on-secondary)":t==="on-tertiary"?"var(--md-sys-color-on-tertiary)":t==="on-error"?"var(--md-sys-color-on-error)":t==="on-surface"?"var(--md-sys-color-on-surface)":t==="scrim"?"var(--md-sys-color-scrim)":t==="outline"?"var(--md-sys-color-outline)":t==="outline-variant"?"var(--md-sys-color-outline-variant)":t,[t]),e=d.useMemo(()=>{if(m==="auto")return{h1:"large",h2:"large",h3:"medium",h4:"medium",h5:"small",h6:"small",p:"large",span:"large",label:"large"}[s];if(m==="small")return"small";if(m==="medium")return"medium";if(m==="large")return"large"},[m]);return s==="h1"?h.jsx("h1",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h2"?h.jsx("h2",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h3"?h.jsx("h3",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h4"?h.jsx("h4",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h5"?h.jsx("h5",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h6"?h.jsx("h6",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="p"?h.jsx("p",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-body-${e}-weight)`,fontSize:`var(--md-sys-typescale-body-${e}-size)`,lineHeight:`var(--md-sys-typescale-body-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-body-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="span"?h.jsx("span",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-body-${e}-weight)`,fontSize:`var(--md-sys-typescale-body-${e}-size)`,lineHeight:`var(--md-sys-typescale-body-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-body-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="label"?h.jsx("label",{htmlFor:f,className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-label-${e}-weight)`,fontSize:`var(--md-sys-typescale-label-${e}-size)`,lineHeight:`var(--md-sys-typescale-label-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-label-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):null};exports.Typography=p;
body {
--md-ref-typeface-brand: 'Roboto Flex';
--md-ref-typeface-plain: 'Roboto Flex';
--md-sys-color-primary: ${r.hexFromArgb(s.schemes[e].primary)};
--md-sys-color-primary-container: ${r.hexFromArgb(s.schemes[e].primaryContainer)};
--md-sys-color-secondary: ${r.hexFromArgb(s.schemes[e].secondary)};
--md-sys-color-secondary-container: ${r.hexFromArgb(s.schemes[e].secondaryContainer)};
--md-sys-color-tertiary: ${r.hexFromArgb(s.schemes[e].tertiary)};
--md-sys-color-tertiary-container: ${r.hexFromArgb(s.schemes[e].tertiaryContainer)};
--md-sys-color-error: ${r.hexFromArgb(s.schemes[e].error)};
--md-sys-color-error-container: ${r.hexFromArgb(s.schemes[e].errorContainer)};
--md-sys-color-background: ${r.hexFromArgb(s.schemes[e].background)};
--md-sys-color-surface: ${r.hexFromArgb(s.schemes[e].surface)};
--md-sys-color-surface-bright: ${r.hexFromArgb(s.schemes[e].surface)};
--md-sys-color-surface-dim: ${r.hexFromArgb(s.schemes[e].surface)};
--md-sys-color-surface-container: ${r.hexFromArgb(s.schemes[e].surface)};
--md-sys-color-surface-container-lowest: ${r.hexFromArgb(s.schemes[e].surface)};
--md-sys-color-surface-container-low: ${r.hexFromArgb(s.schemes[e].surfaceVariant)};
--md-sys-color-surface-container-high: ${r.hexFromArgb(s.schemes[e].surfaceVariant)};
--md-sys-color-surface-container-highest: ${r.hexFromArgb(s.schemes[e].surfaceVariant)};
--md-sys-color-outline: ${r.hexFromArgb(s.schemes[e].outline)};
--md-sys-color-outline-variant: ${r.hexFromArgb(s.schemes[e].outlineVariant)};
--md-sys-color-scrim: ${r.hexFromArgb(s.schemes[e].scrim)};
--md-sys-color-shadow: ${r.hexFromArgb(s.schemes[e].shadow)};
--md-sys-color-on-surface: ${r.hexFromArgb(s.schemes[e].onSurface)};
--md-sys-color-on-surface-variant: ${r.hexFromArgb(s.schemes[e].onSurfaceVariant)};
--md-sys-color-on-surface-bright: ${r.hexFromArgb(s.schemes[e].onSurface)};
--md-sys-color-on-surface-dim: ${r.hexFromArgb(s.schemes[e].onSurface)};
--md-sys-color-background: ${r.hexFromArgb(s.schemes[e].background)};
--md-sys-color-background-variant: ${r.hexFromArgb(s.schemes[e].surface)};
--md-sys-color-on-primary: ${r.hexFromArgb(s.schemes[e].onPrimary)};
--md-sys-color-on-primary-container: ${r.hexFromArgb(s.schemes[e].onPrimaryContainer)};
--md-sys-color-on-secondary: ${r.hexFromArgb(s.schemes[e].onSecondary)};
--md-sys-color-on-secondary-container: ${r.hexFromArgb(s.schemes[e].onSecondaryContainer)};
--md-sys-color-on-tertiary: ${r.hexFromArgb(s.schemes[e].onTertiary)};
--md-sys-color-on-tertiary-container: ${r.hexFromArgb(s.schemes[e].onTertiaryContainer)};
--md-sys-color-on-error: ${r.hexFromArgb(s.schemes[e].onError)};
--md-sys-color-on-error-container: ${r.hexFromArgb(s.schemes[e].onErrorContainer)};
--md-sys-color-on-background: ${r.hexFromArgb(s.schemes[e].onBackground)};
--md-sys-typescale-headline-small-font: 'Roboto Flex';
--md-sys-typescale-headline-medium-font: 'Roboto Flex';
--md-sys-typescale-headline-large-font: 'Roboto Flex';
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-medium-size: 32px;
--md-sys-typescale-headline-large-size: 40px;
--md-sys-typescale-headline-small-weight: 400;
--md-sys-typescale-headline-medium-weight: 400;
--md-sys-typescale-headline-large-weight: 400;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-medium-line-height: 40px;
--md-sys-typescale-headline-large-line-height: 48px;
--md-sys-typescale-body-small-font: 'Roboto Flex';
--md-sys-typescale-body-medium-font: 'Roboto Flex';
--md-sys-typescale-body-large-font: 'Roboto Flex';
--md-sys-typescale-body-small-size: 12px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-small-weight: 400;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-label-small-font: 'Roboto Flex';
--md-sys-typescale-label-medium-font: 'Roboto Flex';
--md-sys-typescale-label-large-font: 'Roboto Flex';
--md-sys-typescale-label-small-size: 12px;
--md-sys-typescale-label-medium-size: 14px;
--md-sys-typescale-label-large-size: 16px;
--md-sys-typescale-label-small-weight: 400;
--md-sys-typescale-label-medium-weight: 400;
--md-sys-typescale-label-large-weight: 400;
--md-sys-typescale-label-small-line-height: 16px;
--md-sys-typescale-label-medium-line-height: 20px;
--md-sys-typescale-label-large-line-height: 24px;
background-color: var(--md-sys-color-background);
color: var(--md-sys-color-on-background);
}
`}),o]})}function c(){const o=l.useContext(n);if(o===void 0)throw new Error("useTheme must be used within a ThemeProvider");return o}function i(){const o=c(),s=y.useScheme();return o.schemes[s]}exports.ThemeProvider=d;exports.usePalette=i;exports.useTheme=c;

292
dist/react-you-ui3.mjs vendored
View File

@ -1,124 +1,180 @@
import { jsxs as l, jsx as n } from "react/jsx-runtime"; import { jsx as h } from "react/jsx-runtime";
import { h as e } from "./string_utils-B4bsIQ5w.mjs"; import { useMemo as d } from "react";
import { createContext as c, useContext as y } from "react";
import { useScheme as d } from "./react-you-ui4.mjs";
/* empty css */ /* empty css */
const a = c(void 0); const v = ({ children: s, variant: r = "span", className: a, color: t = "", align: i, style: n, noWrap: l, id: y, size: m = "auto", htmlFor: f }) => {
function f({ children: r, theme: s, scheme: o }) { const o = d(() => t === "primary" ? "var(--md-sys-color-primary)" : t === "secondary" ? "var(--md-sys-color-secondary)" : t === "tertiary" ? "var(--md-sys-color-tertiary)" : t === "error" ? "var(--md-sys-color-error)" : t === "on-primary" ? "var(--md-sys-color-on-primary)" : t === "on-secondary" ? "var(--md-sys-color-on-secondary)" : t === "on-tertiary" ? "var(--md-sys-color-on-tertiary)" : t === "on-error" ? "var(--md-sys-color-on-error)" : t === "on-surface" ? "var(--md-sys-color-on-surface)" : t === "scrim" ? "var(--md-sys-color-scrim)" : t === "outline" ? "var(--md-sys-color-outline)" : t === "outline-variant" ? "var(--md-sys-color-outline-variant)" : t, [t]), e = d(() => {
return /* @__PURE__ */ l(a.Provider, { value: s, children: [ if (m === "auto")
/* @__PURE__ */ n("style", { children: ` return {
body { h1: "large",
h2: "large",
--md-ref-typeface-brand: 'Roboto Flex'; h3: "medium",
--md-ref-typeface-plain: 'Roboto Flex'; h4: "medium",
h5: "small",
--md-sys-color-primary: ${e(s.schemes[o].primary)}; h6: "small",
--md-sys-color-primary-container: ${e(s.schemes[o].primaryContainer)}; p: "large",
--md-sys-color-secondary: ${e(s.schemes[o].secondary)}; span: "large",
--md-sys-color-secondary-container: ${e(s.schemes[o].secondaryContainer)}; label: "large"
--md-sys-color-tertiary: ${e(s.schemes[o].tertiary)}; }[r];
--md-sys-color-tertiary-container: ${e(s.schemes[o].tertiaryContainer)}; if (m === "small") return "small";
--md-sys-color-error: ${e(s.schemes[o].error)}; if (m === "medium") return "medium";
--md-sys-color-error-container: ${e(s.schemes[o].errorContainer)}; if (m === "large") return "large";
--md-sys-color-background: ${e(s.schemes[o].background)}; }, [m]);
--md-sys-color-surface: ${e(s.schemes[o].surface)}; return r === "h1" ? /* @__PURE__ */ h(
--md-sys-color-surface-bright: ${e(s.schemes[o].surface)}; "h1",
--md-sys-color-surface-dim: ${e(s.schemes[o].surface)}; {
--md-sys-color-surface-container: ${e(s.schemes[o].surface)}; className: a,
--md-sys-color-surface-container-lowest: ${e(s.schemes[o].surface)}; style: {
--md-sys-color-surface-container-low: ${e(s.schemes[o].surfaceVariant)}; color: o,
--md-sys-color-surface-container-high: ${e(s.schemes[o].surfaceVariant)}; fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
--md-sys-color-surface-container-highest: ${e(s.schemes[o].surfaceVariant)}; fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
--md-sys-color-outline: ${e(s.schemes[o].outline)}; lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
--md-sys-color-outline-variant: ${e(s.schemes[o].outlineVariant)}; fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
--md-sys-color-scrim: ${e(s.schemes[o].scrim)}; textAlign: i,
--md-sys-color-shadow: ${e(s.schemes[o].shadow)}; whiteSpace: l ? "nowrap" : "normal",
--md-sys-color-on-surface: ${e(s.schemes[o].onSurface)}; ...n
--md-sys-color-on-surface-variant: ${e(s.schemes[o].onSurfaceVariant)}; },
--md-sys-color-on-surface-bright: ${e(s.schemes[o].onSurface)}; id: y,
--md-sys-color-on-surface-dim: ${e(s.schemes[o].onSurface)}; children: s
--md-sys-color-background: ${e(s.schemes[o].background)};
--md-sys-color-background-variant: ${e(s.schemes[o].surface)};
--md-sys-color-on-primary: ${e(s.schemes[o].onPrimary)};
--md-sys-color-on-primary-container: ${e(s.schemes[o].onPrimaryContainer)};
--md-sys-color-on-secondary: ${e(s.schemes[o].onSecondary)};
--md-sys-color-on-secondary-container: ${e(s.schemes[o].onSecondaryContainer)};
--md-sys-color-on-tertiary: ${e(s.schemes[o].onTertiary)};
--md-sys-color-on-tertiary-container: ${e(s.schemes[o].onTertiaryContainer)};
--md-sys-color-on-error: ${e(s.schemes[o].onError)};
--md-sys-color-on-error-container: ${e(s.schemes[o].onErrorContainer)};
--md-sys-color-on-background: ${e(s.schemes[o].onBackground)};
--md-sys-typescale-headline-small-font: 'Roboto Flex';
--md-sys-typescale-headline-medium-font: 'Roboto Flex';
--md-sys-typescale-headline-large-font: 'Roboto Flex';
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-medium-size: 32px;
--md-sys-typescale-headline-large-size: 40px;
--md-sys-typescale-headline-small-weight: 400;
--md-sys-typescale-headline-medium-weight: 400;
--md-sys-typescale-headline-large-weight: 400;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-medium-line-height: 40px;
--md-sys-typescale-headline-large-line-height: 48px;
--md-sys-typescale-body-small-font: 'Roboto Flex';
--md-sys-typescale-body-medium-font: 'Roboto Flex';
--md-sys-typescale-body-large-font: 'Roboto Flex';
--md-sys-typescale-body-small-size: 12px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-small-weight: 400;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-label-small-font: 'Roboto Flex';
--md-sys-typescale-label-medium-font: 'Roboto Flex';
--md-sys-typescale-label-large-font: 'Roboto Flex';
--md-sys-typescale-label-small-size: 12px;
--md-sys-typescale-label-medium-size: 14px;
--md-sys-typescale-label-large-size: 16px;
--md-sys-typescale-label-small-weight: 400;
--md-sys-typescale-label-medium-weight: 400;
--md-sys-typescale-label-large-weight: 400;
--md-sys-typescale-label-small-line-height: 16px;
--md-sys-typescale-label-medium-line-height: 20px;
--md-sys-typescale-label-large-line-height: 24px;
background-color: var(--md-sys-color-background);
color: var(--md-sys-color-on-background);
} }
` }), ) : r === "h2" ? /* @__PURE__ */ h(
r "h2",
] }); {
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
} }
function i() { ) : r === "h3" ? /* @__PURE__ */ h(
const r = y(a); "h3",
if (r === void 0) {
throw new Error("useTheme must be used within a ThemeProvider"); className: a,
return r; style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
} }
function g() { ) : r === "h4" ? /* @__PURE__ */ h(
const r = i(), s = d(); "h4",
return r.schemes[s]; {
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
} }
export { ) : r === "h5" ? /* @__PURE__ */ h(
f as ThemeProvider, "h5",
g as usePalette, {
i as useTheme className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "h6" ? /* @__PURE__ */ h(
"h6",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "p" ? /* @__PURE__ */ h(
"p",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-body-${e}-weight)`,
fontSize: `var(--md-sys-typescale-body-${e}-size)`,
lineHeight: `var(--md-sys-typescale-body-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-body-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "span" ? /* @__PURE__ */ h(
"span",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-body-${e}-weight)`,
fontSize: `var(--md-sys-typescale-body-${e}-size)`,
lineHeight: `var(--md-sys-typescale-body-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-body-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "label" ? /* @__PURE__ */ h(
"label",
{
htmlFor: f,
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-label-${e}-weight)`,
fontSize: `var(--md-sys-typescale-label-${e}-size)`,
lineHeight: `var(--md-sys-typescale-label-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-label-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : null;
};
export {
v as Typography
}; };

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

@ -1 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("react"),r=t.createContext("light");function o({children:e,scheme:c}){return n.jsx(r.Provider,{value:c,children:e})}function u(){return t.useContext(r)}exports.SchemeProvider=o;exports.useScheme=u; "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;

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

@ -1,13 +1,20 @@
import { jsx as r } from "react/jsx-runtime"; import { jsx as a } from "react/jsx-runtime";
import { createContext as n, useContext as c } from "react"; import { Box as c } from "./react-you-ui26.mjs";
const t = n("light"); const l = ({ children: s, style: o, ...r }) => (console.log(r, o), /* @__PURE__ */ a(
function s({ children: e, scheme: o }) { c,
return /* @__PURE__ */ r(t.Provider, { value: o, children: e }); {
} ...r,
function u() { style: {
return c(t); borderRadius: "28px",
backgroundColor: "var(--md-sys-color-surface)",
color: "var(--md-sys-color-on-surface)",
padding: "18px",
display: "flex",
...o
},
children: s
} }
));
export { export {
s as SchemeProvider, l as Paper
u as useScheme
}; };

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

@ -1 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),d=require("react");;/* empty css */const p=({children:r,variant:s="span",className:a,color:t="",align:i,style:n,noWrap:l,id:y,size:m="auto",htmlFor:f})=>{const o=d.useMemo(()=>t==="primary"?"var(--md-sys-color-primary)":t==="secondary"?"var(--md-sys-color-secondary)":t==="tertiary"?"var(--md-sys-color-tertiary)":t==="error"?"var(--md-sys-color-error)":t==="on-primary"?"var(--md-sys-color-on-primary)":t==="on-secondary"?"var(--md-sys-color-on-secondary)":t==="on-tertiary"?"var(--md-sys-color-on-tertiary)":t==="on-error"?"var(--md-sys-color-on-error)":t==="on-surface"?"var(--md-sys-color-on-surface)":t==="scrim"?"var(--md-sys-color-scrim)":t==="outline"?"var(--md-sys-color-outline)":t==="outline-variant"?"var(--md-sys-color-outline-variant)":t,[t]),e=d.useMemo(()=>{if(m==="auto")return{h1:"large",h2:"large",h3:"medium",h4:"medium",h5:"small",h6:"small",p:"large",span:"large",label:"large"}[s];if(m==="small")return"small";if(m==="medium")return"medium";if(m==="large")return"large"},[m]);return s==="h1"?h.jsx("h1",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h2"?h.jsx("h2",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h3"?h.jsx("h3",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h4"?h.jsx("h4",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h5"?h.jsx("h5",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="h6"?h.jsx("h6",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-headline-${e}-weight)`,fontSize:`var(--md-sys-typescale-headline-${e}-size)`,lineHeight:`var(--md-sys-typescale-headline-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-headline-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="p"?h.jsx("p",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-body-${e}-weight)`,fontSize:`var(--md-sys-typescale-body-${e}-size)`,lineHeight:`var(--md-sys-typescale-body-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-body-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="span"?h.jsx("span",{className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-body-${e}-weight)`,fontSize:`var(--md-sys-typescale-body-${e}-size)`,lineHeight:`var(--md-sys-typescale-body-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-body-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):s==="label"?h.jsx("label",{htmlFor:f,className:a,style:{color:o,fontWeight:`var(--md-sys-typescale-label-${e}-weight)`,fontSize:`var(--md-sys-typescale-label-${e}-size)`,lineHeight:`var(--md-sys-typescale-label-${e}-line-height)`,fontFamily:`var(--md-sys-typescale-label-${e}-font)`,textAlign:i,whiteSpace:l?"nowrap":"normal",...n},id:y,children:r}):null};exports.Typography=p; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("./react-you-ui6.js"),g=require("./string_utils-Bad7L8P5.js"),h=e=>{const t=m.usePalette(),{href:r,target:s,rel:o,children:n,className:i,id:c,style:l,...u}=e;return a.jsx("a",{href:r,target:s,rel:o,className:i,id:c,style:{color:g.hexFromArgb(t.primary),textDecoration:"none",...l},...u,children:n})};exports.Link=h;

192
dist/react-you-ui5.mjs vendored
View File

@ -1,180 +1,26 @@
import { jsx as h } from "react/jsx-runtime"; import { jsx as c } from "react/jsx-runtime";
import { useMemo as d } from "react"; import { usePalette as p } from "./react-you-ui6.mjs";
/* empty css */ import { h as f } from "./string_utils-B4bsIQ5w.mjs";
const v = ({ children: s, variant: r = "span", className: a, color: t = "", align: i, style: n, noWrap: l, id: y, size: m = "auto", htmlFor: f }) => { const d = (r) => {
const o = d(() => t === "primary" ? "var(--md-sys-color-primary)" : t === "secondary" ? "var(--md-sys-color-secondary)" : t === "tertiary" ? "var(--md-sys-color-tertiary)" : t === "error" ? "var(--md-sys-color-error)" : t === "on-primary" ? "var(--md-sys-color-on-primary)" : t === "on-secondary" ? "var(--md-sys-color-on-secondary)" : t === "on-tertiary" ? "var(--md-sys-color-on-tertiary)" : t === "on-error" ? "var(--md-sys-color-on-error)" : t === "on-surface" ? "var(--md-sys-color-on-surface)" : t === "scrim" ? "var(--md-sys-color-scrim)" : t === "outline" ? "var(--md-sys-color-outline)" : t === "outline-variant" ? "var(--md-sys-color-outline-variant)" : t, [t]), e = d(() => { const t = p(), { href: e, target: o, rel: s, children: a, className: m, id: n, style: i, ...l } = r;
if (m === "auto") return /* @__PURE__ */ c(
return { "a",
h1: "large",
h2: "large",
h3: "medium",
h4: "medium",
h5: "small",
h6: "small",
p: "large",
span: "large",
label: "large"
}[r];
if (m === "small") return "small";
if (m === "medium") return "medium";
if (m === "large") return "large";
}, [m]);
return r === "h1" ? /* @__PURE__ */ h(
"h1",
{ {
className: a, href: e,
target: o,
rel: s,
className: m,
id: n,
style: { style: {
color: o, color: f(t.primary),
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`, textDecoration: "none",
fontSize: `var(--md-sys-typescale-headline-${e}-size)`, ...i
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
}, },
id: y, ...l,
children: s children: a
} }
) : r === "h2" ? /* @__PURE__ */ h( );
"h2",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "h3" ? /* @__PURE__ */ h(
"h3",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "h4" ? /* @__PURE__ */ h(
"h4",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "h5" ? /* @__PURE__ */ h(
"h5",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "h6" ? /* @__PURE__ */ h(
"h6",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "p" ? /* @__PURE__ */ h(
"p",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-body-${e}-weight)`,
fontSize: `var(--md-sys-typescale-body-${e}-size)`,
lineHeight: `var(--md-sys-typescale-body-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-body-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "span" ? /* @__PURE__ */ h(
"span",
{
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-body-${e}-weight)`,
fontSize: `var(--md-sys-typescale-body-${e}-size)`,
lineHeight: `var(--md-sys-typescale-body-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-body-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : r === "label" ? /* @__PURE__ */ h(
"label",
{
htmlFor: f,
className: a,
style: {
color: o,
fontWeight: `var(--md-sys-typescale-label-${e}-weight)`,
fontSize: `var(--md-sys-typescale-label-${e}-size)`,
lineHeight: `var(--md-sys-typescale-label-${e}-line-height)`,
fontFamily: `var(--md-sys-typescale-label-${e}-font)`,
textAlign: i,
whiteSpace: l ? "nowrap" : "normal",
...n
},
id: y,
children: s
}
) : null;
}; };
export { export {
v as Typography d as Link
}; };

100
dist/react-you-ui6.js vendored
View File

@ -1 +1,99 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("./react-you-ui25.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 a=require("react/jsx-runtime"),e=require("./string_utils-Bad7L8P5.js"),l=require("react"),y=require("./react-you-ui7.js");;/* empty css */const c=l.createContext(void 0);function d({children:o,theme:s,scheme:r}){return a.jsxs(c.Provider,{value:s,children:[a.jsx("style",{children:`
body {
--md-ref-typeface-brand: 'Roboto Flex';
--md-ref-typeface-plain: 'Roboto Flex';
--md-sys-color-primary: ${e.hexFromArgb(s.schemes[r].primary)};
--md-sys-color-primary-container: ${e.hexFromArgb(s.schemes[r].primaryContainer)};
--md-sys-color-secondary: ${e.hexFromArgb(s.schemes[r].secondary)};
--md-sys-color-secondary-container: ${e.hexFromArgb(s.schemes[r].secondaryContainer)};
--md-sys-color-tertiary: ${e.hexFromArgb(s.schemes[r].tertiary)};
--md-sys-color-tertiary-container: ${e.hexFromArgb(s.schemes[r].tertiaryContainer)};
--md-sys-color-error: ${e.hexFromArgb(s.schemes[r].error)};
--md-sys-color-error-container: ${e.hexFromArgb(s.schemes[r].errorContainer)};
--md-sys-color-background: ${e.hexFromArgb(s.schemes[r].background)};
--md-sys-color-surface: ${e.hexFromArgb(s.schemes[r].surface)};
--md-sys-color-surface-variant: ${e.hexFromArgb(s.schemes[r].surfaceVariant)};
--md-sys-color-surface-bright: ${e.hexFromArgb(s.schemes[r].surface)};
--md-sys-color-surface-dim: ${e.hexFromArgb(s.schemes[r].surface)};
--md-sys-color-surface-container: ${e.hexFromArgb(s.schemes[r].surface)};
--md-sys-color-surface-container-lowest: ${e.hexFromArgb(s.schemes[r].surface)};
--md-sys-color-surface-container-low: ${e.hexFromArgb(s.schemes[r].surfaceVariant)};
--md-sys-color-surface-container-high: ${e.hexFromArgb(s.schemes[r].surfaceVariant)};
--md-sys-color-surface-container-highest: ${e.hexFromArgb(s.schemes[r].surfaceVariant)};
--md-sys-color-outline: ${e.hexFromArgb(s.schemes[r].outline)};
--md-sys-color-outline-variant: ${e.hexFromArgb(s.schemes[r].outlineVariant)};
--md-sys-color-scrim: ${e.hexFromArgb(s.schemes[r].scrim)};
--md-sys-color-shadow: ${e.hexFromArgb(s.schemes[r].shadow)};
--md-sys-color-on-surface: ${e.hexFromArgb(s.schemes[r].onSurface)};
--md-sys-color-on-surface-variant: ${e.hexFromArgb(s.schemes[r].onSurfaceVariant)};
--md-sys-color-on-surface-bright: ${e.hexFromArgb(s.schemes[r].onSurface)};
--md-sys-color-on-surface-dim: ${e.hexFromArgb(s.schemes[r].onSurface)};
--md-sys-color-background: ${e.hexFromArgb(s.schemes[r].background)};
--md-sys-color-background-variant: ${e.hexFromArgb(s.schemes[r].surface)};
--md-sys-color-on-primary: ${e.hexFromArgb(s.schemes[r].onPrimary)};
--md-sys-color-on-primary-container: ${e.hexFromArgb(s.schemes[r].onPrimaryContainer)};
--md-sys-color-on-secondary: ${e.hexFromArgb(s.schemes[r].onSecondary)};
--md-sys-color-on-secondary-container: ${e.hexFromArgb(s.schemes[r].onSecondaryContainer)};
--md-sys-color-on-tertiary: ${e.hexFromArgb(s.schemes[r].onTertiary)};
--md-sys-color-on-tertiary-container: ${e.hexFromArgb(s.schemes[r].onTertiaryContainer)};
--md-sys-color-on-error: ${e.hexFromArgb(s.schemes[r].onError)};
--md-sys-color-on-error-container: ${e.hexFromArgb(s.schemes[r].onErrorContainer)};
--md-sys-color-on-background: ${e.hexFromArgb(s.schemes[r].onBackground)};
--md-sys-typescale-headline-small-font: 'Roboto Flex';
--md-sys-typescale-headline-medium-font: 'Roboto Flex';
--md-sys-typescale-headline-large-font: 'Roboto Flex';
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-medium-size: 32px;
--md-sys-typescale-headline-large-size: 40px;
--md-sys-typescale-headline-small-weight: 400;
--md-sys-typescale-headline-medium-weight: 400;
--md-sys-typescale-headline-large-weight: 400;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-medium-line-height: 40px;
--md-sys-typescale-headline-large-line-height: 48px;
--md-sys-typescale-body-small-font: 'Roboto Flex';
--md-sys-typescale-body-medium-font: 'Roboto Flex';
--md-sys-typescale-body-large-font: 'Roboto Flex';
--md-sys-typescale-body-small-size: 12px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-small-weight: 400;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-label-small-font: 'Roboto Flex';
--md-sys-typescale-label-medium-font: 'Roboto Flex';
--md-sys-typescale-label-large-font: 'Roboto Flex';
--md-sys-typescale-label-small-size: 12px;
--md-sys-typescale-label-medium-size: 14px;
--md-sys-typescale-label-large-size: 16px;
--md-sys-typescale-label-small-weight: 400;
--md-sys-typescale-label-medium-weight: 400;
--md-sys-typescale-label-large-weight: 400;
--md-sys-typescale-label-small-line-height: 16px;
--md-sys-typescale-label-medium-line-height: 20px;
--md-sys-typescale-label-large-line-height: 24px;
background-color: var(--md-sys-color-background);
color: var(--md-sys-color-on-background);
}
`}),o]})}function n(){const o=l.useContext(c);if(o===void 0)throw new Error("useTheme must be used within a ThemeProvider");return o}function i(){const o=n(),s=y.useScheme();return o.schemes[s]}exports.ThemeProvider=d;exports.usePalette=i;exports.useTheme=n;

139
dist/react-you-ui6.mjs vendored
View File

@ -1,20 +1,125 @@
import { jsx as a } from "react/jsx-runtime"; import { jsxs as l, jsx as c } from "react/jsx-runtime";
import { Box as c } from "./react-you-ui25.mjs"; import { h as e } from "./string_utils-B4bsIQ5w.mjs";
const l = ({ children: s, style: o, ...r }) => (console.log(r, o), /* @__PURE__ */ a( import { createContext as n, useContext as y } from "react";
c, import { useScheme as d } from "./react-you-ui7.mjs";
{ /* empty css */
...r, const a = n(void 0);
style: { function f({ children: r, theme: s, scheme: o }) {
borderRadius: "28px", return /* @__PURE__ */ l(a.Provider, { value: s, children: [
backgroundColor: "var(--md-sys-color-surface)", /* @__PURE__ */ c("style", { children: `
color: "var(--md-sys-color-on-surface)", body {
padding: "18px",
display: "flex", --md-ref-typeface-brand: 'Roboto Flex';
...o --md-ref-typeface-plain: 'Roboto Flex';
},
children: s --md-sys-color-primary: ${e(s.schemes[o].primary)};
--md-sys-color-primary-container: ${e(s.schemes[o].primaryContainer)};
--md-sys-color-secondary: ${e(s.schemes[o].secondary)};
--md-sys-color-secondary-container: ${e(s.schemes[o].secondaryContainer)};
--md-sys-color-tertiary: ${e(s.schemes[o].tertiary)};
--md-sys-color-tertiary-container: ${e(s.schemes[o].tertiaryContainer)};
--md-sys-color-error: ${e(s.schemes[o].error)};
--md-sys-color-error-container: ${e(s.schemes[o].errorContainer)};
--md-sys-color-background: ${e(s.schemes[o].background)};
--md-sys-color-surface: ${e(s.schemes[o].surface)};
--md-sys-color-surface-variant: ${e(s.schemes[o].surfaceVariant)};
--md-sys-color-surface-bright: ${e(s.schemes[o].surface)};
--md-sys-color-surface-dim: ${e(s.schemes[o].surface)};
--md-sys-color-surface-container: ${e(s.schemes[o].surface)};
--md-sys-color-surface-container-lowest: ${e(s.schemes[o].surface)};
--md-sys-color-surface-container-low: ${e(s.schemes[o].surfaceVariant)};
--md-sys-color-surface-container-high: ${e(s.schemes[o].surfaceVariant)};
--md-sys-color-surface-container-highest: ${e(s.schemes[o].surfaceVariant)};
--md-sys-color-outline: ${e(s.schemes[o].outline)};
--md-sys-color-outline-variant: ${e(s.schemes[o].outlineVariant)};
--md-sys-color-scrim: ${e(s.schemes[o].scrim)};
--md-sys-color-shadow: ${e(s.schemes[o].shadow)};
--md-sys-color-on-surface: ${e(s.schemes[o].onSurface)};
--md-sys-color-on-surface-variant: ${e(s.schemes[o].onSurfaceVariant)};
--md-sys-color-on-surface-bright: ${e(s.schemes[o].onSurface)};
--md-sys-color-on-surface-dim: ${e(s.schemes[o].onSurface)};
--md-sys-color-background: ${e(s.schemes[o].background)};
--md-sys-color-background-variant: ${e(s.schemes[o].surface)};
--md-sys-color-on-primary: ${e(s.schemes[o].onPrimary)};
--md-sys-color-on-primary-container: ${e(s.schemes[o].onPrimaryContainer)};
--md-sys-color-on-secondary: ${e(s.schemes[o].onSecondary)};
--md-sys-color-on-secondary-container: ${e(s.schemes[o].onSecondaryContainer)};
--md-sys-color-on-tertiary: ${e(s.schemes[o].onTertiary)};
--md-sys-color-on-tertiary-container: ${e(s.schemes[o].onTertiaryContainer)};
--md-sys-color-on-error: ${e(s.schemes[o].onError)};
--md-sys-color-on-error-container: ${e(s.schemes[o].onErrorContainer)};
--md-sys-color-on-background: ${e(s.schemes[o].onBackground)};
--md-sys-typescale-headline-small-font: 'Roboto Flex';
--md-sys-typescale-headline-medium-font: 'Roboto Flex';
--md-sys-typescale-headline-large-font: 'Roboto Flex';
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-medium-size: 32px;
--md-sys-typescale-headline-large-size: 40px;
--md-sys-typescale-headline-small-weight: 400;
--md-sys-typescale-headline-medium-weight: 400;
--md-sys-typescale-headline-large-weight: 400;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-medium-line-height: 40px;
--md-sys-typescale-headline-large-line-height: 48px;
--md-sys-typescale-body-small-font: 'Roboto Flex';
--md-sys-typescale-body-medium-font: 'Roboto Flex';
--md-sys-typescale-body-large-font: 'Roboto Flex';
--md-sys-typescale-body-small-size: 12px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-small-weight: 400;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-label-small-font: 'Roboto Flex';
--md-sys-typescale-label-medium-font: 'Roboto Flex';
--md-sys-typescale-label-large-font: 'Roboto Flex';
--md-sys-typescale-label-small-size: 12px;
--md-sys-typescale-label-medium-size: 14px;
--md-sys-typescale-label-large-size: 16px;
--md-sys-typescale-label-small-weight: 400;
--md-sys-typescale-label-medium-weight: 400;
--md-sys-typescale-label-large-weight: 400;
--md-sys-typescale-label-small-line-height: 16px;
--md-sys-typescale-label-medium-line-height: 20px;
--md-sys-typescale-label-large-line-height: 24px;
background-color: var(--md-sys-color-background);
color: var(--md-sys-color-on-background);
}
` }),
r
] });
}
function i() {
const r = y(a);
if (r === void 0)
throw new Error("useTheme must be used within a ThemeProvider");
return r;
}
function g() {
const r = i(), s = d();
return r.schemes[s];
} }
));
export { export {
l as Paper f as ThemeProvider,
g as usePalette,
i as useTheme
}; };

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

@ -1 +1 @@
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),l=require("./create-component-D9KTUrcf.js"),n=l.o({tagName:"label",react:a,elementClass:HTMLLabelElement}),o=e=>{const{form:s,...t}=e;return r.jsx(n,{...t,style:{display:"flex",alignItems:"center",gap:"8px",...e.style,fontFamily:"var(--md-ref-typeface-plain)"}})};exports.FormLabel=o; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("react"),r=t.createContext("light");function o({children:e,scheme:c}){return n.jsx(r.Provider,{value:c,children:e})}function u(){return t.useContext(r)}exports.SchemeProvider=o;exports.useScheme=u;

31
dist/react-you-ui7.mjs vendored
View File

@ -1,26 +1,13 @@
import { jsx as a } from "react/jsx-runtime"; import { jsx as r } from "react/jsx-runtime";
import r from "react"; import { createContext as n, useContext as c } from "react";
import { o as l } from "./create-component-CVXl33PD.mjs"; const t = n("light");
const m = l({ function s({ children: e, scheme: o }) {
tagName: "label", return /* @__PURE__ */ r(t.Provider, { value: o, children: e });
react: r,
elementClass: HTMLLabelElement
}), p = (e) => {
const { form: o, ...t } = e;
return /* @__PURE__ */ a(
m,
{
...t,
style: {
display: "flex",
alignItems: "center",
gap: "8px",
...e.style,
fontFamily: "var(--md-ref-typeface-plain)"
} }
function u() {
return c(t);
} }
);
};
export { export {
p as FormLabel s as SchemeProvider,
u as useScheme
}; };

2
dist/react-you-ui8.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-ui25.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:"8px 16px",backgroundColor:"transparent",...s},...o,children:r})};exports.AppBar=i; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),l=require("./create-component-D9KTUrcf.js"),n=l.o({tagName:"label",react:a,elementClass:HTMLLabelElement}),o=e=>{const{form:s,...t}=e;return r.jsx(n,{...t,style:{display:"flex",alignItems:"center",gap:"8px",...e.style,fontFamily:"var(--md-ref-typeface-plain)"}})};exports.FormLabel=o;

33
dist/react-you-ui8.mjs vendored
View File

@ -1,25 +1,26 @@
import { jsx as p } from "react/jsx-runtime"; import { jsx as a } from "react/jsx-runtime";
import { Box as a } from "./react-you-ui25.mjs"; import r from "react";
const c = (e) => { import { o as l } from "./create-component-CVXl33PD.mjs";
const { className: t, id: r, children: n, style: s, ...o } = e; const m = l({
return /* @__PURE__ */ p( tagName: "label",
a, react: r,
elementClass: HTMLLabelElement
}), p = (e) => {
const { form: o, ...t } = e;
return /* @__PURE__ */ a(
m,
{ {
className: t, ...t,
id: r,
style: { style: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", gap: "8px",
padding: "8px 16px", ...e.style,
backgroundColor: "transparent", fontFamily: "var(--md-ref-typeface-plain)"
...s }
},
...o,
children: n
} }
); );
}; };
export { export {
c as AppBar p as FormLabel
}; };

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

14
dist/src/components/Link.d.ts vendored Normal file
View File

@ -0,0 +1,14 @@
import { default as React } from 'react';
import { AriaProps } from '../types/aria';
type LinkProps = AriaProps & {
href?: string;
target?: '_blank' | '_self' | '_parent' | '_top';
rel?: string;
children?: React.ReactNode;
className?: string;
id?: string;
style?: React.CSSProperties;
};
export declare const Link: (props: LinkProps) => React.JSX.Element;
export {};

1
dist/src/index.d.ts vendored
View File

@ -18,6 +18,7 @@ export { Menu } from './components/Menu';
export { Paper } from './components/Paper'; export { Paper } from './components/Paper';
export { FormLabel } from './components/Forms'; export { FormLabel } from './components/Forms';
export { AppBar } from './components/AppBar'; export { AppBar } from './components/AppBar';
export { Link } from './components/Link';
export { ThemeProvider } from './hooks/useTheme'; export { ThemeProvider } from './hooks/useTheme';
export { useTheme } from './hooks/useTheme'; export { useTheme } from './hooks/useTheme';
export { usePalette } from './hooks/useTheme'; export { usePalette } from './hooks/useTheme';

2
src/components/AppBar.tsx
View File

@ -21,7 +21,7 @@ export const AppBar = (props: AppBarProps) => {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
padding: '8px 16px', padding: '16px 16px',
backgroundColor: 'transparent', backgroundColor: 'transparent',
...style, ...style,
}} }}

35
src/components/Link.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from "react";
import { AriaProps } from "../types/aria";
import { usePalette } from "../hooks/useTheme";
import { hexFromArgb } from "@material/material-color-utilities";
type LinkProps = AriaProps & {
href?: string;
target?: '_blank' | '_self' | '_parent' | '_top';
rel?: string;
children?: React.ReactNode;
className?: string;
id?: string;
style?: React.CSSProperties;
};
export const Link = (props: LinkProps) => {
const palette = usePalette();
const { href, target, rel, children, className, id, style, ...rest } = props;
return (
<a
href={href}
target={target}
rel={rel}
className={className}
id={id}
style={{
color: hexFromArgb(palette.primary),
textDecoration: 'none',
...style,
}}
{...rest}
>{children}</a>
);
};

1
src/hooks/useTheme.tsx
View File

@ -27,6 +27,7 @@ export function ThemeProvider({ children, theme, scheme }: { children: React.Rea
--md-sys-color-error-container: ${hexFromArgb(theme.schemes[scheme].errorContainer)}; --md-sys-color-error-container: ${hexFromArgb(theme.schemes[scheme].errorContainer)};
--md-sys-color-background: ${hexFromArgb(theme.schemes[scheme].background)}; --md-sys-color-background: ${hexFromArgb(theme.schemes[scheme].background)};
--md-sys-color-surface: ${hexFromArgb(theme.schemes[scheme].surface)}; --md-sys-color-surface: ${hexFromArgb(theme.schemes[scheme].surface)};
--md-sys-color-surface-variant: ${hexFromArgb(theme.schemes[scheme].surfaceVariant)};
--md-sys-color-surface-bright: ${hexFromArgb(theme.schemes[scheme].surface)}; --md-sys-color-surface-bright: ${hexFromArgb(theme.schemes[scheme].surface)};
--md-sys-color-surface-dim: ${hexFromArgb(theme.schemes[scheme].surface)}; --md-sys-color-surface-dim: ${hexFromArgb(theme.schemes[scheme].surface)};
--md-sys-color-surface-container: ${hexFromArgb(theme.schemes[scheme].surface)}; --md-sys-color-surface-container: ${hexFromArgb(theme.schemes[scheme].surface)};

1
src/index.ts
View File

@ -18,6 +18,7 @@ export { Menu } from "./components/Menu";
export { Paper } from "./components/Paper"; export { Paper } from "./components/Paper";
export { FormLabel } from "./components/Forms"; export { FormLabel } from "./components/Forms";
export { AppBar } from "./components/AppBar"; export { AppBar } from "./components/AppBar";
export { Link } from "./components/Link";
export { ThemeProvider } from "./hooks/useTheme"; export { ThemeProvider } from "./hooks/useTheme";
export { useTheme } from "./hooks/useTheme"; export { useTheme } from "./hooks/useTheme";