doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: opportunity align to the center ripple for all components that have ripple effect

This commit is contained in:
doryan04 2024-01-30 12:33:19 +04:00
parent 3225869431
commit ef6c3d391f
23 changed files with 184 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
.idea/workspace.xml
View File

@ -4,33 +4,30 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style"> <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="UPDATE: README.md">
<change afterPath="$PROJECT_DIR$/app/components/badges.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/buttons.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/checkboxes.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/checkboxes.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/fabs.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/fabs.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/components/fabs.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/fabs.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/icon-buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/icon-buttons.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/radios.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/radios.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/badge/badge.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/badge/badge.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-skeleton.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-layout.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/divider/divider.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/divider/divider.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/badge.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/badge.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/badge.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/badge.css.map" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/badge.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/badge.sass" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple-area.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple-area.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.types.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/divider.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/divider.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/divider.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/divider.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/divider.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/divider.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/radio.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/radio.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css.map" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -40,9 +37,9 @@
<component name="FileTemplateManagerImpl"> <component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
<option value="TypeScript File" />
<option value="Sass File" /> <option value="Sass File" />
<option value="TypeScript JSX File" /> <option value="TypeScript JSX File" />
<option value="TypeScript File" />
</list> </list>
</option> </option>
</component> </component>
@ -196,31 +193,8 @@
<workItem from="1706373080363" duration="1879000" /> <workItem from="1706373080363" duration="1879000" />
<workItem from="1706426744715" duration="17520000" /> <workItem from="1706426744715" duration="17520000" />
<workItem from="1706516378911" duration="15403000" /> <workItem from="1706516378911" duration="15403000" />
<workItem from="1706552378046" duration="8039000" /> <workItem from="1706552378046" duration="8738000" />
</task> <workItem from="1706598284665" duration="4149000" />
<task id="LOCAL-00021" summary="updated checkbox component">
<option name="closed" value="true" />
<created>1704526612167</created>
<option name="number" value="00021" />
<option name="presentableId" value="LOCAL-00021" />
<option name="project" value="LOCAL" />
<updated>1704526612167</updated>
</task>
<task id="LOCAL-00022" summary="added opportunity for customize classname">
<option name="closed" value="true" />
<created>1704526646792</created>
<option name="number" value="00022" />
<option name="presentableId" value="LOCAL-00022" />
<option name="project" value="LOCAL" />
<updated>1704526646792</updated>
</task>
<task id="LOCAL-00023" summary="updated generic styles">
<option name="closed" value="true" />
<created>1704526658894</created>
<option name="number" value="00023" />
<option name="presentableId" value="LOCAL-00023" />
<option name="project" value="LOCAL" />
<updated>1704526658894</updated>
</task> </task>
<task id="LOCAL-00024" summary="other updates..."> <task id="LOCAL-00024" summary="other updates...">
<option name="closed" value="true" /> <option name="closed" value="true" />
@ -590,7 +564,31 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1706461783505</updated> <updated>1706461783505</updated>
</task> </task>
<option name="localTasksCounter" value="70" /> <task id="LOCAL-00070" summary="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style">
<option name="closed" value="true" />
<created>1706560991099</created>
<option name="number" value="00070" />
<option name="presentableId" value="LOCAL-00070" />
<option name="project" value="LOCAL" />
<updated>1706560991099</updated>
</task>
<task id="LOCAL-00071" summary="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style">
<option name="closed" value="true" />
<created>1706561005869</created>
<option name="number" value="00071" />
<option name="presentableId" value="LOCAL-00071" />
<option name="project" value="LOCAL" />
<updated>1706561005869</updated>
</task>
<task id="LOCAL-00072" summary="UPDATE: README.md">
<option name="closed" value="true" />
<created>1706562164219</created>
<option name="number" value="00072" />
<option name="presentableId" value="LOCAL-00072" />
<option name="project" value="LOCAL" />
<updated>1706562164219</updated>
</task>
<option name="localTasksCounter" value="73" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -608,7 +606,6 @@
</option> </option>
</component> </component>
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
<MESSAGE value="added sass style sheet file for fabs" /> <MESSAGE value="added sass style sheet file for fabs" />
<MESSAGE value="updated button styles and renaming button component file" /> <MESSAGE value="updated button styles and renaming button component file" />
<MESSAGE value="updated checkbox styles" /> <MESSAGE value="updated checkbox styles" />
@ -633,6 +630,7 @@
<MESSAGE value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" /> <MESSAGE value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" />
<MESSAGE value="DONE: I forget, what I do" /> <MESSAGE value="DONE: I forget, what I do" />
<MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" /> <MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" />
<option name="LAST_COMMIT_MESSAGE" value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" /> <MESSAGE value="UPDATE: README.md" />
<option name="LAST_COMMIT_MESSAGE" value="UPDATE: README.md" />
</component> </component>
</project> </project>

3
app/components/buttons.tsx
View File

@ -2,7 +2,6 @@
import React, {useCallback, useState} from 'react'; import React, {useCallback, useState} from 'react';
import {Button} from "../../src/primitive-components/material-you-components"; import {Button} from "../../src/primitive-components/material-you-components";
import axios from "axios";
export default function Buttons() { export default function Buttons() {
@ -19,7 +18,7 @@ export default function Buttons() {
<div> <div>
<h2> Default buttons </h2> <h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
<Button variant={"filled"} onClick={callback}> <Button variant={"filled"} onClick={callback} centralRipple>
Label + {state} Label + {state}
</Button> </Button>
<Button variant={"outlined"}> <Button variant={"outlined"}>

2
app/components/checkboxes.tsx
View File

@ -12,7 +12,7 @@ export default function Checkboxes() {
<div> <div>
<h2> Default </h2> <h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}> <div style={{display: "flex", gap: "2em"}}>
<Checkbox/> <Checkbox centralRipple/>
<Checkbox defaultChecked/> <Checkbox defaultChecked/>
<Checkbox indeterminate={true}/> <Checkbox indeterminate={true}/>
</div> </div>

3
app/components/fabs.tsx
View File

@ -13,7 +13,8 @@ export default function Fabs() {
<div style={{display: "flex", gap: "2em"}}> <div style={{display: "flex", gap: "2em"}}>
<FAB size={"small"} <FAB size={"small"}
icon={"edit"} icon={"edit"}
elevated/> elevated
centralRipple/>
<FAB variant={"primary"} <FAB variant={"primary"}
size={"small"} size={"small"}
icon={"edit"} icon={"edit"}

2
app/components/icon-buttons.tsx
View File

@ -12,7 +12,7 @@ function IconButtons() {
<div> <div>
<h2> Default buttons </h2> <h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}> <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"}/> <IconButton icon={"settings"} centralRipple/>
<IconButton icon={"settings"} variant={"filled"}/> <IconButton icon={"settings"} variant={"filled"}/>
<IconButton icon={"settings"} variant={"tonal"}/> <IconButton icon={"settings"} variant={"tonal"}/>
<IconButton icon={"settings"} variant={"outlined"}/> <IconButton icon={"settings"} variant={"outlined"}/>

2
app/components/radios.tsx
View File

@ -9,7 +9,7 @@ export default function Radios() {
<div> <div>
<h2> Default </h2> <h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}> <div style={{display: "flex", gap: "2em"}}>
<Radio/> <Radio centralRipple/>
<Radio defaultChecked/> <Radio defaultChecked/>
</div> </div>
</div> </div>

12
app/page.tsx
View File

@ -1,6 +1,12 @@
import {Fragment} from "react"; import {Fragment} from "react";
import Fabs from "./components/fabs"; import Fabs from "./components/fabs";
import Badges from "./components/badges"; import Badges from "./components/badges";
import IconButtons from "./components/icon-buttons";
import Buttons from "./components/buttons";
import Switches from "./components/switches";
import Checkboxes from "./components/checkboxes";
import Radios from "./components/radios";
import {TextFields} from "./components/text-fields";
export default function Page() { export default function Page() {
return( return(
@ -21,6 +27,12 @@ export default function Page() {
justifyContent: "center", justifyContent: "center",
alignItems: "center" alignItems: "center"
}}> }}>
<Buttons/>
<IconButtons/>
<Switches/>
<Checkboxes/>
<Radios/>
<TextFields/>
<Fabs/> <Fabs/>
<Badges/> <Badges/>
</div> </div>

10
src/primitive-components/button-skeleton/button-skeleton.tsx → src/primitive-components/button-skeleton/button-layout.tsx
View File

@ -1,12 +1,13 @@
"use client" "use client"
import {RippleArea} from "../ripple/ripple-area"; import {RippleArea} from "../ripple/ripple-area";
import React, {forwardRef, useId, useRef, useState} from "react"; import React, {forwardRef, PropsWithChildren, useId, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect"; import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {IRippleProps} from "../ripple/ripple.types";
const ButtonSkeleton = forwardRef( const ButtonLayout = forwardRef(
function ButtonBase(props : any, ref){ function ButtonBase({centralRipple = false, ...props} : PropsWithChildren<any> & IRippleProps, ref){
const [isActive, setIsActive] = useState<boolean>(false), const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
@ -32,6 +33,7 @@ const ButtonSkeleton = forwardRef(
disabled={disabled}> disabled={disabled}>
{props.children} {props.children}
<RippleArea ref={ripplesRef} <RippleArea ref={ripplesRef}
central={centralRipple}
callback={setIsActive}/> callback={setIsActive}/>
</button> </button>
) )
@ -40,4 +42,4 @@ const ButtonSkeleton = forwardRef(
) )
export {ButtonSkeleton}; export {ButtonLayout};

16
src/primitive-components/button/button.tsx
View File

@ -1,6 +1,7 @@
import {forwardRef} from "react"; import {forwardRef} from "react";
import {buttonMainProps} from "../button-skeleton/button.types"; import {buttonMainProps} from "../button-skeleton/button.types";
import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; import {ButtonLayout} from "../button-skeleton/button-layout";
import {IRippleProps} from "../ripple/ripple.types";
/** /**
* Button component * Button component
@ -9,22 +10,23 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
export const Button = forwardRef( export const Button = forwardRef(
(props : buttonMainProps, ref) => ( ({centralRipple = false, variant, disabled, icon, ...props} : buttonMainProps & IRippleProps, ref) => (
<ButtonSkeleton {...props} <ButtonLayout {...props}
ref={ref} ref={ref}
disabled={props.disabled} disabled={props.disabled}
variant={props.variant ? props.variant : "filled"}> centralRipple={centralRipple}
variant={variant ? variant : "filled"}>
{ {
props.icon ? icon ?
<span className={"m3 m3-icon"}> <span className={"m3 m3-icon"}>
{props.icon} {icon}
</span> </span>
: <></> : <></>
} }
<span className={"label-large"}> <span className={"label-large"}>
{props.children} {props.children}
</span> </span>
</ButtonSkeleton> </ButtonLayout>
) )
) )

4
src/primitive-components/checkbox/checkbox.tsx
View File

@ -2,6 +2,7 @@ import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react"; import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect"; import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
import {IRippleProps} from "../ripple/ripple.types";
/** /**
* Checkbox component * Checkbox component
@ -9,7 +10,7 @@ import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
*/ */
export const Checkbox = forwardRef( export const Checkbox = forwardRef(
(props : any, ref) => { ({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState<boolean>(false), const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
@ -28,6 +29,7 @@ export const Checkbox = forwardRef(
<span className={"m3 m3-checkbox-state-layer"}/> <span className={"m3 m3-checkbox-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"} <RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef} ref={ripplesRef}
central={centralRipple}
callback={setIsActive}/> callback={setIsActive}/>
{props.children} {props.children}
</label> </label>

18
src/primitive-components/fab/fab.tsx
View File

@ -1,6 +1,7 @@
import {forwardRef} from "react"; import {forwardRef} from "react";
import {FABMainProps} from "../button-skeleton/button.types"; import {FABMainProps} from "../button-skeleton/button.types";
import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; import {ButtonLayout} from "../button-skeleton/button-layout";
import {IRippleProps} from "../ripple/ripple.types";
/** /**
* FABs component * FABs component
@ -8,22 +9,23 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
*/ */
export const FAB = forwardRef( export const FAB = forwardRef(
(props : FABMainProps, ref) => ( ({variant, disabled, icon, centralRipple = false, size, elevated, ...props} : FABMainProps & IRippleProps, ref) => (
<ButtonSkeleton {...props} <ButtonLayout {...props}
ref={ref} ref={ref}
variant={props.variant ? props.variant : "surface"} centralRipple={centralRipple}
className={`m3-fab m3-${props.size ?? "default"}-fab ${!(props.elevated ?? false) && "without-elevation"}`}> variant={variant ? variant : "surface"}
className={`m3-fab m3-${size ?? "default"}-fab ${!(elevated ?? false) && "without-elevation"}`}>
<span className={"m3-icon"}> <span className={"m3-icon"}>
{props.icon} {icon}
</span> </span>
{ {
props.size === "extended" ? ( size === "extended" ? (
<span className={"label-large"}> <span className={"label-large"}>
{props.children} {props.children}
</span> </span>
) )
: <></> : <></>
} }
</ButtonSkeleton> </ButtonLayout>
) )
); );

10
src/primitive-components/icon-button/icon-button.tsx
View File

@ -1,6 +1,7 @@
import {ButtonSkeleton} from "../button-skeleton/button-skeleton"; import {ButtonLayout} from "../button-skeleton/button-layout";
import {iconButtonMainProps} from "../button-skeleton/button.types"; import {iconButtonMainProps} from "../button-skeleton/button.types";
import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react"; import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
import {IRippleProps} from "../ripple/ripple.types";
/** /**
* Icon button-skeleton component * Icon button-skeleton component
@ -9,7 +10,7 @@ import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "re
export const IconButton = forwardRef( export const IconButton = forwardRef(
({icon, variant, disabled, selected = false, toggled = false, ...props} : iconButtonMainProps, ref) => { ({icon, variant, disabled, selected = false, toggled = false, centralRipple, ...props} : iconButtonMainProps & IRippleProps, ref) => {
const [toggleIcon, setToggleIcon] = useState<any>({ const [toggleIcon, setToggleIcon] = useState<any>({
state : selected == true ? "selected" : "unselected", state : selected == true ? "selected" : "unselected",
@ -36,9 +37,10 @@ export const IconButton = forwardRef(
useImperativeHandle(ref, () => buttonRef); useImperativeHandle(ref, () => buttonRef);
return ( return (
<ButtonSkeleton {...props} <ButtonLayout {...props}
ref={buttonRef} ref={buttonRef}
onClick={callback} onClick={callback}
centralRipple={centralRipple}
disabled={disabled} disabled={disabled}
className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()} className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()}
variant={variant ? variant : "default"}> variant={variant ? variant : "default"}>
@ -47,7 +49,7 @@ export const IconButton = forwardRef(
toggled ? toggleIcon.icon : icon ? icon : <></> toggled ? toggleIcon.icon : icon ? icon : <></>
} }
</span> </span>
</ButtonSkeleton> </ButtonLayout>
) )
} }

2
src/primitive-components/material-you-components.tsx
View File

@ -11,4 +11,4 @@ export {RippleArea} from "./ripple/ripple-area";
export {Ripples, Ripple} from "./ripple/ripple"; export {Ripples, Ripple} from "./ripple/ripple";
export {TextField} from "./text-field/text-field"; export {TextField} from "./text-field/text-field";
export {IconButton} from "./icon-button/icon-button"; export {IconButton} from "./icon-button/icon-button";
export {ButtonSkeleton} from "./button-skeleton/button-skeleton"; export {ButtonLayout} from "./button-skeleton/button-layout";

4
src/primitive-components/radio/radio.tsx
View File

@ -2,6 +2,7 @@ import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react"; import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect"; import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton"; import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
import {IRippleProps} from "../ripple/ripple.types";
/** /**
* Radio component * Radio component
@ -10,7 +11,7 @@ import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
export const Radio = forwardRef( export const Radio = forwardRef(
(props : any, ref) => { ({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState<boolean>(false), const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
@ -27,6 +28,7 @@ export const Radio = forwardRef(
<span className={"m3 m3-radio-state-layer"}/> <span className={"m3 m3-radio-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"} <RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef} ref={ripplesRef}
central={centralRipple}
callback={setIsActive}/> callback={setIsActive}/>
{props.children} {props.children}
</label> </label>

6
src/primitive-components/ripple/ripple-area.tsx
View File

@ -17,7 +17,7 @@ const rippleAreaContext = React.createContext(false);
const RippleArea = forwardRef( const RippleArea = forwardRef(
function RippleArea(props : RippleAreaProps, ref) { function RippleArea({central = false, callback, ...props} : RippleAreaProps, ref) {
const [ripples, setRipples] = useState<Array<JSX.Element>>([]), const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
rippleDomain = useRef<any>(null), rippleDomain = useRef<any>(null),
@ -41,8 +41,8 @@ const RippleArea = forwardRef(
top: 0, top: 0,
} }
let rippleX : number = event.clientX - rippleDomainChar.left, let rippleX : number = !central ? event.clientX - rippleDomainChar.left : rippleDomainChar.width / 2,
rippleY : number = event.clientY - rippleDomainChar.top, rippleY : number = !central ? event.clientY - rippleDomainChar.top : rippleDomainChar.height / 2,
rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2, rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2,
rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2, rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2,
rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5; rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;

27
src/primitive-components/ripple/ripple.tsx
View File

@ -1,17 +1,26 @@
"use client" "use client"
import React, {useCallback, useContext, useEffect, useRef, useState, useTransition} from 'react';
import RippleEffectBuild from "./utils/ripple-effect-builder";
import {rippleAreaContext} from "./ripple-area";
import {rippleProps} from "./ripple.types";
import isEmpty from "./utils/utils"; import isEmpty from "./utils/utils";
import {rippleProps} from "./ripple.types";
import {rippleAreaContext} from "./ripple-area";
import RippleEffectBuild from "./utils/ripple-effect-builder";
import React, {
useRef,
useState,
useEffect,
forwardRef,
useContext,
useCallback,
ForwardedRef,
useTransition, JSX
} from 'react';
function Ripples(props : any){ const Ripples = forwardRef(function Ripples(props : any, ref : ForwardedRef<any>){
const [ripples, setRipples] = useState({}); const [ripples, setRipples] = useState({});
const firstRender = useRef<boolean>(true); const firstRender = useRef<boolean>(true);
const [pending, startTransition] = useTransition(); const [pending, startTransition] = useTransition();
const LifetimeEnd = useCallback((child) => { const LifetimeEnd = useCallback((child : JSX.Element) => {
if (child.props.endLifetime) { if (child.props.endLifetime) {
child.props.endLifetime(); child.props.endLifetime();
@ -46,9 +55,9 @@ function Ripples(props : any){
</> </>
) )
} })
function Ripple(props : rippleProps) { const Ripple = forwardRef(function Ripple(props : rippleProps, ref : ForwardedRef<any>) {
const { const {
rippleX, rippleX,
@ -79,6 +88,6 @@ function Ripple(props : rippleProps) {
}/> }/>
); );
} })
export {Ripple, Ripples}; export {Ripple, Ripples};

12
src/primitive-components/ripple/ripple.types.ts
View File

@ -1,8 +1,12 @@
import React, {ComponentProps, Dispatch, SetStateAction} from "react"; import {Dispatch, SetStateAction} from "react";
export interface RippleAreaProps extends ComponentProps<any> { export interface IRippleProps {
ref : React.ForwardedRef<any>, centralRipple? : boolean
}
export interface RippleAreaProps extends PropsWithChildren<any>{
callback : Dispatch<SetStateAction<boolean>>, callback : Dispatch<SetStateAction<boolean>>,
central? : boolean,
} }
export type rippleProps = { export type rippleProps = {
@ -13,3 +17,5 @@ export type rippleProps = {
lifetime : number, lifetime : number,
key? : number, key? : number,
} }
import {PropsWithChildren} from "react";

16
src/styles/button.css
View File

@ -1,11 +1,16 @@
button:not(.m3-fab, .m3-icon-button) { button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
box-sizing: border-box;
} }
button:not(.m3-fab, .m3-icon-button) > span.m3-icon { button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 500; font-size: 14pt;
font-size: 18px; font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: 18px; line-height: var(--md-sys-typescale-label-large-line-height);
} }
button:not(.m3-fab, .m3-icon-button).m3 { button:not(.m3-fab, .m3-icon-button).m3 {
contain: content; contain: content;
@ -27,7 +32,8 @@ button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined { button:not(.m3-fab, .m3-icon-button).outlined {
border: 1px solid var(--md-sys-color-outline) !important; outline-offset: -1px;
outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
@ -121,7 +127,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none; box-shadow: none;
} }
button:not(.m3-fab, .m3-icon-button):disabled.outlined { button:not(.m3-fab, .m3-icon-button):disabled.outlined {
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
} }
/*# sourceMappingURL=button.css.map */ /*# sourceMappingURL=button.css.map */

2
src/styles/button.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECFI;EDIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECnCA;;ADsCA;EChCA;;ADmCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EClDA;;ADqDA;EC/CA;;ADkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"} {"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECRI;EDUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECzCA;;AD4CA;ECtCA;;ADyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECxDA;;AD2DA;ECrDA;;ADwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}

16
src/styles/button.sass
View File

@ -2,12 +2,17 @@
button:not(.m3-fab, .m3-icon-button) button:not(.m3-fab, .m3-icon-button)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
font-family: var(--md-sys-typescale-label-large-font-family-name)
font-size: var(--md-sys-typescale-label-large-font-size)
font-weight: var(--md-sys-typescale-label-large-font-weight)
line-height: var(--md-sys-typescale-label-large-line-height)
box-sizing: border-box
& > span.m3-icon & > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 500 font-size: 14pt
font-size: 18px font-weight: var(--md-sys-typescale-label-large-font-weight)
line-height: 18px line-height: var(--md-sys-typescale-label-large-line-height)
&.m3 &.m3
contain: content contain: content
@ -28,7 +33,8 @@ button:not(.m3-fab, .m3-icon-button)
color: var(--md-sys-color-on-primary) color: var(--md-sys-color-on-primary)
&.outlined &.outlined
border: 1px solid var(--md-sys-color-outline) !important outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline) !important
background-color: #00000000 background-color: #00000000
&, & > span.m3-icon &, & > span.m3-icon
color: var(--md-sys-color-primary) color: var(--md-sys-color-primary)
@ -115,4 +121,4 @@ button:not(.m3-fab, .m3-icon-button)
box-shadow: none box-shadow: none
&.outlined &.outlined
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important

21
src/styles/generics.css
View File

@ -308,12 +308,17 @@ svg.m3.m3-badge > text {
} }
button:not(.m3-fab, .m3-icon-button) { button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
box-sizing: border-box;
} }
button:not(.m3-fab, .m3-icon-button) > span.m3-icon { button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 500; font-size: 14pt;
font-size: 18px; font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: 18px; line-height: var(--md-sys-typescale-label-large-line-height);
} }
button:not(.m3-fab, .m3-icon-button).m3 { button:not(.m3-fab, .m3-icon-button).m3 {
contain: content; contain: content;
@ -335,7 +340,8 @@ button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-primary);
} }
button:not(.m3-fab, .m3-icon-button).outlined { button:not(.m3-fab, .m3-icon-button).outlined {
border: 1px solid var(--md-sys-color-outline) !important; outline-offset: -1px;
outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
@ -429,7 +435,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none; box-shadow: none;
} }
button:not(.m3-fab, .m3-icon-button):disabled.outlined { button:not(.m3-fab, .m3-icon-button):disabled.outlined {
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
} }
.m3.m3-ripple-domain { .m3.m3-ripple-domain {
@ -1103,10 +1109,13 @@ html {
} }
.m3.m3-wrapper { .m3.m3-wrapper {
width: 100%;
background-color: var(--md-sys-color-surface); background-color: var(--md-sys-color-surface);
border-radius: 25px; border-radius: 25px;
padding: 25px; padding: 25px;
width: max-content; display: flex;
align-items: center;
flex-direction: column;
height: min-content; height: min-content;
} }

2
src/styles/generics.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJFI;EIIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJnCA;;AIsCA;EJhCA;;AImCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJlDA;;AIqDA;EJ/CA;;AIkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"} {"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJRI;EIUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJzCA;;AI4CA;EJtCA;;AIyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJxDA;;AI2DA;EJrDA;;AIwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC3HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}

5
src/styles/generics.sass
View File

@ -24,9 +24,12 @@ html
user-select: none user-select: none
.m3.m3-wrapper .m3.m3-wrapper
width: 100%
background-color: var(--md-sys-color-surface) background-color: var(--md-sys-color-surface)
border-radius: 25px border-radius: 25px
padding: 25px padding: 25px
width: max-content display: flex
align-items: center
flex-direction: column
height: min-content height: min-content