vlite3 0.1.0 → 0.1.2

package/src/css/base.css

@@ -1,148 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  letter-spacing: -0.01px;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-
-@layer components {
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  }
-
-
-  /* Ripple */
-  span.ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    animation: ripple 600ms linear;
-    background-color: rgba(255, 255, 255, 0.094);
-    pointer-events: none;
-  }
-
-  *,
-  ::before,
-  ::after {
-    @apply border-border;
-  }
-
-  h1,
-  .h1,
-  h2,
-  .h2,
-  h3,
-  .h3,
-  h4,
-  .h4 {
-    @apply font-bold text-foreground;
-  }
-
-  h5,
-  .h5,
-  h6,
-  .h6 {
-    @apply font-sans text-foreground;
-  }
-
-  h1,
-  .h1 {
-    @apply text-3xl;
-    line-height: 1.3em;
-  }
-
-  h2,
-  .h2 {
-    @apply text-2xl;
-    line-height: 1.3em;
-  }
-
-  h3,
-  .h3 {
-    @apply text-xl;
-    line-height: 1.25em;
-  }
-
-  h4,
-  .h4 {
-    @apply text-lg;
-  }
-
-  h5,
-  .h5 {
-    @apply font-semibold;
-  }
-
-  h6,
-  .h6 {
-    @apply font-medium;
-  }
-
-  small {
-    @apply text-sm;
-  }
-
-  :root {
-    scroll-behavior: smooth;
-  }
-
-  .dropdown .tooltip-content {
-    padding: 0 !important;
-  }
-
-  .basic-tooltip .tooltip-content {
-    padding: 0.3em 0.7em !important;
-    font-size: 0.8em
-  }
-}
-
-
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-
-  to {
-    height: 0;
-  }
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-#icon-picker {
-  --iconPicker-text: var(--color-foreground);
-  --iconPicker-border: var(--color-border);
-  --iconPicker-primary: var(--color-primary);
-  --iconPicker-primary-fg: var(--color-primary-foreground);
-  --iconPicker-primary-hover: var(--color-primary);
-  /* Approximation */
-  --iconPicker-radius: var(--radius);
-  --iconPicker-gap: 0.25em;
-  --iconPicker-input-height: 2.125em;
-  --iconPicker-selected-bg: var(--color-accent);
-  --iconPicker-font-base: 15.5px;
-  --iconPicker-transition: all 0.2s ease;
-}

package/src/css/input.css

@@ -1,61 +0,0 @@
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type='number'] {
-  -moz-appearance: textfield;
-}
-
-/* Hide the stepper controls */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
-  -webkit-text-fill-color: theme('colors.gray.900');
-  -webkit-box-shadow: 0 0 0px 1000px theme('colors.background') inset;
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  opacity: 0;
-}
-
-input[type='date']::-webkit-inner-spin-button,
-input[type='date']::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-textarea {
-  scrollbar-width: thin !important;
-}
-
-textarea::-webkit-scrollbar {
-  width: 6px !important;
-  height: 6px !important;
-}
-
-textarea::-webkit-scrollbar-track {
-  border-radius: 10px !important;
-}
-
-textarea::-webkit-scrollbar-thumb {
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  background-clip: padding-box !important;
-}

package/src/css/main.css

@@ -1,6 +0,0 @@
-@import 'tailwindcss';
-@layer theme, base, components, utilities;
-
-@import './theme.css';
-@import './base.css';
-@import './input.css';

package/src/css/theme.css

@@ -1,344 +0,0 @@
-@layer components {
-  @theme {
-
-    --color-mixture-1: #ffffff;
-    --color-mixture-2: #000000;
-
-    --color-gray-150: '';
-    --color-gray-250: '';
-    --color-body: '';
-    --color-background: '';
-    --color-foreground: '';
-    --color-border: '';
-    --color-input: '';
-    --color-card: '';
-    --color-secondary: '';
-    --color-secondary-foreground: '';
-    --color-muted: '';
-    --color-muted-foreground: '';
-    --color-accent: '';
-    --color-accent-foreground: '';
-
-
-    --color-destructive: #ef4444;
-    --color-destructive-foreground: #fafafa;
-
-    /* Legacy Primary Variants */
-    --color-primary-light: #f4f4f5;
-    --color-primary-dark: #3f3f46;
-    --color-primary: #18181b;
-    --color-primary-foreground: #fafafa;
-    --color-primary-fg: #fafafa;
-    --color-primary-foreground-light: #18181b;
-
-    /* Danger */
-    --color-danger-light: #fff2f2;
-    --color-danger: #ff3b30;
-    --color-danger-dark: #d70015;
-    --color-danger-fg: #ffffff;
-    --color-danger-fg-light: #d70015;
-
-    /* Warning */
-    --color-warning-light: #FFF5EB;
-    --color-warning: #ff9500;
-    --color-warning-dark: #c95100;
-    --color-warning-fg: #ffffff;
-    --color-warning-fg-light: #c95100;
-
-    /* Info */
-    --color-info-light: #f0f8ff;
-    --color-info: #007aff;
-    --color-info-dark: #0051a8;
-    --color-info-fg: #ffffff;
-    --color-info-fg-light: #0051a8;
-
-    /* Success */
-    --color-success-light: #EEFBEF;
-    --color-success: #34c759;
-    --color-success-dark: #248a3d;
-    --color-success-fg: #ffffff;
-    --color-success-fg-light: #248a3d;
-
-    /* Radius */
-    --radius: 0.5rem;
-    --radius-sm: calc(0.5rem - 2px);
-    --radius-md: 0.5rem;
-    --radius-lg: calc(0.5rem + 2px);
-    --radius-xl: calc(0.5rem + 4px);
-
-
-    /* Shadows */
-    --shadow-dropdown: 0 3px 4px -3px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 3%);
-    --shadow-offcanvas: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-      0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-DEFAULT: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-
-
-
-
-    /* Animations */
-    --animate-accordion-down: accordion-down 0.2s ease-out;
-    --animate-accordion-up: accordion-up 0.2s ease-out;
-    --animate-ripple: ripple 600ms linear;
-  }
-}
-
-
-:root {
-  --tooltip-radius: var(--radius) !important;
-  --tooltip-shadow: var(--shadow-dropdown) !important;
-  --tooltip-arrow-size: 0.5em !important;
-  --tooltip-z-index: 50;
-  --tooltip-font-size: unset !important;
-
-}
-
-.dark .modal-body,
-.dark .sidepanel-body,
-.dark .tooltip-container,
-.bg-card,
-:root {
-
-  --color-white: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 100%,
-      var(--color-mixture-2, #000000));
-
-  --color-black: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 0%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-50: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 98.5%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-100: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 97%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-150: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 96%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-200: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 94.5%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-250: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 92%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-300: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 74%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-400: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 62%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-500: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 50%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-600: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 38%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-700: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 26%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-800: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 16%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-850: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 10%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-900: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 5%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-950: var(--color-mixture-2, #000000);
-
-  --color-body: var(--color-mixture-1);
-  --color-background: var(--color-body);
-  --color-foreground: var(--color-gray-900);
-
-  --color-border: color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2));
-  --color-input: var(--color-border);
-
-
-  --color-secondary: var(--color-gray-200);
-  --color-secondary-foreground: var(--color-foreground);
-
-  --color-muted: var(--color-gray-100);
-  --color-muted-foreground: var(--color-foreground);
-
-  --color-accent: var(--color-gray-150);
-  --color-accent-foreground: var(--color-foreground);
-
-  --tooltip-bg: var(--color-background) !important;
-  --tooltip-text: var(--color-foreground) !important;
-  --tooltip-border: var(--color-border) !important;
-  --date-picker-border: var(--color-border) !important;
-  --iconPicker-border: var(--color-border) !important;
-}
-
-.dark {
-  --color-mixture-1: #0A0A0A !important;
-  --color-mixture-2: #ffffff !important;
-
-  --color-gray-50: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 95%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-100: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 93%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-150: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 90%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-200: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 88%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-250: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 82%,
-      var(--color-mixture-2, #000000));
-
-  --color-gray-300: color-mix(in oklab,
-      var(--color-mixture-1, #ffffff) 74%,
-      var(--color-mixture-2, #000000));
-
-
-
-  --color-destructive: #7f1d1d;
-  --color-destructive-foreground: #fafafa;
-
-  /* Charts (Dark) */
-  --color-chart-1: #22c55e;
-  --color-chart-2: #2a9d8f;
-  --color-chart-3: #264653;
-  --color-chart-4: #e9c46a;
-  --color-chart-5: #f4a261;
-
-  /* Variants (vlite3 custom) */
-  --color-primary-light: #2c2c2e;
-  --color-primary: #fafafa;
-  --color-primary-dark: #d4d4d8;
-  --color-primary-foreground: #18181b;
-  --color-primary-fg: #18181b;
-  --color-primary-foreground-light: #f4f4f5;
-
-  /* Semantics - Dark Mode High Contrast */
-
-  /* Danger */
-  --color-danger-light: #4E1D1A;
-  --color-danger-fg-light: #FCFCFC;
-  --color-danger: #7F1D1D;
-  --color-danger-fg: #ffffff;
-  --color-danger-dark: #D72627;
-
-  /* Warning */
-  --color-warning-light: #3a1e00;
-  --color-warning-fg-light: #ff9f0a;
-  --color-warning: #95600E;
-  --color-warning-fg: #ffffff;
-  --color-warning-dark: #ffb340;
-
-  /* Info */
-  --color-info-light: #001a33;
-  --color-info-fg-light: #0a84ff;
-  --color-info: #0a84ff;
-  --color-info-fg: #ffffff;
-  --color-info-dark: #409cff;
-
-  /* Success */
-  --color-success-light: #1B3419;
-  --color-success-fg-light: #ffffff;
-  --color-success: #007E51;
-  --color-success-fg: #ffffff;
-  --color-success-dark: #00613f;
-}
-
-
-.dark .modal-body,
-.dark .sidepanel-body {
-  --color-body: #171717 !important;
-  --color-mixture-1: #151515 !important;
-  --color-mixture-2: #ffffff !important;
-}
-
-.dark .tooltip-container {
-  --color-background: #171717 !important;
-  --color-mixture-1: #151515 !important;
-  --color-mixture-2: #ffffff !important;
-}
-
-.dark .bg-card {
-  --color-body: #131313 !important;
-  --color-mixture-1: #191818 !important;
-  --color-mixture-2: #ffffff !important;
-  background-color: var(--color-body) !important;
-}
-
-.dark .modal-body .bg-card,
-.dark .sidepanel-body .bg-card,
-.dark .tooltip-container .bg-card {
-  --color-body: #1A1A1A !important;
-  --color-mixture-1: #191818 !important;
-  --color-mixture-2: #ffffff !important;
-  background-color: var(--color-body) !important;
-}
-
-.dark .bg-card {
-  --color-body: #131313 !important;
-  --color-mixture-1: #191818 !important;
-  --color-mixture-2: #ffffff !important;
-  background-color: var(--color-body) !important;
-}
-
-.bg-card {
-  --color-body: #FAFAFA !important;
-  --color-mixture-1: #fbfbfb !important;
-  --color-mixture-2: #000000 !important;
-  background-color: #FBFBFB !important;
-  border-color: color-mix(in oklab, var(--color-mixture-1) 95%, var(--color-mixture-2));
-}
-
-.bg-card .bg-card {
-  --color-body: #F5F5F5 !important;
-  --color-mixture-1: #F5F5F5;
-  --color-mixture-2: #000000;
-  background-color: #F5F5F5 !important;
-}
-
-.bg-card .bg-card .bg-card {
-  --color-body: #EEE !important;
-  --color-mixture-1: #F5F5F5;
-  --color-mixture-2: #000000;
-  background-color: #EEE !important;
-}
-
-.dark .bg-card .bg-card {
-  --color-body: #171717 !important;
-  --color-mixture-1: #181818;
-  --color-mixture-2: #000000;
-  background-color: #171717 !important;
-}
-
-.dark .bg-card .bg-card .bg-card {
-  --color-body: #1A1A1A !important;
-  --color-mixture-1: #171717;
-  --color-mixture-2: #000000;
-  background-color: #1A1A1A !important;
-}

package/src/directives/vRipple.ts

@@ -1,38 +0,0 @@
-const handleRipple = (event: MouseEvent, el: HTMLElement) => {
-  const rect = el.getBoundingClientRect()
-  const x = event.clientX - rect.left
-  const y = event.clientY - rect.top
-
-  const circle = document.createElement('span')
-  const diameter = Math.max(rect.width, rect.height)
-  const radius = diameter / 2
-
-  circle.style.width = circle.style.height = `${diameter}px`
-  circle.style.left = `${x - radius}px`
-  circle.style.top = `${y - radius}px`
-  circle.classList.add('ripple')
-
-  const ripple = document.getElementsByClassName('ripple')[0]
-
-  if (ripple) {
-    ripple.remove()
-  }
-
-  el.appendChild(circle)
-
-  setTimeout(() => {
-    circle.remove()
-  }, 600)
-}
-
-export const vRipple = {
-  mounted(el: HTMLElement) {
-    el.style.position = 'relative'
-    el.style.overflow = 'hidden'
-    el.addEventListener('click', (ev) => handleRipple(ev, el))
-  },
-  unmounted(el: HTMLElement) {
-    // Clean up if strictly necessary, but click listeners are removed with element usually.
-    // Better practice: save the handler to remove it properly.
-  },
-}

package/src/index.ts

@@ -1,53 +0,0 @@
-export * from './components/Accordion'
-export { default as Alert } from './components/Alert.vue'
-export { default as Avatar } from './components/Avatar.vue'
-export * from './components/AvatarUploader'
-export { default as Badge } from './components/Badge.vue'
-export { default as Button } from './components/Button.vue'
-export { default as ButtonGroup } from './components/ButtonGroup.vue'
-export * from './components/Carousel'
-export { default as CheckBox } from './components/CheckBox.vue'
-export * from './components/Chip'
-export * from './components/ChoiceBox'
-export { default as ColorPicker } from './components/ColorPicker/ColorPicker.vue'
-export { default as ConfirmationModal } from './components/ConfirmationModal.vue'
-export { default as DatePicker } from './components/DatePicker.vue'
-export * from './components/DataTable'
-export * from './components/Dropdown'
-export * from './components/FilePicker'
-export * from './components/FileTree'
-export * from './components/Form'
-export * from './components/Heatmap'
-export { default as Icon } from './components/Icon.vue'
-export { default as IconPicker } from './components/IconPicker.vue'
-export { default as Input } from './components/Input.vue'
-export { default as Label } from './components/Label.vue'
-export { default as Logo } from './components/Logo.vue'
-export * from './components/Masonry'
-export { default as Modal } from './components/Modal.vue'
-export * from './components/MultiSelect'
-export * from './components/Navbar'
-export * from './components/OTPInput'
-export * from './components/Pagination'
-export * from './components/PricingPlan'
-export { default as SidePanel } from './components/SidePanel.vue'
-export * from './components/SidebarMenu'
-export { default as Slider } from './components/Slider.vue'
-export { default as Switch } from './components/Switch.vue'
-export * from './components/Tabes'
-export { default as Textarea } from './components/Textarea.vue'
-export { default as ThemeToggle } from './components/ThemeToggle.vue'
-export { default as Timeline } from './components/Timeline.vue'
-export { default as ToastNotification } from './components/ToastNotification.vue'
-export { default as Tooltip } from './components/Tooltip.vue'
-export * from './components/Workbook'
-
-export * from './composables/useNotifications'
-export * from './composables/useTheme'
-export * from './composables/useKeyStroke'
-
-export { createVLite, useVLiteConfig } from './core'
-
-export * from './utils'
-
-export * from './types'

package/src/main.ts

@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import './css/main.css'
-import App from './App.vue'
-
-createApp(App).mount('#app')