@andrilla/mado-ui 1.0.7 → 1.0.9

package/dist/components/link.d.ts

@@ -1,18 +1,19 @@
 import type { AnyElementProps, ColorTheme, OneOf } from '../types';
 import type { ElementType, JSX } from 'react';
-export type AnchorProps<TTag extends ElementType = 'a'> = AnyElementProps<TTag> & {
+export type AnchorProps<TTag extends ElementType = 'a'> = AnyElementProps<TTag, {
     disabled?: boolean;
-};
-export declare function Anchor<TTag extends ElementType = 'a'>({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps<TTag>): JSX.Element;
+    removeHash?: boolean;
+}>;
+export declare function Anchor<TTag extends ElementType = 'a'>({ as, className, disabled, href, onClick, target, rel, removeHash, ...props }: AnchorProps<TTag>): JSX.Element;
 export type LinkProps<TTag extends ElementType = typeof Anchor> = AnyElementProps<TTag, OneOf<[
     {
-        type?: 'center' | 'lift' | 'ltr' | 'multiline' | 'multiline-center' | 'multiline-lift' | 'multiline-ltr' | 'multiline-rtl' | 'multiline-static' | 'normal' | 'rtl' | 'static';
+        lineType?: 'center' | 'lift' | 'ltr' | 'multiline' | 'multiline-center' | 'multiline-lift' | 'multiline-ltr' | 'multiline-rtl' | 'multiline-static' | 'normal' | 'rtl' | 'static';
     },
     {
-        type?: 'fill' | 'fill-lift' | 'fill-ltr' | 'fill-rtl' | 'multiline-fill' | 'multiline-fill-center' | 'multiline-fill-ltr' | 'multiline-fill-lift' | 'multiline-fill-rtl';
+        lineType?: 'fill' | 'fill-lift' | 'fill-ltr' | 'fill-rtl' | 'multiline-fill' | 'multiline-fill-center' | 'multiline-fill-ltr' | 'multiline-fill-lift' | 'multiline-fill-rtl';
     } & ColorTheme
 ]>>;
-export declare function getLinkClasses({ customTheme, theme, type, }: Pick<LinkProps, 'customTheme' | 'theme' | 'type'>): string;
+export declare function getLinkClasses({ customTheme, theme, lineType, }: Pick<LinkProps, 'customTheme' | 'theme' | 'lineType'>): string;
 /**
  * # Link
  *
@@ -34,12 +35,15 @@ export declare function getLinkClasses({ customTheme, theme, type, }: Pick<LinkP
  * ## Examples
  *
  * @example
- *   <Link href='/about' type='ltr' title='About Us'>Learn more about our company</Link>
+ *   <Link href='/about' lineType='ltr' title='About Us'>Learn more about our company</Link>
  *
  * @example
- *   <Link href='/about' type='fill-ltr' title='About Us'>Learn more about our company</Link>
+ *   <Link href='/about' lineType='fill-ltr' title='About Us'>Learn more about our company</Link>
  *
  * @example
- *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
+ *   <Link href='/about' lineType='multiline-fill-rtl' theme='red' title='About Us'>Learn more about our company</Link>
+ *
+ * @example
+ *   <Link as='button' lineType='fill-lift' theme='mauve-700'>Edit</Link>
  */
-export declare function Link<TTag extends ElementType = typeof Anchor>({ as, className, customTheme, theme, type, ...props }: LinkProps<TTag>): JSX.Element;
+export declare function Link<TTag extends ElementType = typeof Anchor>({ as, className, customTheme, lineType, theme, ...props }: LinkProps<TTag>): JSX.Element;

package/dist/components/modal.d.ts

@@ -1,5 +1,5 @@
-import type { AnyElementProps } from '../types';
-export type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+import type { AnyElementProps, AsElement } from '../types';
+export type ModalProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
     children: ReactNode | (({ openModal, closeModal, }: {
         openModal: () => void;
         closeModal: () => void;
@@ -9,10 +9,13 @@ export type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     onOpen?: () => void;
     place?: 'center' | 'bottom';
 };
-import { type ElementType, type HTMLAttributes, type JSX, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ElementType, type JSX, type ReactNode, type RefObject } from 'react';
 import { Button as HeadlessButton, type DialogTitleProps } from '@headlessui/react';
 export declare function ModalTrigger<TTag extends ElementType = typeof HeadlessButton>({ as, onClick, ...props }: AnyElementProps<TTag>): JSX.Element;
-export declare function ModalTitle(props: DialogTitleProps): JSX.Element;
-export declare function ModalDialog(props: HTMLAttributes<HTMLDivElement>): JSX.Element;
-export declare function ModalClose<T extends ElementType = typeof HeadlessButton>({ as, ...props }: AnyElementProps<T>): JSX.Element;
+export type ModalTitleProps<TTag extends ElementType = 'h2'> = Omit<DialogTitleProps<TTag>, 'as'> & AsElement<TTag> & {
+    ref?: RefObject<TTag | null>;
+};
+export declare function ModalTitle<TTag extends ElementType = 'h2'>({ as, ref, ...props }: ModalTitleProps<TTag>): JSX.Element;
+export declare function ModalDialog(props: ComponentPropsWithRef<'div'>): JSX.Element;
+export declare function ModalClose<TTag extends ElementType = typeof HeadlessButton>({ as, onClick, ...props }: AnyElementProps<TTag>): JSX.Element;
 export declare function Modal(props: ModalProps): JSX.Element;

package/dist/components/select.d.ts

@@ -1,4 +1,4 @@
-export type SelectProps = Omit<ListboxProps, 'children' | 'defaultValue' | 'multiple' | 'onChange'> & {
+export type SelectProps = Omit<ListboxProps, 'children' | 'defaultValue' | 'multiple' | 'name' | 'onChange'> & {
     buttonProps?: Omit<ListboxButtonProps, 'className'> & {
         /** @deprecated use `className` prop instead */
         className?: never;
@@ -19,6 +19,7 @@ export type SelectProps = Omit<ListboxProps, 'children' | 'defaultValue' | 'mult
         /** @deprecated use `label` prop instead */
         children?: never;
     };
+    name: string;
     optionsProps?: ListboxOptionsProps;
     placeholder?: ListboxSelectedOptionProps['placeholder'];
     required?: boolean;

package/dist/components/time.d.ts

@@ -3,6 +3,7 @@ type TimeProps = HTMLAttributes<HTMLTimeElement> & Partial<{
     dateTime: string;
     day: boolean;
     hours: boolean;
+    militaryTime: boolean;
     milliseconds: boolean;
     minutes: boolean;
     month: boolean;
@@ -22,11 +23,12 @@ import { type HTMLAttributes, type JSX, type RefObject } from 'react';
  * @prop dateTime - Set the dateTime itself.
  * @prop day - Include the day of the month in the display.
  * @prop hours - Include the hours in the display.
+ * @prop militaryTime - Use military time (24-hour clock) instead of AM/PM.
  * @prop milliseconds - Include the milliseconds in the display.
  * @prop minutes - Include the minutes in the display.
  * @prop month - Include the month in the display.
  * @prop seconds - Include the seconds in the display.
  * @prop year - Include the year in the display.
  */
-export declare function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): JSX.Element;
+export declare function Time({ children, dateObject, dateTime, day, hours, militaryTime, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): JSX.Element;
 export {};

package/dist/css/base.css

@@ -1,31 +1,3 @@
-@property --base-theme-color {
-	syntax: '<color>';
-	inherits: false;
-	initial-value: oklch(62.3% 0.214 259.815);
-}
-
-@property --base-theme-color--foreground {
-	syntax: '<color>';
-	inherits: false;
-	initial-value: color-mix(
-		in oklch,
-		oklch(62.3% 0.214 259.815) 5%,
-		oklch(100% 0 0)
-	);
-}
-
-@property --global-bg {
-	syntax: '<color>';
-	inherits: false;
-	initial-value: light-dark(oklch(98.5% 0 0), oklch(20.5% 0 0));
-}
-
-@property --global-text {
-	syntax: '<color>';
-	inherits: false;
-	initial-value: light-dark(oklch(14.5% 0 0), oklch(97% 0 0));
-}
-
 @layer base {
 	* {
 		position: relative;

package/dist/css/index.css

@@ -1,4 +1,3 @@
-@import 'tailwindcss';
 @source '../components';
 @source '../graphics';
 @import './theme.css';

package/dist/css/tailwindcss.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import './index.css';

package/dist/css/theme.css

@@ -50,6 +50,13 @@
 	--animation-state-paused: paused;
 	--animation-state-running: running;
 
+	--base-theme-color: var(--color-blue-500);
+	--base-theme-color--foreground: color-mix(
+		in oklch,
+		var(--base-theme-color) 5%,
+		var(--color-white)
+	);
+
 	--corner-shape-bevel: bevel;
 	--corner-shape-notch: notch;
 	--corner-shape-round: round;
@@ -61,6 +68,9 @@
 	--ease-exponential: cubic-bezier(0.25, 0.5, 0, 0.99);
 	--ease-spring: cubic-bezier(0.35, 1.67, 0.44, 0.78);
 
+	--global-bg: light-dark(var(--color-neutral-50), var(--color-neutral-900));
+	--global-text: light-dark(var(--color-neutral-950), var(--color-neutral-100));
+
 	--text-smaller: smaller;
 	--text-larger: larger;
 }

package/dist/css/utilities.css

@@ -293,6 +293,12 @@
 	corner-bottom-left-shape: superellipse(calc(--value(number) * -1));
 }
 
+@property --tw-gap {
+	syntax: '<length>';
+	initial-value: 0;
+	inherits: true;
+}
+
 @utility gap-* {
 	--tw-gap: --value([*]);
 	--tw-gap-x: --value([*]);
@@ -302,16 +308,36 @@
 	--tw-gap-y: var(--tw-gap, calc(var(--spacing) * --value(number)));
 }
 
+@property --tw-gap-x {
+	syntax: '<length>';
+	initial-value: 0;
+	inherits: true;
+}
+
 @utility gap-x-* {
 	--tw-gap-x: --value([*]);
 	--tw-gap-x: calc(var(--spacing) * --value(number));
 }
 
+@property --tw-gap-y {
+	syntax: '<length>';
+	initial-value: 0;
+	inherits: true;
+}
+
 @utility gap-y-* {
 	--tw-gap-y: --value([*]);
 	--tw-gap-y: calc(var(--spacing) * --value(number));
 }
 
+@utility grid-cols-0fr {
+	grid-template-columns: 0fr;
+}
+
+@utility grid-cols-1fr {
+	grid-template-columns: 1fr;
+}
+
 @utility grid-rows-0fr {
 	grid-template-rows: 0fr;
 }

package/dist/graphics/index.js

@@ -1,6 +1,5 @@
 import { extendTailwindMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/utils/custom-tailwind-merge.ts
 const isInteger = (classPart) => /^\d+$/.test(classPart);
 const isFloat = (classPart) => /^\d+\.\d+$/.test(classPart);
@@ -95,7 +94,6 @@ const twMerge = extendTailwindMerge({ extend: { classGroups: {
 	"grid-rows": [{ "grid-rows": ["0fr", "1fr"] }],
 	transition: [{ transition: ["transition-cols", "transition-rows"] }]
 } } });
-
 //#endregion
 //#region src/graphics/social-media/facebook-logo.tsx
 /**
@@ -170,7 +168,6 @@ function FacebookLogo({ className, cutout = false, targets, variant = "circle",
 		]
 	});
 }
-
 //#endregion
 //#region src/graphics/social-media/google-logo.tsx
 /**
@@ -276,7 +273,6 @@ function GoogleLogo({ gradient = true, ...props }) {
 		] }) : /* @__PURE__ */ jsx("path", { d: "M992.945,417.01L511.964,417.01L511.964,613.859L788.338,613.859C783.897,641.717 773.921,669.122 759.31,694.112C742.575,722.744 721.881,744.542 700.67,761.138C637.14,810.865 563.07,821.031 511.628,821.031C381.685,821.031 270.653,735.251 227.672,618.689C225.937,614.461 224.786,610.09 223.383,605.772C213.887,576.108 208.697,544.687 208.697,512.032C208.697,478.046 214.317,445.514 224.561,414.789C264.982,293.606 378.511,203.097 511.721,203.097C538.518,203.097 564.319,206.353 588.786,212.851C644.708,227.698 684.261,256.943 708.499,280.075L854.747,133.794C765.786,50.482 649.815,0 511.478,0C400.888,-0.004 298.788,35.19 215.121,94.667C147.265,142.902 91.616,207.482 54.06,282.487C19.128,352.029 0,429.093 0,511.953C0,594.821 19.158,672.685 54.09,741.588L54.09,742.052C90.988,815.198 144.943,878.178 210.526,926.192C267.816,968.135 370.54,1024 511.478,1024C592.529,1024 664.363,1009.08 727.713,981.104C773.413,960.926 813.904,934.608 850.563,900.787C899,856.093 936.938,800.815 962.829,737.214C988.724,673.612 1002.57,601.692 1002.57,523.719C1002.57,487.404 999.002,450.524 992.945,417.01Z" })
 	});
 }
-
 //#endregion
 //#region src/graphics/social-media/instagram-logo.tsx
 /**
@@ -397,7 +393,6 @@ function InstagramLogo({ gradient = true, ...props }) {
 		] })
 	});
 }
-
 //#endregion
 //#region src/graphics/social-media/linkedin-logo.tsx
 /**
@@ -430,7 +425,6 @@ function LinkedInLogo({ className, cutout, targets, ...props }) {
 		})]
 	});
 }
-
 //#endregion
 //#region src/graphics/social-media/tiktok-logo.tsx
 /**
@@ -469,7 +463,6 @@ function TikTokLogo({ className, targets, variant = "multicolor", ...props }) {
 		] }), variant === "solid" && /* @__PURE__ */ jsx("path", { d: "M667.348,44.69C680.075,111.724 720.791,169.313 777.229,205.249L777.286,205.307C816.62,230.358 863.44,244.986 913.716,244.986L913.716,420.98C820.306,420.98 733.749,391.782 663.086,342.197L663.086,700.001C663.086,878.644 514.39,1024 331.543,1024C260.881,1024 195.401,1002.23 141.555,965.316L141.44,965.201C55.977,906.517 0,809.536 0,699.944C0,521.301 148.754,375.887 331.543,375.887C346.747,375.887 361.605,377.154 376.233,379.054L376.233,558.849C362.066,554.53 347.15,551.996 331.543,551.996C248.038,551.996 180.14,618.397 180.14,700.001C180.14,756.784 213.139,806.196 261.284,830.96C282.304,841.787 306.204,847.949 331.543,847.949C413.09,847.949 479.663,784.543 482.658,705.53L482.946,0L663.086,0C663.086,15.261 664.584,30.177 667.348,44.69Z" })]
 	});
 }
-
 //#endregion
 //#region src/graphics/social-media/x-logo.tsx
 /**
@@ -482,7 +475,6 @@ function XLogo(props) {
 		children: /* @__PURE__ */ jsx("path", { d: "M806.464,0L963.472,0L620.432,392.08L1024,925.6L708.016,925.6L460.528,602.016L177.328,925.6L20.224,925.6L387.136,506.24L0,0L324,0L547.712,295.76L806.464,0ZM751.344,831.616L838.352,831.616L276.736,89.04L183.36,89.04L751.344,831.616Z" })
 	});
 }
-
 //#endregion
 //#region src/graphics/social-media/youtube-logo.tsx
 /**
@@ -516,6 +508,5 @@ function YouTubeLogo({ className, cutout = false, targets, ...props }) {
 		})] })
 	});
 }
-
 //#endregion
-export { FacebookLogo, GoogleLogo, InstagramLogo, LinkedInLogo, TikTokLogo, XLogo, YouTubeLogo };
+export { FacebookLogo, GoogleLogo, InstagramLogo, LinkedInLogo, TikTokLogo, XLogo, YouTubeLogo };

package/dist/hooks/index.js

@@ -1,6 +1,5 @@
 import { Suspense, createContext, useCallback, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/hooks/create-fast-context.tsx
 function createFastContext(defaultInitialState) {
 	function useStoreData(initialState = defaultInitialState) {
@@ -41,7 +40,6 @@ function createFastContext(defaultInitialState) {
 		useStore
 	};
 }
-
 //#endregion
 //#region src/hooks/use-form-status.tsx
 const DEFAULT_STATUS = "incomplete";
@@ -55,7 +53,6 @@ function FormStatusProvider({ children, initialStatus = DEFAULT_STATUS }) {
 function useFormStatus() {
 	return useStore((store) => store);
 }
-
 //#endregion
 //#region src/hooks/use-pointer-movement.ts
 function usePointerMovement(props) {
@@ -169,6 +166,5 @@ function usePointerMovement(props) {
 		trackPointerMovement
 	};
 }
-
 //#endregion
-export { FormStatusProvider, createFastContext, useFormStatus, usePointerMovement };
+export { FormStatusProvider, createFastContext, useFormStatus, usePointerMovement };