podo-ui 0.9.7 → 1.0.2

package/dist/svelte/atom/Tooltip.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import styles from './tooltip.module.scss';
+
+  type TooltipVariant = 'default' | 'info';
+
+  type TooltipPosition =
+    | 'top'
+    | 'topLeft'
+    | 'topRight'
+    | 'bottom'
+    | 'bottomLeft'
+    | 'bottomRight'
+    | 'left'
+    | 'leftTop'
+    | 'leftBottom'
+    | 'right'
+    | 'rightTop'
+    | 'rightBottom';
+
+  interface Props {
+    /** Trigger element (button, icon, etc.) */
+    children: Snippet;
+    /** Tooltip content (can include any JSX) */
+    content: Snippet;
+    /** Tooltip visual variant */
+    variant?: TooltipVariant;
+    /** Arrow position */
+    position?: TooltipPosition;
+    /** Distance from trigger element in pixels */
+    offset?: number;
+    /** Control visibility externally (overrides hover state) */
+    isVisible?: boolean;
+    /** Additional CSS class */
+    class?: string;
+  }
+
+  let {
+    children,
+    content,
+    variant = 'default',
+    position = 'top',
+    offset = 8,
+    isVisible: controlledIsVisible,
+    class: className = '',
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  let hoverIsVisible = $state(false);
+
+  let variantClass = $derived(
+    variant === 'default' ? styles.variantDefault : styles.variantInfo
+  );
+
+  let tooltipClassNames = $derived(
+    [styles.tooltipBox, variantClass, styles[position], className]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  // Show tooltip if controlled visibility is true OR hover state is true
+  let shouldShowTooltip = $derived(controlledIsVisible === true || hoverIsVisible);
+</script>
+
+<div
+  class={styles.tooltipWrapper}
+  onmouseenter={() => (hoverIsVisible = true)}
+  onmouseleave={() => (hoverIsVisible = false)}
+  role="presentation"
+  {...rest}
+>
+  {@render children()}
+  {#if shouldShowTooltip}
+    <div class={tooltipClassNames} style="--tooltip-offset: {offset}px;">
+      {@render content()}
+    </div>
+  {/if}
+</div>

package/dist/svelte/atom/Tooltip.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type TooltipVariant = 'default' | 'info';
+type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+interface Props {
+    /** Trigger element (button, icon, etc.) */
+    children: Snippet;
+    /** Tooltip content (can include any JSX) */
+    content: Snippet;
+    /** Tooltip visual variant */
+    variant?: TooltipVariant;
+    /** Arrow position */
+    position?: TooltipPosition;
+    /** Distance from trigger element in pixels */
+    offset?: number;
+    /** Control visibility externally (overrides hover state) */
+    isVisible?: boolean;
+    /** Additional CSS class */
+    class?: string;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,82 @@
+@use '../../../mixin' as *;
+
+.wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &[role='button'] {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+.activityRing {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 3px solid color('primary');
+    border-radius: r(full);
+    pointer-events: none;
+  }
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: r(full);
+  overflow: hidden;
+  position: relative;
+  font-weight: 600;
+  user-select: none;
+
+  // Type variations
+  &.type-image {
+    background-color: transparent;
+  }
+
+  &.type-icon,
+  &.type-text {
+    background-color: color('border');
+    color: color('text-sub');
+  }
+
+  // Image inside avatar
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  // Icon styling
+  i[class^='icon-'],
+  i[class*=' icon-'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0 !important;
+    font-size: inherit;
+
+    &::before {
+      font-size: inherit !important;
+      line-height: 1;
+    }
+  }
+
+  // Text styling
+  span {
+    text-transform: uppercase;
+    line-height: 1;
+    font-size: inherit;
+  }
+}

package/dist/svelte/atom/editor-view.module.scss

@@ -0,0 +1,251 @@
+@use '../../../scss/color/function.scss' as *;
+@use '../../../scss/typo/mixin.scss' as typo;
+@use '../../../scss/layout/radius.scss' as *;
+
+.editorView {
+  color: color(text-body);
+  font-family: inherit;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  // 텍스트 서식
+  strong,
+  b {
+    font-weight: bold;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  s,
+  strike {
+    text-decoration: line-through;
+  }
+
+  // 제목 - podo-ui 스타일 상속
+  h1 {
+    @include typo.h1;
+    margin: 0.67em 0;
+  }
+
+  h2 {
+    @include typo.h2;
+    margin: 0.75em 0;
+  }
+
+  h3 {
+    @include typo.h3;
+    margin: 0.83em 0;
+  }
+
+  // p1~p5 스타일 클래스
+  .p1 {
+    @include typo.p1;
+  }
+
+  .p2 {
+    @include typo.p2;
+  }
+
+  .p3 {
+    @include typo.p3;
+  }
+
+  .p4 {
+    @include typo.p4;
+  }
+
+  .p5 {
+    @include typo.p5;
+  }
+
+  // Semibold 스타일
+  .p1_semibold {
+    @include typo.p1;
+    font-weight: 600;
+  }
+
+  .p2_semibold {
+    @include typo.p2;
+    font-weight: 600;
+  }
+
+  .p3_semibold {
+    @include typo.p3-semibold;
+  }
+
+  .p4_semibold {
+    @include typo.p4-semibold;
+  }
+
+  .p5_semibold {
+    @include typo.p5-semibold;
+  }
+
+  // 단락 - 기본 본문 스타일 p3 적용
+  p {
+    @include typo.p3;
+    margin: 1em 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // 링크
+  a {
+    color: color(link);
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      color: color(link-hover);
+    }
+  }
+
+  // 목록 - podo-ui p3 스타일 적용
+  ul,
+  ol {
+    @include typo.p3;
+    margin: 1em 0 !important;
+    padding-left: 2em !important;
+    padding-top: 0 !important;
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
+
+    &:first-child {
+      margin-top: 0 !important;
+    }
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  ul {
+    list-style: disc !important;
+    list-style-type: disc !important;
+    list-style-position: outside !important;
+  }
+
+  ol {
+    list-style: decimal !important;
+    list-style-type: decimal !important;
+    list-style-position: outside !important;
+  }
+
+  li {
+    display: list-item !important;
+    margin: 0.5em 0 !important;
+    padding: 0 !important;
+    list-style: inherit !important;
+    list-style-position: outside !important;
+
+    // 중첩된 리스트
+    ul,
+    ol {
+      margin: 0.5em 0 !important;
+      padding-left: 1.5em !important;
+    }
+
+    ul {
+      list-style-type: circle !important;
+    }
+
+    ol {
+      list-style-type: lower-alpha !important;
+    }
+  }
+
+  // 이미지
+  img {
+    display: inline-block !important;
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+  }
+
+  // 인용
+  blockquote {
+    @include typo.p3;
+    margin: 1em 0;
+    padding-left: 1em;
+    border-left: 4px solid color(border);
+    color: color(text-sub);
+    font-style: italic;
+  }
+
+  // 유튜브 컨테이너 (editor에서 삽입된 스타일 유지)
+  :global(.youtube-container) {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    :global(.youtube-overlay) {
+      display: none; // view 모드에서는 오버레이 숨김
+    }
+  }
+
+  // 인라인 코드
+  code {
+    @include typo.p4;
+    background: color(bg-elevation-1);
+    color: color(text-body);
+    padding: 2px 6px;
+    border-radius: r(1);
+    border: 1px solid color(default-outline);
+  }
+
+  // 코드 블록
+  pre {
+    @include typo.p3;
+    background: color(bg-elevation-1);
+    color: color(text-body);
+    padding: 12px 16px;
+    border-radius: r(2);
+    border: 1px solid color(default-outline);
+    overflow-x: auto;
+    margin: 1em 0;
+
+    code {
+      background: transparent;
+      border: none;
+      padding: 0;
+    }
+  }
+
+  // 하이라이트/배경색이 있는 요소 (다크모드 대응)
+  span[style*='background-color'] {
+    padding: 2px 4px;
+    border-radius: 2px;
+  }
+
+  // 텍스트 색상이 너무 밝거나 어두운 경우 자동 조정
+  span[style*='color: #fff'],
+  span[style*='color: white'],
+  span[style*='color: rgb(255, 255, 255)'] {
+    color: color(text-body) !important;
+  }
+
+  span[style*='color: #000'],
+  span[style*='color: black'],
+  span[style*='color: rgb(0, 0, 0)'] {
+    color: color(text-body) !important;
+  }
+}

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

@@ -0,0 +1,98 @@
+@use '../../../mixin.scss' as *;
+.style {
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+
+  > div {
+    position: relative;
+    width: fit-content;
+
+    > i {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      color: color('text-sub');
+      pointer-events: none;
+    }
+
+    &:global(.with-icon) {
+      > i {
+        left: s(3);
+      }
+
+      > input {
+        padding-left: s(8);
+      }
+    }
+
+    &:global(.with-right-icon) {
+      > i {
+        right: s(3);
+      }
+
+      > input {
+        padding-right: s(7);
+      }
+    }
+
+    :global(.unit) {
+      position: absolute;
+      right: s(3);
+      top: 50%;
+      transform: translateY(-50%);
+      color: color('text-sub');
+      pointer-events: none;
+    }
+
+    > input {
+      @include p3;
+      padding: s(3) s(4);
+      background-color: color('bg-block');
+      border-radius: r(3);
+      border: 1px solid color('border-disabled');
+
+      &:focus-visible:not(:disabled) {
+        border-color: color('primary-base');
+        outline: 4px solid color('primary-outline');
+      }
+
+      &::placeholder {
+        color: color('placeholder');
+      }
+
+      &:global(.success) {
+        border-color: color('success');
+
+        &:focus-visible:not(:disabled) {
+          outline: 4px solid color('success-outline');
+        }
+      }
+
+      &:global(.danger) {
+        border-color: color('danger');
+
+        &:focus-visible:not(:disabled) {
+          outline: 4px solid color('danger-outline');
+        }
+      }
+
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox  */
+      &[type='number'] {
+        -moz-appearance: textfield;
+      }
+    }
+  }
+
+  :global(.validator) {
+    @include p4;
+    color: color('danger');
+  }
+}

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

@@ -0,0 +1,17 @@
+@use '../../../mixin.scss' as *;
+.style {
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+  &:global {
+    > textarea {
+      width: 100%;
+    }
+    > div.validator {
+      @include p4;
+      & {
+        color: color('text-sub');
+      }
+    }
+  }
+}