@nonsuch/component-library 0.7.0 → 0.7.1

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,65 @@ 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
+    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/index.d.ts

@@ -109,4 +109,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';