@ihabdevteam/core 0.42.0 → 0.44.0

package/dist/packages/core/src/components/Training/TrainingBlock.css

@@ -16,12 +16,6 @@
     gap: 10px;
 }
 
-/* Ensure individual buttons behave like inline blocks when wrapped */
-.training-list__item {
-    display: inline-block;
-    vertical-align: top;
-}
-
 .training-block__more {
     display: flex;
     justify-content: center;
@@ -30,4 +24,3 @@
 
 .training-blocks--top-spaced { margin-top: 18px; }
 
-

package/dist/packages/core/src/components/Training/TrainingCard.css

@@ -104,28 +104,6 @@
   padding-inline: 12px;
 }
 
-.training-card__type {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--badge-color, var(--color-main));
-  background: color-mix(in srgb, var(--badge-color, var(--color-main)) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--badge-color, var(--color-main)) 25%, transparent);
-}
-
-.training-card__tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-
-.training-card__tag {
-  color: var(--color-main);
-  font-size: 11px;
-}
-
 .training-card__words {
   display: flex;
   flex-wrap: wrap;
@@ -133,17 +111,6 @@
   align-content: flex-start;
 }
 
-.training-card__word {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
-  font-size: 11px;
-  color: var(--color-darkGray);
-  background: var(--color-deepWhite);
-  border: 1px solid var(--color-whiteLine);
-  white-space: nowrap;
-}
-
 .training-card__footer {
   display: flex;
   align-items: center;
@@ -167,12 +134,3 @@
   align-items: center;
   gap: 4px;
 }
-
-.training-card__count {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: var(--color-lightGray);
-  font-size: 11px;
-  white-space: nowrap;
-}

package/dist/packages/core/src/components/Training/TrainingStep.css

@@ -8,7 +8,6 @@
   overflow: visible;
 }
 
-
 .training-step {
   display: flex;
   flex-direction: row;
@@ -19,9 +18,6 @@
   flex-wrap: nowrap; /* prevent internal wrapping */
   overflow: visible
 }
-
-/* shared content & body layout */
-.training-step__body,
 .training-step__content {
   flex: 1 1 auto;
   display: flex;
@@ -33,14 +29,6 @@
 }
 
 .training-step__content { gap: var(--spacing-m); min-width: 0; }
-
-.training-step__controls {
-  width: 100%; /* Make each step fill parent width and allow children to shrink */
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
   
 /* Ensure step titles are left-aligned and use base typography */
 .training-step__title {
@@ -49,74 +37,6 @@
   color: var(--text, #0b2b35);
 }
 
-/* audio panel tweaks inside the step to make it visually centered */
-/* Allow content area to shrink in narrow containers */
-.training-step__body .audio-player {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.training-step__body .audio-player__panel {
-  width: 100%;
-  padding: 18px 20px;
-  border-radius: var(--radius-card);
-}
-
-/* Controls column (right side) reserved for future actions; keep compact */
-.training-step__controls.compact {
-  width: 72px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Confirm step specifics */
-.training-step__confirm-sentence {
-  background: var(--color-white);
-  border-radius: var(--radius-card);
-  padding: var(--spacing-m);
-  border: 1px solid rgba(0,0,0,0.04);
-  box-shadow: var(--shadow-card);
-  color: var(--text, #0b2b35);
-  max-width: 100%;
-  height:200px;
-}
-
-/* center the confirm sentence text both horizontally and vertically */
-.training-step__confirm-sentence {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  word-break: keep-all;
-  overflow-wrap: anywhere;
-}
-
-.training-step__controls.expanded {
-  width: 100%;
-  align-items: stretch;
-  max-height: 420px;
-  overflow-y: auto;
-  padding-bottom: 6px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.training-step__controls.expanded::-webkit-scrollbar { display: none; }
-
-.training-step__controls .training-step__title {
-  color: var(--muted, #70858a);
-}
-
-.training-step__answer-button {
-  padding: 10px 14px;
-  border-radius: var(--radius-s);
-  border: 1px solid rgba(0,0,0,0.06);
-  background: var(--color-white);
-  cursor: pointer;
-  flex: 0 0 auto;
-}
-
 .training-step__buttons {
   display: flex;
   flex-direction: row;
@@ -155,35 +75,12 @@
   align-items: center;
 }
 
-/* remove stacked margin rule */
-.training-step__answer-button + .training-step__answer-button { margin-top: 0 }
-
-/* multi-select confirm button wrapper */
-.training-step__multi-confirm {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  margin-top: var(--margin-content, 12px);
-}
-
-/* 스크롤바 완전 숨김 (스크롤 기능은 유지) */
-.training-step__controls::-webkit-scrollbar { display: none; }
-.training-step__controls {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
 @media (max-width: 640px) {
-  .training-step__body .audio-player__panel { padding: 14px; border-radius: var(--radius-card); }
-  .training-step__controls.compact { width: 48px }
   /* keep row layout on small screens; allow horizontal scroll instead of wrapping */
   .training-step { flex-direction: row; gap: 10px }
 }
 
 @media (max-width: 720px) {
-  .training-step__controls.expanded { gap: 8px }
-  .training-step__answer-button { padding: 9px 12px }
-  .training-step__confirm-sentence { padding: var(--spacing-s); }
 }
 
 .training-step__cards {
@@ -201,25 +98,10 @@
   }
 }
 
-.training-step__block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-s);
-  width: 100%;
-}
-
-.training-step__block--row {
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-s);
-  align-items: center;
-}
-
 .training-step__listen-sticky {
   width: 100%;
 }
 
-
 /* Polyfill fallback: when JS marks a step with .training-step--has-nested */
 .training-step.training-step--has-nested .training-step__content {
   margin-bottom: 100px;

package/dist/packages/core/src/components/Training/TrainingStepTitle.css

@@ -21,11 +21,6 @@
     transition: color 140ms ease, opacity 140ms ease;
     opacity: 1;
 }
-
-
-.training-step__title-row .training-step__title .title-extra {
-    margin-left: var(--spacing-xs);
-}
 .training-step__title-row .title-controls {
     display: flex;
     gap: 6px;
@@ -52,7 +47,6 @@
     justify-content: center;
 }
 
-
 /* State modifiers */
 /* Disable pointer events on the title text for disabled/done state but
    keep the title controls (buttons) interactive. Previously the rule

package/dist/packages/core/src/utils/pressable.d.ts

@@ -0,0 +1,23 @@
+/**
+ * **단추가 아닌 것을 눌리게 만든다** — `role` · `tabIndex` · Enter/Space 한 벌.
+ *
+ * `<div onClick>` 은 마우스로만 된다. 키보드로는 닿지도 눌리지도 않고, 낭독기는
+ * 그것이 누를 수 있는 것인 줄도 모른다. 눈으로는 멀쩡해 보여서 안 드러난다.
+ *
+ * 코어를 훑어 그런 자리 넷을 찾았다(단어표 불러오기의 카드·줄, 달력의 방문 표시,
+ * 랜딩 바닥 띠). 넷이 같은 여섯 줄을 각자 적는 대신 여기 한 벌만 둔다 — 고칠 일이
+ * 생기면 한 곳만 고친다.
+ *
+ * **누를 것이 없으면 아무것도 안 붙인다.** `onPress` 가 없는데 `tabIndex` 만 붙으면
+ * 아무 일도 안 하는 자리에 Tab 이 멈춘다.
+ *
+ * 진짜 `<button>` 을 쓸 수 있으면 그쪽이 낫다. 이건 이미 `<div>`·`<li>` 로 짜인
+ * 자리를 **모양을 안 바꾸고** 눌리게 만드는 길이다.
+ */
+export declare function pressable<E extends {
+    key: string;
+    preventDefault: () => void;
+}>(onPress?: (e: E) => void, 옵션?: {
+    role?: 'button' | 'option';
+    selected?: boolean;
+}): {};

package/dist/packages/core/src/utils/pressable.js

@@ -0,0 +1,32 @@
+/**
+ * **단추가 아닌 것을 눌리게 만든다** — `role` · `tabIndex` · Enter/Space 한 벌.
+ *
+ * `<div onClick>` 은 마우스로만 된다. 키보드로는 닿지도 눌리지도 않고, 낭독기는
+ * 그것이 누를 수 있는 것인 줄도 모른다. 눈으로는 멀쩡해 보여서 안 드러난다.
+ *
+ * 코어를 훑어 그런 자리 넷을 찾았다(단어표 불러오기의 카드·줄, 달력의 방문 표시,
+ * 랜딩 바닥 띠). 넷이 같은 여섯 줄을 각자 적는 대신 여기 한 벌만 둔다 — 고칠 일이
+ * 생기면 한 곳만 고친다.
+ *
+ * **누를 것이 없으면 아무것도 안 붙인다.** `onPress` 가 없는데 `tabIndex` 만 붙으면
+ * 아무 일도 안 하는 자리에 Tab 이 멈춘다.
+ *
+ * 진짜 `<button>` 을 쓸 수 있으면 그쪽이 낫다. 이건 이미 `<div>`·`<li>` 로 짜인
+ * 자리를 **모양을 안 바꾸고** 눌리게 만드는 길이다.
+ */
+export function pressable(onPress, 옵션) {
+    if (!onPress)
+        return {};
+    return {
+        role: 옵션?.role ?? 'button',
+        tabIndex: 0,
+        ...(옵션?.selected === undefined ? {} : { 'aria-selected': 옵션.selected }),
+        onKeyDown: (e) => {
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            /* Space 는 그냥 두면 화면이 굴러간다 — 누름으로 바꾼다 */
+            e.preventDefault();
+            onPress(e);
+        },
+    };
+}

package/dist/packages/core/src/version.d.ts

@@ -19,4 +19,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.42.0";
+export declare const CORE_VERSION = "0.44.0";

package/dist/packages/core/src/version.js

@@ -19,4 +19,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.42.0';
+export const CORE_VERSION = '0.44.0';