nexa-ui-kit 0.11.5 → 0.11.8

package/dist/components/NButton.js

@@ -1,326 +1,234 @@
 import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-72f6f577',
+  __scopeId: 'data-v-6c6a1bc6',
   __hmrId: 'NButton_nexa',
   props: {
+  label: { type: String, default: '' },
   variant: { type: String, default: 'primary' },
   size: { type: String, default: 'md' },
-  type: { type: String, default: 'button' },
   disabled: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
+  icon: { type: String, default: '' },
+  iconRight: { type: String, default: '' },
   block: { type: Boolean, default: false },
   rounded: { type: Boolean, default: false },
-  loadingText: { type: String, default: '' }
+  outlined: { type: Boolean, default: false }
 },
   emits: ['click'],
   setup(props, setupContext) {
     const { emit, slots, slots: $slots } = setupContext
-    const ripple = signal([])
+    const isPressed = signal(false)
     const handleClick = (e) => {
       if (props.disabled || props.loading) return
+      isPressed.value = true
+      setTimeout(() => { isPressed.value = false }, 150)
       emit('click', e)
-      const rect = e.currentTarget.getBoundingClientRect()
-      const x = e.clientX - rect.left
-      const y = e.clientY - rect.top
-      const id = Date.now()
-      ripple.value = [...ripple.value, { id, x, y }]
-      setTimeout(() => {
-        ripple.value = ripple.value.filter(r => r.id !== id)
-      }, 600)
     }
-    const btnClass = computed(() => {
-      return [
-        'n-btn',
-        `n-btn-${props.variant}`,
-        `n-btn-${props.size}`,
-        props.loading ? 'is-loading' : '',
-        props.block ? 'is-block' : '',
-        props.rounded ? 'is-rounded' : ''
-      ].join(' ')
-    })
-    return { ripple, handleClick, btnClass, $slots, emit }
+    return { isPressed, handleClick, $slots, emit }
   }
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  let { ripple, handleClick, btnClass, $slots, emit, variant, size, type, disabled, loading, block, rounded, loadingText, Fragment: _ntc_Fragment } = ctx
-    return h('button', { class: btnClass.value, type: type, disabled: disabled || loading, "aria-busy": loading ? 'true' : undefined, onClick: handleClick, "data-v-72f6f577": "" }, [
-        "\r\n    ",
-        (loading) ? h('span', { class: "n-btn-loader", "data-v-72f6f577": "" }) : null,
-        (loading && loadingText) ? h('span', { class: "n-btn-loading-text", "data-v-72f6f577": "" }, [
-        loadingText
+  let { isPressed, handleClick, $slots, emit, label, variant, size, disabled, loading, icon, iconRight, block, rounded, outlined, Fragment: _ntc_Fragment } = ctx
+    return h('button', { class: ["n-btn", [
+      `n-btn-${variant}`,
+      `n-btn-${size}`,
+      { 'is-block': block, 'is-rounded': rounded, 'is-outlined': outlined, 'is-pressed': isPressed }
+    ]], disabled: disabled || loading, onClick: handleClick, "data-v-6c6a1bc6": "" }, [
+        "\n    ",
+        (loading) ? h('span', { class: "n-btn-spinner", "data-v-6c6a1bc6": "" }) : null,
+        (icon && !loading) ? h('span', { class: "n-btn-icon", "data-v-6c6a1bc6": "" }, [
+        icon
       ]) : null,
-        (!loading || (loading && !loadingText)) ? h('span', { class: "n-btn-content", "data-v-72f6f577": "" }, [
-        "\r\n      ",
-        ctx.$slots.default ? ctx.$slots.default() : null,
-        "\r\n    "
+        (label) ? h('span', { class: "n-btn-label", "data-v-6c6a1bc6": "" }, [
+        label
+      ]) : null,
+        (iconRight) ? h('span', { class: "n-btn-icon-right", "data-v-6c6a1bc6": "" }, [
+        iconRight
       ]) : null,
-        (ripple.value).map((r, index) =>
-        h('span', { class: "n-btn-ripple", key: r.id, style: { left: r.x + 'px', top: r.y + 'px' }, "data-v-72f6f577": "" })
-      ),
-        "\r\n  "
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-72f6f577'
+_sfc_main.__scopeId = 'data-v-6c6a1bc6'
 _sfc_main.__hmrId = 'NButton_nexa'
 
 export default _sfc_main
 
-const __style = `.n-btn[data-v-72f6f577]{
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--n-space-2);
-  font-family: var(--n-font-sans);
-  font-weight: var(--n-weight-semibold);
-  letter-spacing: 0.01em;
-  border-radius: var(--n-radius-md);
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-  border: 1px solid transparent;
-  outline: none;
-  white-space: nowrap;
-  user-select: none;
-  overflow: hidden;
-  text-decoration: none;
-  line-height: var(--n-leading-normal, 1.5);
-  min-width: fit-content;
-  will-change: transform;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.n-btn[data-v-72f6f577]:focus-visible{
-  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 0 1px var(--n-color-primary);
-}
-
-/* Sizes */
-.n-btn-sm[data-v-72f6f577]{ padding: 0.5rem 1.5rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 36px; }
-.n-btn-md[data-v-72f6f577]{ padding: 0.75rem 2rem; font-size: var(--n-text-base); min-height: 44px; }
-.n-btn-lg[data-v-72f6f577]{ padding: 1rem 2.75rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 52px; }
-
-/* Block */
-.is-block[data-v-72f6f577]{ width: 100%; }
-
-/* Rounded */
-.is-rounded[data-v-72f6f577]{ border-radius: var(--n-radius-full); }
-
-/* Active/Press */
-.n-btn[data-v-72f6f577]:active:not(:disabled){
-  transform: scale(0.97);
-}
-
-/* Variant: Primary */
-.n-btn-primary[data-v-72f6f577]{
-  background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-primary);
-}
-.n-btn-primary[data-v-72f6f577]:hover:not(:disabled){
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
-}
-.n-btn-primary[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Secondary */
-.n-btn-secondary[data-v-72f6f577]{
-  background: var(--n-color-surface-alt);
-  color: var(--n-color-text);
-  border-color: var(--n-color-border);
-}
-.n-btn-secondary[data-v-72f6f577]:hover:not(:disabled){
-  background: var(--n-color-surface-hover);
-  border-color: var(--n-color-border-hover);
-  transform: translateY(-1px);
-}
-.n-btn-secondary[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
-}
-
-/* Variant: Success */
-.n-btn-success[data-v-72f6f577]{
-  background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-success);
-}
-.n-btn-success[data-v-72f6f577]:hover:not(:disabled){
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-success);
-}
-.n-btn-success[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: var(--n-shadow-glow-success), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Warning */
-.n-btn-warning[data-v-72f6f577]{
-  background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-warning);
-}
-.n-btn-warning[data-v-72f6f577]:hover:not(:disabled){
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-warning);
-}
-.n-btn-warning[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: var(--n-shadow-glow-warning), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Info */
-.n-btn-info[data-v-72f6f577]{
-  background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-info);
-}
-.n-btn-info[data-v-72f6f577]:hover:not(:disabled){
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-info);
-}
-.n-btn-info[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: var(--n-shadow-glow-info), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Danger */
-.n-btn-danger[data-v-72f6f577]{
-  background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-danger);
-}
-.n-btn-danger[data-v-72f6f577]:hover:not(:disabled){
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-danger);
-}
-.n-btn-danger[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: var(--n-shadow-glow-danger), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Ghost */
-.n-btn-ghost[data-v-72f6f577]{
-  background: transparent;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  color: var(--n-color-text-secondary);
-  border-color: transparent;
-}
-.n-btn-ghost[data-v-72f6f577]:hover:not(:disabled){
-  background: var(--n-color-glass);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  color: var(--n-color-text);
-  border-color: var(--n-color-glass-border);
-}
-.n-btn-ghost[data-v-72f6f577]:active:not(:disabled){
-  background: var(--n-color-glass-hover);
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
-}
-
-/* Variant: Outline */
-.n-btn-outline[data-v-72f6f577]{
-  background: transparent;
-  color: var(--n-color-primary);
-  border: 1.5px solid transparent;
-  background-image: linear-gradient(transparent, transparent), linear-gradient(135deg, var(--n-color-primary), var(--n-color-primary-hover));
-  background-origin: padding-box, border-box;
-  background-clip: padding-box, border-box;
-}
-.n-btn-outline[data-v-72f6f577]:hover:not(:disabled){
-  background-image: linear-gradient(var(--n-color-primary-light), var(--n-color-primary-light)), linear-gradient(135deg, var(--n-color-primary-hover), var(--n-color-primary));
-  background-origin: padding-box, border-box;
-  background-clip: padding-box, border-box;
-  color: var(--n-color-primary-hover);
-}
-.n-btn-outline[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
-}
-
-/* Variant: Glass */
-.n-btn-glass[data-v-72f6f577]{
-  background: var(--n-color-glass);
-  backdrop-filter: blur(10px);
-  border-color: var(--n-color-glass-border);
-  color: var(--n-color-text);
-}
-.n-btn-glass[data-v-72f6f577]:hover:not(:disabled){
-  background: var(--n-color-glass-hover);
-  border-color: var(--n-color-border-hover);
-}
-.n-btn-glass[data-v-72f6f577]:active:not(:disabled){
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
-}
-
-/* Disabled */
-.n-btn[data-v-72f6f577]:disabled{
-  cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
-  pointer-events: none;
-  opacity: 0.55;
-}
-.n-btn[data-v-72f6f577]:disabled::after{
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: var(--n-color-surface, #fff);
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-/* Loader */
-.n-btn-loader[data-v-72f6f577]{
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--n-radius-full);
-  animation: n-spin 0.7s linear infinite;
-  flex-shrink: 0;
-}
-
-.n-btn-lg .n-btn-loader[data-v-72f6f577]{
-  width: 1.25rem;
-  height: 1.25rem;
-  border-width: 2.5px;
-}
-
-.n-btn-sm .n-btn-loader[data-v-72f6f577]{
-  width: 0.85rem;
-  height: 0.85rem;
-}
-
-.n-btn-loading-text[data-v-72f6f577]{
-  opacity: 0.8;
-  font-weight: var(--n-weight-normal);
-}
-
-.n-btn-content[data-v-72f6f577]{
-  display: inline-flex;
-  align-items: center;
-  gap: var(--n-space-2);
-}
-
-@keyframes n-spin {
-from[data-v-72f6f577]{ transform: rotate(0deg); }
-to[data-v-72f6f577]{ transform: rotate(360deg); }
-}
-
-/* Ripple */
-.n-btn-ripple[data-v-72f6f577]{
-  position: absolute;
-  border-radius: var(--n-radius-full);
-  background: var(--n-color-glass);
-  width: 20px;
-  height: 20px;
-  margin-left: -10px;
-  margin-top: -10px;
-  pointer-events: none;
-  animation: n-ripple 0.6s ease-out forwards;
-}
-
-@keyframes n-ripple {
-from[data-v-72f6f577]{ transform: scale(0); opacity: 1; }
-to[data-v-72f6f577]{ transform: scale(8); opacity: 0; }
+const __style = `.n-btn[data-v-6c6a1bc6]{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: inherit;
+  font-weight: 500;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+}
+.n-btn[data-v-6c6a1bc6]:disabled{
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.n-btn[data-v-6c6a1bc6]:focus-visible{
+  outline: none;
+}
+
+/* Sizes */
+.n-btn-sm[data-v-6c6a1bc6]{
+  padding: 0.375rem 0.75rem;
+  font-size: var(--n-text-sm);
+  border-radius: var(--n-radius-md);
+  min-height: 32px;
+}
+.n-btn-md[data-v-6c6a1bc6]{
+  padding: 0.5rem 1rem;
+  font-size: var(--n-text-base);
+  border-radius: var(--n-radius-md);
+  min-height: 40px;
+}
+.n-btn-lg[data-v-6c6a1bc6]{
+  padding: 0.75rem 1.5rem;
+  font-size: var(--n-text-lg);
+  border-radius: var(--n-radius-lg);
+  min-height: 48px;
+}
+
+/* Block & Rounded */
+.is-block[data-v-6c6a1bc6]{ width: 100%; }
+.is-rounded[data-v-6c6a1bc6]{ border-radius: var(--n-radius-full); }
+
+/* Primary */
+.n-btn-primary[data-v-6c6a1bc6]{
+  background-color: var(--n-color-primary);
+  color: var(--n-color-primary-text);
+  border-color: var(--n-color-primary);
+}
+.n-btn-primary[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-primary-hover);
+  border-color: var(--n-color-primary-hover);
+}
+.n-btn-primary[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-primary[data-v-6c6a1bc6]{
+  background-color: var(--n-color-primary-active);
+  border-color: var(--n-color-primary-active);
+}
+.n-btn-primary[data-v-6c6a1bc6]:focus-visible{
+  box-shadow: var(--n-ring-primary);
+}
+
+/* Secondary */
+.n-btn-secondary[data-v-6c6a1bc6]{
+  background-color: var(--n-color-surface-alt);
+  color: var(--n-color-text);
+  border-color: var(--n-color-border);
+}
+.n-btn-secondary[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-surface-hover);
+  border-color: var(--n-color-border-hover);
+}
+.n-btn-secondary[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-secondary[data-v-6c6a1bc6]{
+  background-color: var(--n-color-border);
+}
+.n-btn-secondary[data-v-6c6a1bc6]:focus-visible{
+  box-shadow: var(--n-ring-surface);
+}
+
+/* Success */
+.n-btn-success[data-v-6c6a1bc6]{
+  background-color: var(--n-color-success);
+  color: #fff;
+  border-color: var(--n-color-success);
+}
+.n-btn-success[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-success-hover);
+  border-color: var(--n-color-success-hover);
+}
+.n-btn-success[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-success[data-v-6c6a1bc6]{
+  background-color: var(--n-color-success-active);
+}
+.n-btn-success[data-v-6c6a1bc6]:focus-visible{ box-shadow: var(--n-ring-success); }
+
+/* Danger */
+.n-btn-danger[data-v-6c6a1bc6]{
+  background-color: var(--n-color-danger);
+  color: #fff;
+  border-color: var(--n-color-danger);
+}
+.n-btn-danger[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-danger-hover);
+  border-color: var(--n-color-danger-hover);
+}
+.n-btn-danger[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-danger[data-v-6c6a1bc6]{
+  background-color: var(--n-color-danger-active);
+}
+.n-btn-danger[data-v-6c6a1bc6]:focus-visible{ box-shadow: var(--n-ring-danger); }
+
+/* Warning */
+.n-btn-warning[data-v-6c6a1bc6]{
+  background-color: var(--n-color-warning);
+  color: #fff;
+  border-color: var(--n-color-warning);
+}
+.n-btn-warning[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-warning-hover);
+  border-color: var(--n-color-warning-hover);
+}
+.n-btn-warning[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-warning[data-v-6c6a1bc6]{
+  background-color: var(--n-color-warning-active);
+}
+.n-btn-warning[data-v-6c6a1bc6]:focus-visible{ box-shadow: var(--n-ring-warning); }
+
+/* Info */
+.n-btn-info[data-v-6c6a1bc6]{
+  background-color: var(--n-color-info);
+  color: #fff;
+  border-color: var(--n-color-info);
+}
+.n-btn-info[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-info-hover);
+  border-color: var(--n-color-info-hover);
+}
+.n-btn-info[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-info[data-v-6c6a1bc6]{
+  background-color: var(--n-color-info-active);
+}
+.n-btn-info[data-v-6c6a1bc6]:focus-visible{ box-shadow: var(--n-ring-info); }
+
+/* Outlined variants */
+.is-outlined[data-v-6c6a1bc6]{
+  background-color: transparent !important;
+}
+.is-outlined.n-btn-primary[data-v-6c6a1bc6]{ color: var(--n-color-primary); }
+.is-outlined.n-btn-primary[data-v-6c6a1bc6]:hover:not(:disabled){ background-color: var(--n-color-primary-light) !important; }
+
+.is-outlined.n-btn-success[data-v-6c6a1bc6]{ color: var(--n-color-success); border-color: var(--n-color-success); }
+.is-outlined.n-btn-success[data-v-6c6a1bc6]:hover:not(:disabled){ background-color: rgba(34, 197, 94, 0.1) !important; }
+
+.is-outlined.n-btn-danger[data-v-6c6a1bc6]{ color: var(--n-color-danger); border-color: var(--n-color-danger); }
+.is-outlined.n-btn-danger[data-v-6c6a1bc6]:hover:not(:disabled){ background-color: rgba(239, 68, 68, 0.1) !important; }
+
+/* Spinner */
+.n-btn-spinner[data-v-6c6a1bc6]{
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: n-spin 0.6s linear infinite;
+}
+@keyframes n-spin {
+to[data-v-6c6a1bc6]{ transform: rotate(360deg); }
+}
+
+.n-btn-icon[data-v-6c6a1bc6], .n-btn-icon-right[data-v-6c6a1bc6]{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.n-btn-label[data-v-6c6a1bc6]{
+  line-height: 1;
 }`
-injectStyle('data-v-72f6f577', __style)
+injectStyle('data-v-6c6a1bc6', __style)