@nonsuch/component-library 0.4.0 → 0.6.0

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

@@ -0,0 +1,30 @@
+/**
+ * NsToggle — A styled toggle switch wrapping Quasar's QToggle.
+ *
+ * Provides opinionated defaults: token-based colours and font styling.
+ */
+export interface NsToggleProps {
+    /** Toggle label text */
+    label?: string;
+    /** v-model value */
+    modelValue?: boolean;
+    /** Quasar colour name */
+    color?: string;
+    /** Use dense (compact) size */
+    dense?: boolean;
+    /** Disable the toggle */
+    disable?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<NsToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NsToggleProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: string;
+    label: string;
+    modelValue: boolean;
+    dense: boolean;
+    disable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,35 @@
+/**
+ * NsTooltip — A styled tooltip wrapping Quasar's QTooltip.
+ *
+ * Provides opinionated defaults: consistent delay, offset,
+ * and token-based styling. Place inside a parent element.
+ */
+export type NsTooltipAnchor = 'top left' | 'top middle' | 'top right' | 'top start' | 'top end' | 'center left' | 'center middle' | 'center right' | 'center start' | 'center end' | 'bottom left' | 'bottom middle' | 'bottom right' | 'bottom start' | 'bottom end';
+export interface NsTooltipProps {
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Offset from anchor element [y, x] */
+    offset?: [number, number];
+    /** Anchor point on the parent */
+    anchor?: NsTooltipAnchor;
+    /** Self alignment point */
+    self?: NsTooltipAnchor;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsTooltipProps> & Readonly<{}>, {
+    anchor: NsTooltipAnchor;
+    delay: number;
+    offset: [number, number];
+    self: NsTooltipAnchor;
+}, {}, {}, {}, 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/NsTooltip/index.d.ts

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

package/dist/composables/index.d.ts

@@ -0,0 +1,4 @@
+export { provideNsLocale, useNsLocale, NsLocaleKey } from './useNsLocale';
+export { useNsDefault } from './useNsDefaults';
+export { useNsDarkMode } from './useNsDarkMode';
+export type { UseNsDarkModeReturn } from './useNsDarkMode';

package/dist/composables/useNsDarkMode.d.ts

@@ -0,0 +1,37 @@
+import { type Ref } from 'vue';
+type DarkModeSource = 'user' | 'system' | 'storage';
+export interface UseNsDarkModeReturn {
+    /** Whether dark mode is currently active */
+    isDark: Readonly<Ref<boolean>>;
+    /** What triggered the current state */
+    source: Readonly<Ref<DarkModeSource>>;
+    /** Enable dark mode */
+    enable: () => void;
+    /** Disable dark mode */
+    disable: () => void;
+    /** Toggle dark mode */
+    toggle: () => void;
+    /** Reset to system preference (clears localStorage override) */
+    useSystem: () => void;
+}
+/**
+ * Dark-mode composable that syncs the document root classes/attributes
+ * with the design-token dark selectors and persists user preference.
+ *
+ * Activation order:
+ * 1. localStorage override (if previously set by user)
+ * 2. OS `prefers-color-scheme: dark`
+ * 3. Explicit `enable()` / `disable()` / `toggle()` calls
+ *
+ * This sets `class="dark"` and `data-theme="dark"` on `<html>`,
+ * matching the selectors in `tokens.css`.
+ *
+ * @example
+ * ```ts
+ * import { useNsDarkMode } from '@nonsuch/component-library'
+ *
+ * const { isDark, toggle } = useNsDarkMode()
+ * ```
+ */
+export declare function useNsDarkMode(): UseNsDarkModeReturn;
+export {};

package/dist/composables/useNsDefaults.d.ts

@@ -0,0 +1,25 @@
+import { type ComputedRef } from 'vue';
+type NestedKeyOf<T> = T extends object ? {
+    [K in keyof T & string]: T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : K;
+}[keyof T & string] : never;
+/**
+ * Resolve a user-visible string with the following priority:
+ *   1. Explicit prop value (if not undefined/null)
+ *   2. Injected Ns locale (via provideNsLocale)
+ *   3. Built-in en-CA default
+ *
+ * Usage inside a component:
+ *
+ * ```ts
+ * const props = defineProps<{ addToCartLabel?: string }>()
+ * const addToCartText = useNsDefault(() => props.addToCartLabel, 'product.addToCart')
+ * ```
+ *
+ * In the template: `{{ addToCartText }}`
+ *
+ * @param prop - Getter returning the optional prop value
+ * @param localeKey - Dot-path key into NsLocaleMessages (e.g. 'product.addToCart')
+ * @returns Computed string, always resolved
+ */
+export declare function useNsDefault<K extends NestedKeyOf<import('../locale/NsLocaleMessages').NsLocaleMessages>>(prop: () => string | undefined | null, localeKey: K): ComputedRef<string>;
+export {};

package/dist/composables/useNsLocale.d.ts

@@ -0,0 +1,28 @@
+import { type InjectionKey } from 'vue';
+import type { NsLocaleMessages } from '../locale/NsLocaleMessages';
+/**
+ * Injection key for the Ns locale messages.
+ * Components use this internally — consumers call provideNsLocale().
+ */
+export declare const NsLocaleKey: InjectionKey<NsLocaleMessages>;
+/**
+ * Provide Ns locale messages to all descendant Ns components.
+ *
+ * Call this in your app's root setup (e.g. App.vue or a boot file):
+ *
+ * ```ts
+ * import { provideNsLocale } from '@nonsuch/component-library'
+ * import { myFrenchLocale } from './locales/fr'
+ *
+ * // In setup()
+ * provideNsLocale(myFrenchLocale)
+ * ```
+ */
+export declare function provideNsLocale(messages: NsLocaleMessages): void;
+/**
+ * Internal composable — used by Ns components to read locale strings.
+ *
+ * Returns the injected locale or falls back to en-CA defaults.
+ * Components should NOT re-export this — it's an implementation detail.
+ */
+export declare function useNsLocale(): NsLocaleMessages;

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+export { default as NsButton } from './components/NsButton/NsButton.vue';
+export type { NsButtonProps } from './components/NsButton/NsButton.vue';
+export { default as NsSkeleton } from './components/NsSkeleton/NsSkeleton.vue';
+export type { NsSkeletonProps, NsSkeletonType, NsSkeletonAnimation, } from './components/NsSkeleton/NsSkeleton.vue';
+export { default as NsThemeProvider } from './components/NsThemeProvider/NsThemeProvider.vue';
+export type { NsThemeProviderProps } from './components/NsThemeProvider/NsThemeProvider.vue';
+export { default as NsInput } from './components/NsInput/NsInput.vue';
+export type { NsInputProps } from './components/NsInput/NsInput.vue';
+export { default as NsCard } from './components/NsCard/NsCard.vue';
+export type { NsCardProps } from './components/NsCard/NsCard.vue';
+export { default as NsSelect } from './components/NsSelect/NsSelect.vue';
+export type { NsSelectProps, NsSelectOption } from './components/NsSelect/NsSelect.vue';
+export { default as NsCheckbox } from './components/NsCheckbox/NsCheckbox.vue';
+export type { NsCheckboxProps } from './components/NsCheckbox/NsCheckbox.vue';
+export { default as NsToggle } from './components/NsToggle/NsToggle.vue';
+export type { NsToggleProps } from './components/NsToggle/NsToggle.vue';
+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 NsBanner } from './components/NsBanner/NsBanner.vue';
+export type { NsBannerProps, NsBannerType } from './components/NsBanner/NsBanner.vue';
+export { default as NsAvatar } from './components/NsAvatar/NsAvatar.vue';
+export type { NsAvatarProps, NsAvatarSize } from './components/NsAvatar/NsAvatar.vue';
+export { default as NsChip } from './components/NsChip/NsChip.vue';
+export type { NsChipProps } from './components/NsChip/NsChip.vue';
+export { default as NsList } from './components/NsList/NsList.vue';
+export type { NsListProps } from './components/NsList/NsList.vue';
+export { default as NsTooltip } from './components/NsTooltip/NsTooltip.vue';
+export type { NsTooltipProps, NsTooltipAnchor } from './components/NsTooltip/NsTooltip.vue';
+export { createNonsuch } from './plugin';
+export type { NsPluginOptions } from './plugin';
+export { createQuasarConfig } from './quasarConfig';
+export type { QuasarConfigOverrides, QuasarBrandColors } from './quasarConfig';
+export type { NsLocaleMessages } from './locale/NsLocaleMessages';
+export { nsLocaleEnCA } from './locale/en-CA';
+export { nsLocaleFrCA } from './locale/fr-CA';
+export { provideNsLocale, useNsLocale, NsLocaleKey } from './composables/useNsLocale';
+export { useNsDefault } from './composables/useNsDefaults';
+export { useNsDarkMode } from './composables/useNsDarkMode';
+export type { UseNsDarkModeReturn } from './composables/useNsDarkMode';
+export type { NsToken } from './tokens';
+export { getToken } from './tokens';

package/dist/locale/NsLocaleMessages.d.ts

@@ -0,0 +1,58 @@
+/**
+ * NsLocaleMessages — typed interface for all Ns-specific strings.
+ *
+ * The library ships default locale objects (nsLocaleEnCA, nsLocaleFrCA).
+ * Consuming apps can merge this into their vue-i18n messages
+ * under a namespace like `$ns`, or provide translations via
+ * the `provideNsLocale()` helper.
+ *
+ * The library itself never imports or calls vue-i18n — it stays
+ * fully decoupled. Components resolve strings via:
+ *   1. Explicit prop (highest priority)
+ *   2. Injected NsLocaleMessages (via provideNsLocale)
+ *   3. Built-in English defaults (nsLocaleEnCA)
+ *
+ * Quasar-originated strings (e.g. "Close", "Clear") continue to
+ * use $q.lang.* and are NOT duplicated here.
+ */
+export interface NsLocaleMessages {
+    /** Common strings shared across components */
+    common: {
+        loading: string;
+        retry: string;
+        cancel: string;
+        confirm: string;
+        save: string;
+        delete: string;
+        edit: string;
+        search: string;
+        noResults: string;
+        showMore: string;
+        showLess: string;
+    };
+    /** Product-related strings (NsProductCard, etc.) */
+    product: {
+        addToCart: string;
+        outOfStock: string;
+        inStock: string;
+        quantity: string;
+        price: string;
+        sale: string;
+    };
+    /** Media/image viewer strings */
+    media: {
+        zoomIn: string;
+        zoomOut: string;
+        fullscreen: string;
+        exitFullscreen: string;
+        previousImage: string;
+        nextImage: string;
+    };
+    /** Form validation messages */
+    validation: {
+        required: string;
+        invalidEmail: string;
+        tooShort: string;
+        tooLong: string;
+    };
+}

package/dist/locale/en-CA.d.ts

@@ -0,0 +1,8 @@
+import type { NsLocaleMessages } from './NsLocaleMessages';
+/**
+ * English (Canada) locale for Ns-specific strings.
+ *
+ * This is the built-in fallback — components use these values
+ * when no locale is provided via provideNsLocale().
+ */
+export declare const nsLocaleEnCA: NsLocaleMessages;

package/dist/locale/fr-CA.d.ts

@@ -0,0 +1,5 @@
+import type { NsLocaleMessages } from './NsLocaleMessages';
+/**
+ * French (Canada) locale for Ns-specific strings.
+ */
+export declare const nsLocaleFrCA: NsLocaleMessages;

package/dist/locale/index.d.ts

@@ -0,0 +1,3 @@
+export type { NsLocaleMessages } from './NsLocaleMessages';
+export { nsLocaleEnCA } from './en-CA';
+export { nsLocaleFrCA } from './fr-CA';

package/dist/nonsuch-components.css

@@ -1 +1 @@
-.ns-button[data-v-7f6c2760]{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-62627927]{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-41ecea50]{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-41ecea50]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-41ecea50],.ns-card--flat[data-v-41ecea50]:hover{box-shadow:none}.ns-card__header[data-v-41ecea50]{font-family:var(--ns-font-family-display)}
+.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)}