milk-lib 0.0.14 → 0.0.16

package/README.md

@@ -1,3 +1,11 @@
 # MilkLib Sveltekit components library
 
 Sveltekit library, powered by [`sv`](https://npmjs.com/package/sv).
+
+## Todo
+- Sync ButtonMilk and TextInputMilk css variables with global theme
+
+## Roadmap
++ TextInput Milk
++ TextInput Box
+- Command

package/dist/components/ButtonMilk/ButtonMilk.scss

@@ -46,39 +46,41 @@
   --color: var(--text-base-main);
 }
 
-.Button.Button-lg[data-variant="milk"] {
---padding-y: 7px; 
---padding-x: 20px; 
---font-size: 16px; 
---line-height: 24px; 
---border-radius: 8px; 
---inner-gap: 6px;
+.Button.Button-sm[data-variant="milk"] {
+--padding-y: 5px;
+--padding-x: 10px; 
+--font-size: var(--font-size-sm);
+--line-height: var(--line-height-sm);
+--border-radius: var(--border-radius-button-sm);
+--inner-gap: 3px;
   &.Button-icon {
-    --padding-y: 11px;
-    --padding-x: 11px;
+    --padding-y: 6px;
+    --padding-x: 6px;
   }
 }
+
 .Button.Button-md[data-variant="milk"] {
 --padding-y: 5px; 
 --padding-x: 16px; 
---font-size: 14px; 
---line-height: 20px; 
---border-radius: 8px; 
+--font-size: var(--font-size-md);
+--line-height: var(--line-height-md);
+--border-radius: var(--border-radius-button);
 --inner-gap: 5px;
   &.Button-icon {
     --padding-y: 8px;
     --padding-x: 8px;
   }
 }
-.Button.Button-sm[data-variant="milk"] {
---padding-y: 5px;
---padding-x: 10px; 
---font-size: 12px; 
---line-height: 14px; 
---border-radius: 6px; 
---inner-gap: 3px;
+
+.Button.Button-lg[data-variant="milk"] {
+--padding-y: 7px; 
+--padding-x: 20px; 
+--font-size: var(--font-size-lg);
+--line-height: var(--line-height-lg);
+--border-radius: var(--border-radius-button);
+--inner-gap: 6px;
   &.Button-icon {
-    --padding-y: 6px;
-    --padding-x: 6px;
+    --padding-y: 11px;
+    --padding-x: 11px;
   }
 }

package/dist/components/Command/Command.types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import { type Writable } from 'svelte/store';
+export interface ICommandRootProps {
+    classNames?: string;
+    children: Snippet;
+    maxHeight?: number;
+}
+export interface ICommandListProps {
+    children: Snippet;
+}
+export interface ICommandGroupProps {
+    heading?: string;
+    children: Snippet;
+}
+export interface ICommandItemProps {
+    disabled?: boolean;
+    onClick?: (e: MouseEvent | null) => void;
+    children: Snippet;
+}
+export type CommandItemEntry = {
+    el: HTMLElement;
+    id: symbol;
+    disabled?: boolean;
+};
+export interface ICommandItems {
+    items: Writable<CommandItemEntry[]>;
+    activeItemId: Writable<symbol>;
+    searchQuery: Writable<string>;
+}

package/dist/components/Command/Command.types.js

@@ -0,0 +1 @@
+import {} from 'svelte/store';

package/dist/components/Command/Command.utils.d.ts

@@ -0,0 +1,9 @@
+import type { CommandItemEntry } from './Command.types';
+export declare function sortItemsByDOMPosition(list: {
+    el: HTMLElement;
+    id: symbol;
+}[]): {
+    el: HTMLElement;
+    id: symbol;
+}[];
+export declare function addItemSorted(list: CommandItemEntry[], entry: CommandItemEntry): CommandItemEntry[];

package/dist/components/Command/Command.utils.js

@@ -0,0 +1,8 @@
+export function sortItemsByDOMPosition(list) {
+    return list.slice().sort((a, b) => a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING
+        ? -1
+        : 1);
+}
+export function addItemSorted(list, entry) {
+    return sortItemsByDOMPosition([...list, entry]);
+}

package/dist/components/Command/CommandGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import type { ICommandGroupProps } from './Command.types';
+  let { heading, children } : ICommandGroupProps = $props();
+
+  let commandGroupItemsVisibility = writable<Record<symbol, boolean>>({});
+  setContext('command-group-visibility', { commandGroupItemsVisibility });
+  let allFalse = $derived(Object.getOwnPropertySymbols($commandGroupItemsVisibility)
+        .every(sym => $commandGroupItemsVisibility[sym] === false));
+
+
+
+</script>
+
+
+
+<div class="CommandGroup" class:hidden={allFalse} >
+  {#if heading}
+    <div class="CommandGroup-heading">{heading}</div>
+  {/if}
+  {@render children()}
+</div>
+
+
+
+<style>.CommandGroup {
+  padding: var(--group-padding-y) var(--group-padding-x);
+  border-bottom: 1px solid var(--border-color);
+}
+.CommandGroup.hidden {
+  display: none;
+}
+.CommandGroup:last-of-type {
+  border-bottom: none;
+  padding: 0 var(--group-padding-x);
+}
+
+.CommandGroup .CommandGroup-heading {
+  padding: var(--padding-y) var(--padding-x);
+  color: var(--group-heading-color);
+  font-size: 0.875em;
+}</style>

package/dist/components/Command/CommandGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandGroupProps } from './Command.types';
+declare const CommandGroup: import("svelte").Component<ICommandGroupProps, {}, "">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/components/Command/CommandInput.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { TextInputBlock } from '../..';
+  import type { ITextInputBlockProps } from '../TextInputBlock/TextInputBlock.types';
+  import { Search2LineSystem } from 'svelte-remix';
+  import { getContext } from 'svelte';
+  import { type Writable } from 'svelte/store';
+
+  const { searchQuery } = getContext<{ searchQuery: Writable<string> }>('command-items');
+
+  let value = $state('');
+
+  function onInput(e: Event) {
+    searchQuery.set(value.toLowerCase().trim());
+  }
+
+  interface ICommandInputProps extends ITextInputBlockProps {
+    autoFocus?: boolean;
+    visible?: boolean;
+    placeholder?: string;
+  }
+
+  let { autoFocus, visible=true, placeholder, ...rest }: ICommandInputProps = $props();
+
+</script>
+
+
+<div class={`CommandInput ${visible ? 'visible' : ''}`}>
+  <TextInputBlock
+    readonly={!visible}
+    {autoFocus} 
+    size='lg' 
+    {placeholder}
+    variant="text"
+    onKeyUp={onInput} 
+    bind:value type="text"
+    {...rest}
+  >
+    {#snippet prefix()}
+      <Search2LineSystem size="1em"/>
+    {/snippet}
+  </TextInputBlock>
+</div>
+
+
+<style>.CommandInput {
+  --border-color: var(--line-base);
+  margin-bottom: 0.25rem;
+}
+
+.CommandInput {
+  border-bottom: 1px solid var(--border-color);
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.CommandInput.visible {
+  opacity: 1;
+  position: relative;
+  z-index: 0;
+}</style>

package/dist/components/Command/CommandInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ITextInputBlockProps } from '../TextInputBlock/TextInputBlock.types';
+interface ICommandInputProps extends ITextInputBlockProps {
+    autoFocus?: boolean;
+    visible?: boolean;
+    placeholder?: string;
+}
+declare const CommandInput: import("svelte").Component<ICommandInputProps, {}, "">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/components/Command/CommandItem.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { getContext, onMount, onDestroy } from 'svelte';
+  import { derived, type Writable } from 'svelte/store';
+  import type { ICommandItemProps, ICommandItems } from './Command.types';
+  import { addItemSorted } from './Command.utils';
+
+  let { disabled, onClick, children } : ICommandItemProps = $props();
+  let el: HTMLElement;
+  const itemId = Symbol();
+  let textContent = $state('');
+  let shouldShow = $state(true);
+  const { items, activeItemId, searchQuery }: ICommandItems = getContext('command-items');
+  const { commandGroupItemsVisibility }: { commandGroupItemsVisibility: Writable<Record<symbol, boolean>>} = getContext('command-group-visibility');
+
+  // Определяем нужно ли отображать элемент согласно searchQueryshad
+  $effect(() => {
+    textContent = el?.textContent?.toLowerCase().trim() || '';
+    shouldShow = !$searchQuery || textContent.includes($searchQuery);
+    // Этот блок передает в группу объект со значениями [id]: visible (для каждого CommandItem)
+    commandGroupItemsVisibility.update((recs) => ({ ...recs, [itemId]: shouldShow }));
+  });
+
+  onMount(() => {
+    // Добавляем элемент в Root state
+    items.update(list => addItemSorted(list, { el, id: itemId, disabled: !!disabled }));
+  });
+
+  onDestroy(() => {
+    // Непонятно нахрена это здесь. Это обновляет Root state зачем-то
+    items.update(list => list.filter(item => item.id !== itemId));
+  });
+
+  // Вычисляем активный это элемент или нет
+  const isActive = derived(activeItemId, $itemId => $itemId === itemId);
+
+  function handleClick(e: MouseEvent) {
+    if (disabled) return;
+    activeItemId.set(itemId);
+    onClick?.(e);
+  }
+
+  // Это не тестировалось еще TODO: to test
+  $effect(() => {
+    if ($isActive) {
+      el.scrollIntoView({ block: 'nearest' });
+    }
+  });
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    let key = (e.key);
+    if (key === 'Enter') {
+      onClick?.(null);
+    }
+  }
+  
+</script>
+
+<div 
+  bind:this={el}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  class={`CommandItem ${disabled ? 'disabled' : ''}`} 
+  class:active={$isActive}
+  class:hidden={!shouldShow}
+  role="option" 
+  tabindex="-1"
+  aria-selected={$isActive}
+  data-command-item 
+  data-selected
+>
+  {@render children()}
+</div>
+
+<style>.CommandItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--padding-y) var(--padding-x);
+  gap: var(--inner-gap);
+  cursor: pointer;
+  border-radius: var(--item-border-radius);
+  transition: background 0.3s ease-in-out;
+}
+.CommandItem.hidden {
+  display: none;
+}
+.CommandItem:focus-visible, .CommandItem:focus-within {
+  outline: none;
+}
+.CommandItem.active {
+  background: var(--item-active);
+}
+.CommandItem.active:not(.disabled):hover {
+  background: var(--item-active);
+}
+.CommandItem.disabled {
+  opacity: var(--opacity-item-disabled);
+  cursor: not-allowed;
+}
+.CommandItem:not(.disabled):hover {
+  background: var(--item-hover);
+}</style>

package/dist/components/Command/CommandItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandItemProps } from './Command.types';
+declare const CommandItem: import("svelte").Component<ICommandItemProps, {}, "">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/components/Command/CommandList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { ICommandListProps } from './Command.types';
+  let { children } : ICommandListProps = $props();
+</script>
+
+<div class="CommandList" role="listbox">
+  {@render children()}
+</div>
+
+<style>.CommandList {
+  display: flex;
+  flex-direction: column;
+}</style>

package/dist/components/Command/CommandList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandListProps } from './Command.types';
+declare const CommandList: import("svelte").Component<ICommandListProps, {}, "">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/components/Command/CommandRoot.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable, get } from 'svelte/store';
+  import type { ICommandRootProps, CommandItemEntry, ICommandItems } from './Command.types';
+
+  let { classNames, maxHeight, children }: ICommandRootProps = $props();
+
+  let rootEl: HTMLDivElement;
+  const items = writable<CommandItemEntry[]>([]);
+  let visibleItems = $derived($items.filter(i => {
+    const text = i.el.textContent?.toLowerCase() || '';
+    return text.includes($searchQuery);
+  }));
+  const activeItemId = writable<symbol>();
+  const searchQuery = writable('');
+  setContext<ICommandItems>('command-items', {
+    items,          // список всех зарегистрированных children CommandItem
+    activeItemId,   // ID текущего выбранного
+    searchQuery     // строка поиска
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+
+    if (!visibleItems.length) return;
+
+    const index = visibleItems.findIndex(i => i.id === get(activeItemId));
+    const currentIndex = index === -1 ? 0 : index;
+
+    const findNext = (start: number) => {
+      for (let i = start + 1; i < visibleItems.length; i++) {
+        if (!visibleItems[i].disabled) return i;
+      }
+      return currentIndex;
+    };
+
+    const findPrev = (start: number) => {
+      for (let i = start - 1; i >= 0; i--) {
+        if (!visibleItems[i].disabled) return i;
+      }
+      return currentIndex;
+    };
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = findNext(currentIndex);
+      activeItemId.set(visibleItems[next].id);
+
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = findPrev(currentIndex);
+      activeItemId.set(visibleItems[prev].id);
+    }
+
+    if (e.key === 'Enter') {
+    const id = get(activeItemId);
+    const current = get(items).find(item => item.id === id);
+    if (current && current.el && !current.disabled) {
+      current.el.click(); // Имитируем клик по активному CommandItem
+    }
+  }
+  }
+  
+</script>
+
+<div
+  class={`CommandRoot ${classNames}`}
+  bind:this={rootEl}
+  tabindex="0"
+  onkeydown={handleKeydown}
+  role="listbox"
+  style={`${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ''}`}
+>
+  {@render children()}
+</div>
+
+<style>.CommandRoot {
+  --border-color: var(--line-base);
+  --border-color-focus: var(--line-control-100);
+  --background-color: var(--bg-base);
+  --outter-padding: 4px;
+  --border-radius: var(--border-radius-panel);
+  --font-size: 1em;
+  --padding-y: 7px;
+  --padding-x: 12px;
+  --inner-gap: 7px;
+  --item-hover: var(--bg-base-100);
+  --item-active: var(--bg-base-200);
+  --item-border-radius: var(--border-radius-button);
+  --opacity-item-disabled: 0.6;
+  --group-heading-color: var(--text-base-muted);
+  --group-padding-y: 0;
+  --group-padding-x: 0;
+}
+
+.CommandRoot {
+  padding: var(--outter-padding);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-size: var(--font-size);
+  background: var(--background-color);
+}
+.CommandRoot:focus-visible, .CommandRoot:focus-within {
+  outline: none;
+  border-color: var(--line-control-100);
+}</style>

package/dist/components/Command/CommandRoot.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandRootProps } from './Command.types';
+declare const CommandRoot: import("svelte").Component<ICommandRootProps, {}, "">;
+type CommandRoot = ReturnType<typeof CommandRoot>;
+export default CommandRoot;

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

@@ -0,0 +1,6 @@
+export { default as CommandRoot } from './CommandRoot.svelte';
+export { default as CommandInput } from './CommandInput.svelte';
+export { default as CommandList } from './CommandList.svelte';
+export { default as CommandGroup } from './CommandGroup.svelte';
+export { default as CommandItem } from './CommandItem.svelte';
+export * from './Command.types';

package/dist/components/Command/index.js

@@ -0,0 +1,6 @@
+export { default as CommandRoot } from './CommandRoot.svelte';
+export { default as CommandInput } from './CommandInput.svelte';
+export { default as CommandList } from './CommandList.svelte';
+export { default as CommandGroup } from './CommandGroup.svelte';
+export { default as CommandItem } from './CommandItem.svelte';
+export * from './Command.types';

package/dist/components/TextInputBlock/TextInputBlock.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { TextInputMilk, type TextInputInstance } from '../..';
+  import type { ITextInputBlockProps } from './TextInputBlock.types';
+  import { CloseCircleFillSystem } from 'svelte-remix';
+
+  let {
+    prefix,
+    suffix,
+    disabled,
+    value = $bindable(),
+    placeholder,
+    variant = 'contained',
+    onClear,
+    pseudoFocus,
+    ...rest
+  }: ITextInputBlockProps = $props();
+
+  // Calculate suffix and prefix width
+  let prefixEl = $state<HTMLDivElement | null>(null);
+  let prefixWidth = $derived(prefixEl?.getBoundingClientRect().width || 0);
+
+  let suffixEl = $state<HTMLDivElement | null>(null);
+  let suffixWidth = $derived<number>(suffixEl?.getBoundingClientRect().width || 0);
+
+  // Прокидываем фокус примитива
+  let textInputRef: TextInputInstance;
+  export const focus = () => textInputRef.focus();
+
+  const handleClear = () => {
+    value = "";
+    textInputRef.focus();
+    onClear?.();
+  }
+
+</script>
+
+<div class="TextInputBlock">
+  {#if prefix}
+    <div class="prefix" bind:this={prefixEl}>
+      {@render prefix()}
+    </div>
+  {/if}
+  
+  <TextInputMilk
+    placeholder={prefix ? (prefixWidth !== 0 ? placeholder : '') : placeholder}
+    {variant}
+    {disabled}
+    bind:this={textInputRef}
+    style={`
+      ${prefix ? `padding-left: ${prefixWidth + 4}px; padding-right: ${suffixWidth + 4}px;` : ``}
+      ${pseudoFocus ? `border-color: var(--border-color-focus)` : ``}
+    `}
+    bind:value
+    {...rest}
+  />
+
+
+  {#if onClear && !disabled && value !== ''}
+    <!-- I deliberately excluded this button from tabindex -->
+    <button tabindex="-1" type="button" class="clear-value" style={`right: ${suffixWidth + 12}px;`} onmouseup={handleClear}>
+      <CloseCircleFillSystem size="1em" />
+    </button>
+  {/if}
+
+  {#if suffix}
+    <div class="suffix" bind:this={suffixEl}>
+      {@render suffix()}
+    </div>
+  {/if}
+</div>
+
+<style>.TextInputBlock {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.TextInputBlock .prefix, .TextInputBlock .suffix {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.TextInputBlock .prefix {
+  left: 0;
+  padding-left: 0.75em;
+}
+.TextInputBlock .suffix {
+  right: 0;
+  padding-right: 0.75em;
+}
+.TextInputBlock .clear-value {
+  position: absolute;
+  z-index: 1;
+  top: 4px;
+  bottom: 4px;
+  height: calc(100% - 8px);
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0 4px;
+}
+.TextInputBlock .clear-value:focus {
+  outline: none;
+  background-color: #EDEEF0;
+  border-color: #D3D5DC;
+}</style>

package/dist/components/TextInputBlock/TextInputBlock.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ITextInputBlockProps } from './TextInputBlock.types';
+declare const TextInputBlock: import("svelte").Component<ITextInputBlockProps, {
+    focus: () => void;
+}, "value">;
+type TextInputBlock = ReturnType<typeof TextInputBlock>;
+export default TextInputBlock;

package/dist/components/TextInputBlock/TextInputBlock.types.d.ts

@@ -0,0 +1,8 @@
+import type { ITextInputMilkProps } from '../..';
+import type { Snippet } from 'svelte';
+export interface ITextInputBlockProps extends ITextInputMilkProps {
+    prefix?: Snippet;
+    suffix?: Snippet;
+    onClear?: () => void;
+    pseudoFocus?: boolean;
+}

package/dist/components/TextInputBlock/TextInputBlock.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as TextInputBlock } from './TextInputBlock.svelte';
+export * from './TextInputBlock.types';

package/dist/components/TextInputBlock/index.js

@@ -0,0 +1,2 @@
+export { default as TextInputBlock } from './TextInputBlock.svelte';
+export * from './TextInputBlock.types';

package/dist/components/TextInputMilk/TextInputMilk.scss

@@ -0,0 +1,81 @@
+.TextInput.TextInput-sm {
+  --padding-y: 5px;
+  --padding-x: 5px;
+  --font-size: var(--font-size-sm);
+  --line-height: var(--line-height-sm);
+  --border-radius: var(--border-radius-button-sm);
+}
+
+.TextInput.TextInput-md {
+  --padding-y: 5px;
+  --padding-x: 6px;
+  --font-size: var(--font-size-md);
+  --line-height: var(--line-height-md);
+  --border-radius: var(--border-radius-button);
+}
+
+.TextInput.TextInput-lg {
+  --padding-y: 7px;
+  --padding-x: 12px;
+  --font-size: var(--font-size-lg);
+  --line-height: var(--line-height-lg);
+  --border-radius: var(--border-radius-button);
+}
+
+.TextInput.TextInput-text {
+  --padding-x: 0px;
+  --border-radius: 0;
+  --border-width: 0px;
+  --background-color: transparent;
+  --border-color: transparent;
+  --border-color-focus: transparent;
+}
+.TextInput.TextInput-underlined {
+  --padding-x: 0px;
+
+  --border-radius: 0;
+  --border-style: solid;
+  --border-width: var(--stroke-base);
+  --border-top-width: 0px;
+  --border-bottom-width: var(--border-width);
+  --border-left-width: 0px;
+  --border-right-width: 0px;
+
+  --background-color: #fff;
+  --border-color: #D3D5DC;
+  --border-color-focus: #151617;
+
+  --background-disabled: var(--background-color);
+  --border-color-disabled: var(--border-color);
+  --opacity-disabled: 0.6;
+
+  --border-style-disabled: dashed;
+  --border-width-disabled: var(--border-width);
+  --border-top-width-disabled: 0px;
+  --border-bottom-width-disabled: var(--border-width-disabled);
+  --border-left-width-disabled: 0px;
+  --border-right-width-disabled: 0px;
+
+  --background-readonly: var(--background-disabled);
+  --border-color-readonly: var(--border-color);
+  --opacity-readonly: var(--opacity-disabled);
+
+  --border-style-readonly: dashed;
+  --border-width-readonly: var(--border-width);
+  --border-top-width-readonly: 0px;
+  --border-bottom-width-readonly: var(--border-width);
+  --border-left-width-readonly: 0px;
+  --border-right-width-readonly: 0px;
+
+  --border-color-invalid: #EA6D60;
+  --background-invalid: var(--background-color);
+  --border-style-invalid: var(--border-style);
+  --border-width-invalid: var(--border-width);
+  --border-top-width-invalid: 0px;
+  --border-bottom-width-invalid: var(--border-width);
+  --border-left-width-invalid: 0px;
+  --border-right-width-invalid: 0px;
+}
+.TextInput.TextInput-contained {
+  // Default
+}

package/dist/components/TextInputMilk/TextInputMilk.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { TextInput, type TextInputInstance } from '../..';
+  import type { ITextInputMilkProps } from './TextInputMilk.types';
+
+  import "./TextInputMilk.scss";
+
+  let { 
+    size = 'sm',
+    variant = 'contained',
+    value = $bindable(),
+    ...rest
+  }: ITextInputMilkProps = $props();
+
+  // Прокидываем фокус примитива
+  let textInputRef: TextInputInstance;
+  export const focus = () => textInputRef.focus();
+
+  let sizeClassName = 
+    size === "sm" ? "TextInput-sm" 
+    : size === "md" ? "TextInput-md" 
+    : size === "lg" ? "TextInput-lg" 
+    : "";
+
+  let variantClassname = 
+    variant === "text" ? "TextInput-text"
+    : variant === "underlined" ? "TextInput-underlined"
+    : variant === "contained" ? "TextInput-contained" : ""
+
+  let classNames = `${sizeClassName} ${variantClassname}`;
+
+</script>
+
+
+<TextInput 
+  bind:value
+  bind:this={textInputRef}
+  {classNames}
+  {...rest}
+/>

package/dist/components/TextInputMilk/TextInputMilk.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ITextInputMilkProps } from './TextInputMilk.types';
+import "./TextInputMilk.scss";
+declare const TextInputMilk: import("svelte").Component<ITextInputMilkProps, {
+    focus: () => void;
+}, "value">;
+type TextInputMilk = ReturnType<typeof TextInputMilk>;
+export default TextInputMilk;

package/dist/components/TextInputMilk/TextInputMilk.types.d.ts

@@ -0,0 +1,7 @@
+import type { ITextInputProps } from '../TextInput/TextInput.types';
+export type TextInputMilkSizes = 'sm' | 'md' | 'lg';
+export type TextInputMilkVariants = 'underlined' | 'contained' | 'text';
+export interface ITextInputMilkProps extends ITextInputProps {
+    size?: TextInputMilkSizes;
+    variant?: TextInputMilkVariants;
+}

package/dist/components/TextInputMilk/TextInputMilk.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as TextInputMilk } from './TextInputMilk.svelte';
+export * from './TextInputMilk.types';

package/dist/components/TextInputMilk/index.js

@@ -0,0 +1,2 @@
+export { default as TextInputMilk } from './TextInputMilk.svelte';
+export * from './TextInputMilk.types';

package/dist/components/ThemeProvider/ThemeDefault.js

@@ -12,7 +12,6 @@ export const themeDefault = {
     '--line-success': '#B6F7CB',
     '--line-danger': '#FBC4BF',
     '--line-secondary': '#BEB6F9',
-    // Add line-emp
     '--bg-base': '#fff',
     '--bg-base-100': '#EDEEF0',
     '--bg-base-200': '#E2E4E8',
@@ -64,10 +63,10 @@ export const themeDefault = {
     '--icon-primary-main': '#C29B09',
     '--icon-success-main': '#077129',
     '--icon-danger-main': '#C42A1A',
-    '--border-radius-button-sm': '5',
-    '--border-radius-button': '8',
-    '--border-radius-panel': '12',
-    '--border-radius-window': '20',
+    '--border-radius-button-sm': '5px',
+    '--border-radius-button': '8px',
+    '--border-radius-panel': '12px',
+    '--border-radius-window': '20px',
     '--stroke-base': '1px',
     '--stroke-button': 'var(--stroke-base)',
     '--spacing-xs-1': '4',
@@ -86,5 +85,11 @@ export const themeDefault = {
     '--zindex-modal': '1055',
     '--zindex-popover': '1070',
     '--zindex-tooltip': '1080',
-    '--zindex-toast': '1090'
+    '--zindex-toast': '1090',
+    '--font-size-sm': '12px',
+    '--line-height-sm': '14px',
+    '--font-size-md': '14px',
+    '--line-height-md': '20px',
+    '--font-size-lg': '16px',
+    '--line-height-lg': '24px',
 };

package/dist/components/ThemeProvider/ThemeProvider.types.d.ts

@@ -87,4 +87,10 @@ export interface ITheme {
     '--zindex-popover': string;
     '--zindex-tooltip': string;
     '--zindex-toast': string;
+    '--font-size-sm': string;
+    '--line-height-sm': string;
+    '--font-size-md': string;
+    '--line-height-md': string;
+    '--font-size-lg': string;
+    '--line-height-lg': string;
 }

package/dist/components/index.d.ts

@@ -6,5 +6,8 @@ export * from './ThemeProvider';
 export * from './Button';
 export * from './ButtonMilk';
 export * from './Badge';
-export * from './TextInput';
 export * from './Label';
+export * from './TextInput';
+export * from './TextInputMilk';
+export * from './TextInputBlock';
+export * from './Command';

package/dist/components/index.js

@@ -6,5 +6,8 @@ export * from './ThemeProvider';
 export * from './Button';
 export * from './ButtonMilk';
 export * from './Badge';
-export * from './TextInput';
 export * from './Label';
+export * from './TextInput';
+export * from './TextInputMilk';
+export * from './TextInputBlock';
+export * from './Command';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "milk-lib",
 	"license": "MIT",
-	"version": "0.0.14",
+	"version": "0.0.16",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",