@nqmcreative/ui 0.3.0 → 0.4.1

package/registry.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
 	"homepage": "https://github.com/mukhsamr/nqmcreative-ui",
-	"count": 63,
+	"count": 70,
 	"demoStyle": "matte",
 	"styles": [
 		{
@@ -27,21 +27,6 @@
 		}
 	],
 	"components": [
-		{
-			"name": "LocaleProvider",
-			"slug": "locale-provider",
-			"category": "locale",
-			"description": "Scopes a locale to a subtree — the SSR-safe way to translate.",
-			"subpaths": {
-				"matte": "@nqmcreative/ui/matte/locale-provider",
-				"paper": "@nqmcreative/ui/paper/locale-provider",
-				"sprout": "@nqmcreative/ui/sprout/locale-provider"
-			},
-			"uses": [],
-			"modules": [
-				"locale"
-			]
-		},
 		{
 			"name": "Button",
 			"slug": "button",
@@ -268,6 +253,142 @@
 			"uses": [],
 			"modules": []
 		},
+		{
+			"name": "InputAddon",
+			"slug": "input-addon",
+			"category": "forms",
+			"description": "Fixed label joined to an input inside an InputGroup.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/input-addon",
+				"paper": "@nqmcreative/ui/paper/input-addon",
+				"sprout": "@nqmcreative/ui/sprout/input-addon"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": []
+		},
+		{
+			"name": "SearchInput",
+			"slug": "search-input",
+			"category": "forms",
+			"description": "Search field with a clear button and a debounced callback.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/search-input",
+				"paper": "@nqmcreative/ui/paper/search-input",
+				"sprout": "@nqmcreative/ui/sprout/search-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"tones"
+			]
+		},
+		{
+			"name": "PinInput",
+			"slug": "pin-input",
+			"category": "forms",
+			"description": "One box per character, with paste spreading and arrow keys.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/pin-input",
+				"paper": "@nqmcreative/ui/paper/pin-input",
+				"sprout": "@nqmcreative/ui/sprout/pin-input"
+			},
+			"uses": [],
+			"modules": [
+				"pin",
+				"tones"
+			]
+		},
+		{
+			"name": "TagsInput",
+			"slug": "tags-input",
+			"category": "forms",
+			"description": "Free-text tokens committed on Enter, deduplicated and capped.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/tags-input",
+				"paper": "@nqmcreative/ui/paper/tags-input",
+				"sprout": "@nqmcreative/ui/sprout/tags-input"
+			},
+			"uses": [],
+			"modules": [
+				"tags",
+				"tones"
+			]
+		},
+		{
+			"name": "CurrencyInput",
+			"slug": "currency-input",
+			"category": "forms",
+			"description": "Amount field that groups on blur and binds a number.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/currency-input",
+				"paper": "@nqmcreative/ui/paper/currency-input",
+				"sprout": "@nqmcreative/ui/sprout/currency-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"number",
+				"tones"
+			]
+		},
+		{
+			"name": "TimeInput",
+			"slug": "time-input",
+			"category": "forms",
+			"description": "HH:MM field with steppers, bounds and a minute step.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/time-input",
+				"paper": "@nqmcreative/ui/paper/time-input",
+				"sprout": "@nqmcreative/ui/sprout/time-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"time",
+				"tones"
+			]
+		},
+		{
+			"name": "ColorInput",
+			"slug": "color-input",
+			"category": "forms",
+			"description": "Hex field paired with the native swatch and fixed choices.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/color-input",
+				"paper": "@nqmcreative/ui/paper/color-input",
+				"sprout": "@nqmcreative/ui/sprout/color-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"color",
+				"tones"
+			]
+		},
+		{
+			"name": "FileInput",
+			"slug": "file-input",
+			"category": "forms",
+			"description": "One-line file picker with type, size and count validation.",
+			"subpaths": {
+				"matte": "@nqmcreative/ui/matte/file-input",
+				"paper": "@nqmcreative/ui/paper/file-input",
+				"sprout": "@nqmcreative/ui/sprout/file-input"
+			},
+			"uses": [
+				"Input"
+			],
+			"modules": [
+				"files",
+				"tones"
+			]
+		},
 		{
 			"name": "Combobox",
 			"slug": "combobox",
@@ -283,7 +404,6 @@
 				"actions/anchor",
 				"actions/dismissable",
 				"list",
-				"locale",
 				"tones"
 			]
 		},
@@ -302,7 +422,6 @@
 				"actions/anchor",
 				"actions/dismissable",
 				"list",
-				"locale",
 				"tones"
 			]
 		},
@@ -324,7 +443,6 @@
 				"actions/dismissable",
 				"calendar",
 				"date",
-				"locale",
 				"tones"
 			]
 		},
@@ -342,7 +460,6 @@
 			"modules": [
 				"calendar",
 				"date",
-				"locale",
 				"tones"
 			]
 		},
@@ -359,7 +476,6 @@
 			"uses": [],
 			"modules": [
 				"files",
-				"locale",
 				"tones"
 			]
 		},
@@ -450,7 +566,6 @@
 				"Checkbox"
 			],
 			"modules": [
-				"locale",
 				"table",
 				"tones"
 			]
@@ -480,7 +595,6 @@
 			},
 			"uses": [],
 			"modules": [
-				"locale",
 				"tones"
 			]
 		},
@@ -512,7 +626,6 @@
 			},
 			"uses": [],
 			"modules": [
-				"locale",
 				"tones"
 			]
 		},
@@ -559,7 +672,6 @@
 			],
 			"modules": [
 				"actions/dismissable",
-				"locale",
 				"toast",
 				"tones"
 			]
@@ -632,7 +744,6 @@
 			},
 			"uses": [],
 			"modules": [
-				"locale",
 				"tones"
 			]
 		},
@@ -648,7 +759,6 @@
 			},
 			"uses": [],
 			"modules": [
-				"locale",
 				"pagination",
 				"tones"
 			]
@@ -684,7 +794,6 @@
 				"MenuItem"
 			],
 			"modules": [
-				"locale",
 				"tones"
 			]
 		},
@@ -700,7 +809,6 @@
 			},
 			"uses": [],
 			"modules": [
-				"locale",
 				"tones"
 			]
 		},
@@ -851,8 +959,7 @@
 			},
 			"uses": [],
 			"modules": [
-				"dialog",
-				"locale"
+				"dialog"
 			]
 		},
 		{
@@ -867,8 +974,7 @@
 			},
 			"uses": [],
 			"modules": [
-				"dialog",
-				"locale"
+				"dialog"
 			]
 		},
 		{
@@ -886,7 +992,6 @@
 				"Modal"
 			],
 			"modules": [
-				"locale",
 				"tones"
 			]
 		},
@@ -907,7 +1012,6 @@
 				"actions/dismissable",
 				"dialog",
 				"list",
-				"locale",
 				"tones",
 				"trigger"
 			]
@@ -926,7 +1030,6 @@
 			"modules": [
 				"actions/anchor",
 				"actions/dismissable",
-				"locale",
 				"trigger"
 			]
 		},
@@ -944,7 +1047,6 @@
 			"modules": [
 				"actions/anchor",
 				"actions/dismissable",
-				"locale",
 				"trigger"
 			]
 		},
@@ -1005,7 +1107,6 @@
 			},
 			"uses": [],
 			"modules": [
-				"locale",
 				"theme",
 				"tones"
 			]

package/dist/core/locale.svelte.d.ts

@@ -1,93 +0,0 @@
-/**
- * Every string a component renders on its own — labels, ARIA names, the words
- * inside a rejected-file message. Override them once instead of passing a prop
- * to every instance.
- *
- * Two ways in:
- *
- *   1. `setLocale(idID)` at app start — one global locale, the common case.
- *   2. `<LocaleProvider locale={idID}>` — scoped to a subtree, and the right
- *      choice under SSR, where module state is shared between requests.
- *
- * Per-instance props still win over both: `<Table empty="…" />`.
- */
-export interface Locale {
-    close: string;
-    dismiss: string;
-    loading: string;
-    cancel: string;
-    confirm: string;
-    clear: string;
-    search: string;
-    menu: string;
-    navigation: string;
-    openMenu: string;
-    closeMenu: string;
-    collapseSidebar: string;
-    expandSidebar: string;
-    notifications: string;
-    commandPlaceholder: string;
-    noResults: string;
-    noData: string;
-    selectAllRows: string;
-    selectRow: string;
-    pagination: string;
-    previousPage: string;
-    nextPage: string;
-    breadcrumb: string;
-    comboboxPlaceholder: string;
-    noMatches: string;
-    dropFiles: string;
-    or: string;
-    browse: string;
-    remove: string;
-    rejectedType: string;
-    rejectedSize: string;
-    rejectedCount: string;
-    /** Byte-size units, smallest first. */
-    byteUnits: [string, string, string, string];
-    showPassword: string;
-    hidePassword: string;
-    /** Five buckets, from empty to strongest. */
-    passwordStrength: [string, string, string, string, string];
-    decrease: string;
-    increase: string;
-    /** BCP 47 tag handed to `Intl` for month and weekday names. */
-    dateLocale: string;
-    /** Order of the date parts the input accepts and prints. */
-    dateFormat: 'dmy' | 'mdy' | 'ymd';
-    today: string;
-    previousMonth: string;
-    nextMonth: string;
-    selectDate: string;
-    selected: string;
-    removeItem: string;
-    toggleTheme: string;
-    lightMode: string;
-    darkMode: string;
-}
-export declare const enUS: Locale;
-/** Bahasa Indonesia. Pass to `setLocale` or `<LocaleProvider>`. */
-export declare const idID: Locale;
-export declare class LocaleStore {
-    current: Locale;
-    /** Merges on top of what is already there. */
-    set(next: Partial<Locale>): void;
-    /**
-     * Replaces everything with `enUS` plus `next`. Unlike `set` this never reads
-     * `current`, so it is safe to call from an effect without the write feeding
-     * back into the effect's own dependencies.
-     */
-    replace(next: Partial<Locale>): void;
-}
-/** The global locale, used by any component with no provider above it. */
-export declare const locale: LocaleStore;
-/** Replaces some or all of the global strings. Call once, at app start. */
-export declare function setLocale(next: Partial<Locale>): void;
-/**
- * Scopes a locale to the current component subtree. Call during init — the
- * `LocaleProvider` component does exactly this.
- */
-export declare function provideLocale(next: Partial<Locale>): LocaleStore;
-/** The nearest provided locale, falling back to the global one. */
-export declare function useLocale(): LocaleStore;

package/dist/core/locale.svelte.js

@@ -1,153 +0,0 @@
-/**
- * Every string a component renders on its own — labels, ARIA names, the words
- * inside a rejected-file message. Override them once instead of passing a prop
- * to every instance.
- *
- * Two ways in:
- *
- *   1. `setLocale(idID)` at app start — one global locale, the common case.
- *   2. `<LocaleProvider locale={idID}>` — scoped to a subtree, and the right
- *      choice under SSR, where module state is shared between requests.
- *
- * Per-instance props still win over both: `<Table empty="…" />`.
- */
-import { getContext, setContext } from 'svelte';
-export const enUS = {
-    close: 'Close',
-    dismiss: 'Dismiss',
-    loading: 'Loading',
-    cancel: 'Cancel',
-    confirm: 'Confirm',
-    clear: 'Clear selection',
-    search: 'Search',
-    menu: 'Menu',
-    navigation: 'Navigation',
-    openMenu: 'Open menu',
-    closeMenu: 'Close menu',
-    collapseSidebar: 'Collapse sidebar',
-    expandSidebar: 'Expand sidebar',
-    notifications: 'Notifications',
-    commandPlaceholder: 'Type a command or search…',
-    noResults: 'No results',
-    noData: 'No data',
-    selectAllRows: 'Select all rows',
-    selectRow: 'Select row',
-    pagination: 'Pagination',
-    previousPage: 'Previous page',
-    nextPage: 'Next page',
-    breadcrumb: 'Breadcrumb',
-    comboboxPlaceholder: 'Search…',
-    noMatches: 'No matches',
-    dropFiles: 'Drop files here',
-    or: 'or',
-    browse: 'browse',
-    remove: 'Remove',
-    rejectedType: 'wrong file type',
-    rejectedSize: 'too large',
-    rejectedCount: 'over the file limit',
-    byteUnits: ['B', 'KB', 'MB', 'GB'],
-    showPassword: 'Show password',
-    hidePassword: 'Hide password',
-    passwordStrength: ['Too short', 'Weak', 'Fair', 'Good', 'Strong'],
-    decrease: 'Decrease',
-    increase: 'Increase',
-    dateLocale: 'en-US',
-    dateFormat: 'mdy',
-    today: 'Today',
-    previousMonth: 'Previous month',
-    nextMonth: 'Next month',
-    selectDate: 'Select a date',
-    selected: 'selected',
-    removeItem: 'Remove',
-    toggleTheme: 'Toggle theme',
-    lightMode: 'Light',
-    darkMode: 'Dark'
-};
-/** Bahasa Indonesia. Pass to `setLocale` or `<LocaleProvider>`. */
-export const idID = {
-    close: 'Tutup',
-    dismiss: 'Tutup',
-    loading: 'Memuat',
-    cancel: 'Batal',
-    confirm: 'Konfirmasi',
-    clear: 'Hapus pilihan',
-    search: 'Cari',
-    menu: 'Menu',
-    navigation: 'Navigasi',
-    openMenu: 'Buka menu',
-    closeMenu: 'Tutup menu',
-    collapseSidebar: 'Ciutkan bilah sisi',
-    expandSidebar: 'Bentangkan bilah sisi',
-    notifications: 'Notifikasi',
-    commandPlaceholder: 'Ketik perintah atau cari…',
-    noResults: 'Tidak ada hasil',
-    noData: 'Tidak ada data',
-    selectAllRows: 'Pilih semua baris',
-    selectRow: 'Pilih baris',
-    pagination: 'Paginasi',
-    previousPage: 'Halaman sebelumnya',
-    nextPage: 'Halaman berikutnya',
-    breadcrumb: 'Remah roti',
-    comboboxPlaceholder: 'Cari…',
-    noMatches: 'Tidak ditemukan',
-    dropFiles: 'Letakkan berkas di sini',
-    or: 'atau',
-    browse: 'jelajahi',
-    remove: 'Hapus',
-    rejectedType: 'tipe berkas tidak sesuai',
-    rejectedSize: 'ukuran terlalu besar',
-    rejectedCount: 'melebihi batas jumlah berkas',
-    byteUnits: ['B', 'KB', 'MB', 'GB'],
-    showPassword: 'Tampilkan kata sandi',
-    hidePassword: 'Sembunyikan kata sandi',
-    passwordStrength: ['Terlalu pendek', 'Lemah', 'Cukup', 'Baik', 'Kuat'],
-    decrease: 'Kurangi',
-    increase: 'Tambah',
-    dateLocale: 'id-ID',
-    dateFormat: 'dmy',
-    today: 'Hari ini',
-    previousMonth: 'Bulan sebelumnya',
-    nextMonth: 'Bulan berikutnya',
-    selectDate: 'Pilih tanggal',
-    selected: 'dipilih',
-    removeItem: 'Hapus',
-    toggleTheme: 'Ganti tema',
-    lightMode: 'Terang',
-    darkMode: 'Gelap'
-};
-export class LocaleStore {
-    current = $state({ ...enUS });
-    /** Merges on top of what is already there. */
-    set(next) {
-        this.current = { ...this.current, ...next };
-    }
-    /**
-     * Replaces everything with `enUS` plus `next`. Unlike `set` this never reads
-     * `current`, so it is safe to call from an effect without the write feeding
-     * back into the effect's own dependencies.
-     */
-    replace(next) {
-        this.current = { ...enUS, ...next };
-    }
-}
-const KEY = Symbol.for('@nqmcreative/ui:locale');
-/** The global locale, used by any component with no provider above it. */
-export const locale = new LocaleStore();
-/** Replaces some or all of the global strings. Call once, at app start. */
-export function setLocale(next) {
-    locale.set(next);
-}
-/**
- * Scopes a locale to the current component subtree. Call during init — the
- * `LocaleProvider` component does exactly this.
- */
-export function provideLocale(next) {
-    const store = new LocaleStore();
-    store.replace(next);
-    setContext(KEY, store);
-    return store;
-}
-/** The nearest provided locale, falling back to the global one. */
-export function useLocale() {
-    return getContext(KEY) ?? locale;
-}

package/dist/styles/matte/LocaleProvider.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { provideLocale, type Locale } from '../../core/locale.svelte.js';
-
-	interface Props {
-		/** Full locale or just the keys you want to change. */
-		locale: Partial<Locale>;
-		children: Snippet;
-	}
-
-	let { locale, children }: Props = $props();
-
-	// Seeded during init so the first render already has the right strings —
-	// an effect would leave one frame (and the SSR output) in the default
-	// language. The effect below only handles later changes, e.g. a switcher.
-	// svelte-ignore state_referenced_locally
-	const store = provideLocale(locale);
-
-	$effect(() => {
-		store.replace(locale);
-	});
-</script>
-
-{@render children()}

package/dist/styles/matte/LocaleProvider.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type Locale } from '../../core/locale.svelte.js';
-interface Props {
-    /** Full locale or just the keys you want to change. */
-    locale: Partial<Locale>;
-    children: Snippet;
-}
-declare const LocaleProvider: import("svelte").Component<Props, {}, "">;
-type LocaleProvider = ReturnType<typeof LocaleProvider>;
-export default LocaleProvider;

package/dist/styles/paper/LocaleProvider.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { provideLocale, type Locale } from '../../core/locale.svelte.js';
-
-	interface Props {
-		/** Full locale or just the keys you want to change. */
-		locale: Partial<Locale>;
-		children: Snippet;
-	}
-
-	let { locale, children }: Props = $props();
-
-	// Seeded during init so the first render already has the right strings —
-	// an effect would leave one frame (and the SSR output) in the default
-	// language. The effect below only handles later changes, e.g. a switcher.
-	// svelte-ignore state_referenced_locally
-	const store = provideLocale(locale);
-
-	$effect(() => {
-		store.replace(locale);
-	});
-</script>
-
-{@render children()}

package/dist/styles/paper/LocaleProvider.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type Locale } from '../../core/locale.svelte.js';
-interface Props {
-    /** Full locale or just the keys you want to change. */
-    locale: Partial<Locale>;
-    children: Snippet;
-}
-declare const LocaleProvider: import("svelte").Component<Props, {}, "">;
-type LocaleProvider = ReturnType<typeof LocaleProvider>;
-export default LocaleProvider;

package/dist/styles/sprout/LocaleProvider.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { provideLocale, type Locale } from '../../core/locale.svelte.js';
-
-	interface Props {
-		/** Full locale or just the keys you want to change. */
-		locale: Partial<Locale>;
-		children: Snippet;
-	}
-
-	let { locale, children }: Props = $props();
-
-	// Seeded during init so the first render already has the right strings —
-	// an effect would leave one frame (and the SSR output) in the default
-	// language. The effect below only handles later changes, e.g. a switcher.
-	// svelte-ignore state_referenced_locally
-	const store = provideLocale(locale);
-
-	$effect(() => {
-		store.replace(locale);
-	});
-</script>
-
-{@render children()}

package/dist/styles/sprout/LocaleProvider.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type Locale } from '../../core/locale.svelte.js';
-interface Props {
-    /** Full locale or just the keys you want to change. */
-    locale: Partial<Locale>;
-    children: Snippet;
-}
-declare const LocaleProvider: import("svelte").Component<Props, {}, "">;
-type LocaleProvider = ReturnType<typeof LocaleProvider>;
-export default LocaleProvider;