@noxlovette/material 0.1.0

package/dist/components/buttons/theme.js

@@ -0,0 +1,495 @@
+import { tv } from 'tailwind-variants';
+export const button = tv({
+    slots: {
+        base: 'md-component-button-base md-btn-morph group max-w-max',
+        icon: 'inline-flex items-center justify-center leading-none'
+    },
+    variants: {
+        variant: {
+            elevated: '',
+            filled: '',
+            tonal: '',
+            outlined: '',
+            text: '',
+            bare: ''
+        },
+        color: {
+            default: '',
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            error: ''
+        },
+        usage: {
+            selection: '',
+            default: ''
+        },
+        size: {
+            xs: {
+                base: 'h-8 gap-2 px-4 md-sys-typescale-label-large font-medium [--btn-shape:1rem] [--btn-pressed-shape:4px]',
+                icon: 'text-[20px] size-5'
+            },
+            sm: {
+                base: 'h-10 gap-2 px-4 md-sys-typescale-label-large font-medium [--btn-shape:1.25rem] [--btn-pressed-shape:4px]',
+                icon: 'size-5 text-[20px]'
+            },
+            md: {
+                base: 'h-14 px-6 gap-2 md-sys-typescale-title-medium font-medium [--btn-shape:1.75rem] [--btn-pressed-shape:12px]',
+                icon: 'size-6 text-[24px]'
+            },
+            lg: {
+                base: 'h-24 px-12 gap-3 md-sys-typescale-headline-small [--btn-shape:3rem] [--btn-pressed-shape:16px]',
+                icon: 'size-8 text-[32px]'
+            },
+            xl: {
+                base: 'h-34 px-16 md-sys-typescale-headline-large gap-4 [--btn-shape:4.25rem] [--btn-pressed-shape:28px]',
+                icon: 'text-[40px] size-10'
+            }
+        },
+        shape: {
+            round: '',
+            square: '[--btn-shape-override:0.375rem]'
+        },
+        selected: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            usage: 'selection',
+            selected: true,
+            class: {
+                base: 'bg-md-sys-color-primary text-md-sys-color-on-primary [--btn-shape-override:0.75rem]'
+            }
+        },
+        {
+            usage: 'selection',
+            selected: false,
+            class: { base: 'bg-md-sys-color-surface-container' }
+        },
+        {
+            variant: 'text',
+            class: { base: 'bg-transparent' }
+        },
+        {
+            variant: 'bare',
+            class: { base: 'bg-transparent' }
+        },
+        {
+            variant: 'filled',
+            color: 'default',
+            class: { base: 'md-component-button-filled-primary' }
+        },
+        {
+            variant: 'filled',
+            color: 'primary',
+            class: { base: 'md-component-button-filled-primary' }
+        },
+        {
+            variant: 'filled',
+            color: 'secondary',
+            class: { base: 'md-component-button-filled-secondary' }
+        },
+        {
+            variant: 'filled',
+            color: 'tertiary',
+            class: { base: 'md-component-button-filled-tertiary' }
+        },
+        {
+            variant: 'filled',
+            color: 'error',
+            class: { base: 'md-component-button-filled-error' }
+        },
+        {
+            variant: 'tonal',
+            color: 'default',
+            class: { base: 'md-component-button-tonal-primary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'primary',
+            class: { base: 'md-component-button-tonal-primary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'secondary',
+            class: { base: 'md-component-button-tonal-secondary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'tertiary',
+            class: { base: 'md-component-button-tonal-tertiary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'error',
+            class: { base: 'md-component-button-tonal-error' }
+        },
+        {
+            variant: 'outlined',
+            color: 'default',
+            class: { base: 'md-component-button-outline-default' }
+        },
+        {
+            variant: 'outlined',
+            color: 'primary',
+            class: { base: 'md-component-button-outline-primary' }
+        },
+        {
+            variant: 'outlined',
+            color: 'secondary',
+            class: { base: 'md-component-button-outline-secondary' }
+        },
+        {
+            variant: 'outlined',
+            color: 'tertiary',
+            class: { base: 'md-component-button-outline-tertiary' }
+        },
+        {
+            variant: 'outlined',
+            color: 'error',
+            class: { base: 'md-component-button-outline-error' }
+        },
+        {
+            variant: 'text',
+            color: 'default',
+            class: { base: 'md-component-button-text-default' }
+        },
+        {
+            variant: 'text',
+            color: 'primary',
+            class: { base: 'md-component-button-text-primary' }
+        },
+        {
+            variant: 'text',
+            color: 'secondary',
+            class: { base: 'md-component-button-text-secondary' }
+        },
+        {
+            variant: 'text',
+            color: 'tertiary',
+            class: { base: 'md-component-button-text-tertiary' }
+        },
+        {
+            variant: 'text',
+            color: 'error',
+            class: { base: 'md-component-button-text-error' }
+        },
+        {
+            variant: 'elevated',
+            color: 'default',
+            class: { base: 'md-component-button-elevated-default' }
+        },
+        {
+            variant: 'elevated',
+            color: 'primary',
+            class: { base: 'md-component-button-elevated-primary' }
+        },
+        {
+            variant: 'elevated',
+            color: 'secondary',
+            class: { base: 'md-component-button-elevated-secondary' }
+        },
+        {
+            variant: 'elevated',
+            color: 'tertiary',
+            class: { base: 'md-component-button-elevated-tertiary' }
+        },
+        {
+            variant: 'elevated',
+            color: 'error',
+            class: { base: 'md-component-button-elevated-error' }
+        }
+    ]
+});
+export const buttonIcon = tv({
+    slots: {
+        base: 'md-component-button-base md-btn-morph group max-w-max',
+        icon: 'inline-flex items-center justify-center leading-none'
+    },
+    variants: {
+        variant: {
+            elevated: '',
+            filled: '',
+            tonal: '',
+            outlined: '',
+            text: '',
+            bare: ''
+        },
+        color: {
+            default: '',
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            error: ''
+        },
+        size: {
+            xs: {
+                base: 'h-8 gap-2 px-4 md-sys-typescale-label-large font-medium [--btn-shape:1rem] [--btn-pressed-shape:4px]',
+                icon: 'text-[20px] size-5'
+            },
+            sm: {
+                base: 'h-10 gap-2 px-4 md-sys-typescale-label-large font-medium [--btn-shape:1.25rem] [--btn-pressed-shape:4px]',
+                icon: 'size-5 text-[20px]'
+            },
+            md: {
+                base: 'h-14 px-6 gap-2 md-sys-typescale-title-medium font-medium [--btn-shape:1.75rem] [--btn-pressed-shape:12px]',
+                icon: 'size-6 text-[24px]'
+            },
+            lg: {
+                base: 'h-24 px-12 gap-3 md-sys-typescale-headline-small [--btn-shape:3rem] [--btn-pressed-shape:16px]',
+                icon: 'size-8 text-[32px]'
+            },
+            xl: {
+                base: 'h-34 px-16 md-sys-typescale-headline-large gap-4 [--btn-shape:4.25rem] [--btn-pressed-shape:28px]',
+                icon: 'text-[40px] size-10'
+            }
+        },
+        width: {
+            narrow: '',
+            wide: '',
+            default: 'aspect-square'
+        },
+        shape: {
+            round: '',
+            square: '[--btn-shape-override:0.75rem]'
+        },
+        selected: {
+            true: '',
+            false: ''
+        },
+        variation: {
+            toggle: '',
+            default: ''
+        }
+    },
+    compoundVariants: [
+        {
+            variation: 'toggle',
+            selected: true,
+            class: {
+                base: 'bg-md-sys-color-primary text-md-sys-color-on-primary [--btn-shape-override:0.75rem]'
+            }
+        },
+        {
+            variation: 'toggle',
+            selected: false,
+            class: { base: 'bg-md-sys-color-surface-container' }
+        },
+        {
+            variant: 'text',
+            class: { base: 'bg-transparent' }
+        },
+        {
+            variant: 'bare',
+            class: { base: 'bg-transparent' }
+        },
+        {
+            variant: 'filled',
+            color: 'default',
+            class: { base: 'md-component-button-filled-primary' }
+        },
+        {
+            variant: 'filled',
+            color: 'primary',
+            class: { base: 'md-component-button-filled-primary' }
+        },
+        {
+            variant: 'filled',
+            color: 'secondary',
+            class: { base: 'md-component-button-filled-secondary' }
+        },
+        {
+            variant: 'filled',
+            color: 'tertiary',
+            class: { base: 'md-component-button-filled-tertiary' }
+        },
+        {
+            variant: 'filled',
+            color: 'error',
+            class: { base: 'md-component-button-filled-error' }
+        },
+        {
+            variant: 'tonal',
+            color: 'default',
+            class: { base: 'md-component-button-tonal-primary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'primary',
+            class: { base: 'md-component-button-tonal-primary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'secondary',
+            class: { base: 'md-component-button-tonal-secondary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'tertiary',
+            class: { base: 'md-component-button-tonal-tertiary' }
+        },
+        {
+            variant: 'tonal',
+            color: 'error',
+            class: { base: 'md-component-button-tonal-error' }
+        },
+        {
+            variant: 'outlined',
+            color: 'default',
+            class: { base: 'md-component-button-outline-default' }
+        },
+        {
+            variant: 'outlined',
+            color: 'primary',
+            class: { base: 'md-component-button-outline-primary' }
+        },
+        {
+            variant: 'outlined',
+            color: 'secondary',
+            class: { base: 'md-component-button-outline-secondary' }
+        },
+        {
+            variant: 'outlined',
+            color: 'tertiary',
+            class: { base: 'md-component-button-outline-tertiary' }
+        },
+        {
+            variant: 'outlined',
+            color: 'error',
+            class: { base: 'md-component-button-outline-error' }
+        },
+        {
+            variant: 'text',
+            color: 'default',
+            class: { base: 'md-component-button-text-default' }
+        },
+        {
+            variant: 'text',
+            color: 'primary',
+            class: { base: 'md-component-button-text-primary' }
+        },
+        {
+            variant: 'text',
+            color: 'secondary',
+            class: { base: 'md-component-button-text-secondary' }
+        },
+        {
+            variant: 'text',
+            color: 'tertiary',
+            class: { base: 'md-component-button-text-tertiary' }
+        },
+        {
+            variant: 'text',
+            color: 'error',
+            class: { base: 'md-component-button-text-error' }
+        },
+        {
+            variant: 'elevated',
+            color: 'default',
+            class: { base: 'md-component-button-elevated-default' }
+        },
+        {
+            variant: 'elevated',
+            color: 'primary',
+            class: { base: 'md-component-button-elevated-primary' }
+        },
+        {
+            variant: 'elevated',
+            color: 'secondary',
+            class: { base: 'md-component-button-elevated-secondary' }
+        },
+        {
+            variant: 'elevated',
+            color: 'tertiary',
+            class: { base: 'md-component-button-elevated-tertiary' }
+        },
+        {
+            variant: 'elevated',
+            color: 'error',
+            class: { base: 'md-component-button-elevated-error' }
+        }
+    ]
+});
+export const buttonGroup = tv({
+    base: 'inline-flex rounded-lg shadow-xs',
+    variants: {
+        size: {
+            sm: '',
+            md: '',
+            lg: ''
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const fab = tv({
+    slots: {
+        base: 'md-component-button-base relative z-50',
+        icon: '',
+        label: ''
+    },
+    variants: {
+        config: {
+            primary: {
+                base: 'md-component-button-filled-primary shadow-elevation-1 hover:shadow-elevation-2',
+                icon: 'text-md-sys-color-on-primary',
+                label: 'text-md-sys-color-on-primary'
+            },
+            secondary: {
+                base: 'md-component-button-filled-secondary shadow-elevation-1 hover:shadow-elevation-2',
+                icon: 'text-md-sys-color-on-secondary',
+                label: 'text-md-sys-color-on-secondary'
+            },
+            tertiary: {
+                base: 'md-component-button-filled-tertiary shadow-elevation-1 hover:shadow-elevation-2',
+                icon: 'text-md-sys-color-on-tertiary',
+                label: 'text-md-sys-color-on-tertiary'
+            }
+        },
+        expanded: {
+            true: 'gap-3 px-4',
+            false: 'aspect-square'
+        },
+        size: {
+            small: {
+                base: 'h-10 rounded-xl before:rounded-xl',
+                icon: 'size-6 text-[24px]',
+                label: 'md-sys-typescale-label-large'
+            },
+            regular: {
+                base: 'h-14 rounded-2xl before:rounded-2xl',
+                icon: 'size-6 text-[24px]',
+                label: 'md-sys-typescale-fab-label'
+            },
+            large: {
+                base: 'h-24 rounded-[28px] before:rounded-[28px]',
+                icon: 'size-9 text-[36px]',
+                label: 'md-sys-typescale-headline-small'
+            }
+        }
+    }
+});
+export const fabMenu = tv({
+    slots: {
+        base: 'gap-2 pb-2 flex flex-col absolute z-[100] overflow-visible p-1'
+    },
+    variants: {
+        position: { top: 'top-16' }
+    }
+});
+export const fabMenuItem = tv({
+    slots: {
+        base: 'md-component-button-base group relative max-w-max h-14 rounded-full before:rounded-full gap-2 px-6 md-sys-typescale-fab-label z-[100] shadow-elevation-2 hover:shadow-elevation-3',
+        icon: 'size-6 text-[24px]'
+    },
+    variants: {
+        variant: {
+            primary: 'md-component-button-filled-primary',
+            secondary: 'md-component-button-tonal-secondary',
+            tertiary: 'md-component-button-outline-tertiary'
+        }
+    }
+});

package/dist/components/buttons/types.d.ts

@@ -0,0 +1,201 @@
+import type { AnchorButtonAttributes, IconProps } from '../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonGroupVariants, ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABMenuVariants, FABVariants } from './theme.js';
+export interface ButtonGroupProps extends ButtonGroupVariants, HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the button group.
+     * @example
+     * <ButtonGroup>
+     *   <Button>Action 1</Button>
+     *   <Button>Action 2</Button>
+     * </ButtonGroup>
+     */
+    children: Snippet;
+    /** Whether all buttons in the group are disabled. */
+    disabled?: boolean;
+}
+export type HTMLButtonOrAnchorAttributes = HTMLButtonAttributes & HTMLAnchorAttributes;
+export type ButtonMDProps = ButtonMDVariants & AnchorButtonAttributes & {
+    /**
+     * The visual style of the button.
+     * - 'filled': High emphasis.
+     * - 'tonal': Medium-high emphasis.
+     * - 'outlined': Medium emphasis.
+     * - 'text': Low emphasis.
+     * - 'elevated': High emphasis with elevation.
+     */
+    variant?: ButtonMDVariants['variant'];
+    /**
+     * The color scheme of the button.
+     */
+    color?: ButtonMDVariants['color'];
+    /**
+     * The size of the button.
+     */
+    size?: ButtonMDVariants['size'];
+    /**
+     * The shape of the button corners.
+     * - 'round': Fully rounded corners.
+     * - 'square': Slightly rounded corners.
+     */
+    shape?: ButtonMDVariants['shape'];
+    /**
+     * The label or content to display inside the button.
+     */
+    children?: Snippet;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Whether the button is currently in a selected state (e.g. for toggle buttons). */
+    selected?: boolean;
+    /** Whether the button behaves as a selection control (scopes selected styling). */
+    usage?: ButtonMDVariants['usage'];
+    /**
+     * Configuration for the leading icon.
+     */
+    iconProps?: IconProps;
+    /**
+     * The URL to link to. If provided, the button will render as an `<a>` tag.
+     */
+    href?: string;
+    /** The `formaction` attribute for the button when used in a form. */
+    formaction?: string;
+    /** Whether the button is in a loading state. Displays a loading indicator and may disable interaction. */
+    loading?: boolean;
+};
+export type ButtonIconProps = ButtonIconVariants & AnchorButtonAttributes & {
+    /**
+     * The visual style of the icon button.
+     */
+    variant?: ButtonIconVariants['variant'];
+    /**
+     * The color scheme of the icon button.
+     */
+    color?: ButtonIconVariants['color'];
+    /**
+     * The size of the icon button.
+     */
+    size?: ButtonIconVariants['size'];
+    /**
+     * The width style of the icon button.
+     * - 'default': Aspect square.
+     * - 'narrow': Narrower width.
+     * - 'wide': Wider width.
+     */
+    width?: ButtonIconVariants['width'];
+    /**
+     * The shape of the icon button corners.
+     */
+    shape?: ButtonIconVariants['shape'];
+    /**
+     * The variation of the icon button.
+     * - 'default': Standard icon button.
+     * - 'toggle': Toggleable icon button.
+     */
+    variation?: ButtonIconVariants['variation'];
+    /**
+     * Optional content to render inside the button (usually not used for icon buttons, but available).
+     */
+    children?: Snippet;
+    /** Whether the icon button is disabled. */
+    disabled?: boolean;
+    /**
+     * Content to display in a tooltip when hovering over the button.
+     * If omitted, no tooltip is shown.
+     */
+    tooltipContent?: string;
+    /** CSS class added to the tooltip trigger wrapper. */
+    triggerClass?: string;
+    /** Configuration for the icon to display. */
+    iconProps: IconProps;
+    /** The URL to link to. If provided, the button will render as an `<a>` tag. */
+    href?: string;
+    /** The `formaction` attribute for the button when used in a form. */
+    formaction?: string;
+    /** Whether the toggle button is pressed (only meaningful when `variation === 'toggle'`). */
+    pressed?: boolean;
+    /** Callback when the pressed state changes (only meaningful when `variation === 'toggle'`). */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Whether the button is in a loading state. Displays a loading indicator instead of the icon. */
+    loading?: boolean;
+    /** The side of the tooltip relative to the button. */
+    triggerSide?: 'top' | 'right' | 'bottom' | 'left';
+    /** The alignment of the tooltip relative to the button. */
+    triggerAlign?: 'start' | 'center' | 'end';
+};
+export type FABProps = FABVariants & AnchorButtonAttributes & {
+    /**
+     * The color configuration of the FAB.
+     */
+    config?: FABVariants['config'];
+    /**
+     * The size of the FAB.
+     */
+    size?: FABVariants['size'];
+    /** Whether the FAB is disabled. */
+    disabled?: boolean;
+    /**
+     * Whether the FAB is in its extended state, showing the label.
+     */
+    expanded?: boolean;
+    /** The text label to display when the FAB is extended. */
+    label?: string;
+    /**
+     * Whether the FAB should toggle a menu when clicked.
+     * If true, use `children` to provide `FABMenuItem` components.
+     */
+    withMenu?: boolean;
+    /** Configuration for the FAB's icon. */
+    iconProps: IconProps;
+    /** The URL to link to. If provided, the FAB will render as an `<a>` tag. */
+    href?: string;
+    /** The `formaction` attribute for the FAB when used in a form. */
+    formaction?: string;
+    /**
+     * The menu items to display when `withMenu` is true.
+     * Expected to be one or more `FABMenuItem` components.
+     */
+    children?: Snippet;
+};
+export type FABMenuProps = FABMenuVariants & HTMLAttributes<HTMLUListElement> & {
+    /**
+     * The vertical position of the menu relative to the anchor.
+     */
+    position?: FABMenuVariants['position'];
+    /**
+     * The menu items. Use `FABMenuItem` components.
+     */
+    children: Snippet;
+};
+export type FABMenuItemProps = FABMenuItemVariants & AnchorButtonAttributes & {
+    /**
+     * The visual variant of the menu item.
+     */
+    variant?: FABMenuItemVariants['variant'];
+    /** Whether the menu item is in a loading state. */
+    loading?: boolean;
+    /**
+     * The content of the menu item (usually a text label).
+     */
+    children: Snippet;
+    /** Configuration for the menu item's icon. */
+    iconProps: IconProps;
+    /** The URL to link to. If provided, the menu item will render as an `<a>` tag. */
+    href?: string;
+    /** The `formaction` attribute for the menu item when used in a form. */
+    formaction?: string;
+};
+export type ToggleMDProps = Pick<ButtonMDVariants, 'size' | 'shape'> & HTMLButtonAttributes & {
+    /** Whether the toggle is currently pressed/selected. Bindable. */
+    pressed?: boolean;
+    /** Callback when pressed state changes. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Label or content inside the toggle. */
+    children?: Snippet;
+    /** Optional leading icon. */
+    iconProps?: IconProps;
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Whether the toggle is in a loading state. */
+    loading?: boolean;
+};

package/dist/components/buttons/types.js

@@ -0,0 +1 @@
+export {};