@nonsuch/component-library 0.7.0 → 0.7.2

package/README.md

@@ -224,6 +224,45 @@ All tokens use the `--ns-` prefix and support light/dark mode automatically. Cur
 
 Dark mode activates via `class="dark"`, `data-theme="dark"`, Quasar's `.q-dark`, or `prefers-color-scheme: dark`.
 
+### Breakpoints
+
+The library ships Quasar-aligned breakpoint values and media-query helpers:
+
+```ts
+import {
+  nsBreakpoints,
+  nsMediaUp,
+  nsMediaDown,
+  nsMediaOnly,
+  nsMediaBetween,
+} from '@nonsuch/component-library'
+```
+
+| Name | Min-width | Range          | Note  |
+| ---- | --------- | -------------- | ----- |
+| xs   | 0         | 0 – 599 px     |       |
+| sm   | 600       | 600 – 1023 px  |       |
+| md   | 1024      | 1024 – 1439 px |       |
+| lg   | 1440      | 1440 – 1919 px |       |
+| xl   | 1920      | 1920 – 2559 px |       |
+| xxl  | 2560      | 2560 – 3839 px | 1440p |
+| xxxl | 3840      | 3840 px +      | 4K    |
+
+Media-query helpers return `matchMedia()`-ready strings:
+
+```ts
+nsMediaUp('md') // '(min-width: 1024px)'
+nsMediaDown('md') // '(max-width: 1023px)'
+nsMediaOnly('md') // '(min-width: 1024px) and (max-width: 1439px)'
+nsMediaBetween('sm', 'lg') // '(min-width: 600px) and (max-width: 1919px)'
+```
+
+To customize in the future, spread and override:
+
+```ts
+const custom = { ...nsBreakpoints, lg: 1280 }
+```
+
 ## Development
 
 ```bash
@@ -249,29 +288,67 @@ pnpm build:storybook
 ```text
 src/
   index.ts                # Library entry — exports all public API
+  manifest.ts             # Quasar → Ns component mapping for sync enforcement
   plugin.ts               # createNonsuch() Vue plugin
   quasarConfig.ts         # createQuasarConfig() helper
   components/
     NsAvatar/             # Avatar with size presets
+    NsBadge/              # Styled QBadge wrapper
     NsBanner/             # Info/success/warning/error banners
+    NsBreadcrumbs/        # Breadcrumb navigation
+    NsBreadcrumbElement/  # Individual breadcrumb item
     NsButton/             # Styled QBtn wrapper
+    NsButtonToggle/       # Toggle between button options
     NsCard/               # Card with title/subtitle/actions slots
+    NsCardActions/        # Card action bar
+    NsCardSection/        # Card content section
     NsCheckbox/           # Styled QCheckbox wrapper
     NsChip/               # Tag/filter chip
     NsDialog/             # Modal dialog with header/body/actions
+    NsDrawer/             # Side drawer (within NsLayout)
+    NsExpansionItem/      # Collapsible list item
+    NsFooter/             # App footer (within NsLayout)
     NsForm/               # Form wrapper with validation
+    NsHeader/             # App header (within NsLayout)
+    NsIcon/               # Styled QIcon wrapper
+    NsImage/              # Styled QImg wrapper
+    NsInnerLoading/       # Overlay loading indicator
     NsInput/              # Styled QInput wrapper
+    NsItem/               # List item
+    NsItemLabel/          # List item label
+    NsItemSection/        # List item section
+    NsLayout/             # App layout container
+    NsLinearProgress/     # Linear progress bar
     NsList/               # List with separator defaults
+    NsMenu/               # Dropdown/context menu
+    NsPage/               # Page content area
+    NsPageContainer/      # Page container (within NsLayout)
+    NsPagination/         # Page navigation controls
     NsSelect/             # Styled QSelect dropdown
+    NsSeparator/          # Horizontal/vertical separator
     NsSkeleton/           # Loading skeleton with animation
+    NsSpace/              # Flex spacer
+    NsSpinner/            # Circular spinner
+    NsSpinnerDots/        # Dot-style spinner
+    NsTab/                # Tab item (within NsTabs)
+    NsTabPanel/           # Tab panel content
+    NsTabPanels/          # Tab panels container
+    NsTable/              # Data table
+    NsTableCell/          # Table cell
+    NsTabs/               # Tab navigation bar
     NsThemeProvider/      # Renderless locale provider
+    NsTimeline/           # Timeline container
+    NsTimelineEntry/      # Timeline entry item
     NsToggle/             # Styled QToggle switch
+    NsToolbar/            # Toolbar container
+    NsToolbarTitle/       # Toolbar title
     NsTooltip/            # Tooltip with consistent delays
   composables/
     useNsLocale.ts        # Locale injection/provision
     useNsDarkMode.ts      # Dark mode with persistence
     useNsDefaults.ts      # Default value helper
   locale/                 # en-CA, fr-CA string packs
+  breakpoints/            # Breakpoint values + media query helpers
   tokens/                 # Design token CSS + TS helpers
   fonts/                  # Fixel font files + CSS
 ```

package/dist/breakpoints/index.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Nonsuch Breakpoints
+ *
+ * Adopts Quasar's breakpoint scale as the library default.
+ * Values are customizable — update `nsBreakpoints` if Nonsuch
+ * needs to diverge from Quasar in the future.
+ *
+ * @see https://quasar.dev/style/breakpoints
+ */
+/** Named breakpoint sizes. */
+export type NsBreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+/**
+ * Minimum widths (in pixels) for each breakpoint.
+ *
+ * | Name | Min-width | Range            |
+ * |------|-----------|------------------|
+ * | xs   | 0         | 0 – 599 px       |
+ * | sm   | 600       | 600 – 1023 px    |
+ * | md   | 1024      | 1024 – 1439 px   |
+ * | lg   | 1440      | 1440 – 1919 px   |
+ * | xl   | 1920      | 1920 – 2559 px   |
+ * | xxl  | 2560      | 2560 – 3839 px   | (1440p)
+ * | xxxl | 3840      | 3840 px +        | (4K)
+ *
+ * These match Quasar's defaults. To customize, spread and override:
+ * ```ts
+ * const custom = { ...nsBreakpoints, lg: 1280 }
+ * ```
+ */
+export declare const nsBreakpoints: Record<NsBreakpointName, number>;
+/** Ordered list of breakpoint names from smallest to largest. */
+export declare const nsBreakpointNames: readonly NsBreakpointName[];
+/**
+ * Generate a `min-width` media query string for the given breakpoint.
+ *
+ * @example
+ * ```ts
+ * nsMediaUp('md') // → '(min-width: 1024px)'
+ * ```
+ */
+export declare function nsMediaUp(name: NsBreakpointName): string;
+/**
+ * Generate a `max-width` media query string for the breakpoint
+ * immediately *below* the given one.
+ *
+ * Useful for targeting everything smaller than a breakpoint.
+ *
+ * @example
+ * ```ts
+ * nsMediaDown('md') // → '(max-width: 1023px)' — everything below md
+ * ```
+ */
+export declare function nsMediaDown(name: Exclude<NsBreakpointName, 'xs'>): string;
+/**
+ * Generate a media query string matching exactly one breakpoint range.
+ *
+ * @example
+ * ```ts
+ * nsMediaOnly('md') // → '(min-width: 1024px) and (max-width: 1439px)'
+ * nsMediaOnly('xl') // → '(min-width: 1920px)'
+ * ```
+ */
+export declare function nsMediaOnly(name: NsBreakpointName): string;
+/**
+ * Generate a media query for a range between two breakpoints (inclusive).
+ *
+ * @example
+ * ```ts
+ * nsMediaBetween('sm', 'lg') // → '(min-width: 600px) and (max-width: 1919px)'
+ * ```
+ */
+export declare function nsMediaBetween(from: NsBreakpointName, to: NsBreakpointName): string;

package/dist/components/NsDrawer/NsDrawer.vue.d.ts

@@ -0,0 +1,15 @@
+export interface NsDrawerProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NsDrawer/index.d.ts

@@ -0,0 +1 @@
+export { default as NsDrawer } from './NsDrawer.vue';

package/dist/components/NsExpansionItem/NsExpansionItem.vue.d.ts

@@ -0,0 +1,15 @@
+export interface NsExpansionItemProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsExpansionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsExpansionItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NsExpansionItem/index.d.ts

@@ -0,0 +1 @@
+export { default as NsExpansionItem } from './NsExpansionItem.vue';

package/dist/index.d.ts

@@ -18,6 +18,10 @@ export { default as NsForm } from './components/NsForm/NsForm.vue';
 export type { NsFormProps } from './components/NsForm/NsForm.vue';
 export { default as NsDialog } from './components/NsDialog/NsDialog.vue';
 export type { NsDialogProps } from './components/NsDialog/NsDialog.vue';
+export { default as NsDrawer } from './components/NsDrawer/NsDrawer.vue';
+export type { NsDrawerProps } from './components/NsDrawer/NsDrawer.vue';
+export { default as NsExpansionItem } from './components/NsExpansionItem/NsExpansionItem.vue';
+export type { NsExpansionItemProps } from './components/NsExpansionItem/NsExpansionItem.vue';
 export { default as NsBanner } from './components/NsBanner/NsBanner.vue';
 export type { NsBannerProps, NsBannerType } from './components/NsBanner/NsBanner.vue';
 export { default as NsAvatar } from './components/NsAvatar/NsAvatar.vue';
@@ -109,4 +113,6 @@ export { useNsDarkMode } from './composables/useNsDarkMode';
 export type { UseNsDarkModeReturn } from './composables/useNsDarkMode';
 export type { NsToken } from './tokens';
 export { getToken } from './tokens';
+export type { NsBreakpointName } from './breakpoints';
+export { nsBreakpoints, nsBreakpointNames, nsMediaUp, nsMediaDown, nsMediaOnly, nsMediaBetween, } from './breakpoints';
 export { nsComponentManifest, nsTemplateTagManifest, generateQuasarBanRules } from './manifest';

package/dist/nonsuch-components.css

@@ -1 +1 @@
-.ns-button[data-v-59b40e5f]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium);letter-spacing:var(--ns-letter-spacing-wide)}.ns-skeleton[data-v-dfd40b8a]{border-radius:var(--ns-radius-md)}.ns-input[data-v-7ebf3284],.ns-input[data-v-7ebf3284] .q-field__label{font-family:var(--ns-font-family-text)}.ns-input[data-v-7ebf3284] .q-field__control{border-radius:var(--ns-radius-md)}.ns-card[data-v-7769879a]{border-radius:var(--ns-radius-lg);box-shadow:var(--ns-shadow-sm);font-family:var(--ns-font-family-text);transition:box-shadow var(--ns-duration-normal) var(--ns-easing-default)}.ns-card[data-v-7769879a]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-7769879a],.ns-card--flat[data-v-7769879a]:hover{box-shadow:none}.ns-card__header[data-v-7769879a]{font-family:var(--ns-font-family-display)}.ns-select[data-v-081cebe3],.ns-select[data-v-081cebe3] .q-field__label{font-family:var(--ns-font-family-text)}.ns-select[data-v-081cebe3] .q-field__control{border-radius:var(--ns-radius-md)}.ns-checkbox[data-v-2e481f8b],.ns-toggle[data-v-f8c90530],.ns-form[data-v-e20d14ce]{font-family:var(--ns-font-family-text)}.ns-dialog__card[data-v-4fca48ca]{border-radius:var(--ns-radius-lg);font-family:var(--ns-font-family-text);min-width:320px}.ns-dialog__header[data-v-4fca48ca]{font-family:var(--ns-font-family-display)}.ns-banner[data-v-18ebd6f5]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-banner--info[data-v-18ebd6f5]{background-color:var(--ns-color-info-bg, #e3f2fd);color:var(--ns-color-info-text, #0d47a1)}.ns-banner--success[data-v-18ebd6f5]{background-color:var(--ns-color-success-bg, #e8f5e9);color:var(--ns-color-success-text, #1b5e20)}.ns-banner--warning[data-v-18ebd6f5]{background-color:var(--ns-color-warning-bg, #fff3e0);color:var(--ns-color-warning-text, #e65100)}.ns-banner--error[data-v-18ebd6f5]{background-color:var(--ns-color-error-bg, #ffebee);color:var(--ns-color-error-text, #b71c1c)}.ns-avatar[data-v-6a1b44b8]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium)}.ns-chip[data-v-1a2191f1]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-full, 9999px)}.ns-list[data-v-65aec20e]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-tooltip[data-v-9cb6af8f]{font-family:var(--ns-font-family-text);font-size:var(--ns-font-size-sm, .875rem);border-radius:var(--ns-radius-sm);padding:var(--ns-space-1, 4px) var(--ns-space-2, 8px)}.ns-badge[data-v-4ca05f24],.ns-breadcrumbs[data-v-dee98f71],.ns-breadcrumb-element[data-v-37bfe51b],.ns-button-toggle[data-v-93652c3e],.ns-card-actions[data-v-0d6f776d],.ns-card-section[data-v-781d42ef],.ns-footer[data-v-1fb919cd],.ns-header[data-v-80d27841],.ns-icon[data-v-d068ec18],.ns-image[data-v-c9c9f6c1],.ns-inner-loading[data-v-080672c1],.ns-item[data-v-47978f87],.ns-item-label[data-v-df6024af],.ns-item-section[data-v-340a753a],.ns-layout[data-v-cf90e270],.ns-linear-progress[data-v-79c6443f],.ns-menu[data-v-47a4b7d0],.ns-page[data-v-25e2841e],.ns-page-container[data-v-ac167da5],.ns-pagination[data-v-12fa9287],.ns-separator[data-v-0c2b2ac1],.ns-space[data-v-273ca5fc],.ns-spinner[data-v-5b99a17b],.ns-spinner-dots[data-v-20a70106],.ns-tab[data-v-b97f2cd1],.ns-table[data-v-a45d30cf],.ns-table-cell[data-v-ca0da61b],.ns-tab-panel[data-v-d8f64358],.ns-tab-panels[data-v-dec8ab0f],.ns-tabs[data-v-81224e01],.ns-timeline[data-v-1bf558aa],.ns-timeline-entry[data-v-fa149ea0],.ns-toolbar[data-v-e26a45db],.ns-toolbar-title[data-v-42928844]{font-family:var(--ns-font-family-text)}
+.ns-button[data-v-59b40e5f]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium);letter-spacing:var(--ns-letter-spacing-wide)}.ns-skeleton[data-v-dfd40b8a]{border-radius:var(--ns-radius-md)}.ns-input[data-v-7ebf3284],.ns-input[data-v-7ebf3284] .q-field__label{font-family:var(--ns-font-family-text)}.ns-input[data-v-7ebf3284] .q-field__control{border-radius:var(--ns-radius-md)}.ns-card[data-v-7769879a]{border-radius:var(--ns-radius-lg);box-shadow:var(--ns-shadow-sm);font-family:var(--ns-font-family-text);transition:box-shadow var(--ns-duration-normal) var(--ns-easing-default)}.ns-card[data-v-7769879a]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-7769879a],.ns-card--flat[data-v-7769879a]:hover{box-shadow:none}.ns-card__header[data-v-7769879a]{font-family:var(--ns-font-family-display)}.ns-select[data-v-081cebe3],.ns-select[data-v-081cebe3] .q-field__label{font-family:var(--ns-font-family-text)}.ns-select[data-v-081cebe3] .q-field__control{border-radius:var(--ns-radius-md)}.ns-checkbox[data-v-2e481f8b],.ns-toggle[data-v-f8c90530],.ns-form[data-v-e20d14ce]{font-family:var(--ns-font-family-text)}.ns-dialog__card[data-v-4fca48ca]{border-radius:var(--ns-radius-lg);font-family:var(--ns-font-family-text);min-width:320px}.ns-dialog__header[data-v-4fca48ca]{font-family:var(--ns-font-family-display)}.ns-drawer[data-v-66ca96b0],.ns-expansion-item[data-v-c07366a7]{font-family:var(--ns-font-family-text)}.ns-banner[data-v-18ebd6f5]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-banner--info[data-v-18ebd6f5]{background-color:var(--ns-color-info-bg, #e3f2fd);color:var(--ns-color-info-text, #0d47a1)}.ns-banner--success[data-v-18ebd6f5]{background-color:var(--ns-color-success-bg, #e8f5e9);color:var(--ns-color-success-text, #1b5e20)}.ns-banner--warning[data-v-18ebd6f5]{background-color:var(--ns-color-warning-bg, #fff3e0);color:var(--ns-color-warning-text, #e65100)}.ns-banner--error[data-v-18ebd6f5]{background-color:var(--ns-color-error-bg, #ffebee);color:var(--ns-color-error-text, #b71c1c)}.ns-avatar[data-v-6a1b44b8]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium)}.ns-chip[data-v-1a2191f1]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-full, 9999px)}.ns-list[data-v-65aec20e]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-tooltip[data-v-9cb6af8f]{font-family:var(--ns-font-family-text);font-size:var(--ns-font-size-sm, .875rem);border-radius:var(--ns-radius-sm);padding:var(--ns-space-1, 4px) var(--ns-space-2, 8px)}.ns-badge[data-v-4ca05f24],.ns-breadcrumbs[data-v-dee98f71],.ns-breadcrumb-element[data-v-37bfe51b],.ns-button-toggle[data-v-93652c3e],.ns-card-actions[data-v-0d6f776d],.ns-card-section[data-v-781d42ef],.ns-footer[data-v-1fb919cd],.ns-header[data-v-80d27841],.ns-icon[data-v-d068ec18],.ns-image[data-v-c9c9f6c1],.ns-inner-loading[data-v-080672c1],.ns-item[data-v-47978f87],.ns-item-label[data-v-df6024af],.ns-item-section[data-v-340a753a],.ns-layout[data-v-cf90e270],.ns-linear-progress[data-v-79c6443f],.ns-menu[data-v-47a4b7d0],.ns-page[data-v-25e2841e],.ns-page-container[data-v-ac167da5],.ns-pagination[data-v-12fa9287],.ns-separator[data-v-0c2b2ac1],.ns-space[data-v-273ca5fc],.ns-spinner[data-v-5b99a17b],.ns-spinner-dots[data-v-20a70106],.ns-tab[data-v-b97f2cd1],.ns-table[data-v-a45d30cf],.ns-table-cell[data-v-ca0da61b],.ns-tab-panel[data-v-d8f64358],.ns-tab-panels[data-v-dec8ab0f],.ns-tabs[data-v-81224e01],.ns-timeline[data-v-1bf558aa],.ns-timeline-entry[data-v-fa149ea0],.ns-toolbar[data-v-e26a45db],.ns-toolbar-title[data-v-42928844]{font-family:var(--ns-font-family-text)}