podo-ui 0.9.7 → 1.0.2

package/dist/svelte/atom/tooltip.module.scss

@@ -0,0 +1,227 @@
+@use '../../../mixin.scss' as *;
+
+.tooltipWrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltipBox {
+  position: absolute;
+  padding: s(2) s(4);
+  border-radius: r(3);
+  font-family: 'Pretendard', -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22.4px;
+  white-space: nowrap;
+  z-index: 1000;
+
+  // Default variant
+  &.variantDefault {
+    background-color: color(default-deep);
+    color: color(text-action-reverse) !important;
+  }
+
+  // Info variant
+  &.variantInfo {
+    background-color: color(info);
+    color: color(text-action-reverse) !important;
+  }
+
+  // Arrow styles
+  &::before {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    transform-origin: center;
+  }
+
+  // Top positions
+  &.top,
+  &.topLeft,
+  &.topRight {
+    bottom: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      bottom: -6px;
+      border-radius: 0 0 2px 0;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.top {
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before {
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+
+  &.topLeft {
+    left: 0;
+
+    &::before {
+      left: 8px;
+    }
+  }
+
+  &.topRight {
+    right: 0;
+
+    &::before {
+      right: 8px;
+    }
+  }
+
+  // Bottom positions
+  &.bottom,
+  &.bottomLeft,
+  &.bottomRight {
+    top: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      top: -6px;
+      border-radius: 2px 0 0 0;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.bottom {
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before {
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+
+  &.bottomLeft {
+    left: 0;
+
+    &::before {
+      left: 8px;
+    }
+  }
+
+  &.bottomRight {
+    right: 0;
+
+    &::before {
+      right: 8px;
+    }
+  }
+
+  // Left positions
+  &.left,
+  &.leftTop,
+  &.leftBottom {
+    right: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      right: -6px;
+      border-radius: 0 2px 0 0;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.left {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::before {
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+
+  &.leftTop {
+    top: 0;
+
+    &::before {
+      top: 8px;
+    }
+  }
+
+  &.leftBottom {
+    bottom: 0;
+
+    &::before {
+      bottom: 8px;
+    }
+  }
+
+  // Right positions
+  &.right,
+  &.rightTop,
+  &.rightBottom {
+    left: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      left: -6px;
+      border-radius: 0 0 0 2px;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.right {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::before {
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+
+  &.rightTop {
+    top: 0;
+
+    &::before {
+      top: 8px;
+    }
+  }
+
+  &.rightBottom {
+    bottom: 0;
+
+    &::before {
+      bottom: 8px;
+    }
+  }
+}

package/dist/svelte/index.d.ts

@@ -0,0 +1,26 @@
+export { default as Button } from './atom/Button.svelte';
+export { default as Input } from './atom/Input.svelte';
+export { default as Textarea } from './atom/Textarea.svelte';
+export { default as Label } from './atom/Label.svelte';
+export { default as Checkbox } from './atom/Checkbox.svelte';
+export { default as Radio, type RadioGroupOption } from './atom/Radio.svelte';
+export { default as RadioGroup } from './atom/RadioGroup.svelte';
+export { default as Select, type SelectOption } from './atom/Select.svelte';
+export { default as Toggle } from './atom/Toggle.svelte';
+export { default as File } from './atom/File.svelte';
+export { default as Avatar } from './atom/Avatar.svelte';
+export { default as Chip } from './atom/Chip.svelte';
+export { default as Tooltip } from './atom/Tooltip.svelte';
+export { default as EditorView } from './atom/EditorView.svelte';
+export { default as Editor, type ToolbarItem as EditorToolbarItem } from './atom/Editor.svelte';
+export { default as Field } from './molecule/Field.svelte';
+export { default as Pagination } from './molecule/Pagination.svelte';
+export { default as Tab, type TabItem } from './molecule/Tab.svelte';
+export { default as TabPanel } from './molecule/TabPanel.svelte';
+export { default as Table, type TableColumn } from './molecule/Table.svelte';
+export { default as Toast } from './molecule/Toast.svelte';
+export { default as ToastProvider } from './molecule/ToastProvider.svelte';
+export { default as DatePicker, type DatePickerMode, type DatePickerType, type DatePickerValue, type TimeValue, type DateRange, type DateCondition, type DateTimeLimit, type MinuteStep, type YearRange, type CalendarInitial, type InitialCalendar, } from './molecule/DatePicker.svelte';
+export { createValidation, type ValidationStore, } from './stores/validation';
+export { createToastContext, useToast, type ToastContext, type ToastOptions, type ToastData, type ToastPosition, type ToastTheme, } from './stores/toast';
+export { portal } from './actions/portal';

package/dist/svelte/index.js

@@ -0,0 +1,30 @@
+// Atom components
+export { default as Button } from './atom/Button.svelte';
+export { default as Input } from './atom/Input.svelte';
+export { default as Textarea } from './atom/Textarea.svelte';
+export { default as Label } from './atom/Label.svelte';
+export { default as Checkbox } from './atom/Checkbox.svelte';
+export { default as Radio } from './atom/Radio.svelte';
+export { default as RadioGroup } from './atom/RadioGroup.svelte';
+export { default as Select } from './atom/Select.svelte';
+export { default as Toggle } from './atom/Toggle.svelte';
+export { default as File } from './atom/File.svelte';
+export { default as Avatar } from './atom/Avatar.svelte';
+export { default as Chip } from './atom/Chip.svelte';
+export { default as Tooltip } from './atom/Tooltip.svelte';
+export { default as EditorView } from './atom/EditorView.svelte';
+export { default as Editor } from './atom/Editor.svelte';
+// Molecule components
+export { default as Field } from './molecule/Field.svelte';
+export { default as Pagination } from './molecule/Pagination.svelte';
+export { default as Tab } from './molecule/Tab.svelte';
+export { default as TabPanel } from './molecule/TabPanel.svelte';
+export { default as Table } from './molecule/Table.svelte';
+export { default as Toast } from './molecule/Toast.svelte';
+export { default as ToastProvider } from './molecule/ToastProvider.svelte';
+export { default as DatePicker, } from './molecule/DatePicker.svelte';
+// Stores
+export { createValidation, } from './stores/validation';
+export { createToastContext, useToast, } from './stores/toast';
+// Actions
+export { portal } from './actions/portal';