milk-lib 0.0.7 → 0.0.9

package/dist/components/Button/Button.svelte

@@ -19,6 +19,7 @@
     children,
     style,
     iconButton,
+    dataVariant,
     ...rest
   }: IButtonProps = $props();
 
@@ -33,6 +34,7 @@
   class={`Button ${iconButton ? 'Button-icon' : ''} ${classNames ? classNames : ''}`}
   class:block={block}
   class:loading={loading}
+  {...(dataVariant ? { 'data-variant': dataVariant } : {})}
 >
   {@render children?.()}
   <span class="loader">
@@ -67,7 +69,7 @@
   --inner-gap: 4px;
   --border-width: 1px;
   --border-color: transparent;
-  --hover-border-color: var(--line-base);
+  --hover-border-color: var(--border-color);
   --active-border-color: var(--border-color);
   --disabled-border-color: var(--border-color);
   --focus-color: var(--background-color);

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

@@ -18,4 +18,5 @@ export interface IButtonProps {
     style?: string;
     children: Snippet;
     iconButton?: boolean;
+    dataVariant?: string;
 }

package/dist/components/ButtonMilk/ButtonMilk.scss

@@ -0,0 +1,84 @@
+.Button.Button-base-emphasis[data-variant="milk"] {
+--background-color: var(--bg-base-emp-100);
+--hover-background: var(--bg-base-emp-200);
+--active-background: var(--bg-base-emp-300);
+--color: white
+}
+
+.Button.Button-base-outlined[data-variant="milk"] {
+--background-color: transparent;
+--hover-background: var(--bg-base-200);
+--active-background: var(--bg-base-300);
+--color: var(--text-base-main);
+--border-color: var(--line-control-100);
+--focus-color: var(--line-base-emp);
+}
+
+.Button.Button-base-contained[data-variant="milk"] {
+--background-color: var(--bg-base-100);
+--hover-background: var(--bg-base-200);
+--active-background: var(--bg-base-300);
+--color: var(--text-base-main);
+--focus-color: var(--line-base-emp);
+}
+
+.Button.Button-primary-contained[data-variant="milk"] {
+  --background-color: var(--bg-primary-100);
+  --hover-background: var(--bg-primary-200);
+  --active-background: var(--bg-primary-300);
+  --color: var(--text-base-main);
+  --focus-color: var(--line-primary-emp);
+}
+
+.Button.Button-primary-outlined[data-variant="milk"] {
+  --background-color: transparent;
+  --hover-background: var(--bg-primary-100);
+  --active-background: var(--bg-primary-200);
+  --color: var(--text-base-main);
+  --border-color: var(--line-primary);
+  --focus-color: var(--line-primary-emp);
+}
+
+.Button.Button-primary-emphasis[data-variant="milk"] {
+  --background-color: var(--bg-primary-emp-100);
+  --hover-background: var(--bg-primary-emp-200);
+  --active-background: var(--bg-primary-emp-300);
+  --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-icon {
+    --padding-y: 11px;
+    --padding-x: 11px;
+  }
+}
+.Button.Button-md[data-variant="milk"] {
+--padding-y: 5px; 
+--padding-x: 16px; 
+--font-size: 14px; 
+--line-height: 20px; 
+--border-radius: 8px; 
+--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-icon {
+    --padding-y: 6px;
+    --padding-x: 6px;
+  }
+}

package/dist/components/ButtonMilk/ButtonMilk.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Button, type ButtonInstance } from '../..';
+  import type { IButtonMilkProps } from './ButtonMilk.types';
+  import "./ButtonMilk.scss";
+
+  const { 
+    size = 'sm',
+    variant = 'primary-emphasis',
+    children,
+    ...rest
+  }: IButtonMilkProps = $props();
+
+  // Прокидываем фокус примитива
+  let buttonRef: ButtonInstance;
+  export const focus = () => buttonRef.focus();
+
+  let sizeClassName = 
+    size === "sm" ? "Button-sm" 
+    : size === "md" ? "Button-md" 
+    : size === "lg" ? "Button-lg" 
+    : "";
+
+  let variantClassname = 
+    variant === "primary-emphasis" ? "Button-primary-emphasis" 
+    : variant === "primary-outlined" ? "Button-primary-outlined"
+    : variant === "primary-contained" ? "Button-primary-contained"
+    : variant === "base-contained" ? "Button-base-contained"
+    : variant === "base-outlined" ? "Button-base-outlined"
+    : variant === "base-emphasis" ? "Button-base-emphasis" : ""
+
+  let classNames = `${sizeClassName} ${variantClassname}`;
+
+</script>
+
+<Button
+  bind:this={buttonRef}
+  dataVariant="milk"
+  {classNames}
+  
+  {...rest}
+>
+  {@render children?.()}
+</Button>
+
+<style></style>

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

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

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

@@ -0,0 +1,7 @@
+import type { IButtonProps } from '../Button/Button.types';
+export type ButtonMilkSizes = 'sm' | 'md' | 'lg';
+export type ButtonMilkVariants = 'primary-emphasis' | 'primary-outlined' | 'primary-contained' | 'base-contained' | 'base-outlined' | 'base-emphasis';
+export interface IButtonMilkProps extends IButtonProps {
+    size?: ButtonMilkSizes;
+    variant?: ButtonMilkVariants;
+}

package/dist/components/ButtonMilk/ButtonMilk.types.js

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

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

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

package/dist/components/ButtonMilk/index.js

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

package/dist/components/ThemeProvider/ThemeDefault.js

@@ -8,6 +8,7 @@ export const themeDefault = {
     '--line-control-100': '#ABABB0',
     '--line-base-emp': '#151617',
     '--line-primary': '#FFE27B',
+    '--line-primary-emp': '#F0C013',
     '--line-success': '#B6F7CB',
     '--line-danger': '#FBC4BF',
     '--line-secondary': '#BEB6F9',

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

@@ -9,6 +9,7 @@ export interface ITheme {
     '--line-control-100': string;
     '--line-base-emp': string;
     '--line-primary': string;
+    '--line-primary-emp': string;
     '--line-success': string;
     '--line-danger': string;
     '--line-secondary': string;

package/dist/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './StickyHeader';
 export * from './Sidebar';
 export * from './ThemeProvider';
 export * from './Button';
+export * from './ButtonMilk';

package/dist/components/index.js

@@ -4,3 +4,4 @@ export * from './StickyHeader';
 export * from './Sidebar';
 export * from './ThemeProvider';
 export * from './Button';
+export * from './ButtonMilk';

package/package.json

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