@dotss/tictoccroc 0.2.0 → 0.3.1

package/dist/parent/b2b/utils/convertMdToHtml/convertMdToHtml.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/parent/b2b/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as convertMdToHtml } from './convertMdToHtml/convertMdToHtml';

package/dist/parent/b2b/utils/index.mjs

@@ -0,0 +1,4 @@
+import { default as e } from "./convertMdToHtml/convertMdToHtml.mjs";
+export {
+  e as convertMdToHtml
+};

package/dist/shared/components/Calendar/Calendar.d.ts

@@ -7,5 +7,5 @@ export interface CalendarProps extends Omit<FlexboxProps, 'onChange' | 'value'>,
     weekHeadInlineCSS?: FlexboxProps['inlineCSS'];
     datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'date'>;
 }
-declare const Calendar: any;
+declare const Calendar: import('react').ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Calendar;

package/dist/shared/components/Image/Image.d.ts

@@ -20,5 +20,5 @@ export interface ImageProps extends Omit<HTMLProps<HTMLImageElement>, 'onError'>
     enableErrorFallback?: boolean;
     renderErrorFallback?: () => ReactNode;
 }
-declare const Image: any;
+declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/shared/components/Masonry/Masonry.utils.d.ts

@@ -7,7 +7,7 @@ export declare function getHorizontalLayoutRows(images: {
     originalWidth?: number;
     width: number;
     height: number;
-}[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps>[][];
+}[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps, string | import('react').JSXElementConstructor<any>>[][];
 export declare function findNextFocusableElement(currentElement: HTMLDivElement, keyDirection: 'left' | 'right' | 'up' | 'down', candidates: (HTMLDivElement | null)[]): HTMLDivElement | null;
 export declare function getNextIndexHorizontalFromRows(rows: HTMLDivElement[][], currentIndex: number, keyDirection: 'up' | 'down' | 'left' | 'right'): number | null;
 export declare function findImageInChildren(children: ReactNode): ReactElement<ImageProps> | null;

package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.d.ts

@@ -17,5 +17,5 @@ export interface MasonryBlockProps extends FlexboxProps {
     }>;
     setInnerRef?: (ref: HTMLDivElement | null) => void;
 }
-declare const MasonryBlock: any;
+declare const MasonryBlock: import('react').ForwardRefExoticComponent<Omit<MasonryBlockProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default MasonryBlock;

package/dist/shared/components/TextField/TextField.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+import { TextFieldProps as DotssTextFieldProps } from 'node_modules/@dotss/ui/TextField/TextField';
+export interface TextFieldProps extends Omit<FlexboxProps, 'onChange'> {
+    id: string;
+    label: ReactNode;
+    value: string;
+    onChange: (value: string, e: Event) => void;
+    placeholder?: string;
+    labelProps?: HTMLAttributes<HTMLLabelElement>;
+    textFieldProps?: DotssTextFieldProps;
+}
+declare function TextField({ id, label, value, onChange, labelProps, placeholder, textFieldProps, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/shared/components/TextField/TextField.mjs

@@ -0,0 +1,56 @@
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { useRef as g } from "react";
+import C from "@dotss/ui/core/useTheme";
+import m from "@dotss/ui/Flexbox";
+import F from "@dotss/ui/IconButton";
+import b from "@dotss/ui/TextField";
+import S from "@dotss/ui/Typography";
+function w({
+  id: o,
+  label: a,
+  value: r,
+  onChange: l,
+  labelProps: s,
+  placeholder: c,
+  textFieldProps: f,
+  ...d
+}) {
+  const { palette: p } = C(), n = g(null), u = (e) => {
+    l(e.target.value, e);
+  }, h = (e) => {
+    var i;
+    (i = n.current) == null || i.focus(), l("", e);
+  };
+  return /* @__PURE__ */ x(m, { flexDirection: "column", gap: 1, inlineCSS: { width: "100%" }, ...d, children: [
+    /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(S, { tag: "label", htmlFor: o, variant: "b4M", ...s, children: a }) }),
+    /* @__PURE__ */ t(
+      b,
+      {
+        ref: n,
+        id: o,
+        value: r,
+        onChange: u,
+        fullWidth: !0,
+        placeholder: c,
+        endAdornment: r && /* @__PURE__ */ t(
+          F,
+          {
+            name: "CloseLine",
+            size: "small",
+            onClick: h,
+            "aria-label": "지우기",
+            inlineCSS: {
+              "& svg": {
+                color: p.grey[60]
+              }
+            }
+          }
+        ),
+        ...f
+      }
+    )
+  ] });
+}
+export {
+  w as default
+};

package/dist/shared/components/TextField/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextField } from './TextField';
+export type { TextFieldProps } from './TextField';
+export default TextField;

package/dist/shared/components/TextField/index.mjs

@@ -0,0 +1,4 @@
+import t from "./TextField.mjs";
+export {
+  t as default
+};

package/dist/shared/components/TimePicker/TimePicker.d.ts

@@ -19,5 +19,5 @@ export interface TimePickerProps extends Omit<FlexboxProps, 'onChange'> {
     renderStartTimeLabel?: (item: TimePickerItem, isSelected: boolean) => ReactNode;
     renderEndTimeLabel?: (item: TimePickerItem, isSelected: boolean) => ReactNode;
 }
-declare const TimePicker: any;
+declare const TimePicker: import('react').ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default TimePicker;

package/dist/shared/components/TimePicker/TimePicker.mjs

@@ -1,9 +1,9 @@
 import { jsxs as R, jsx as c } from "react/jsx-runtime";
-import { forwardRef as O, useState as j, useRef as w, useEffect as r } from "react";
-import { ChainPicker as I, Typography as S, Flexbox as Q } from "@dotss/ui";
+import { forwardRef as O, useState as j, useRef as w, useCallback as Q, useEffect as r } from "react";
+import { Flexbox as U, Typography as S, ChainPicker as I } from "@dotss/ui";
 import z from "@emotion/styled";
-import b from "../../utils/getTimeRange/getTimeRange.mjs";
-const U = z.div`
+import x from "../../utils/getTimeRange/getTimeRange.mjs";
+const V = z.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -11,36 +11,36 @@ const U = z.div`
   gap: ${({ theme: { spacing: o } }) => o.content(7)}px;
   width: 100%;
   padding: ${({ theme: { spacing: o } }) => o.content(2)}px 0;
-`, V = z.div`
+`, W = z.div`
   position: absolute;
   width: 100%;
   height: 54px;
   background: ${({ theme: o }) => o.palette.background.primary};
   border-radius: 12px;
-`, k = O(function({
+`, C = O(function({
   onChange: F,
   onChangeStartTime: p,
   onChangeEndTime: s,
   startTime: l = 9,
-  endTime: n = 12,
-  range: t = [0, 24],
+  endTime: t = 12,
+  range: n = [0, 24],
   step: i = 1,
-  startTimeChainPickerProps: m,
-  endTimeChainPickerProps: f,
+  startTimeChainPickerProps: u,
+  endTimeChainPickerProps: d,
   timePickerHighlightProps: H,
   renderStartTimeLabel: N,
   renderEndTimeLabel: q,
   inlineCSS: A,
   ...B
 }, D) {
-  const [a, y] = j(l), [u, x] = j(n), E = w(
-    b(0, 24, { minTime: t[0], maxTime: t[1] - i })
-  ), d = w(
-    b(0, 24, { minTime: l + i, maxTime: t[1] })
-  ), $ = (e, h) => {
+  const [f, y] = j(l), [m, b] = j(t), E = w(
+    x(0, 24, { minTime: n[0], maxTime: n[1] - i })
+  ), a = w(
+    x(0, 24, { minTime: l + i, maxTime: n[1] })
+  ), h = Q((e, $) => {
     const [v, M] = e.label.split(":").map(Number), K = v >= 12, g = v % 12 || 12, L = K ? "오후" : "오전";
     return /* @__PURE__ */ R(
-      Q,
+      U,
       {
         gap: 1,
         alignItems: "center",
@@ -48,75 +48,73 @@ const U = z.div`
         "aria-label": `${L} ${g}시 ${M}분`,
         inlineCSS: { width: "82px" },
         children: [
-          /* @__PURE__ */ c(S, { tag: "span", variant: h ? "h5M" : "b5M", children: L }),
-          /* @__PURE__ */ c(S, { tag: "span", variant: h ? "h2M" : "h4M", children: `${g}:${M.toString().padStart(2, "0")}` })
+          /* @__PURE__ */ c(S, { tag: "span", variant: $ ? "h5M" : "b5M", children: L }),
+          /* @__PURE__ */ c(S, { tag: "span", variant: $ ? "h2M" : "h4M", children: `${g}:${M.toString().padStart(2, "0")}` })
         ]
       }
     );
-  }, G = (e) => {
-    y(e), d.current = b(0, 24, {
-      minTime: e + i > t[1] ? t[1] : e + i,
-      maxTime: t[1]
-    }), e >= n - 0.5 && x(d.current[0].value);
+  }, []), G = (e) => {
+    y(e), a.current = x(0, 24, {
+      minTime: e + i > n[1] ? n[1] : e + i,
+      maxTime: n[1]
+    }), e >= t - 0.5 && b(a.current[0].value);
   }, J = (e) => {
-    x(e);
+    b(e);
   };
   return r(() => {
-    d.current = b(0, 24, {
-      minTime: l + i > t[1] ? t[1] : l + i,
-      maxTime: t[1]
+    a.current = x(0, 24, {
+      minTime: l + i > n[1] ? n[1] : l + i,
+      maxTime: n[1]
     });
-  }, [l, n, t, i]), r(() => {
+  }, [l, t, n, i]), r(() => {
     y(l);
   }, [l]), r(() => {
-    l >= n - 0.5 ? x(d.current[0].value) : x(n);
-  }, [l, n]), r(() => {
-    F(a, u);
-  }, [a, u]), r(() => {
-    p == null || p(a);
-  }, [a]), r(() => {
-    s == null || s(u);
-  }, [u]), /* @__PURE__ */ R(U, { ref: D, css: A, role: "group", "aria-label": "시간 선택", ...B, children: [
-    /* @__PURE__ */ c(V, { ...H, "aria-hidden": !0 }),
+    l >= t - 0.5 ? b(a.current[0].value) : b(t);
+  }, [l, t]), r(() => {
+    F(f, m);
+  }, [f, m]), r(() => {
+    p == null || p(f);
+  }, [f]), r(() => {
+    s == null || s(m);
+  }, [m]), /* @__PURE__ */ R(V, { ref: D, css: A, role: "group", "aria-label": "시간 선택", ...B, children: [
+    /* @__PURE__ */ c(W, { ...H, "aria-hidden": !0 }),
     /* @__PURE__ */ c(
       I,
       {
         column: E.current,
         value: l,
         onChange: G,
-        renderLabel: N || $,
+        renderLabel: N || h,
         "aria-label": "시작 시간 선택",
         inlineCSS: {
           "& > li": {
             padding: 0
           },
-          ...m == null ? void 0 : m.inlineCSS
+          ...u == null ? void 0 : u.inlineCSS
         },
-        ...m
-      },
-      `start-time-${a}`
+        ...u
+      }
     ),
     /* @__PURE__ */ c(S, { variant: "h5M", color: "grey.50", "aria-hidden": !0, inlineCSS: { zIndex: 1 }, children: "부터" }),
     /* @__PURE__ */ c(
       I,
       {
-        column: d.current,
-        value: n,
+        column: a.current,
+        value: t,
         onChange: J,
-        renderLabel: q || $,
+        renderLabel: q || h,
         "aria-label": "종료 시간 선택",
         inlineCSS: {
           "& > li": {
             padding: 0
           },
-          ...f == null ? void 0 : f.inlineCSS
+          ...d == null ? void 0 : d.inlineCSS
         },
-        ...f
-      },
-      `end-time-${u}`
+        ...d
+      }
     )
   ] });
 });
 export {
-  k as default
+  C as default
 };

package/dist/shared/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as Calendar } from './Calendar';
 export { default as Masonry } from './Masonry';
 export { default as LoadingAnnouncer } from './LoadingAnnouncer';
 export { Message, SystemMessage, BotMessage, InputBar, Seperator, UnreadMessagePill } from './ChatKit';
+export { default as TextField } from './TextField';
 export * from './Scheduler';
 export * from './MediaDialog';
 export * from './Swiper';
@@ -20,3 +21,4 @@ export * from './Calendar';
 export * from './Masonry';
 export * from './LoadingAnnouncer';
 export * from './ChatKit';
+export * from './TextField';

package/dist/shared/components/index.mjs

@@ -10,9 +10,9 @@ import { default as B } from "./MediaDialog/MediaDialogToolbar/MediaDialogToolba
 import { default as S } from "./Swiper/Swiper.mjs";
 import { default as C } from "./Swiper/SwiperBlock/SwiperBlock.mjs";
 import { default as I } from "./Carousel/Carousel.mjs";
-import { default as y } from "./Carousel/CarouselSlide/CarouselSlide.mjs";
-import { default as R } from "./TimePicker/TimePicker.mjs";
-import { default as F } from "./Roller/Roller.mjs";
+import { default as h } from "./Carousel/CarouselSlide/CarouselSlide.mjs";
+import { default as F } from "./TimePicker/TimePicker.mjs";
+import { default as R } from "./Roller/Roller.mjs";
 import { default as w } from "./Roller/RollerBlock/RollerBlock.mjs";
 import { default as E } from "./Image/Image.mjs";
 import { default as G } from "./Image/Image.error.mjs";
@@ -32,11 +32,12 @@ import { default as pe } from "./ChatKit/InputBar/InputBar.mjs";
 import { default as ge } from "./ChatKit/InputBar/InputBar.fallback.mjs";
 import { default as ne } from "./ChatKit/Seperator/Seperator.mjs";
 import { default as ce } from "./ChatKit/UnreadMessagePill/UnreadMessagePill.mjs";
+import { default as ke } from "./TextField/TextField.mjs";
 export {
   fe as BotMessage,
   j as Calendar,
   I as Carousel,
-  y as CarouselSlide,
+  h as CarouselSlide,
   ae as DirectTradeRiskInfoBottomSheet,
   E as Image,
   G as ImageError,
@@ -52,7 +53,7 @@ export {
   B as MediaDialogToolbar,
   Q as Message,
   W as MessageFallback,
-  F as Roller,
+  R as Roller,
   w as RollerBlock,
   l as ScheduleBlock,
   t as ScheduleEvent,
@@ -61,7 +62,8 @@ export {
   S as Swiper,
   C as SwiperBlock,
   $ as SystemMessage,
-  R as TimePicker,
+  ke as TextField,
+  F as TimePicker,
   ce as UnreadMessagePill,
   d as getAvailableDateRange,
   se as getBotMessageLabel,

package/dist/shared/hooks/useInView/useInView.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from 'react';
 export default function useInView(targetRef: RefObject<HTMLElement | null>, options?: IntersectionObserverInit): {
-    isInView: any;
+    isInView: boolean;
 };

package/dist/shared/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,3 @@
-declare const useIsomorphicLayoutEffect: any;
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

package/dist/teacher/home/components/BannerAccount/BannerAccount.mjs

@@ -1,13 +1,12 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import f from "@dotss/ui/core/useTheme";
 import n from "@dotss/ui/Flexbox";
-import f from "@dotss/ui/Typography";
-import { useTheme as g } from "@emotion/react";
+import g from "@dotss/ui/Typography";
 import S from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
-import "@dotss/ui/core/useTheme";
 import w from "../../../../shared/components/Swiper/Swiper.mjs";
 import y from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
-function H({
+function I({
   id: a,
   banners: l,
   onClickBanner: o,
@@ -15,7 +14,7 @@ function H({
   swiperProps: p,
   ...h
 }) {
-  const { palette: m } = g(), s = (e, r) => (t) => {
+  const { palette: m } = f(), s = (e, r) => (t) => {
     o && typeof o == "function" && (t.stopPropagation(), t.preventDefault(), o(e, r, t));
   }, u = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
     n,
@@ -36,7 +35,7 @@ function H({
         backgroundColor: m.etc.dimmed02
       },
       children: /* @__PURE__ */ c(
-        f,
+        g,
         {
           tag: "p",
           variant: "c5R",
@@ -97,5 +96,5 @@ function H({
   ] });
 }
 export {
-  H as default
+  I as default
 };

package/dist/teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.d.ts

@@ -18,5 +18,5 @@ export interface AvailableScheduleSectionProps extends FlexboxProps {
         };
     };
 }
-declare const AvailableScheduleSection: any;
+declare const AvailableScheduleSection: import('react').ForwardRefExoticComponent<Omit<AvailableScheduleSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default AvailableScheduleSection;

package/dist/teacher/profile/components/CareNoteSection/CareNoteSection.d.ts

@@ -3,5 +3,5 @@ export interface CareNoteSectionProps extends FlexboxProps {
     totalCount: number;
     onClickViewAll?: () => void;
 }
-declare const CareNoteSection: any;
+declare const CareNoteSection: import('react').ForwardRefExoticComponent<Omit<CareNoteSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default CareNoteSection;

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewSection.d.ts

@@ -3,5 +3,5 @@ export interface ParentReviewSectionProps extends FlexboxProps {
     totalCount: number;
     onClickViewAll?: () => void;
 }
-declare const ParentReviewSection: any;
+declare const ParentReviewSection: import('react').ForwardRefExoticComponent<Omit<ParentReviewSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default ParentReviewSection;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -82,11 +82,28 @@
     "./shared/typings/*": {
       "import": "./dist/shared/typings/*/index.mjs",
       "types": "./dist/shared/typings/*/index.d.ts"
+    },
+    "./parent/b2b/components": {
+      "import": "./dist/parent/b2b/components/index.mjs",
+      "types": "./dist/parent/b2b/components/index.d.ts"
+    },
+    "./parent/b2b/components/*": {
+      "import": "./dist/parent/b2b/components/*/index.mjs",
+      "types": "./dist/parent/b2b/components/*/index.d.ts"
+    },
+    "./parent/b2b/utils": {
+      "import": "./dist/parent/b2b/utils/index.mjs",
+      "types": "./dist/parent/b2b/utils/index.d.ts"
+    },
+    "./parent/b2b/utils/*": {
+      "import": "./dist/parent/b2b/utils/*/index.mjs",
+      "types": "./dist/parent/b2b/utils/*/index.d.ts"
     }
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@storybook/addon-docs": "^9.0.4",
     "@storybook/addon-onboarding": "^9.0.4",
     "@storybook/react-vite": "^9.0.4",
     "@types/node": "^22.15.29",
@@ -95,16 +112,22 @@
     "glob": "^10.4.2",
     "storybook": "^9.0.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
   },
   "peerDependencies": {
     "@dotss/ui": ">=1.0.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "dayjs": "^1.11.13",
+    "heic2any": "^0.0.4",
+    "dompurify": "^3.3.1",
+    "marked": "^17.0.3",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "heic2any": "^0.0.4"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"