mado-ui 0.3.1 → 0.4.0

package/dist/components/link.d.ts

@@ -1,9 +1,9 @@
-import { AnyElementProps, OneOf } from '../types';
+import { AnyElementProps, ColorTheme, OneOf } from '../types';
 import { ElementType } from 'react';
-export type AnchorProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProps<TTag> & {
+export type AnchorProps<TTag extends ElementType = 'a'> = AnyElementProps<TTag> & {
     disabled?: boolean;
 };
-export declare function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Anchor<TTag extends ElementType = 'a'>({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps<TTag>): import("react/jsx-runtime").JSX.Element;
 type ThemeColorOrClasses = OneOf<[
     {
         /**
@@ -17,18 +17,7 @@ type ThemeColorOrClasses = OneOf<[
         classes: string;
     }
 ]>;
-type ColorTheme = OneOf<[
-    {
-        /** Color theme. */
-        theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'orange' | 'pink' | 'purple' | 'red' | 'violet' | 'yellow';
-    },
-    {
-        /** Color theme. */
-        theme?: 'custom';
-        customTheme: ThemeColorOrClasses;
-    }
-]>;
-export type LinkProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProps<TTag, OneOf<[
+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';
     },
@@ -65,5 +54,62 @@ export type LinkProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProp
  * @example
  *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
  */
-export default function Link({ as, className, customTheme, theme, type, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link<TTag extends ElementType = typeof Anchor>({ as, className, customTheme, theme, type, ...props }: LinkProps<TTag>): import("react/jsx-runtime").JSX.Element;
+export type ExtendedLinkConfig = {
+    /** Modifies the default element that is rendered. The `as` prop on the component still overrides the default set here. */
+    as?: ElementType;
+    /** Adds default classes. */
+    className?: string;
+    /** Sets the default theme. */
+    defaultTheme?: ColorTheme['theme'] | string;
+    /** Sets the default for the `type` prop. */
+    type?: LinkProps['type'];
+    /** Add more theme options. */
+    theme?: {
+        [themeName: string]: {
+            /** Custom theme configuration - supports both multiline and regular link theme formats */
+            customTheme: Omit<ThemeColorOrClasses, 'themeColor'> & {
+                themeColor?: {
+                    /** Example: `'after:[--theme-color:var(--color-blue-500)]'` */
+                    fill: string;
+                    /** Example: `'[--theme-color:var(--color-blue-500)]'` */
+                    multilineFill: string;
+                };
+            };
+            /** Additional CSS classes to apply */
+            className?: string;
+        };
+    };
+};
+type ExtendedThemeNames<T extends ExtendedLinkConfig> = T['theme'] extends Record<string, unknown> ? keyof T['theme'] : never;
+export type ExtendedLinkProps<TExtendedConfig extends ExtendedLinkConfig, TTag extends ElementType = typeof Anchor> = Omit<LinkProps<TTag>, 'theme' | 'customTheme'> & {
+    theme?: LinkProps<TTag>['theme'] | ExtendedThemeNames<TExtendedConfig>;
+    customTheme?: LinkProps<TTag>['customTheme'];
+};
+/**
+ * # createLink
+ * Creates an extended Link component with additional theme options.
+ *
+ * @param config - Configuration object defining new themes and defaults
+ * @returns A new Link component with extended theme support
+ *
+ * @example
+ * ```tsx
+ * const MyLink = createLink({
+ *   as: NextLink,
+ *   className: 'font-bold',
+ *   type: 'fill',
+ *   theme: {
+ *     primary: {
+ *       customTheme: {
+ *         fill: 'after:[--theme-color:var(--color-primary-500)]',
+ *         multilineFill: '[--theme-color:var(--color-primary-500)]'
+ *       },
+ *       className: 'text-white'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+export declare function createLink<TExtendedConfig extends ExtendedLinkConfig>(config: TExtendedConfig): <TTag extends ElementType = typeof Anchor>({ theme, className, customTheme, type, as, ...props }: ExtendedLinkProps<TExtendedConfig, TTag>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/modal.d.ts

@@ -15,4 +15,4 @@ export declare function ModalTrigger<T extends ElementType = typeof HeadlessButt
 export declare function ModalTitle(props: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
 export declare function ModalDialog(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function ModalClose<T extends ElementType = typeof HeadlessButton>({ as, ...props }: AnyElementProps<T>): import("react/jsx-runtime").JSX.Element;
-export default function Modal({ children, className, onClose, onOpen, place }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onClose, onOpen, place }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/time.d.ts

@@ -12,5 +12,5 @@ type TimeProps = HTMLAttributes<HTMLTimeElement> & Partial<{
     ref?: RefObject<HTMLTimeElement | null>;
 };
 import { HTMLAttributes, RefObject } from 'react';
-export default function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip.d.ts

@@ -23,4 +23,4 @@ import { Placement } from '@floating-ui/react-dom';
 import { Button as HeadlessButton } from '@headlessui/react';
 export declare function TooltipTrigger<T extends ElementType = typeof HeadlessButton>({ as, asChild, children, ...props }: TooltipTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function TooltipPanel<T extends ElementType = 'div'>({ as, children, className, style, ...props }: TooltipPanelProps<T>): import("react/jsx-runtime").JSX.Element;
-export default function Tooltip({ anchor, arrow, arrowClassName, children, delay, offset, onClose, onOpen, portal, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ anchor, arrow, arrowClassName, children, delay, offset, onClose, onOpen, portal, }: TooltipProps): import("react/jsx-runtime").JSX.Element;