@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

package/dist/components/card/docs.js

@@ -1,45 +1,30 @@
-import { QCardActionsDocsProps, QCardDocsProps, QCardSectionDocsProps } from "./docs.props";
-export let QCardDocs = {
+import { QCardActionsDocsProps, QCardActionsDocsSnippets, QCardDocsProps, QCardDocsSnippets, QCardSectionDocsProps, QCardSectionDocsSnippets, } from "./docs.props";
+export const QCardDocs = {
     name: "QCard",
     description: "Cards provide a clean, flexible, and convenient means of displaying a wide variety of content.",
     docs: {
         props: QCardDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: "Use this slot to add content to the card.",
-            },
-        ],
+        snippets: QCardDocsSnippets,
         methods: [],
         events: [],
     },
 };
-export let QCardSectionDocs = {
+export const QCardSectionDocs = {
     name: "QCardSection",
     description: "Sections are used to group similar content within a card.",
     docs: {
         props: QCardSectionDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: "Use this slot to add content to the card section.",
-            },
-        ],
+        snippets: QCardSectionDocsSnippets,
         methods: [],
         events: [],
     },
 };
-export let QCardActionsDocs = {
+export const QCardActionsDocs = {
     name: "QCardActions",
     description: "Actions hold actionable items like buttons within a card.",
     docs: {
         props: QCardActionsDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: "Use this slot to add action items to the card.",
-            },
-        ],
+        snippets: QCardActionsDocsSnippets,
         methods: [],
         events: [],
     },

package/dist/components/card/docs.props.d.ts

@@ -1,24 +1,7 @@
-export declare const QCardDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QCardSectionDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QCardActionsDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QCardDocsProps: ParsedProp[];
+export declare const QCardDocsSnippets: ParsedSnippet[];
+export declare const QCardSectionDocsProps: ParsedProp[];
+export declare const QCardSectionDocsSnippets: ParsedSnippet[];
+export declare const QCardActionsDocsProps: ParsedProp[];
+export declare const QCardActionsDocsSnippets: ParsedSnippet[];

package/dist/components/card/docs.props.js

@@ -1,62 +1,89 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 4ed22053c33d9bc3f5061c1131923aaf
 export const QCardDocsProps = [
     {
-        name: "bordered",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Puts a border around the card.",
+        isSnippet: false,
+        name: "bordered",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds a border around the card.",
         default: "false",
     },
     {
-        name: "fill",
-        type: "boolean | QCardFillColors",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "fill",
+        type: [
+            {
+                name: "boolean",
+                isClickable: false,
+            },
+            {
+                name: "QCardFillColors",
+                isClickable: true,
+            },
+        ],
         description: "Defines the fill color of the card.",
-        default: "undefined",
-    },
-    {
-        name: "flat",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Makes the card flat, removing its elevation.",
         default: "false",
     },
     {
-        name: "round",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Adds rounded corners to the card.",
+        isSnippet: false,
+        name: "flat",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Use the flat design for the card, removing its elevation.",
         default: "false",
     },
     {
-        name: "title",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Sets the title of the card.",
-        default: "undefined",
+        isSnippet: false,
+        name: "rounded",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds border radius to the card to round its corners.",
+        default: "false",
     },
 ];
+export const QCardDocsSnippets = [];
 export const QCardSectionDocsProps = [
     {
-        name: "horizontal",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "horizontal",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Lays out the section content horizontally.",
         default: "false",
     },
 ];
+export const QCardSectionDocsSnippets = [];
 export const QCardActionsDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "vertical",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Lays out the action items vertically.",
         default: "false",
     },
 ];
+export const QCardActionsDocsSnippets = [];

package/dist/components/card/props.d.ts

@@ -1,44 +1,39 @@
-import type { UseAlignProps } from "../../composables/use-align";
-import type { NativeProps } from "../../utils/types";
+import type { UseAlignProps } from "../../composables";
+import type { HTMLAttributes } from "svelte/elements";
 export type QCardFillColors = "primary" | "secondary" | "tertiary";
-export interface QCardProps extends NativeProps {
+export interface QCardProps extends HTMLAttributes<HTMLElement> {
     /**
-     * Puts a border around the card.
+     * Adds a border around the card.
      * @default false
      */
     bordered?: boolean;
     /**
      * Defines the fill color of the card.
-     * @default undefined
+     * @default false
      */
     fill?: boolean | QCardFillColors;
     /**
-     * Makes the card flat, removing its elevation.
+     * Use the flat design for the card, removing its elevation.
      * @default false
      */
     flat?: boolean;
     /**
-     * Adds rounded corners to the card.
+     * Adds border radius to the card to round its corners.
      * @default false
      */
-    round?: boolean;
-    /**
-     * Sets the title of the card.
-     * @default undefined
-     */
-    title?: string;
+    rounded?: boolean;
 }
-export interface QCardSectionProps extends NativeProps {
+export interface QCardSectionProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Lays out the section content horizontally.
      * @default false
      */
     horizontal?: boolean;
 }
-export interface QCardActionsProps extends UseAlignProps, NativeProps {
+export interface QCardActionsProps extends UseAlignProps, HTMLAttributes<HTMLElement> {
     /**
      * Lays out the action items vertically.
      * @default false
      */
-    vertical: boolean;
+    vertical?: boolean;
 }

package/dist/components/checkbox/QCheckbox.svelte

@@ -1,14 +1,20 @@
-<script>import { createClasses } from "../../utils/props";
-export let value = false, label = "", disable = false, userClasses = void 0;
-export { userClasses as class };
-$:
-  classes = createClasses([disable && "disabled"], {
-    component: "q-checkbox",
-    userClasses
-  });
+<script lang="ts">
+  import type { QCheckboxProps } from "./props";
+
+  let {
+    value = $bindable(),
+    label = "",
+    disable = false,
+    ...props
+  }: QCheckboxProps = $props();
 </script>
 
-<label class={classes} {...$$restProps}>
+<label
+  {...props}
+  class={["q-checkbox", props.class, disable && "q-checkbox--disabled"]}
+  aria-disabled={disable || undefined}
+  data-quaff
+>
   <input type="checkbox" bind:checked={value} disabled={disable} />
   <span>{label}</span>
 </label>

package/dist/components/checkbox/QCheckbox.svelte.d.ts

@@ -1,13 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { QCheckboxProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: boolean | undefined;
-        label?: QCheckboxProps["label"];
-        disable?: QCheckboxProps["disable"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -17,5 +10,5 @@ type QCheckboxProps_ = typeof __propDef.props;
 export { QCheckboxProps_ as QCheckboxProps };
 export type QCheckboxEvents = typeof __propDef.events;
 export type QCheckboxSlots = typeof __propDef.slots;
-export default class QCheckbox extends SvelteComponent<QCheckboxProps, QCheckboxEvents, QCheckboxSlots> {
+export default class QCheckbox extends SvelteComponentTyped<QCheckboxProps_, QCheckboxEvents, QCheckboxSlots> {
 }

package/dist/components/checkbox/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QCheckboxDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+export declare const QCheckboxDocs: QComponentDocs;

package/dist/components/checkbox/docs.js

@@ -1,10 +1,10 @@
-import { QCheckboxDocsProps } from "./docs.props";
-export let QCheckboxDocs = {
+import { QCheckboxDocsProps, QCheckboxDocsSnippets } from "./docs.props";
+export const QCheckboxDocs = {
     name: "QCheckbox",
     description: "Checkboxes allow the user to select one or more items from a set.",
     docs: {
         props: QCheckboxDocsProps,
-        slots: [],
+        snippets: QCheckboxDocsSnippets,
         methods: [],
         events: [
             {

package/dist/components/checkbox/docs.props.d.ts

@@ -1,8 +1,3 @@
-export declare const QCheckboxDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QCheckboxDocsProps: ParsedProp[];
+export declare const QCheckboxDocsSnippets: ParsedSnippet[];

package/dist/components/checkbox/docs.props.js

@@ -1,26 +1,41 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 73905a6da0ecb8bcb3aac7359f8ebd3f
 export const QCheckboxDocsProps = [
     {
-        name: "value",
-        type: "boolean",
+        isArray: false,
         optional: false,
-        clickableType: false,
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Controls the checked state of the checkbox.",
         default: "",
     },
     {
-        name: "label",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "Sets the label for the checkbox.",
         default: "undefined",
     },
     {
-        name: "disable",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "disable",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Puts the checkbox in a disabled state, making it unclickable.",
         default: "false",
     },
 ];
+export const QCheckboxDocsSnippets = [];

package/dist/components/checkbox/index.scss

@@ -1,5 +1,7 @@
+@use "$css/mixins";
+
 .q-checkbox {
-  @include selection(checkbox);
+  @include mixins.selection(checkbox);
 
   > span::before {
     content: "check_box_outline_blank";

package/dist/components/checkbox/props.d.ts

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export interface QCheckboxProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QCheckboxProps extends HTMLAttributes<HTMLLabelElement> {
     /**
      * Controls the checked state of the checkbox.
      */

package/dist/components/chip/QChip.scss

@@ -0,0 +1,179 @@
+@use "$css/mixins";
+@use "$css/disabled";
+
+@layer q-chip {
+  .q-chip {
+    $state-layer-opacity: 0;
+    padding-inline: 1rem;
+    border-radius: 0.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 0.5rem;
+    width: fit-content;
+
+    background-color: transparent;
+    color: var(--on-surface);
+
+    cursor: pointer;
+    user-select: none;
+
+    @include mixins.typography(label-large);
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      border-radius: inherit;
+      background-color: mixins.with-alpha(
+        var(--state-layer-color, transparent),
+        var(--state-layer-opacity, 0)
+      );
+    }
+
+    &:hover:not([aria-disabled]) {
+      --state-layer-opacity: 8%;
+    }
+
+    &:focus:not([aria-disabled]) {
+      --state-layer-opacity: 10%;
+    }
+
+    &.q-chip--sm {
+      height: 2rem;
+
+      & > :is(.q-icon, .q-avatar) {
+        --size: 1.125rem;
+      }
+    }
+
+    &.q-chip--md {
+      height: 2.5rem;
+
+      & > :is(.q-icon, .q-avatar) {
+        --size: 1.40625rem;
+      }
+    }
+
+    &.q-chip--lg {
+      height: 3rem;
+
+      & > :is(.q-icon, .q-avatar) {
+        --size: 1.6875rem;
+      }
+    }
+
+    &:focus:not([aria-disabled]) {
+      outline: 1px solid var(--secondary);
+
+      & > .q-icon {
+        color: var(--on-secondary-container);
+      }
+    }
+
+    &.q-chip--outlined {
+      outline: 1px solid var(--outline);
+
+      &:focus:not([aria-disabled]) {
+        outline-color: var(--secondary);
+      }
+    }
+
+    &.q-chip--elevated {
+      @include mixins.elevate(0.5);
+
+      &:hover:not([aria-disabled]) {
+        @include mixins.elevate(1);
+      }
+
+      background-color: var(--surface-container-low);
+    }
+
+    &.q-chip--assist {
+      --state-layer-color: var(--on-surface);
+    }
+
+    &.q-chip--filter {
+      --state-layer-color: var(--on-surface-variant);
+
+      &:focus:not([aria-disabled]) {
+        outline-color: var(--on-surface-variant);
+      }
+
+      &.q-chip--selected {
+        --state-layer-color: var(--on-secondary-container);
+
+        outline-color: var(--secondary-container);
+        outline-width: 0;
+
+        background-color: var(--secondary-container);
+
+        &.q-chip--elevated {
+          color: var(--on-secondary-container);
+        }
+
+        &:hover:not([aria-disabled]):not([aria-disabled]) {
+          @include mixins.elevate(0.5);
+          color: var(--on-secondary-container);
+        }
+      }
+    }
+
+    &.q-chip--input {
+      --state-layer-color: var(--on-surface-variant);
+
+      padding-inline: 0.75rem;
+      color: var(--on-surface-variant);
+
+      & > .q-icon {
+        color: var(--on-surface-variant);
+      }
+    }
+
+    &.q-chip--suggestion {
+      --state-layer-color: var(--on-surface-variant);
+
+      color: var(--on-surface-variant);
+
+      &:focus:not([aria-disabled]) {
+        outline-color: var(--secondary);
+      }
+    }
+  }
+
+  .q-chip > .q-icon {
+    color: var(--primary);
+  }
+
+  .q-chip > :is(.q-icon.q-chip__leading-icon, .q-avatar.q-chip__avatar) {
+    margin-left: -0.5rem;
+  }
+
+  .q-chip > .q-icon.q-chip__trailing-icon {
+    margin-right: -0.5rem;
+  }
+
+  .q-chip.q-chip--input > .q-avatar.q-chip__avatar {
+    --size: 1.5rem;
+  }
+}
+
+// Disabled
+@layer q-chip--disabled {
+  .q-chip[aria-disabled] {
+    @include disabled.base();
+
+    &.q-chip--outlined {
+      outline-color: disabled.rest-color();
+    }
+
+    & .q-icon {
+      color: disabled.font-color();
+    }
+  }
+}