myk-library 1.0.0 → 1.1.0

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

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * The content to display inside the button

package/dist/index.es.js

@@ -38,17 +38,17 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
       background-color: ${({theme:e})=>e.colors.primary[600]};
       color: ${({theme:e})=>e.colors.white};
       border: 1px solid ${({theme:e})=>e.colors.primary[600]};
-      
+
       &:hover:not(:disabled) {
         background-color: ${({theme:e})=>le(.1,e.colors.primary[600])};
         border-color: ${({theme:e})=>le(.1,e.colors.primary[600])};
       }
-      
+
       &:active:not(:disabled) {
         background-color: ${({theme:e})=>le(.15,e.colors.primary[600])};
         transform: translateY(1px);
       }
-      
+
       &:focus {
         box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[200]};
       }
@@ -56,82 +56,60 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
       background-color: ${({theme:e})=>e.colors.gray[200]};
       color: ${({theme:e})=>e.colors.gray[900]};
       border: 1px solid ${({theme:e})=>e.colors.gray[200]};
-      
+
       &:hover:not(:disabled) {
         background-color: ${({theme:e})=>e.colors.gray[300]};
         border-color: ${({theme:e})=>e.colors.gray[300]};
       }
-      
+
       &:active:not(:disabled) {
         background-color: ${({theme:e})=>e.colors.gray[400]};
         transform: translateY(1px);
       }
-      
+
       &:focus {
         box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.gray[300]};
       }
-    `,outline:O`
-      background-color: transparent;
-      color: ${({theme:e})=>e.colors.primary[600]};
-      border: 1px solid ${({theme:e})=>e.colors.primary[600]};
-      
-      &:hover:not(:disabled) {
-        background-color: ${({theme:e})=>e.colors.primary[50]};
-        color: ${({theme:e})=>e.colors.primary[700]};
-      }
-      
-      &:active:not(:disabled) {
-        background-color: ${({theme:e})=>e.colors.primary[100]};
-        transform: translateY(1px);
-      }
-      
-      &:focus {
-        box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[200]};
-      }
     `,ghost:O`
       background-color: transparent;
       color: ${({theme:e})=>e.colors.gray[700]};
       border: 1px solid transparent;
-      
+
       &:hover:not(:disabled) {
         background-color: ${({theme:e})=>e.colors.gray[100]};
         color: ${({theme:e})=>e.colors.gray[800]};
       }
-      
+
       &:active:not(:disabled) {
         background-color: ${({theme:e})=>e.colors.gray[200]};
         transform: translateY(1px);
       }
-      
+
       &:focus {
         box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.gray[300]};
       }
-    `,destructive:O`
+    `,danger:O`
       background-color: ${({theme:e})=>e.colors.error[600]};
       color: ${({theme:e})=>e.colors.white};
       border: 1px solid ${({theme:e})=>e.colors.error[600]};
-      
+
       &:hover:not(:disabled) {
         background-color: ${({theme:e})=>e.colors.error[700]};
         border-color: ${({theme:e})=>e.colors.error[700]};
       }
-      
+
       &:active:not(:disabled) {
         background-color: ${({theme:e})=>le(.1,e.colors.error[700])};
         transform: translateY(1px);
       }
-      
+
       &:focus {
         box-shadow: 0 0 0 3px ${({theme:e})=>ce(.2,e.colors.error[600])};
       }
     `}[e])}
   
   /* Size styles */
-  ${({$size:e})=>({xs:O`
-      padding: ${({theme:e})=>e.spacing.xs} ${({theme:e})=>e.spacing.sm};
-      font-size: ${({theme:e})=>e.fontSize.xs};
-      min-height: 28px;
-    `,sm:O`
+  ${({$size:e})=>({sm:O`
       padding: ${({theme:e})=>e.spacing.sm} ${({theme:e})=>e.spacing.md};
       font-size: ${({theme:e})=>e.fontSize.sm};
       min-height: 32px;
@@ -143,10 +121,6 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
       padding: ${({theme:e})=>e.spacing.md} ${({theme:e})=>e.spacing.xl};
       font-size: ${({theme:e})=>e.fontSize.md};
       min-height: 44px;
-    `,xl:O`
-      padding: ${({theme:e})=>e.spacing.lg} ${({theme:e})=>e.spacing["2xl"]};
-      font-size: ${({theme:e})=>e.fontSize.lg};
-      min-height: 52px;
     `}[e])}
   
   /* Disabled state */
@@ -158,7 +132,9 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
   
   /* Loading state */
   ${({$loading:e})=>e&&O`
-    color: transparent;
+    span {
+      color: transparent;
+    }
   `}
   
   /* Focus styles */
@@ -172,15 +148,23 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
   }
 `,he=k.div`
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: ${fe} 1s linear infinite;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::after {
+    content: '';
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: ${fe} 1s linear infinite;
+  }
 `,ge=k.span`
   display: inline-flex;
   align-items: center;