magnaui 0.1.0

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,318 @@
+import * as React from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { type VariantProps } from "../../utils/tv.js";
+export declare const Provider: React.FC<Tooltip.TooltipProviderProps>;
+export declare const Root: React.FC<Tooltip.TooltipProps>;
+export declare const Trigger: React.ForwardRefExoticComponent<Tooltip.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const tooltipVariants: import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        size?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+        variant?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+    } | undefined;
+} & import("../../vendor/tailwind-variants/config.js").TWMConfig & {
+    twMergeConfig: {
+        extend: {
+            classGroups: {
+                'font-size': {
+                    text: string[];
+                }[];
+                shadow: {
+                    shadow: string[];
+                }[];
+                rounded: {
+                    rounded: string[];
+                }[];
+            };
+        };
+    };
+}, {
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, undefined, import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Tooltip.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        size?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+        variant?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+    } | undefined;
+} & import("../../vendor/tailwind-variants/config.js").TWMConfig & {
+    twMergeConfig: {
+        extend: {
+            classGroups: {
+                'font-size': {
+                    text: string[];
+                }[];
+                shadow: {
+                    shadow: string[];
+                }[];
+                rounded: {
+                    rounded: string[];
+                }[];
+            };
+        };
+    };
+}, {
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, undefined, import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}, {
+    variant: {
+        light: {
+            content: string;
+            arrow: string;
+        };
+        dark: {
+            content: string;
+            arrow: string;
+        };
+    };
+    size: {
+        medium: {
+            content: string;
+            arrow: string;
+        };
+        small: {
+            content: string;
+            arrow: string;
+        };
+        xsmall: {
+            content: string;
+            arrow: string;
+        };
+    };
+}>, unknown, unknown, undefined>>> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/tooltip.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Slottable } from "@radix-ui/react-slot";
+import { tv } from "../../utils/tv.js";
+export const Provider = Tooltip.Provider;
+export const Root = Tooltip.Root;
+export const Trigger = Tooltip.Trigger;
+export const tooltipVariants = tv({
+    slots: {
+        content: 'z-50 shadow-tooltip animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        arrow: '-translate-y-1/2 -rotate-45 border [clip-path:polygon(0%_0%,100%_100%,0%_100%)]',
+    },
+    variants: {
+        variant: {
+            light: {
+                content: 'bg-bg-white-0 text-text-strong-950 ring-1 ring-stroke-soft-200',
+                arrow: 'border-stroke-soft-200 bg-bg-white-0',
+            },
+            dark: {
+                content: 'bg-bg-strong-950 text-text-white-0',
+                arrow: 'border-stroke-strong-950 bg-bg-strong-950',
+            },
+        },
+        size: {
+            medium: {
+                content: 'rounded-xl p-3 text-label-sm',
+                arrow: 'rounded-bl-sm',
+            },
+            small: {
+                content: 'rounded-md px-2.5 py-1 text-paragraph-sm',
+                arrow: 'rounded-bl-[3px]',
+            },
+            xsmall: {
+                content: 'rounded px-1.5 py-0.5 text-paragraph-xs',
+                arrow: 'rounded-bl-sm',
+            },
+        },
+    },
+    compoundVariants: [
+        { size: 'xsmall', variant: 'light', class: { arrow: 'size-2' } },
+        { size: 'xsmall', variant: 'dark', class: { arrow: 'size-1.5' } },
+        {
+            size: ['small', 'medium'],
+            variant: 'light',
+            class: { arrow: 'size-2.5' },
+        },
+        { size: ['small', 'medium'], variant: 'dark', class: { arrow: 'size-2' } },
+    ],
+    defaultVariants: { variant: 'dark', size: 'small' },
+});
+export const Content = React.forwardRef(function Content({ size, variant, sideOffset = 4, className, children, ...props }, ref) {
+    const styles = tooltipVariants({ size, variant });
+    return (_jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { ...props, ref: ref, sideOffset: sideOffset, className: styles.content({ class: className }), children: [_jsx(Slottable, { children: children }), _jsx(Tooltip.Arrow, { asChild: true, children: _jsx("div", { className: styles.arrow() }) })] }) }));
+});

package/dist/components/ui/vertical-stepper.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { RiArrowRightSLine } from "@remixicon/react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type StepState = 'default' | 'active' | 'completed';
+export declare function Root({ asChild, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Arrow<T extends React.ElementType = typeof RiArrowRightSLine>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const Item: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    state?: StepState;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function ItemIndicator({ state: override, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    state?: StepState;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/vertical-stepper.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { RiArrowRightSLine } from "@remixicon/react";
+import { cn } from "../../utils/cn.js";
+const Step = React.createContext('default');
+export function Root({ asChild, className, ...props }) {
+    const Element = asChild ? Slot : 'div';
+    return _jsx(Element, { ...props, className: cn('w-full space-y-2', className) });
+}
+export function Arrow({ as, className, ...props }) {
+    const Element = as ?? RiArrowRightSLine;
+    return (_jsx(Element, { ...props, className: cn('size-5 shrink-0 text-text-sub-600', className) }));
+}
+export const Item = React.forwardRef(function Item({ asChild, state = 'default', className, ...props }, ref) {
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(Step.Provider, { value: state, children: _jsx(Element, { type: asChild ? undefined : 'button', ...props, ref: ref, "aria-current": state === 'active' ? 'step' : undefined, className: cn('grid w-full auto-cols-auto grid-flow-col grid-cols-[auto,minmax(0,1fr)] items-center gap-2.5 rounded-10 p-2 text-left text-paragraph-sm', state === 'active'
+                ? 'bg-bg-white-0 text-text-strong-950 shadow-regular-xs'
+                : 'bg-bg-weak-50 text-text-sub-600', className) }) }));
+});
+export function ItemIndicator({ state: override, className, children, ...props }) {
+    const inherited = React.useContext(Step);
+    const state = override ?? inherited;
+    return (_jsx("div", { ...props, className: cn('flex size-5 shrink-0 items-center justify-center rounded-full text-label-xs', state === 'completed'
+            ? 'bg-success-base text-static-white'
+            : state === 'active'
+                ? 'bg-primary-base text-static-white'
+                : 'bg-bg-white-0 text-text-sub-600 shadow-regular-xs', className), children: state === 'completed' ? (_jsx("svg", { className: 'size-5', viewBox: '0 0 20 20', "aria-hidden": 'true', fill: 'none', children: _jsx("polyline", { points: '5.54,9.36 8.73,12.55 14.46,6.82', stroke: 'currentColor', strokeWidth: '1.8' }) })) : (children) }));
+}

package/dist/design/figma-styles.d.ts

@@ -0,0 +1,2 @@
+declare const data: { fileKey: string; texts: { name: string; size: number; height: { unit: string; value: number; }; tracking: { unit: string; value: number; }; weight: number; }[]; effects: { name: string; layers: { inset: boolean; x: number; y: number; blur: number; spread: number; color: number[]; }[]; }[]; };
+export default data;