BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update various components

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-26 21:03:21 -05:00
parent 637b3a0c34
commit 94f0f3ca13
20 changed files with 84 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
lib/component/modal/Modal.tsx
View File

@@ -3,17 +3,14 @@ import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
export default function Modal(props: ModalProps){ export default function Modal({
const { display,
display, onClose,
onClose, className,
className, backgroundType = "blur",
backgroundType = "blur", top,
top, children
children }: Readonly<ModalProps>){
} = props;
return ( return (
<Dialog <Dialog
open={display} open={display}

13
lib/component/modal/ModalBody.tsx
View File

@@ -2,19 +2,18 @@ import type { ModalBodyProps } from "$/types/ModalTypes";
import clsx from "clsx"; import clsx from "clsx";
export default function ModalBody(props: ModalBodyProps){ export default function ModalBody({
const { className,
className, children,
children ...props
} = props; }: Readonly<ModalBodyProps>){
return ( return (
<div <div
className={clsx( className={clsx(
"flex flex-col items-center justify-start h-full w-full overflow-scroll", "flex flex-col items-center justify-start h-full w-full overflow-scroll",
className className
)} )}
{...props}
> >
{children} {children}
</div> </div>

13
lib/component/modal/ModalFooter.tsx
View File

@@ -2,19 +2,18 @@ import type { ModalFooterProps } from "$/types/ModalTypes";
import clsx from "clsx"; import clsx from "clsx";
export default function ModalFooter(props: ModalFooterProps){ export default function ModalFooter({
const { className,
className, children,
children ...props
} = props; }: Readonly<ModalFooterProps>){
return ( return (
<div <div
className={clsx( className={clsx(
"flex flex-row items-center justify-center w-full rounded-b-lg", "flex flex-row items-center justify-center w-full rounded-b-lg",
className className
)} )}
{...props}
> >
<div <div
className="flex flex-row items-center justify-center mx-8 my-3" className="flex flex-row items-center justify-center mx-8 my-3"

20
lib/component/modal/ModalHeader.tsx
View File

@@ -1,23 +1,23 @@
import Button from "$/component/button/Button";
import type { ModalHeaderProps } from "$/types/ModalTypes"; import type { ModalHeaderProps } from "$/types/ModalTypes";
import { DialogTitle } from "@headlessui/react"; import { DialogTitle } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
import { BsXLg } from "react-icons/bs"; import { BsXLg } from "react-icons/bs";
export default function ModalHeader(props: ModalHeaderProps){ export default function ModalHeader({
const { onClose,
onClose, className,
className, children,
children ...props
} = props; }: Readonly<ModalHeaderProps>){
return ( return (
<div <div
className={clsx( className={clsx(
"flex flex-row items-center justify-center w-full rounded-t-lg", "flex flex-row items-center justify-center w-full rounded-t-lg",
className className
)} )}
{...props}
> >
<DialogTitle <DialogTitle
as="div" as="div"
@@ -27,14 +27,14 @@ export default function ModalHeader(props: ModalHeaderProps){
</DialogTitle> </DialogTitle>
{ {
onClose && onClose &&
<div <Button
className="absolute top-1 right-1 cursor-pointer" className="absolute top-1 right-1 cursor-pointer"
onClick={onClose} onClick={onClose}
> >
<BsXLg <BsXLg
size={20} size={20}
/> />
</div> </Button>
} }
</div> </div>
); );

2
lib/component/nav/DarkModeSwitch.tsx
View File

@@ -8,7 +8,7 @@ export default function DarkModeSwitch(){
const updateTheme = () => { const updateTheme = () => {
if(theme === "system"){ if(theme === "system"){
if(window.document.documentElement.classList.contains("dark")){ if(globalThis.document.documentElement.classList.contains("dark")){
setTheme("light"); setTheme("light");
} }
else{ else{

13
lib/component/nav/NavBar.tsx
View File

@@ -2,13 +2,11 @@ import type { NavBarProps } from "$/types/NavTypes";
import clsx from "clsx"; import clsx from "clsx";
export default function NavBar(props: NavBarProps){ export default function NavBar({
const { className,
className, children,
children ...props
} = props; }: Readonly<NavBarProps>){
return ( return (
<nav <nav
className={clsx( className={clsx(
@@ -16,6 +14,7 @@ export default function NavBar(props: NavBarProps){
"fixed top-0 left-0 w-full z-10", "fixed top-0 left-0 w-full z-10",
"flex flex-row flex-nowrap items-center justify-center" "flex flex-row flex-nowrap items-center justify-center"
)} )}
{...props}
> >
{children} {children}
</nav> </nav>

13
lib/component/nav/PopoverMenu.tsx
View File

@@ -3,14 +3,11 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
import { RiArrowRightSLine } from "react-icons/ri"; import { RiArrowRightSLine } from "react-icons/ri";
export default function PopoverMenu(props: PopoverMenuProps){ export default function PopoverMenu({
const { buttonContent,
buttonContent, anchor,
anchor, children
children }: Readonly<PopoverMenuProps>){
} = props;
return ( return (
<Popover> <Popover>
<PopoverButton <PopoverButton

9
lib/component/tab/MattrixwvTab.tsx
View File

@@ -3,12 +3,9 @@ import { Tab } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
export default function MattrixwvTab(props: MattrixwvTabProps){ export default function MattrixwvTab({
const { children
children }: Readonly<MattrixwvTabProps>){
} = props;
return ( return (
<Tab <Tab
className={clsx( className={clsx(

19
lib/component/tab/MattrixwvTabGroup.tsx
View File

@@ -7,13 +7,10 @@ import MattrixwvTabPanel from "./MattrixwvTabPanel";
import MattrixwvTabPanels from "./MattrixwvTabPanels"; import MattrixwvTabPanels from "./MattrixwvTabPanels";
export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){ export default function MattrixwvTabGroup({
const { tabs,
tabs, className
className }: Readonly<MattrixwvTabGroupProps>){
} = props;
return ( return (
<TabGroup <TabGroup
className={clsx( className={clsx(
@@ -24,9 +21,7 @@ export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
<MattrixwvTabList> <MattrixwvTabList>
{ {
tabs.map((tab, index) => ( tabs.map((tab, index) => (
<MattrixwvTab <MattrixwvTab key={index}>
key={index}
>
{tab.tab} {tab.tab}
</MattrixwvTab> </MattrixwvTab>
)) ))
@@ -35,9 +30,7 @@ export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
<MattrixwvTabPanels> <MattrixwvTabPanels>
{ {
tabs.map((tab, index) => ( tabs.map((tab, index) => (
<MattrixwvTabPanel <MattrixwvTabPanel key={index}>
key={index}
>
{tab.content} {tab.content}
</MattrixwvTabPanel> </MattrixwvTabPanel>
)) ))

13
lib/component/tab/MattrixwvTabList.tsx
View File

@@ -2,16 +2,11 @@ import type { MattrixwvTabListProps } from "$/types/TabTypes";
import { TabList } from "@headlessui/react"; import { TabList } from "@headlessui/react";
export default function MattrixwvTabList(props: MattrixwvTabListProps){ export default function MattrixwvTabList({
const { children
children }: Readonly<MattrixwvTabListProps>){
} = props;
return ( return (
<TabList <TabList className="flex flex-row items-center justify-start w-full border-b">
className="flex flex-row items-center justify-start w-full border-b"
>
{children} {children}
</TabList> </TabList>
); );

13
lib/component/tab/MattrixwvTabPanel.tsx
View File

@@ -2,16 +2,11 @@ import type { MattrixwvTabPanelProps } from "$/types/TabTypes";
import { TabPanel } from "@headlessui/react"; import { TabPanel } from "@headlessui/react";
export default function MattrixwvTabPanel(props: MattrixwvTabPanelProps){ export default function MattrixwvTabPanel({
const { children
children }: Readonly<MattrixwvTabPanelProps>){
} = props;
return ( return (
<TabPanel <TabPanel className="flex flex-row items-start justify-center w-full h-full">
className="flex flex-row items-start justify-center w-full h-full"
>
{children} {children}
</TabPanel> </TabPanel>
); );

13
lib/component/tab/MattrixwvTabPanels.tsx
View File

@@ -2,16 +2,11 @@ import type { MattrixwvTabPanelsProps } from "$/types/TabTypes";
import { TabPanels } from "@headlessui/react"; import { TabPanels } from "@headlessui/react";
export default function MattrixwvTabPanels(props: MattrixwvTabPanelsProps){ export default function MattrixwvTabPanels({
const { children
children }: Readonly<MattrixwvTabPanelsProps>){
} = props;
return ( return (
<TabPanels <TabPanels className="flex flex-row items-start justify-center w-full h-full overflow-scroll">
className="flex flex-row items-start justify-center w-full h-full overflow-scroll"
>
{children} {children}
</TabPanels> </TabPanels>
); );

2
lib/component/toaster/Toaster.tsx
View File

@@ -6,7 +6,7 @@ import clsx from "clsx";
export default function Toaster({ export default function Toaster({
toast, toast,
className className
}: ToasterProps){ }: Readonly<ToasterProps>){
return ( return (
<Transition <Transition
show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())} show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}

6
lib/providers/theme/ThemeProvider.tsx
View File

@@ -10,7 +10,7 @@ const themeInitialState: ThemeProviderState = {
const ThemeProviderContext = createContext<ThemeProviderState>(themeInitialState); const ThemeProviderContext = createContext<ThemeProviderState>(themeInitialState);
export default function ThemeProvider(props: ThemeProviderProps){ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
const { const {
children, children,
defaultTheme = "system", defaultTheme = "system",
@@ -20,12 +20,12 @@ export default function ThemeProvider(props: ThemeProviderProps){
const [ theme, setTheme ] = useState<Theme>((localStorage.getItem(storageKey) as Theme) || defaultTheme); const [ theme, setTheme ] = useState<Theme>((localStorage.getItem(storageKey) as Theme) || defaultTheme);
useEffect(() => { useEffect(() => {
const root = window.document.documentElement; const root = globalThis.document.documentElement;
root.classList.remove("light", "dark"); root.classList.remove("light", "dark");
if(theme === "system"){ if(theme === "system"){
const systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"; const systemTheme = globalThis.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
root.classList.add(systemTheme); root.classList.add(systemTheme);
} }

2
lib/providers/toaster/ToasterProvider.tsx
View File

@@ -19,7 +19,7 @@ const ToasterProviderContext = createContext<ToastProviderState>(toastInitialSta
export default function ToasterProvider({ export default function ToasterProvider({
className, className,
children children
}: ToastProviderProps){ }: Readonly<ToastProviderProps>){
const [ toast, setToast ] = useState<Toast[]>([]); const [ toast, setToast ] = useState<Toast[]>([]);

4
lib/types/ButtonTypes.ts
View File

@@ -1,4 +1,4 @@
import type { ButtonHTMLAttributes } from "react"; import type { ComponentProps } from "react";
export type ButtonRounding = "none" | "sm" | "md" | "lg" | "full"; export type ButtonRounding = "none" | "sm" | "md" | "lg" | "full";
@@ -7,7 +7,7 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
export type ButtonVariant = "standard" | "outline" | "ghost" | "outline-ghost" | "icon"; export type ButtonVariant = "standard" | "outline" | "ghost" | "outline-ghost" | "icon";
export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "type"> { export interface ButtonProps extends Omit<ComponentProps<"button">, "size" | "type"> {
type?: "button" | "submit" | "reset"; type?: "button" | "submit" | "reset";
rounding?: ButtonRounding; rounding?: ButtonRounding;
shape?: ButtonShape; shape?: ButtonShape;

4
lib/types/InputTypes.ts
View File

@@ -1,5 +1,5 @@
import type React from "react"; import type React from "react";
import type { ChangeEventHandler, InputHTMLAttributes } from "react"; import type { ChangeEventHandler, ComponentProps } from "react";
export interface TextInputProps { export interface TextInputProps {
@@ -167,7 +167,7 @@ export interface RadioListProps {
} }
export interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "step">{ export interface DateInputProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "step">{
step?: number; step?: number;
value: Date | undefined; value: Date | undefined;
onChange: (newValue: Date | undefined) => void; onChange: (newValue: Date | undefined) => void;

4
lib/types/MessageTypes.ts
View File

@@ -1,7 +1,7 @@
import type { HTMLProps } from "react"; import type { ComponentProps } from "react";
export interface MessageBlockProps extends HTMLProps<HTMLDivElement> { export interface MessageBlockProps extends ComponentProps<"div"> {
outline?: "none" | "sm" | "md" | "lg"; outline?: "none" | "sm" | "md" | "lg";
rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl"; rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
} }

9
lib/types/ModalTypes.ts
View File

@@ -1,18 +1,21 @@
import type { ComponentProps } from "react";
export type ModalBackgroundType = "darken" | "lighten" | "blur" | "darken-blur" | "lighten-blur" | "darken-blur-radial" | "lighten-blur-radial" | "transparent" | "none"; export type ModalBackgroundType = "darken" | "lighten" | "blur" | "darken-blur" | "lighten-blur" | "darken-blur-radial" | "lighten-blur-radial" | "transparent" | "none";
export interface ModalHeaderProps { export interface ModalHeaderProps extends ComponentProps<"div"> {
onClose?: () => void; onClose?: () => void;
className?: string; className?: string;
children: React.ReactNode; children: React.ReactNode;
} }
export interface ModalFooterProps { export interface ModalFooterProps extends ComponentProps<"div"> {
className?: string; className?: string;
children: React.ReactNode; children: React.ReactNode;
} }
export interface ModalBodyProps { export interface ModalBodyProps extends ComponentProps<"div"> {
className?: string; className?: string;
children: React.ReactNode; children: React.ReactNode;
} }

5
lib/types/NavTypes.ts
View File

@@ -1,3 +1,6 @@
import type { ComponentProps } from "react";
export type Align = "start" | "end"; export type Align = "start" | "end";
export type Placement = "top" | "bottom" | "left" | "right"; export type Placement = "top" | "bottom" | "left" | "right";
export type AnchorTo = `${Placement}` | `${Placement} ${Align}`; export type AnchorTo = `${Placement}` | `${Placement} ${Align}`;
@@ -9,7 +12,7 @@ export interface PopoverMenuProps {
children: React.ReactNode; children: React.ReactNode;
} }
export interface NavBarProps { export interface NavBarProps extends ComponentProps<"nav"> {
className?: string; className?: string;
children: React.ReactNode; children: React.ReactNode;
} }