@mason-ds/vue 0.2.1 → 0.2.2

package/dist/index.d.cts

@@ -186,6 +186,170 @@ type StackProps = {
     inline?: boolean;
 };
 
+type BoxTone = 'transparent' | 'canvas' | 'surface' | 'elevated';
+
+/** Block primitive — padding, background, radius and border from tokens. */
+declare const Box: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<BoxTone>;
+        default: string;
+    };
+    radius: {
+        type: PropType<RadiusLevel>;
+        default: undefined;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<BoxTone>;
+        default: string;
+    };
+    radius: {
+        type: PropType<RadiusLevel>;
+        default: undefined;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    radius: RadiusLevel;
+    tone: BoxTone;
+    as: string;
+    padding: Level;
+    bordered: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type BoxProps = {
+    as?: string;
+    padding?: Level;
+    tone?: BoxTone;
+    radius?: RadiusLevel;
+    bordered?: boolean;
+};
+
+type GridColumns = 1 | 2 | 3 | 4 | 6 | 12;
+
+/** Layout primitive — CSS grid with token gaps. */
+declare const Grid: vue.DefineComponent<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<GridColumns>;
+        default: number;
+    };
+    gap: {
+        type: PropType<Level>;
+        default: string;
+    };
+    align: {
+        type: PropType<StackAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<StackJustify>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<GridColumns>;
+        default: number;
+    };
+    gap: {
+        type: PropType<Level>;
+        default: string;
+    };
+    align: {
+        type: PropType<StackAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<StackJustify>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    align: StackAlign;
+    justify: StackJustify;
+    gap: Level;
+    columns: GridColumns;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type GridProps = {
+    columns?: GridColumns;
+    gap?: Level;
+    align?: StackAlign;
+    justify?: StackJustify;
+};
+
+/** Layout primitive — centers content and caps width from tokens. */
+declare const Container: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: PropType<Level>;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: PropType<Level>;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    center: boolean;
+    as: string;
+    padding: Level;
+    maxWidth: Level;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type ContainerProps = {
+    as?: string;
+    maxWidth?: Level;
+    padding?: Level;
+    center?: boolean;
+};
+
 type CardTone = 'surface' | 'canvas' | 'elevated';
 
 /** Surface primitive — background, border, radius and shadow from tokens. */
@@ -237,8 +401,8 @@ declare const Card: vue.DefineComponent<vue.ExtractPropTypes<{
     radius: RadiusLevel;
     tone: CardTone;
     padding: Level;
-    elevation: ShadowLevel;
     bordered: boolean;
+    elevation: ShadowLevel;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type CardProps = {
     padding?: Level;
@@ -887,4 +1051,104 @@ type RadioProps = {
     value?: string | number | boolean;
 };
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, Card, type CardProps, type CardTone, Checkbox, type CheckboxProps, Divider, type DividerOrientation, type DividerProps, type FeedbackTone, type FieldSize, type Level, Link, type LinkProps, type LinkTone, type LinkUnderline, MasonProvider, type MasonProviderProps, type MasonTheme, Radio, type RadioProps, type RadiusLevel, Select, type SelectProps, type ShadowLevel, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Text, type TextAlign, type TextElement, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant };
+type ToggleSize = 'sm' | 'md' | 'lg';
+
+/**
+ * On/off switch. Supports `v-model`.
+ * Native checkbox stays for form / keyboard behaviour; `role="switch"` for AT.
+ * Track and thumb colors live in foundationsCss.
+ * Slots: `label`, `description`, `error`.
+ */
+declare const Toggle: vue.DefineComponent<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ToggleSize>;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ToggleSize>;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    error: string;
+    invalid: boolean | undefined;
+    disabled: boolean;
+    size: ToggleSize;
+    description: string;
+    id: string;
+    modelValue: boolean | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type ToggleProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    size?: ToggleSize;
+    id?: string;
+    modelValue?: boolean;
+};
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, Box, type BoxProps, type BoxTone, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, Card, type CardProps, type CardTone, Checkbox, type CheckboxProps, Container, type ContainerProps, Divider, type DividerOrientation, type DividerProps, type FeedbackTone, type FieldSize, Grid, type GridColumns, type GridProps, type Level, Link, type LinkProps, type LinkTone, type LinkUnderline, MasonProvider, type MasonProviderProps, type MasonTheme, Radio, type RadioProps, type RadiusLevel, Select, type SelectProps, type ShadowLevel, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Text, type TextAlign, type TextElement, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toggle, type ToggleProps, type ToggleSize };

package/dist/index.d.ts

@@ -186,6 +186,170 @@ type StackProps = {
     inline?: boolean;
 };
 
+type BoxTone = 'transparent' | 'canvas' | 'surface' | 'elevated';
+
+/** Block primitive — padding, background, radius and border from tokens. */
+declare const Box: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<BoxTone>;
+        default: string;
+    };
+    radius: {
+        type: PropType<RadiusLevel>;
+        default: undefined;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<BoxTone>;
+        default: string;
+    };
+    radius: {
+        type: PropType<RadiusLevel>;
+        default: undefined;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    radius: RadiusLevel;
+    tone: BoxTone;
+    as: string;
+    padding: Level;
+    bordered: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type BoxProps = {
+    as?: string;
+    padding?: Level;
+    tone?: BoxTone;
+    radius?: RadiusLevel;
+    bordered?: boolean;
+};
+
+type GridColumns = 1 | 2 | 3 | 4 | 6 | 12;
+
+/** Layout primitive — CSS grid with token gaps. */
+declare const Grid: vue.DefineComponent<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<GridColumns>;
+        default: number;
+    };
+    gap: {
+        type: PropType<Level>;
+        default: string;
+    };
+    align: {
+        type: PropType<StackAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<StackJustify>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    columns: {
+        type: PropType<GridColumns>;
+        default: number;
+    };
+    gap: {
+        type: PropType<Level>;
+        default: string;
+    };
+    align: {
+        type: PropType<StackAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<StackJustify>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    align: StackAlign;
+    justify: StackJustify;
+    gap: Level;
+    columns: GridColumns;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type GridProps = {
+    columns?: GridColumns;
+    gap?: Level;
+    align?: StackAlign;
+    justify?: StackJustify;
+};
+
+/** Layout primitive — centers content and caps width from tokens. */
+declare const Container: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: PropType<Level>;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: PropType<Level>;
+        default: string;
+    };
+    padding: {
+        type: PropType<Level>;
+        default: undefined;
+    };
+    center: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    center: boolean;
+    as: string;
+    padding: Level;
+    maxWidth: Level;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type ContainerProps = {
+    as?: string;
+    maxWidth?: Level;
+    padding?: Level;
+    center?: boolean;
+};
+
 type CardTone = 'surface' | 'canvas' | 'elevated';
 
 /** Surface primitive — background, border, radius and shadow from tokens. */
@@ -237,8 +401,8 @@ declare const Card: vue.DefineComponent<vue.ExtractPropTypes<{
     radius: RadiusLevel;
     tone: CardTone;
     padding: Level;
-    elevation: ShadowLevel;
     bordered: boolean;
+    elevation: ShadowLevel;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type CardProps = {
     padding?: Level;
@@ -887,4 +1051,104 @@ type RadioProps = {
     value?: string | number | boolean;
 };
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, Card, type CardProps, type CardTone, Checkbox, type CheckboxProps, Divider, type DividerOrientation, type DividerProps, type FeedbackTone, type FieldSize, type Level, Link, type LinkProps, type LinkTone, type LinkUnderline, MasonProvider, type MasonProviderProps, type MasonTheme, Radio, type RadioProps, type RadiusLevel, Select, type SelectProps, type ShadowLevel, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Text, type TextAlign, type TextElement, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant };
+type ToggleSize = 'sm' | 'md' | 'lg';
+
+/**
+ * On/off switch. Supports `v-model`.
+ * Native checkbox stays for form / keyboard behaviour; `role="switch"` for AT.
+ * Track and thumb colors live in foundationsCss.
+ * Slots: `label`, `description`, `error`.
+ */
+declare const Toggle: vue.DefineComponent<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ToggleSize>;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ToggleSize>;
+        default: string;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    error: string;
+    invalid: boolean | undefined;
+    disabled: boolean;
+    size: ToggleSize;
+    description: string;
+    id: string;
+    modelValue: boolean | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type ToggleProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    size?: ToggleSize;
+    id?: string;
+    modelValue?: boolean;
+};
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, Box, type BoxProps, type BoxTone, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, Card, type CardProps, type CardTone, Checkbox, type CheckboxProps, Container, type ContainerProps, Divider, type DividerOrientation, type DividerProps, type FeedbackTone, type FieldSize, Grid, type GridColumns, type GridProps, type Level, Link, type LinkProps, type LinkTone, type LinkUnderline, MasonProvider, type MasonProviderProps, type MasonTheme, Radio, type RadioProps, type RadiusLevel, Select, type SelectProps, type ShadowLevel, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Text, type TextAlign, type TextElement, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toggle, type ToggleProps, type ToggleSize };