-
-
Default
-
-
-
-
-
Disabled
-
-
+
+
With icon (selected)
+
+
+
Default
+
+
+
+
+
Disabled
+
+
+
diff --git a/app/layout.tsx b/app/layout.tsx
index e1616aa..60212e5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,12 @@
import "../src/styles/generics.css"
import "../src/styles/button.css"
import "../src/styles/ripple.css"
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
export default function RootLayout({
children,
diff --git a/dist/output.css b/dist/output.css
index 426267b..4305246 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -226,7 +226,7 @@ select {
/*
1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button-skeleton styles.
+2. Remove default button-layout styles.
*/
button,
diff --git a/dist/styles/styles.css b/dist/styles/styles.css
index 426267b..4305246 100644
--- a/dist/styles/styles.css
+++ b/dist/styles/styles.css
@@ -226,7 +226,7 @@ select {
/*
1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button-skeleton styles.
+2. Remove default button-layout styles.
*/
button,
diff --git a/src/primitive-components/button-skeleton/button-layout.tsx b/src/primitive-components/button-layout/button-layout.tsx
similarity index 100%
rename from src/primitive-components/button-skeleton/button-layout.tsx
rename to src/primitive-components/button-layout/button-layout.tsx
diff --git a/src/primitive-components/button-skeleton/button.types.ts b/src/primitive-components/button-layout/button.types.ts
similarity index 100%
rename from src/primitive-components/button-skeleton/button.types.ts
rename to src/primitive-components/button-layout/button.types.ts
diff --git a/src/primitive-components/button/button.tsx b/src/primitive-components/button/button.tsx
index 9cea681..2df13ab 100644
--- a/src/primitive-components/button/button.tsx
+++ b/src/primitive-components/button/button.tsx
@@ -1,7 +1,8 @@
import {forwardRef} from "react";
-import {buttonMainProps} from "../button-skeleton/button.types";
-import {ButtonLayout} from "../button-skeleton/button-layout";
+import {Icon} from "../material-you-components";
import {IRippleProps} from "../ripple/ripple.types";
+import {ButtonLayout} from "../button-layout/button-layout";
+import {buttonMainProps} from "../button-layout/button.types";
/**
* Button component
@@ -18,14 +19,14 @@ export const Button = forwardRef(
variant={variant ? variant : "filled"}>
{
icon ?
-
- {icon}
-
+
+ {icon}
+
: <>
}
{props.children}
-
+
)
diff --git a/src/primitive-components/checkbox-layout/check-box-skeleton.tsx b/src/primitive-components/checkbox-layout/check-box-skeleton.tsx
new file mode 100644
index 0000000..e6eb607
--- /dev/null
+++ b/src/primitive-components/checkbox-layout/check-box-skeleton.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import {CheckboxLayoutProps} from "./checkbox-layout.types";
+
+export const CheckBoxSkeleton = forwardRef(
+
+ function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {
+
+ const checkboxRef = useRef
(null);
+
+ useEffect(() => {
+ checkboxRef.current.indeterminate = indeterminate === true;
+ }, []);
+
+ useImperativeHandle(ref, () => checkboxRef.current);
+
+ let classesType = typeInput || type;
+
+ const classes = props.className !== undefined ?
+ `m3 m3-${type} ${props.className}` : `m3 m3-${classesType}`
+
+ return (
+
+ );
+
+ }
+
+);
\ No newline at end of file
diff --git a/src/primitive-components/checkbox-layout/checkbox-layout.types.ts b/src/primitive-components/checkbox-layout/checkbox-layout.types.ts
new file mode 100644
index 0000000..e1b0580
--- /dev/null
+++ b/src/primitive-components/checkbox-layout/checkbox-layout.types.ts
@@ -0,0 +1,7 @@
+import {PropsWithChildren} from "react";
+
+export interface CheckboxLayoutProps extends PropsWithChildren{
+ indeterminate?: boolean;
+ typeInput? : string;
+ type? : string;
+}
\ No newline at end of file
diff --git a/src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx b/src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx
deleted file mode 100644
index 4c06908..0000000
--- a/src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
-
-export const CheckBoxSkeleton = forwardRef(
-
- function CheckBoxBase(props : any, ref) : JSX.Element {
-
- const checkboxRef = useRef(null);
-
- useEffect(() => {
- checkboxRef.current.indeterminate = props.indeterminate === "true";
- }, []);
-
- useImperativeHandle(ref, () => checkboxRef);
-
- let type = props.typeInput || props.type,
- _props = {...props};
- if(_props.indeterminate) delete _props.indeterminate;
- if(_props.typeInput) delete _props.typeInput;
-
- const classes = props.className !== undefined ?
- `m3 m3-${type} ${props.className}` : `m3 m3-${type}`
-
- return (
-
- );
-
- }
-
-);
\ No newline at end of file
diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/checkbox/checkbox.tsx
index 2a1a6e5..f3535f4 100644
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/checkbox/checkbox.tsx
@@ -1,8 +1,8 @@
import {RippleArea} from "../ripple/ripple-area";
-import {forwardRef, useRef, useState} from "react";
-import useRippleEffect from "../ripple/hooks/useRippleEffect";
-import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
import {IRippleProps} from "../ripple/ripple.types";
+import useRippleEffect from "../ripple/hooks/useRippleEffect";
+import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
/**
* Checkbox component
@@ -13,17 +13,25 @@ export const Checkbox = forwardRef(
({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState(false),
+ [checked, setChecked] = useState(props.checked ?? false),
ripplesRef = useRef(null),
+ checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString();
+ useImperativeHandle(ref, () => checkboxRef.current)
+
+ useEffect(() => {
+ setChecked(!checked)
+ }, [checkboxRef.current?.checked]);
+
return (