@mason-ds/vue 0.2.0 → 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;
@@ -704,8 +868,9 @@ type SelectProps = {
 };
 
 /**
- * Native checkbox with a token-backed label row. Supports `v-model`.
- * The check mark uses `accent-color`, so platform behaviour is untouched.
+ * Token-backed checkbox with a drawn indicator. Supports `v-model`.
+ * A visually hidden native input keeps form / keyboard behaviour.
+ * The check mark is painted with `::after` in foundationsCss.
  * Slots: `label`, `description`, `error`.
  */
 declare const Checkbox: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -789,4 +954,201 @@ type CheckboxProps = {
     modelValue?: 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, 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 };
+/**
+ * Token-backed radio with a drawn indicator. Supports `v-model`.
+ * A visually hidden native input keeps form / keyboard behaviour.
+ * The selected dot is painted with `::after` in foundationsCss.
+ * Slots: `label`, `description`, `error`.
+ */
+declare const Radio: 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;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    value: {
+        type: PropType<string | number | 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;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    value: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    error: string;
+    invalid: boolean | undefined;
+    disabled: boolean;
+    value: string | number | boolean | undefined;
+    description: string;
+    id: string;
+    modelValue: string | number | boolean | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type RadioProps = {
+    label?: string;
+    description?: string;
+    error?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    modelValue?: string | number | boolean;
+    value?: string | number | boolean;
+};
+
+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 };