@streamscloud/kit 0.2.0 → 0.2.2

package/dist/ui/validatable/cmp.validatable.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { FormValidationHandler } from '../../core/validation';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Field name in the form handler */
+        name: keyof T & string;
+        /** Form validation handler instance */
+        handler: FormValidationHandler<T>;
+        /** Show errors even if field was not touched */
+        disableTouchedTracking?: boolean;
+        children: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Wraps a form field and displays validation errors from a FormValidationHandler.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--validatable--error--color` | Error text and accent color | destructive-500 |
+ * | `--sc-kit--validatable--error--position` | Error message positioning | `absolute` |
+ * | `--sc-kit--validatable--error--left` | Error left offset | `0` |
+ * | `--sc-kit--validatable--error--right` | Error right offset | `0` |
+ * | `--sc-kit--validatable--margin-bottom` | Bottom margin for spacing | `1.1em` |
+ * | `--sc-kit--validatable--margin-right` | Right margin for spacing | `0` |
+ * | `--sc-kit--validatable--display` | Display mode | `block` |
+ * | `--sc-kit--validatable--width` | Container width | `auto` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/validatable/cmp.validation-error.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" generics="T extends Record<string, unknown>">let { name, validationResult, children } = $props();
+const showErrors = $derived(validationResult?.errors[name]);
+export {};
+</script>
+
+<div class="validatable" class:validatable--errored={showErrors}>
+  {@render children()}
+  {#if showErrors}
+    <small class="validatable__error">{validationResult!.errors[name]}</small>
+  {/if}
+</div>
+
+<!--
+@component
+Wraps a form field and displays validation errors from a FormValidateResult object.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--validatable--error--color` | Error text and accent color | destructive-500 |
+| `--sc-kit--validatable--error--position` | Error message positioning | `absolute` |
+| `--sc-kit--validatable--margin-bottom` | Bottom margin for spacing | `1.1em` |
+-->
+
+<style>.validatable {
+  --_validatable--error--color: var(--sc-kit--validatable--error--color, #e71d36);
+  --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
+  --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
+  --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
+  --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
+  --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
+  --_validatable--display: var(--sc-kit--validatable--display, block);
+  --_validatable--width: var(--sc-kit--validatable--width, auto);
+  position: relative;
+  margin-bottom: var(--_validatable--margin-bottom);
+  margin-right: var(--_validatable--margin-right);
+  display: var(--_validatable--display);
+  width: var(--_validatable--width);
+}
+.validatable--errored {
+  --_input--explicit-shadow-color: var(--_validatable--error--color);
+}
+.validatable__error {
+  position: var(--_validatable--error--position);
+  top: calc(100% + 0.1em);
+  left: var(--_validatable--error--left);
+  right: var(--_validatable--error--right);
+  display: block;
+  color: var(--_validatable--error--color);
+  font-size: 0.7rem;
+  font-weight: 400;
+}</style>

package/dist/ui/validatable/cmp.validation-error.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { FormValidateResult } from '../../core/validation';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Field name in the validation result */
+        name: keyof T & string;
+        /** Validation result object containing error messages */
+        validationResult?: FormValidateResult<T>;
+        children: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Wraps a form field and displays validation errors from a FormValidateResult object.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--validatable--error--color` | Error text and accent color | destructive-500 |
+ * | `--sc-kit--validatable--error--position` | Error message positioning | `absolute` |
+ * | `--sc-kit--validatable--margin-bottom` | Bottom margin for spacing | `1.1em` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/validatable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Validatable } from './cmp.validatable.svelte';
+export { default as ValidationError } from './cmp.validation-error.svelte';

package/dist/ui/validatable/index.js

@@ -0,0 +1,2 @@
+export { default as Validatable } from './cmp.validatable.svelte';
+export { default as ValidationError } from './cmp.validation-error.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -105,10 +105,6 @@
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
-    "./ui/form-group": {
-      "types": "./dist/ui/form-group/index.d.ts",
-      "svelte": "./dist/ui/form-group/index.js"
-    },
     "./ui/dropdown": {
       "types": "./dist/ui/dropdown/index.d.ts",
       "svelte": "./dist/ui/dropdown/index.js"
@@ -117,6 +113,14 @@
       "types": "./dist/ui/dynamic-component/index.d.ts",
       "svelte": "./dist/ui/dynamic-component/index.js"
     },
+    "./ui/emoji-picker": {
+      "types": "./dist/ui/emoji-picker/index.d.ts",
+      "svelte": "./dist/ui/emoji-picker/index.js"
+    },
+    "./ui/form-group": {
+      "types": "./dist/ui/form-group/index.d.ts",
+      "svelte": "./dist/ui/form-group/index.js"
+    },
     "./ui/html-block": {
       "types": "./dist/ui/html-block/index.d.ts",
       "svelte": "./dist/ui/html-block/index.js"
@@ -141,6 +145,10 @@
       "types": "./dist/ui/infinite-scrolling/index.d.ts",
       "svelte": "./dist/ui/infinite-scrolling/index.js"
     },
+    "./ui/inputs": {
+      "types": "./dist/ui/inputs/index.d.ts",
+      "svelte": "./dist/ui/inputs/index.js"
+    },
     "./ui/line-clamp": {
       "types": "./dist/ui/line-clamp/index.d.ts",
       "svelte": "./dist/ui/line-clamp/index.js"
@@ -185,6 +193,10 @@
       "types": "./dist/ui/seek-bar/index.d.ts",
       "svelte": "./dist/ui/seek-bar/index.js"
     },
+    "./ui/selects": {
+      "types": "./dist/ui/selects/index.d.ts",
+      "svelte": "./dist/ui/selects/index.js"
+    },
     "./ui/swipe-indicator": {
       "types": "./dist/ui/swipe-indicator/index.d.ts",
       "svelte": "./dist/ui/swipe-indicator/index.js"
@@ -193,6 +205,10 @@
       "types": "./dist/ui/time-ago/index.d.ts",
       "svelte": "./dist/ui/time-ago/index.js"
     },
+    "./ui/validatable": {
+      "types": "./dist/ui/validatable/index.d.ts",
+      "svelte": "./dist/ui/validatable/index.js"
+    },
     "./ui/video": {
       "types": "./dist/ui/video/index.d.ts",
       "svelte": "./dist/ui/video/index.js"
@@ -228,15 +244,20 @@
     "@fluentui/svg-icons": "^1.1.318",
     "@popperjs/core": "^2.11.8",
     "@urql/core": "^5.2.0 || ^6.0.0",
+    "cleave-zen": "^0.0.17",
     "colord": "^2.9.3",
     "cropperjs": "^2.1.0",
     "dequal": "^2.0.0",
     "dompurify": "^3.3.0",
+    "fuse.js": "^7.1.0",
     "mime": "^4.1.0",
     "nanoid": "^5.1.6",
     "rfdc": "^1.4.1",
     "svelte": "^5.50.0",
     "svelte-awesome-color-picker": "^4.1.1",
+    "svelte-dnd-action": "^0.9.69",
+    "svelte-select": "^5.8.3",
+    "tinymce": "^5.10.7",
     "wheel-gestures": "^2.2.48",
     "yup": "^1.6.1"
   },
@@ -251,6 +272,7 @@
     "@types/node": "^25.2.3",
     "@urql/core": "^6.0.1",
     "autoprefixer": "^10.4.24",
+    "cleave-zen": "^0.0.17",
     "colord": "^2.9.3",
     "cropperjs": "^2.1.0",
     "dequal": "^2.0.3",
@@ -265,6 +287,7 @@
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-svelte": "^3.15.0",
     "eslint-plugin-unused-imports": "^4.4.1",
+    "fuse.js": "^7.1.0",
     "globals": "^17.3.0",
     "mime": "^4.1.0",
     "nanoid": "^5.1.6",
@@ -276,8 +299,11 @@
     "svelte": "^5.51.0",
     "svelte-awesome-color-picker": "^4.1.1",
     "svelte-check": "^4.4.0",
+    "svelte-dnd-action": "^0.9.69",
     "svelte-preprocess": "^6.0.3",
+    "svelte-select": "^5.8.3",
     "svelte-sonner": "^1.0.7",
+    "tinymce": "^5.10.7",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.55.0",
     "vite": "^7.3.1",

package/dist/ui/color-picker/cmp.input-stub.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">import { untrack } from 'svelte';
-// inert and on are accepted for Input-compatibility but unused in the stub
-let { value, placeholder = '', inert, icon, clearButton, on } = $props();
-untrack(() => void inert);
-untrack(() => void on);
-</script>
-
-<div class="input-stub">
-  {#if icon}
-    <span class="input-stub__icon">
-      {@render icon()}
-    </span>
-  {/if}
-  <span class="input-stub__text" class:input-stub__text--placeholder={!value}>
-    {value || placeholder}
-  </span>
-  {#if clearButton}
-    <span class="input-stub__action">
-      {@render clearButton()}
-    </span>
-  {/if}
-</div>
-
-<!--
-@component
-Minimal input-field emulation for use inside ColorPicker.
-Reads `--sc-kit--input--*` CSS variables set by the parent. Will be replaced by a real Input component when available.
-
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `value` | `string` | — | Displayed text |
-| `placeholder` | `string` | `''` | Placeholder when value is empty |
-| `inert` | `boolean` | — | Reserved for future Input compatibility |
-| `on` | `Record<string, never>` | — | Reserved for future Input compatibility |
-| `icon` | `Snippet` | — | Left icon slot |
-| `clearButton` | `Snippet` | — | Right action slot |
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--input--height` | Container height | `2rem` |
-| `--sc-kit--input--background` | Background color | light-dark white/dark |
-| `--sc-kit--input--border-color` | Border color | light-dark neutral |
-| `--sc-kit--input--border-radius` | Border radius | `0.25rem` |
-| `--sc-kit--input--text--font-size` | Text font size | `0.875rem` |
-| `--sc-kit--input--text--color` | Text color | light-dark gray/white |
-| `--sc-kit--input--icon--size` | Icon size | `1rem` |
-| `--sc-kit--input--icon--color` | Icon color | inherited |
-| `--sc-kit--input--padding--hor` | Horizontal padding | `0.625rem` |
-| `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
--->
-
-<style>.input-stub {
-  --_input--height: var(--sc-kit--input--height, 2rem);
-  --_input--background: var(--sc-kit--input--background, light-dark(#ffffff, #222222));
-  --_input--border-color: var(--sc-kit--input--border-color, light-dark(#d1d5db, #383838));
-  --_input--border-radius: var(--sc-kit--input--border-radius, 0.25rem);
-  --_input--text-font-size: var(--sc-kit--input--text--font-size, 0.875rem);
-  --_input--text-color: var(--sc-kit--input--text--color, light-dark(#2e2e2e, #ffffff));
-  --_input--icon-size: var(--sc-kit--input--icon--size, 1rem);
-  --_input--icon-color: var(--sc-kit--input--icon--color);
-  --_input--padding-hor: var(--sc-kit--input--padding--hor, 0.625rem);
-  --_input--cursor: var(--sc-kit--input--cursor--inert, default);
-  display: flex;
-  align-items: center;
-  height: var(--_input--height);
-  background: var(--_input--background);
-  border: 1px solid var(--_input--border-color);
-  border-radius: var(--_input--border-radius);
-  padding-inline: var(--_input--padding-hor);
-  color: var(--_input--text-color);
-  cursor: var(--_input--cursor);
-}
-.input-stub__icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-right: 0.625rem;
-  --sc-kit--icon--size: var(--_input--icon-size);
-  --sc-kit--icon--color: var(--_input--icon-color);
-}
-.input-stub__text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--_input--text-font-size);
-}
-.input-stub__text--placeholder {
-  color: light-dark(#9ca3af, #6b7280);
-}
-.input-stub__action {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-left: auto;
-}</style>

package/dist/ui/color-picker/cmp.input-stub.svelte.d.ts

@@ -1,40 +0,0 @@
-import { type Snippet } from 'svelte';
-type Props = {
-    value: string;
-    placeholder?: string;
-    inert?: boolean;
-    on?: Record<string, never>;
-    icon?: Snippet;
-    clearButton?: Snippet;
-};
-/**
- * Minimal input-field emulation for use inside ColorPicker.
- * Reads `--sc-kit--input--*` CSS variables set by the parent. Will be replaced by a real Input component when available.
- *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `value` | `string` | — | Displayed text |
- * | `placeholder` | `string` | `''` | Placeholder when value is empty |
- * | `inert` | `boolean` | — | Reserved for future Input compatibility |
- * | `on` | `Record<string, never>` | — | Reserved for future Input compatibility |
- * | `icon` | `Snippet` | — | Left icon slot |
- * | `clearButton` | `Snippet` | — | Right action slot |
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--input--height` | Container height | `2rem` |
- * | `--sc-kit--input--background` | Background color | light-dark white/dark |
- * | `--sc-kit--input--border-color` | Border color | light-dark neutral |
- * | `--sc-kit--input--border-radius` | Border radius | `0.25rem` |
- * | `--sc-kit--input--text--font-size` | Text font size | `0.875rem` |
- * | `--sc-kit--input--text--color` | Text color | light-dark gray/white |
- * | `--sc-kit--input--icon--size` | Icon size | `1rem` |
- * | `--sc-kit--input--icon--color` | Icon color | inherited |
- * | `--sc-kit--input--padding--hor` | Horizontal padding | `0.625rem` |
- * | `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;