milk-lib 0.0.19 → 0.0.21

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,8 +1,22 @@
 <script lang="ts">
   import type { ICheckboxProps } from './Checkbox.types';
-  let { checked = $bindable(), disabled, id, name, value, required, ariaLabel }: ICheckboxProps = $props();
+  let { 
+    checked = $bindable(), 
+    disabled, 
+    id, 
+    name, 
+    value, 
+    required, 
+    ariaLabel,
+    toggleOption
+  }: ICheckboxProps = $props();
 
-  const toggle = () => checked = !checked;
+  const toggle = () => {
+    checked = !checked;
+    if (value) {
+      toggleOption?.(value);
+    }
+  };
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === ' ' || e.key === 'Enter') {
@@ -29,20 +43,8 @@
 >
 
   <span class={`checkbox-icon ${checked ? 'visible1' : ''}`}>
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M20 6L9 17L4 12"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M23.9141 7.41406L9 22.3281L0.585938 13.9141L3.41406 11.0859L9 16.6719L21.0859 4.58594L23.9141 7.41406Z" fill="currentColor"/>
     </svg>
   </span>
 
@@ -54,15 +56,15 @@
 {/if}
 
 <style>.checkbox-button {
-  --size: 14px;
+  --size: 16px;
   --border-width: 2px;
-  --border-radius: 4px;
+  --border-radius: 3px;
   --background-color: white;
   --border-color: var(--line-base);
-  --background-color-checked: var(--bg-secondary-emp-100);
-  --color-checked: white;
+  --background-color-checked: var(--bg-primary-emp-100);
+  --color-checked: var(--icon-base-main);
   --border-color-checked: var(--background-color-checked);
-  --color-outline-focused: var(--bg-secondary-emp-100);
+  --color-outline-focused: var(--bg-primary-emp-100);
   --opacity-disabled: 0.6;
 }
 
@@ -91,12 +93,10 @@
 }
 
 .checkbox-icon {
-  font-size: 0.875em;
-  line-height: 1;
+  line-height: 0;
   pointer-events: none;
   opacity: 0;
-  position: relative;
-  top: 1px;
+  box-sizing: border-box;
 }
 .checkbox-icon.visible1 {
   opacity: 1;

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

@@ -7,4 +7,5 @@ export interface ICheckboxProps {
     ariaLabel?: string;
     required?: boolean;
     indeterminate?: boolean;
+    toggleOption?: (value: string) => void;
 }

package/dist/components/CheckboxGroup/CheckboxGroup.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  
+  import type { CheckboxOption, CheckboxGroupProps } from './CheckboxGroup.types';
+  import { Checkbox } from '../..';
+
+  let {
+    legend = 'Choose options',
+    options = [] as CheckboxOption[],
+    selectedValues = $bindable([] as string[]),
+    name
+  }: CheckboxGroupProps = $props();
+
+  function handleOptionToggle(value: string) {
+    toggleOption(value);
+  }
+
+  const isSelected = (value: string) => selectedValues.includes(value);
+
+  function toggleOption(value: string) {
+    selectedValues = isSelected(value)
+      ? selectedValues.filter((item) => item !== value)
+      : [...selectedValues, value];
+  }
+</script>
+
+<fieldset class="checkbox-group">
+  {#if legend}
+    <legend>{legend}</legend>
+  {/if}
+
+  <ul class="checkbox-list">
+    {#if options.length === 0}
+      <li class="checkbox-placeholder">Нет вариантов для выбора</li>
+    {:else}
+      {#each options as option (option.value)}
+        <li>
+          <label class="checkbox-option" data-disabled={option.disabled || undefined}>
+            <Checkbox
+              id={option.id} name={option.name}
+              checked={isSelected(option.value)}
+              value={option.value}
+              toggleOption={handleOptionToggle}
+            />
+            <span>
+              <span>{option.label}</span>
+              {#if option.hint}
+                <small>{option.hint}</small>
+              {/if}
+            </span>
+          </label>
+        </li>
+      {/each}
+    {/if}
+  </ul>
+
+  <div class="checkbox-selected">
+    <strong>Selected:</strong>
+    {#if selectedValues.length === 0}
+      <span>nothing</span>
+    {:else}
+      <span>{selectedValues.join(', ')}</span>
+    {/if}
+  </div>
+</fieldset>
+
+<style>.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid var(--line-base, #e2e2e2);
+  border-radius: 10px;
+  background: var(--bg-base, #fff);
+}
+
+legend {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.checkbox-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.checkbox-placeholder {
+  color: var(--text-base-placeholder, #7c7c7c);
+  font-size: 14px;
+}
+
+.checkbox-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.checkbox-option[data-disabled=true] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.checkbox-option small {
+  display: block;
+  color: var(--text-base-placeholder, #7c7c7c);
+  font-size: 12px;
+}
+
+.checkbox-selected {
+  font-size: 13px;
+  color: var(--text-base-placeholder, #7c7c7c);
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.checkbox-selected strong {
+  color: var(--text-base-main, #222);
+}</style>

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

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

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

@@ -0,0 +1,14 @@
+export type CheckboxOption = {
+    label: string;
+    value: string;
+    hint?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+};
+export type CheckboxGroupProps = {
+    legend: string;
+    options: CheckboxOption[];
+    selectedValues: string[];
+    name: string;
+};

package/dist/components/CheckboxGroup/CheckboxGroup.types.js

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

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

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

package/dist/components/CheckboxGroup/index.js

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

package/dist/components/Command/CommandRoot.svelte

@@ -81,7 +81,7 @@
   --background-color: var(--bg-base);
   --outter-padding: 4px;
   --border-radius: var(--border-radius-panel);
-  --font-size: 1em;
+  --font-size: 1rem;
   --padding-y: 7px;
   --padding-x: 12px;
   --inner-gap: 7px;

package/dist/components/Select/Select.svelte

@@ -88,8 +88,12 @@
   });
 
 
-  const showMenu = () => (isMenuVisible = true);
-  const hideMenu = () => (isMenuVisible = false);
+  const showMenu = () => {
+    isMenuVisible = true;
+  }
+  const hideMenu = () => {
+    isMenuVisible = false;
+  }
 
   const focusHandler = () => {
     if (!isMenuVisible) {
@@ -107,7 +111,10 @@
       value: item.value
     });
     textInputBlock.focus();
-    hideMenu();
+    setTimeout(() => {
+      hideMenu();
+    }, 50);
+    
   }
 
   const handleCommandInputKeyDown = (e: KeyboardEvent) => {

package/dist/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './Modal';
 export * from './Select';
 export * from './Icon';
 export * from './Checkbox';
+export * from './CheckboxGroup';

package/dist/components/index.js

@@ -16,3 +16,4 @@ export * from './Modal';
 export * from './Select';
 export * from './Icon';
 export * from './Checkbox';
+export * from './CheckboxGroup';

package/dist/styles/index.scss

@@ -3,4 +3,6 @@
 
 html, body {
   color: var(--text-base-main);
+  font-family: var(--font-base);
+  font-size: 16px;
 }

package/package.json

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