@hua-labs/ui 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -67
- package/dist/{ComponentLayout-btJq4TjA.d.mts → ComponentLayout-DrZpz0yv.d.mts} +1 -1
- package/dist/Section-BWzyshgX.d.mts +67 -0
- package/dist/advanced/dashboard.d.ts.map +1 -1
- package/dist/advanced-dashboard.d.mts +1 -1
- package/dist/advanced-dashboard.js +4 -4
- package/dist/advanced-dashboard.js.map +1 -1
- package/dist/advanced-dashboard.mjs +3 -3
- package/dist/advanced-dashboard.mjs.map +1 -1
- package/dist/advanced-emotion.js +1 -1
- package/dist/advanced-emotion.js.map +1 -1
- package/dist/advanced-emotion.mjs +1 -1
- package/dist/advanced-motion.d.mts +65 -1
- package/dist/advanced-motion.js +14 -14
- package/dist/advanced-motion.js.map +1 -1
- package/dist/advanced-motion.mjs +1 -1
- package/dist/advanced.d.mts +4 -4
- package/dist/advanced.js +16 -16
- package/dist/advanced.js.map +1 -1
- package/dist/advanced.mjs +3 -3
- package/dist/advanced.mjs.map +1 -1
- package/dist/chunk-3CCF7U3P.mjs +3 -0
- package/dist/{chunk-IFSEJVOR.mjs.map → chunk-3CCF7U3P.mjs.map} +1 -1
- package/dist/chunk-3GAUTZXQ.mjs +3 -0
- package/dist/{chunk-X7ZIWYRC.mjs.map → chunk-3GAUTZXQ.mjs.map} +1 -1
- package/dist/chunk-42RGFEL2.mjs +3 -0
- package/dist/chunk-42RGFEL2.mjs.map +1 -0
- package/dist/chunk-4NJE7D6X.mjs +3 -0
- package/dist/chunk-4NJE7D6X.mjs.map +1 -0
- package/dist/chunk-6HVJFEDA.mjs +3 -0
- package/dist/chunk-6HVJFEDA.mjs.map +1 -0
- package/dist/chunk-7OYT3QSY.mjs +3 -0
- package/dist/chunk-7OYT3QSY.mjs.map +1 -0
- package/dist/chunk-ANYZ56VB.mjs +3 -0
- package/dist/{chunk-QQCELXFD.mjs.map → chunk-ANYZ56VB.mjs.map} +1 -1
- package/dist/chunk-AOSXB5JJ.mjs +4 -0
- package/dist/{chunk-GLZKT7JN.mjs.map → chunk-AOSXB5JJ.mjs.map} +1 -1
- package/dist/chunk-B544MRF7.mjs +3 -0
- package/dist/{chunk-SDFHJ4GB.mjs.map → chunk-B544MRF7.mjs.map} +1 -1
- package/dist/chunk-CVWWS25A.mjs +3 -0
- package/dist/chunk-CVWWS25A.mjs.map +1 -0
- package/dist/chunk-DYNBM24D.mjs +3 -0
- package/dist/{chunk-OSCMSA2Q.mjs.map → chunk-DYNBM24D.mjs.map} +1 -1
- package/dist/{chunk-NBJUE7NR.mjs → chunk-FX57OSYG.mjs} +2 -2
- package/dist/{chunk-NBJUE7NR.mjs.map → chunk-FX57OSYG.mjs.map} +1 -1
- package/dist/chunk-IJSYSNM5.mjs +3 -0
- package/dist/{chunk-IN7RWQCJ.mjs.map → chunk-IJSYSNM5.mjs.map} +1 -1
- package/dist/chunk-KJZGOL2Z.mjs +3 -0
- package/dist/{chunk-LOYAJIWO.mjs.map → chunk-KJZGOL2Z.mjs.map} +1 -1
- package/dist/chunk-KYRIUUQP.mjs +3 -0
- package/dist/{chunk-PAEKNQWW.mjs.map → chunk-KYRIUUQP.mjs.map} +1 -1
- package/dist/chunk-LSA7DU3N.mjs +73 -0
- package/dist/chunk-LSA7DU3N.mjs.map +1 -0
- package/dist/chunk-MDLCJASB.mjs +3 -0
- package/dist/{chunk-LH77I6HO.mjs.map → chunk-MDLCJASB.mjs.map} +1 -1
- package/dist/chunk-N56BUOCD.mjs +3 -0
- package/dist/{chunk-XV3Y7QVU.mjs.map → chunk-N56BUOCD.mjs.map} +1 -1
- package/dist/chunk-OFYITQXI.mjs +13 -0
- package/dist/chunk-OFYITQXI.mjs.map +1 -0
- package/dist/chunk-OZNST3EZ.mjs +3 -0
- package/dist/{chunk-SGEP3CQE.mjs.map → chunk-OZNST3EZ.mjs.map} +1 -1
- package/dist/chunk-RS6RKW5U.mjs +13 -0
- package/dist/{chunk-6KTHJ3EL.mjs.map → chunk-RS6RKW5U.mjs.map} +1 -1
- package/dist/{chunk-C4OACMTB.mjs → chunk-TXBZZJNR.mjs} +2 -2
- package/dist/{chunk-C4OACMTB.mjs.map → chunk-TXBZZJNR.mjs.map} +1 -1
- package/dist/chunk-TZ4YSHMC.mjs +3 -0
- package/dist/{chunk-UWHCM3S6.mjs.map → chunk-TZ4YSHMC.mjs.map} +1 -1
- package/dist/chunk-U6CTBZ2U.mjs +3 -0
- package/dist/chunk-U6CTBZ2U.mjs.map +1 -0
- package/dist/{chunk-PYBYZVSL.mjs → chunk-WP7VFE77.mjs} +2 -2
- package/dist/{chunk-PYBYZVSL.mjs.map → chunk-WP7VFE77.mjs.map} +1 -1
- package/dist/{chunk-FFH4ZFKS.mjs → chunk-XCZMLKPK.mjs} +2 -2
- package/dist/{chunk-FFH4ZFKS.mjs.map → chunk-XCZMLKPK.mjs.map} +1 -1
- package/dist/chunk-XGHT7WMO.mjs +3 -0
- package/dist/chunk-XGHT7WMO.mjs.map +1 -0
- package/dist/chunk-XL4KTJ4L.mjs +3 -0
- package/dist/{chunk-VWSBJUNI.mjs.map → chunk-XL4KTJ4L.mjs.map} +1 -1
- package/dist/chunk-Z74YUUVT.mjs +3 -0
- package/dist/chunk-Z74YUUVT.mjs.map +1 -0
- package/dist/chunk-ZXZIHU7J.mjs +8 -0
- package/dist/{chunk-N7M6RIN4.mjs.map → chunk-ZXZIHU7J.mjs.map} +1 -1
- package/dist/components/Card.d.ts.map +1 -1
- package/dist/components/DatePicker.d.ts.map +1 -1
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/Popover.d.ts +2 -0
- package/dist/components/Popover.d.ts.map +1 -1
- package/dist/components/Progress.d.ts +1 -0
- package/dist/components/Progress.d.ts.map +1 -1
- package/dist/components/Section.d.ts +44 -0
- package/dist/components/Section.d.ts.map +1 -0
- package/dist/components/advanced/AnimatedGradient.d.ts.map +1 -1
- package/dist/components/advanced/DotNav.d.ts +26 -0
- package/dist/components/advanced/DotNav.d.ts.map +1 -0
- package/dist/components/advanced/HorizontalScroll.d.ts +20 -0
- package/dist/components/advanced/HorizontalScroll.d.ts.map +1 -0
- package/dist/components/advanced/ImageReveal.d.ts +24 -0
- package/dist/components/advanced/ImageReveal.d.ts.map +1 -0
- package/dist/components/advanced/index.d.ts +6 -0
- package/dist/components/advanced/index.d.ts.map +1 -1
- package/dist/data.mjs +2 -2
- package/dist/data.mjs.map +1 -1
- package/dist/feedback.mjs +1 -1
- package/dist/form.js +3 -3
- package/dist/form.js.map +1 -1
- package/dist/form.mjs +4 -4
- package/dist/form.mjs.map +1 -1
- package/dist/{icons-Bj_nr8Ba.d.mts → icons-DmhQEH_E.d.mts} +6 -1
- package/dist/iconsax-extended.js +1 -1
- package/dist/iconsax-extended.js.map +1 -1
- package/dist/iconsax-extended.mjs +1 -1
- package/dist/iconsax-extended.mjs.map +1 -1
- package/dist/index.d.mts +9 -27
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/dist/interactive.js +1 -1
- package/dist/interactive.js.map +1 -1
- package/dist/interactive.mjs +1 -1
- package/dist/interactive.mjs.map +1 -1
- package/dist/landing/LandingAbout.d.ts +3 -0
- package/dist/landing/LandingAbout.d.ts.map +1 -0
- package/dist/landing/LandingCTA.d.ts +3 -0
- package/dist/landing/LandingCTA.d.ts.map +1 -0
- package/dist/landing/LandingContact.d.ts +3 -0
- package/dist/landing/LandingContact.d.ts.map +1 -0
- package/dist/landing/LandingExperience.d.ts +3 -0
- package/dist/landing/LandingExperience.d.ts.map +1 -0
- package/dist/landing/LandingFeatures.d.ts +3 -0
- package/dist/landing/LandingFeatures.d.ts.map +1 -0
- package/dist/landing/LandingHero.d.ts +3 -0
- package/dist/landing/LandingHero.d.ts.map +1 -0
- package/dist/landing/LandingLogoCloud.d.ts +3 -0
- package/dist/landing/LandingLogoCloud.d.ts.map +1 -0
- package/dist/landing/LandingMetrics.d.ts +3 -0
- package/dist/landing/LandingMetrics.d.ts.map +1 -0
- package/dist/landing/LandingProjects.d.ts +3 -0
- package/dist/landing/LandingProjects.d.ts.map +1 -0
- package/dist/landing/LandingProvider.d.ts +4 -0
- package/dist/landing/LandingProvider.d.ts.map +1 -0
- package/dist/landing/LandingShowcase.d.ts +3 -0
- package/dist/landing/LandingShowcase.d.ts.map +1 -0
- package/dist/landing/LandingSkills.d.ts +3 -0
- package/dist/landing/LandingSkills.d.ts.map +1 -0
- package/dist/landing/LandingStats.d.ts +3 -0
- package/dist/landing/LandingStats.d.ts.map +1 -0
- package/dist/landing/LandingTestimonials.d.ts +3 -0
- package/dist/landing/LandingTestimonials.d.ts.map +1 -0
- package/dist/landing/index.d.ts +47 -0
- package/dist/landing/index.d.ts.map +1 -0
- package/dist/landing/themes/app.d.ts +3 -0
- package/dist/landing/themes/app.d.ts.map +1 -0
- package/dist/landing/themes/corporate.d.ts +3 -0
- package/dist/landing/themes/corporate.d.ts.map +1 -0
- package/dist/landing/themes/dashboard.d.ts +3 -0
- package/dist/landing/themes/dashboard.d.ts.map +1 -0
- package/dist/landing/themes/immersive.d.ts +3 -0
- package/dist/landing/themes/immersive.d.ts.map +1 -0
- package/dist/landing/themes/index.d.ts +15 -0
- package/dist/landing/themes/index.d.ts.map +1 -0
- package/dist/landing/themes/marketing.d.ts +3 -0
- package/dist/landing/themes/marketing.d.ts.map +1 -0
- package/dist/landing/themes/portfolio.d.ts +3 -0
- package/dist/landing/themes/portfolio.d.ts.map +1 -0
- package/dist/landing/themes/product.d.ts +3 -0
- package/dist/landing/themes/product.d.ts.map +1 -0
- package/dist/landing/types.d.ts +346 -0
- package/dist/landing/types.d.ts.map +1 -0
- package/dist/landing.d.mts +417 -0
- package/dist/landing.js +100 -0
- package/dist/landing.js.map +1 -0
- package/dist/landing.mjs +31 -0
- package/dist/landing.mjs.map +1 -0
- package/dist/lib/icons.d.ts +6 -1
- package/dist/lib/icons.d.ts.map +1 -1
- package/dist/navigation.d.mts +1 -1
- package/dist/navigation.js +2 -2
- package/dist/navigation.js.map +1 -1
- package/dist/navigation.mjs +1 -1
- package/dist/navigation.mjs.map +1 -1
- package/dist/overlay.d.mts +2 -0
- package/dist/overlay.js +1 -1
- package/dist/overlay.js.map +1 -1
- package/dist/overlay.mjs +1 -1
- package/dist/overlay.mjs.map +1 -1
- package/dist/sdui.js +4 -4
- package/dist/sdui.js.map +1 -1
- package/dist/sdui.mjs +1 -1
- package/dist/sdui.mjs.map +1 -1
- package/package.json +16 -10
- package/src/styles/landing.css +107 -0
- package/src/styles/utilities.css +58 -0
- package/dist/chunk-6KTHJ3EL.mjs +0 -13
- package/dist/chunk-BXX2TZUB.mjs +0 -3
- package/dist/chunk-BXX2TZUB.mjs.map +0 -1
- package/dist/chunk-COR6CDMA.mjs +0 -83
- package/dist/chunk-COR6CDMA.mjs.map +0 -1
- package/dist/chunk-GLZKT7JN.mjs +0 -4
- package/dist/chunk-HN5LSP6L.mjs +0 -3
- package/dist/chunk-HN5LSP6L.mjs.map +0 -1
- package/dist/chunk-IFSEJVOR.mjs +0 -3
- package/dist/chunk-IN7RWQCJ.mjs +0 -3
- package/dist/chunk-LH77I6HO.mjs +0 -3
- package/dist/chunk-LOYAJIWO.mjs +0 -3
- package/dist/chunk-LPAG7DCA.mjs +0 -3
- package/dist/chunk-LPAG7DCA.mjs.map +0 -1
- package/dist/chunk-N7M6RIN4.mjs +0 -8
- package/dist/chunk-OSCMSA2Q.mjs +0 -3
- package/dist/chunk-PAEKNQWW.mjs +0 -3
- package/dist/chunk-QQCELXFD.mjs +0 -3
- package/dist/chunk-RPUS7G7Q.mjs +0 -3
- package/dist/chunk-RPUS7G7Q.mjs.map +0 -1
- package/dist/chunk-SDFHJ4GB.mjs +0 -3
- package/dist/chunk-SGEP3CQE.mjs +0 -3
- package/dist/chunk-UUHAXGMO.mjs +0 -3
- package/dist/chunk-UUHAXGMO.mjs.map +0 -1
- package/dist/chunk-UWHCM3S6.mjs +0 -3
- package/dist/chunk-VWSBJUNI.mjs +0 -3
- package/dist/chunk-X7ZIWYRC.mjs +0 -3
- package/dist/chunk-XV3Y7QVU.mjs +0 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Section.tsx"],"names":["sectionVariants","cva","sectionLineStyle","SectionHeader","config","isCenter","jsxs","merge","jsx","Section","React","className","spacing","background","container","containerPadding","header","fullWidth","children","props","ref","content","Fragment","Container"],"mappings":"mMAOO,IAAMA,CAAAA,CAAkBC,GAAAA,CAAI,iBAAA,CAAmB,CACpD,QAAA,CAAU,CACR,OAAA,CAAS,CACP,IAAA,CAAM,EAAA,CACN,GAAI,gBAAA,CACJ,EAAA,CAAI,yBAAA,CACJ,EAAA,CAAI,gBAAA,CACJ,EAAA,CAAI,gBACN,CAAA,CACA,UAAA,CAAY,CACV,IAAA,CAAM,EAAA,CACN,KAAA,CAAO,cACP,MAAA,CAAQ,aAAA,CACR,OAAA,CAAS,cACX,CACF,CAAA,CACA,gBAAiB,CAAE,OAAA,CAAS,IAAA,CAAM,UAAA,CAAY,MAAO,CACvD,CAAC,CAAA,CAyBKC,CAAAA,CAAwC,CAC5C,KAAA,CAAO,MAAA,CACP,MAAA,CAAQ,MACR,YAAA,CAAc,QAAA,CACd,UAAA,CAAY,uHAAA,CACZ,YAAA,CAAc,QAChB,EAEA,SAASC,CAAAA,CAAc,CAAE,MAAA,CAAAC,CAAO,CAAA,CAAoC,CAClE,IAAMC,CAAAA,CAAWD,CAAAA,CAAO,KAAA,GAAU,MAAA,CAElC,OACEE,KAAC,KAAA,CAAA,CAAI,SAAA,CAAWC,GAAAA,CAAM,OAAA,CAASF,CAAAA,EAAY,aAAa,EACrD,QAAA,CAAA,CAAAD,CAAAA,CAAO,SAAA,GAAc,KAAA,EACpBI,GAAAA,CAAC,KAAA,CAAA,CACC,MAAON,CAAAA,CACP,SAAA,CAAWK,GAAAA,CAAMF,CAAAA,EAAY,SAAS,CAAA,CACtC,cAAY,MAAA,CACd,CAAA,CAEFG,GAAAA,CAAC,IAAA,CAAA,CAAG,SAAA,CAAU,0CAAA,CACX,SAAAJ,CAAAA,CAAO,KAAA,CACV,CAAA,CACCA,CAAAA,CAAO,QAAA,EACNI,GAAAA,CAAC,KAAE,SAAA,CAAU,iDAAA,CACV,QAAA,CAAAJ,CAAAA,CAAO,QAAA,CACV,CAAA,CAEDA,EAAO,MAAA,EACNI,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,MAAA,CAAQ,QAAA,CAAAJ,EAAO,MAAA,CAAO,CAAA,CAAA,CAEzC,CAEJ,CAiBA,IAAMK,CAAAA,CAAUC,EAAM,UAAA,CACpB,CAAC,CACC,SAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,EACA,UAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,IAAA,CACZ,gBAAA,CAAAC,EAAmB,MAAA,CACnB,MAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,KAAA,CACZ,SAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CAAGC,CAAAA,GAAQ,CACT,IAAMC,CAAAA,CACJf,IAAAA,CAAAgB,QAAAA,CAAA,CACG,QAAA,CAAA,CAAAN,CAAAA,EAAUR,IAACL,CAAAA,CAAA,CAAc,MAAA,CAAQa,CAAAA,CAAQ,CAAA,CACzCE,CAAAA,CAAAA,CACH,EAGF,OACEV,GAAAA,CAAC,SAAA,CAAA,CACC,GAAA,CAAKY,CAAAA,CACL,SAAA,CAAWb,IACTP,CAAAA,CAAgB,CAAE,OAAA,CAAAY,CAAAA,CAAS,UAAA,CAAAC,CAAW,CAAC,CAAA,CACvC,MAAA,CACAF,CACF,CAAA,CACC,GAAGQ,CAAAA,CAEH,SAAAF,CAAAA,CAAYI,CAAAA,CACXb,GAAAA,CAACe,CAAAA,CAAA,CAAU,IAAA,CAAMT,EAAW,OAAA,CAASC,CAAAA,CAAkB,QAAA,CAAQ,IAAA,CAC5D,QAAA,CAAAM,CAAAA,CACH,EAEJ,CAEJ,CACF,EACAZ,CAAAA,CAAQ,WAAA,CAAc,SAAA","file":"chunk-Z74YUUVT.mjs","sourcesContent":["\"use client\"\n\nimport React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { merge } from \"../lib/utils\"\nimport { Container, type ContainerProps } from \"./Container\"\n\nexport const sectionVariants = cva(\"relative w-full\", {\n variants: {\n spacing: {\n none: \"\",\n sm: \"py-12 sm:py-16\",\n md: \"py-16 sm:py-20 lg:py-24\",\n lg: \"py-20 sm:py-28\",\n xl: \"py-28 sm:py-36\",\n },\n background: {\n none: \"\",\n muted: \"bg-muted/30\",\n accent: \"bg-accent/5\",\n primary: \"bg-primary/5\",\n },\n },\n defaultVariants: { spacing: \"lg\", background: \"none\" },\n})\n\nexport interface SectionHeaderConfig {\n title: string\n subtitle?: string\n action?: React.ReactNode\n /** section-line 데코레이터 표시 @default true */\n decorator?: boolean\n /** 텍스트 정렬 @default 'center' */\n align?: 'left' | 'center'\n}\n\nexport interface SectionProps\n extends React.HTMLAttributes<HTMLElement>,\n VariantProps<typeof sectionVariants> {\n /** Container 사이즈 @default 'lg' */\n container?: ContainerProps['size']\n /** Container 패딩 @default 'none' */\n containerPadding?: ContainerProps['padding']\n /** 섹션 헤더 설정 */\n header?: SectionHeaderConfig\n /** 풀위드 모드 (Container 없이 직접) */\n fullWidth?: boolean\n}\n\nconst sectionLineStyle: React.CSSProperties = {\n width: '80px',\n height: '3px',\n borderRadius: '9999px',\n background: 'linear-gradient(90deg, var(--color-primary, hsl(var(--primary))), var(--color-accent, hsl(var(--accent-foreground))))',\n marginBottom: '1.5rem',\n}\n\nfunction SectionHeader({ config }: { config: SectionHeaderConfig }) {\n const isCenter = config.align !== 'left'\n\n return (\n <div className={merge(\"mb-16\", isCenter && \"text-center\")}>\n {config.decorator !== false && (\n <div\n style={sectionLineStyle}\n className={merge(isCenter && \"mx-auto\")}\n aria-hidden=\"true\"\n />\n )}\n <h2 className=\"text-3xl md:text-5xl font-extrabold mb-4\">\n {config.title}\n </h2>\n {config.subtitle && (\n <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n {config.subtitle}\n </p>\n )}\n {config.action && (\n <div className=\"mt-6\">{config.action}</div>\n )}\n </div>\n )\n}\n\n/**\n * Section 컴포넌트\n *\n * 랜딩 페이지 섹션의 보일러플레이트를 줄이는 시맨틱 래퍼.\n * 내부적으로 Container를 사용하며, header prop으로 제목/부제/데코레이터를 자동 생성합니다.\n *\n * @example\n * <Section header={{ title: \"제목\", subtitle: \"부제\" }}>\n * {children}\n * </Section>\n *\n * <Section spacing=\"xl\" background=\"muted\" fullWidth>\n * {fullWidthContent}\n * </Section>\n */\nconst Section = React.forwardRef<HTMLElement, SectionProps>(\n ({\n className,\n spacing,\n background,\n container = \"lg\",\n containerPadding = \"none\",\n header,\n fullWidth = false,\n children,\n ...props\n }, ref) => {\n const content = (\n <>\n {header && <SectionHeader config={header} />}\n {children}\n </>\n )\n\n return (\n <section\n ref={ref}\n className={merge(\n sectionVariants({ spacing, background }),\n \"px-6\",\n className\n )}\n {...props}\n >\n {fullWidth ? content : (\n <Container size={container} padding={containerPadding} centered>\n {content}\n </Container>\n )}\n </section>\n )\n }\n)\nSection.displayName = \"Section\"\n\nexport { Section }\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {b}from'./chunk-U6CTBZ2U.mjs';import i from'react';import {cva}from'class-variance-authority';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var x=cva("block",{variants:{variant:{text:"rounded w-full h-4",circular:"rounded-full w-10 h-10",rounded:"rounded-lg w-full h-[200px]",rectangular:"rounded-none w-full h-[200px]"},animation:{pulse:"animate-pulse bg-muted",wave:"bg-muted",shimmer:"bg-muted"}},defaultVariants:{variant:"text",animation:"pulse"}}),o=i.forwardRef(({className:t,variant:l="text",width:a,height:c,animation:m="pulse",...p},f)=>{let N=()=>m==="wave"||m==="shimmer"?{background:"linear-gradient(90deg, hsl(var(--muted)) 0%, hsl(var(--muted-foreground) / 0.2) 50%, hsl(var(--muted)) 100%)",backgroundSize:"200% 100%",animation:"shimmer 1.5s ease-in-out infinite"}:{};return jsxs(Fragment,{children:[(m==="wave"||m==="shimmer")&&jsx("style",{children:`
|
|
3
|
+
@keyframes shimmer {
|
|
4
|
+
0% { background-position: 200% 0; }
|
|
5
|
+
100% { background-position: -200% 0; }
|
|
6
|
+
}
|
|
7
|
+
`}),jsx("div",{ref:f,className:b(x({variant:l,animation:m}),t),style:{...a!=null?{width:typeof a=="number"?`${a}px`:a}:{},...c!=null?{height:typeof c=="number"?`${c}px`:c}:{},...N()},...p})]})});o.displayName="Skeleton";var s=i.forwardRef(({className:t,...l},a)=>jsx(o,{ref:a,variant:"text",className:t,...l}));s.displayName="SkeletonText";var d=i.forwardRef(({className:t,...l},a)=>jsx(o,{ref:a,variant:"circular",className:t,...l}));d.displayName="SkeletonCircle";var w=i.forwardRef(({className:t,...l},a)=>jsx(o,{ref:a,variant:"rectangular",className:t,...l}));w.displayName="SkeletonRectangle";var v=i.forwardRef(({className:t,...l},a)=>jsx(o,{ref:a,variant:"rounded",className:t,...l}));v.displayName="SkeletonRounded";var h=i.forwardRef(({className:t,...l},a)=>jsxs("div",{ref:a,className:b("space-y-4 p-6",t),...l,children:[jsxs("div",{className:"flex items-center space-x-4",children:[" ",jsx(d,{className:"w-12 h-12"})," ",jsxs("div",{className:"space-y-2 flex-1",children:[" ",jsx(s,{className:"h-4 w-3/4"})," ",jsx(s,{className:"h-3 w-1/2"})," "]})]}),jsx(v,{className:"w-full h-32"})," ",jsxs("div",{className:"space-y-2",children:[" ",jsx(s,{className:"h-4 w-full"}),jsx(s,{className:"h-4 w-5/6"}),jsx(s,{className:"h-4 w-4/6"})]})]}));h.displayName="SkeletonCard";var k=i.forwardRef(({className:t,...l},a)=>jsxs("div",{ref:a,className:b("flex items-center space-x-4",t),...l,children:[jsx(d,{className:"w-12 h-12"})," ",jsxs("div",{className:"space-y-2 flex-1",children:[" ",jsx(s,{className:"h-4 w-3/4"}),jsx(s,{className:"h-3 w-1/2"})]})]}));k.displayName="SkeletonAvatar";var y=i.forwardRef(({className:t,...l},a)=>jsxs("div",{ref:a,className:b("space-y-2",t),...l,children:[jsx(v,{className:"w-full h-48"})," ",jsx(s,{className:"h-4 w-1/2"})]}));y.displayName="SkeletonImage";var S=i.forwardRef(({className:t,...l},a)=>jsxs("div",{ref:a,className:b("space-y-4",t),...l,children:[jsxs("div",{className:"flex items-center space-x-4",children:[" ",jsx(d,{className:"w-16 h-16"})," ",jsxs("div",{className:"space-y-2 flex-1",children:[" ",jsx(s,{className:"h-5 w-1/2"}),jsx(s,{className:"h-3 w-1/3"})]})]}),jsxs("div",{className:"space-y-2",children:[" ",jsx(s,{className:"h-4 w-full"}),jsx(s,{className:"h-4 w-5/6"})]})]}));S.displayName="SkeletonUserProfile";var T=i.forwardRef(({className:t,...l},a)=>jsx("div",{ref:a,className:b("space-y-4",t),...l,children:Array.from({length:3}).map((c,m)=>jsxs("div",{className:"flex items-center space-x-4",children:[" ",jsx(d,{className:"w-10 h-10"})," ",jsxs("div",{className:"space-y-2 flex-1",children:[" ",jsx(s,{className:"h-4 w-3/4"}),jsx(s,{className:"h-3 w-1/2"})]})]},m))}));T.displayName="SkeletonList";var L=i.forwardRef(({className:t,...l},a)=>jsxs("div",{ref:a,className:b("space-y-4",t),...l,children:[jsxs("div",{className:"flex space-x-4",children:[" ",jsx(s,{className:"h-4 w-1/4"}),jsx(s,{className:"h-4 w-1/4"}),jsx(s,{className:"h-4 w-1/4"}),jsx(s,{className:"h-4 w-1/4"})]}),Array.from({length:5}).map((c,m)=>jsxs("div",{className:"flex space-x-4",children:[" ",jsx(s,{className:"h-4 w-1/4"}),jsx(s,{className:"h-4 w-1/4"}),jsx(s,{className:"h-4 w-1/4"}),jsx(s,{className:"h-4 w-1/4"})]},m))]}));L.displayName="SkeletonTable";export{o as a,s as b,d as c,w as d,v as e,h as f,k as g,y as h,S as i,T as j,L as k};//# sourceMappingURL=chunk-ZXZIHU7J.mjs.map
|
|
8
|
+
//# sourceMappingURL=chunk-ZXZIHU7J.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton.tsx"],"names":["skeletonVariants","cva","Skeleton","React","className","variant","width","height","animation","props","ref","getAnimationStyle","jsxs","Fragment","jsx","merge","SkeletonText","SkeletonCircle","SkeletonRectangle","SkeletonRounded","SkeletonCard","SkeletonAvatar","SkeletonImage","SkeletonUserProfile","SkeletonList","_","index","SkeletonTable"],"mappings":"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","file":"chunk-N7M6RIN4.mjs","sourcesContent":["\"use client\"\n\nimport React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { merge } from \"../lib/utils\"\n\nexport const skeletonVariants = cva(\n \"block\",\n {\n variants: {\n variant: {\n text: \"rounded w-full h-4\",\n circular: \"rounded-full w-10 h-10\",\n rounded: \"rounded-lg w-full h-[200px]\",\n rectangular: \"rounded-none w-full h-[200px]\",\n },\n animation: {\n pulse: \"animate-pulse bg-muted\",\n wave: \"bg-muted\",\n shimmer: \"bg-muted\",\n },\n },\n defaultVariants: {\n variant: \"text\",\n animation: \"pulse\",\n },\n }\n)\n\n/**\n * Skeleton 컴포넌트의 props\n */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: \"text\" | \"circular\" | \"rectangular\" | \"rounded\"\n width?: string | number\n height?: string | number\n animation?: \"pulse\" | \"wave\" | \"shimmer\"\n className?: string\n}\n\n/**\n * Skeleton 컴포넌트 / Skeleton component\n *\n * 로딩 중 콘텐츠의 플레이스홀더를 표시하는 스켈레톤 컴포넌트입니다.\n *\n * @example\n * <Skeleton />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rounded\" width=\"100%\" height={200} animation=\"wave\" />\n */\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n ({\n className,\n variant = \"text\",\n width,\n height,\n animation = \"pulse\",\n ...props\n }, ref) => {\n const getAnimationStyle = (): React.CSSProperties => {\n if (animation === \"wave\" || animation === \"shimmer\") {\n return {\n background: \"linear-gradient(90deg, hsl(var(--muted)) 0%, hsl(var(--muted-foreground) / 0.2) 50%, hsl(var(--muted)) 100%)\",\n backgroundSize: \"200% 100%\",\n animation: \"shimmer 1.5s ease-in-out infinite\",\n }\n }\n return {}\n }\n\n return (\n <>\n {(animation === \"wave\" || animation === \"shimmer\") && (\n <style>{`\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n `}</style>\n )}\n <div\n ref={ref}\n className={merge(\n skeletonVariants({ variant, animation }),\n className\n )}\n style={{\n ...(width != null ? { width: typeof width === \"number\" ? `${width}px` : width } : {}),\n ...(height != null ? { height: typeof height === \"number\" ? `${height}px` : height } : {}),\n ...getAnimationStyle(),\n }}\n {...props}\n />\n </>\n )\n }\n)\nSkeleton.displayName = \"Skeleton\"\n\n// 편의 컴포넌트들\nexport const SkeletonText = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"text\" className={className} {...props} />\n )\n)\nSkeletonText.displayName = \"SkeletonText\"\n\nexport const SkeletonCircle = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"circular\" className={className} {...props} />\n )\n)\nSkeletonCircle.displayName = \"SkeletonCircle\"\n\nexport const SkeletonRectangle = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"rectangular\" className={className} {...props} />\n )\n)\nSkeletonRectangle.displayName = \"SkeletonRectangle\"\n\nexport const SkeletonRounded = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"rounded\" className={className} {...props} />\n )\n)\nSkeletonRounded.displayName = \"SkeletonRounded\"\n\n// 복합 스켈레톤 컴포넌트들\nexport const SkeletonCard = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4 p-6\", className)} // 16px 간격, 24px 패딩\n {...props}\n >\n <div className=\"flex items-center space-x-4\"> {/* 16px 간격 */}\n <SkeletonCircle className=\"w-12 h-12\" /> {/* 48px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-3/4\" /> {/* 16px 높이, 75% 너비 */}\n <SkeletonText className=\"h-3 w-1/2\" /> {/* 12px 높이, 50% 너비 */}\n </div>\n </div>\n <SkeletonRounded className=\"w-full h-32\" /> {/* 128px 높이 */}\n <div className=\"space-y-2\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-full\" />\n <SkeletonText className=\"h-4 w-5/6\" />\n <SkeletonText className=\"h-4 w-4/6\" />\n </div>\n </div>\n )\n)\nSkeletonCard.displayName = \"SkeletonCard\"\n\nexport const SkeletonAvatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"flex items-center space-x-4\", className)} // 16px 간격\n {...props}\n >\n <SkeletonCircle className=\"w-12 h-12\" /> {/* 48px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-3/4\" />\n <SkeletonText className=\"h-3 w-1/2\" />\n </div>\n </div>\n )\n)\nSkeletonAvatar.displayName = \"SkeletonAvatar\"\n\nexport const SkeletonImage = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-2\", className)} // 8px 간격\n {...props}\n >\n <SkeletonRounded className=\"w-full h-48\" /> {/* 192px 높이 */}\n <SkeletonText className=\"h-4 w-1/2\" />\n </div>\n )\n)\nSkeletonImage.displayName = \"SkeletonImage\"\n\nexport const SkeletonUserProfile = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4\", className)} // 16px 간격\n {...props}\n >\n <div className=\"flex items-center space-x-4\"> {/* 16px 간격 */}\n <SkeletonCircle className=\"w-16 h-16\" /> {/* 64px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-5 w-1/2\" />\n <SkeletonText className=\"h-3 w-1/3\" />\n </div>\n </div>\n <div className=\"space-y-2\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-full\" />\n <SkeletonText className=\"h-4 w-5/6\" />\n </div>\n </div>\n )\n)\nSkeletonUserProfile.displayName = \"SkeletonUserProfile\"\n\nexport const SkeletonList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4\", className)} // 16px 간격\n {...props}\n >\n {Array.from({ length: 3 }).map((_, index) => (\n <div key={index} className=\"flex items-center space-x-4\"> {/* 16px 간격 */}\n <SkeletonCircle className=\"w-10 h-10\" /> {/* 40px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-3/4\" />\n <SkeletonText className=\"h-3 w-1/2\" />\n </div>\n </div>\n ))}\n </div>\n )\n)\nSkeletonList.displayName = \"SkeletonList\"\n\nexport const SkeletonTable = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4\", className)} // 16px 간격\n {...props}\n >\n {/* 헤더 */}\n <div className=\"flex space-x-4\"> {/* 16px 간격 */}\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n </div>\n {/* 행들 */}\n {Array.from({ length: 5 }).map((_, index) => (\n <div key={index} className=\"flex space-x-4\"> {/* 16px 간격 */}\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n </div>\n ))}\n </div>\n )\n)\nSkeletonTable.displayName = \"SkeletonTable\"\n\nexport { Skeleton } "]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton.tsx"],"names":["skeletonVariants","cva","Skeleton","React","className","variant","width","height","animation","props","ref","getAnimationStyle","jsxs","Fragment","jsx","merge","SkeletonText","SkeletonCircle","SkeletonRectangle","SkeletonRounded","SkeletonCard","SkeletonAvatar","SkeletonImage","SkeletonUserProfile","SkeletonList","_","index","SkeletonTable"],"mappings":"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","file":"chunk-ZXZIHU7J.mjs","sourcesContent":["\"use client\"\n\nimport React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { merge } from \"../lib/utils\"\n\nexport const skeletonVariants = cva(\n \"block\",\n {\n variants: {\n variant: {\n text: \"rounded w-full h-4\",\n circular: \"rounded-full w-10 h-10\",\n rounded: \"rounded-lg w-full h-[200px]\",\n rectangular: \"rounded-none w-full h-[200px]\",\n },\n animation: {\n pulse: \"animate-pulse bg-muted\",\n wave: \"bg-muted\",\n shimmer: \"bg-muted\",\n },\n },\n defaultVariants: {\n variant: \"text\",\n animation: \"pulse\",\n },\n }\n)\n\n/**\n * Skeleton 컴포넌트의 props\n */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: \"text\" | \"circular\" | \"rectangular\" | \"rounded\"\n width?: string | number\n height?: string | number\n animation?: \"pulse\" | \"wave\" | \"shimmer\"\n className?: string\n}\n\n/**\n * Skeleton 컴포넌트 / Skeleton component\n *\n * 로딩 중 콘텐츠의 플레이스홀더를 표시하는 스켈레톤 컴포넌트입니다.\n *\n * @example\n * <Skeleton />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rounded\" width=\"100%\" height={200} animation=\"wave\" />\n */\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n ({\n className,\n variant = \"text\",\n width,\n height,\n animation = \"pulse\",\n ...props\n }, ref) => {\n const getAnimationStyle = (): React.CSSProperties => {\n if (animation === \"wave\" || animation === \"shimmer\") {\n return {\n background: \"linear-gradient(90deg, hsl(var(--muted)) 0%, hsl(var(--muted-foreground) / 0.2) 50%, hsl(var(--muted)) 100%)\",\n backgroundSize: \"200% 100%\",\n animation: \"shimmer 1.5s ease-in-out infinite\",\n }\n }\n return {}\n }\n\n return (\n <>\n {(animation === \"wave\" || animation === \"shimmer\") && (\n <style>{`\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n `}</style>\n )}\n <div\n ref={ref}\n className={merge(\n skeletonVariants({ variant, animation }),\n className\n )}\n style={{\n ...(width != null ? { width: typeof width === \"number\" ? `${width}px` : width } : {}),\n ...(height != null ? { height: typeof height === \"number\" ? `${height}px` : height } : {}),\n ...getAnimationStyle(),\n }}\n {...props}\n />\n </>\n )\n }\n)\nSkeleton.displayName = \"Skeleton\"\n\n// 편의 컴포넌트들\nexport const SkeletonText = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"text\" className={className} {...props} />\n )\n)\nSkeletonText.displayName = \"SkeletonText\"\n\nexport const SkeletonCircle = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"circular\" className={className} {...props} />\n )\n)\nSkeletonCircle.displayName = \"SkeletonCircle\"\n\nexport const SkeletonRectangle = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"rectangular\" className={className} {...props} />\n )\n)\nSkeletonRectangle.displayName = \"SkeletonRectangle\"\n\nexport const SkeletonRounded = React.forwardRef<HTMLDivElement, Omit<SkeletonProps, \"variant\">>(\n ({ className, ...props }, ref) => (\n <Skeleton ref={ref} variant=\"rounded\" className={className} {...props} />\n )\n)\nSkeletonRounded.displayName = \"SkeletonRounded\"\n\n// 복합 스켈레톤 컴포넌트들\nexport const SkeletonCard = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4 p-6\", className)} // 16px 간격, 24px 패딩\n {...props}\n >\n <div className=\"flex items-center space-x-4\"> {/* 16px 간격 */}\n <SkeletonCircle className=\"w-12 h-12\" /> {/* 48px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-3/4\" /> {/* 16px 높이, 75% 너비 */}\n <SkeletonText className=\"h-3 w-1/2\" /> {/* 12px 높이, 50% 너비 */}\n </div>\n </div>\n <SkeletonRounded className=\"w-full h-32\" /> {/* 128px 높이 */}\n <div className=\"space-y-2\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-full\" />\n <SkeletonText className=\"h-4 w-5/6\" />\n <SkeletonText className=\"h-4 w-4/6\" />\n </div>\n </div>\n )\n)\nSkeletonCard.displayName = \"SkeletonCard\"\n\nexport const SkeletonAvatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"flex items-center space-x-4\", className)} // 16px 간격\n {...props}\n >\n <SkeletonCircle className=\"w-12 h-12\" /> {/* 48px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-3/4\" />\n <SkeletonText className=\"h-3 w-1/2\" />\n </div>\n </div>\n )\n)\nSkeletonAvatar.displayName = \"SkeletonAvatar\"\n\nexport const SkeletonImage = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-2\", className)} // 8px 간격\n {...props}\n >\n <SkeletonRounded className=\"w-full h-48\" /> {/* 192px 높이 */}\n <SkeletonText className=\"h-4 w-1/2\" />\n </div>\n )\n)\nSkeletonImage.displayName = \"SkeletonImage\"\n\nexport const SkeletonUserProfile = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4\", className)} // 16px 간격\n {...props}\n >\n <div className=\"flex items-center space-x-4\"> {/* 16px 간격 */}\n <SkeletonCircle className=\"w-16 h-16\" /> {/* 64px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-5 w-1/2\" />\n <SkeletonText className=\"h-3 w-1/3\" />\n </div>\n </div>\n <div className=\"space-y-2\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-full\" />\n <SkeletonText className=\"h-4 w-5/6\" />\n </div>\n </div>\n )\n)\nSkeletonUserProfile.displayName = \"SkeletonUserProfile\"\n\nexport const SkeletonList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4\", className)} // 16px 간격\n {...props}\n >\n {Array.from({ length: 3 }).map((_, index) => (\n <div key={index} className=\"flex items-center space-x-4\"> {/* 16px 간격 */}\n <SkeletonCircle className=\"w-10 h-10\" /> {/* 40px 크기 */}\n <div className=\"space-y-2 flex-1\"> {/* 8px 간격 */}\n <SkeletonText className=\"h-4 w-3/4\" />\n <SkeletonText className=\"h-3 w-1/2\" />\n </div>\n </div>\n ))}\n </div>\n )\n)\nSkeletonList.displayName = \"SkeletonList\"\n\nexport const SkeletonTable = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={merge(\"space-y-4\", className)} // 16px 간격\n {...props}\n >\n {/* 헤더 */}\n <div className=\"flex space-x-4\"> {/* 16px 간격 */}\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n </div>\n {/* 행들 */}\n {Array.from({ length: 5 }).map((_, index) => (\n <div key={index} className=\"flex space-x-4\"> {/* 16px 간격 */}\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n <SkeletonText className=\"h-4 w-1/4\" />\n </div>\n ))}\n </div>\n )\n)\nSkeletonTable.displayName = \"SkeletonTable\"\n\nexport { Skeleton } "]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,YAAY;;;;8EA2BxB,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;IAC5C,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,YAAY;;;;8EA2BxB,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;IAC5C,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,kFAcT,CAAA;AAID,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,QAAA,MAAM,UAAU,wFAQf,CAAA;AAID,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;CAAG;AAEnF,QAAA,MAAM,SAAS,6FAWd,CAAA;AAID,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;CAAG;AAE3F,QAAA,MAAM,eAAe,mGAQpB,CAAA;AAID,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAIhB,CAAA;AAID,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,QAAA,MAAM,UAAU,wFAQf,CAAA;AAID,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,WAAW,CAAC,EAAE,IAAI,EAAE,CAAA;CACrB;AA6BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,WAAW,CAAC,EAAE,IAAI,EAAE,CAAA;CACrB;AA6BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,wFAqTtB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAA;IACf,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA;IAChD,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAA;IACf,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA;IAChD,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,KAAK,mFAwKhB,CAAA"}
|
|
@@ -23,6 +23,8 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
/** Popover 콘텐츠 영역 추가 클래스 / Additional class for popover content area */
|
|
25
25
|
contentClassName?: string;
|
|
26
|
+
/** 트리거를 full-width로 렌더링 (DatePicker 등) / Render trigger as full-width */
|
|
27
|
+
fullWidth?: boolean;
|
|
26
28
|
}
|
|
27
29
|
/**
|
|
28
30
|
* Popover 컴포넌트 / Popover component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,QAAA,MAAM,OAAO,qFAkJZ,CAAA;AAID,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,mBAAmB;;8EAiB/B,CAAA;AAED,eAAO,MAAM,qBAAqB;;;8EAuBjC,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,mBAAmB;;8EAiB/B,CAAA;AAED,eAAO,MAAM,qBAAqB;;;8EAuBjC,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,QAAQ,sFAmEb,CAAA;AAID,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,aAAa,uGAIzB,CAAA;AAGD,eAAO,MAAM,YAAY,uGAIxB,CAAA;AAID,eAAO,MAAM,eAAe;YAA8D,MAAM;wCAW/F,CAAA;AAGD,eAAO,MAAM,aAAa,6GAUzB,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { type ContainerProps } from "./Container";
|
|
4
|
+
export declare const sectionVariants: (props?: ({
|
|
5
|
+
spacing?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
6
|
+
background?: "none" | "muted" | "primary" | "accent" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
export interface SectionHeaderConfig {
|
|
9
|
+
title: string;
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
action?: React.ReactNode;
|
|
12
|
+
/** section-line 데코레이터 표시 @default true */
|
|
13
|
+
decorator?: boolean;
|
|
14
|
+
/** 텍스트 정렬 @default 'center' */
|
|
15
|
+
align?: 'left' | 'center';
|
|
16
|
+
}
|
|
17
|
+
export interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
|
|
18
|
+
/** Container 사이즈 @default 'lg' */
|
|
19
|
+
container?: ContainerProps['size'];
|
|
20
|
+
/** Container 패딩 @default 'none' */
|
|
21
|
+
containerPadding?: ContainerProps['padding'];
|
|
22
|
+
/** 섹션 헤더 설정 */
|
|
23
|
+
header?: SectionHeaderConfig;
|
|
24
|
+
/** 풀위드 모드 (Container 없이 직접) */
|
|
25
|
+
fullWidth?: boolean;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Section 컴포넌트
|
|
29
|
+
*
|
|
30
|
+
* 랜딩 페이지 섹션의 보일러플레이트를 줄이는 시맨틱 래퍼.
|
|
31
|
+
* 내부적으로 Container를 사용하며, header prop으로 제목/부제/데코레이터를 자동 생성합니다.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* <Section header={{ title: "제목", subtitle: "부제" }}>
|
|
35
|
+
* {children}
|
|
36
|
+
* </Section>
|
|
37
|
+
*
|
|
38
|
+
* <Section spacing="xl" background="muted" fullWidth>
|
|
39
|
+
* {fullWidthContent}
|
|
40
|
+
* </Section>
|
|
41
|
+
*/
|
|
42
|
+
declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
|
|
43
|
+
export { Section };
|
|
44
|
+
//# sourceMappingURL=Section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAE5D,eAAO,MAAM,eAAe;;;8EAiB1B,CAAA;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACvC,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,kCAAkC;IAClC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAClC,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC5C,eAAe;IACf,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAqCD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,kFAqCZ,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedGradient.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/AnimatedGradient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD;;;;;;;;GAQG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AASD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"AnimatedGradient.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/AnimatedGradient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD;;;;;;;;GAQG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AASD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,8FAuJrB,CAAC;AAuBF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface DotNavItem {
|
|
3
|
+
/** 섹션 ID (scroll target) */
|
|
4
|
+
id: string;
|
|
5
|
+
/** 라벨 (호버 시 표시) */
|
|
6
|
+
label?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface DotNavProps extends React.HTMLAttributes<HTMLElement> {
|
|
9
|
+
/** 섹션 목록 */
|
|
10
|
+
items: DotNavItem[];
|
|
11
|
+
/** 위치 @default 'right' */
|
|
12
|
+
position?: "left" | "right";
|
|
13
|
+
/** 활성 색상 @default 'bg-primary' */
|
|
14
|
+
activeColor?: string;
|
|
15
|
+
/** 비활성 색상 @default 'bg-muted-foreground/30' */
|
|
16
|
+
inactiveColor?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* DotNav - 섹션 도트 네비게이터
|
|
20
|
+
*
|
|
21
|
+
* 포트폴리오/immersive 테마용 고정 위치 네비게이션.
|
|
22
|
+
* 스크롤 위치에 따라 활성 섹션 자동 추적.
|
|
23
|
+
*/
|
|
24
|
+
declare const DotNav: React.ForwardRefExoticComponent<DotNavProps & React.RefAttributes<HTMLElement>>;
|
|
25
|
+
export { DotNav };
|
|
26
|
+
//# sourceMappingURL=DotNav.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DotNav.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/DotNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,MAAM,WAAW,UAAU;IACzB,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,YAAY;IACZ,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,QAAA,MAAM,MAAM,iFA6FX,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface HorizontalScrollProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onProgress'> {
|
|
3
|
+
/** 가로 스크롤 컨텐츠 */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/** 스크롤 높이 배율 (패널 수 × 이 값 = 총 스크롤 높이) @default 1 */
|
|
6
|
+
heightMultiplier?: number;
|
|
7
|
+
/** 스냅 여부 @default false */
|
|
8
|
+
snap?: boolean;
|
|
9
|
+
/** 진행률 콜백 */
|
|
10
|
+
onProgress?: (progress: number) => void;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* HorizontalScroll - 세로 스크롤을 가로 스크롤로 변환
|
|
14
|
+
*
|
|
15
|
+
* sticky positioning + translateX로 구현.
|
|
16
|
+
* 세로 스크롤 입력을 가로 이동으로 매핑합니다.
|
|
17
|
+
*/
|
|
18
|
+
declare const HorizontalScroll: React.ForwardRefExoticComponent<HorizontalScrollProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
export { HorizontalScroll };
|
|
20
|
+
//# sourceMappingURL=HorizontalScroll.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC;IAChE,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa;IACb,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;GAKG;AACH,QAAA,MAAM,gBAAgB,8FAwFrB,CAAC;AAgBF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface ImageRevealProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** 이미지 src */
|
|
4
|
+
src: string;
|
|
5
|
+
/** 이미지 alt */
|
|
6
|
+
alt: string;
|
|
7
|
+
/** 공개 방향 @default 'left' */
|
|
8
|
+
direction?: "left" | "right" | "up" | "down";
|
|
9
|
+
/** 공개 시작 임계값 (0-1) @default 0.3 */
|
|
10
|
+
threshold?: number;
|
|
11
|
+
/** 이미지 높이 @default '400px' */
|
|
12
|
+
height?: string;
|
|
13
|
+
/** 오버레이 색상 */
|
|
14
|
+
overlayColor?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* ImageReveal - 스크롤 기반 이미지 공개 컴포넌트
|
|
18
|
+
*
|
|
19
|
+
* TextReveal에서 영감 받은 이미지 공개 효과.
|
|
20
|
+
* clip-path를 사용하여 스크롤에 따라 이미지가 점진적으로 드러남.
|
|
21
|
+
*/
|
|
22
|
+
declare const ImageReveal: React.ForwardRefExoticComponent<ImageRevealProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
export { ImageReveal };
|
|
24
|
+
//# sourceMappingURL=ImageReveal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageReveal.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/ImageReveal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,cAAc;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;IAC7C,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,QAAA,MAAM,WAAW,yFA0FhB,CAAC;AA6CF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -19,6 +19,12 @@ export { VideoBackground } from "./VideoBackground";
|
|
|
19
19
|
export type { VideoBackgroundProps } from "./VideoBackground";
|
|
20
20
|
export { Carousel } from "./Carousel";
|
|
21
21
|
export type { CarouselProps } from "./Carousel";
|
|
22
|
+
export { ImageReveal } from "./ImageReveal";
|
|
23
|
+
export type { ImageRevealProps } from "./ImageReveal";
|
|
24
|
+
export { DotNav } from "./DotNav";
|
|
25
|
+
export type { DotNavProps, DotNavItem } from "./DotNav";
|
|
26
|
+
export { HorizontalScroll } from "./HorizontalScroll";
|
|
27
|
+
export type { HorizontalScrollProps } from "./HorizontalScroll";
|
|
22
28
|
export * from "./emotion";
|
|
23
29
|
export * from "./blog-editor";
|
|
24
30
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAA;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAQrE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/advanced/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAA;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAQrE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAOhE,cAAc,WAAW,CAAC;AAO1B,cAAc,eAAe,CAAC"}
|
package/dist/data.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
export{a as Table,c as TableBody,h as TableCaption,g as TableCell,d as TableFooter,f as TableHead,b as TableHeader,e as TableRow}from'./chunk-
|
|
3
|
-
`),k=useMemo(()=>i.map(c=>highlight(c)||" "),[i]),C=useMemo(()=>highlight(t),[t]),s=p==="dark";return jsxs("div",{className:
|
|
2
|
+
export{a as Table,c as TableBody,h as TableCaption,g as TableCell,d as TableFooter,f as TableHead,b as TableHeader,e as TableRow}from'./chunk-KYRIUUQP.mjs';import {b}from'./chunk-U6CTBZ2U.mjs';import {useState,useCallback,useMemo}from'react';import {highlight}from'sugar-high';import {jsxs,jsx}from'react/jsx-runtime';function R({code:t,language:r,filename:a,showLineNumbers:d=false,showCopyButton:f=true,onCopy:l,copySuccessMessage:j="Copied!",className:x,maxHeight:h,theme:p="dark"}){let[v,u]=useState(false),N=useCallback(async()=>{try{await navigator.clipboard.writeText(t),u(!0),l==null||l(),setTimeout(()=>u(!1),2e3);}catch(c){console.error("Failed to copy:",c);}},[t,l]),i=t.split(`
|
|
3
|
+
`),k=useMemo(()=>i.map(c=>highlight(c)||" "),[i]),C=useMemo(()=>highlight(t),[t]),s=p==="dark";return jsxs("div",{className:b("group relative rounded-lg overflow-hidden",s?"bg-[#0d1117] border border-[#30363d]":"bg-muted/50 border border-border",x),children:[jsxs("div",{className:b("flex items-center justify-between px-4 py-2.5 border-b",s?"bg-[#161b22] border-[#30363d]":"bg-muted/30 border-border"),children:[jsxs("div",{className:"flex items-center gap-3",children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"w-3 h-3 rounded-full bg-[#ff5f56]"}),jsx("span",{className:"w-3 h-3 rounded-full bg-[#ffbd2e]"}),jsx("span",{className:"w-3 h-3 rounded-full bg-[#27c93f]"})]}),a&&jsx("span",{className:b("text-sm font-medium",s?"text-[#c9d1d9]":"text-foreground"),children:a}),r&&!a&&jsx("span",{className:b("text-xs uppercase tracking-wider",s?"text-[#8b949e]":"text-muted-foreground"),children:r}),r&&a&&jsx("span",{className:b("text-xs",s?"text-[#8b949e]":"text-muted-foreground"),children:r})]}),f&&jsx(P,{copied:v,onClick:N,theme:p})]}),jsx("div",{className:"overflow-auto",style:{maxHeight:h},children:jsx("pre",{className:b("p-4 text-sm leading-7 overflow-x-auto",s?"text-[#c9d1d9]":"text-foreground"),children:d?jsx("code",{className:"block font-mono",children:i.map((c,m)=>jsxs("div",{className:"flex",children:[jsx("span",{className:b("select-none w-8 text-right mr-4 flex-shrink-0",s?"text-[#484f58]":"text-muted-foreground"),children:m+1}),jsx("span",{dangerouslySetInnerHTML:{__html:k[m]}})]},m))}):jsx("code",{className:"font-mono whitespace-pre",dangerouslySetInnerHTML:{__html:C}})})})]})}function P({copied:t,onClick:r,theme:a="dark"}){let d=a==="dark";return jsx("button",{type:"button",onClick:r,className:b("inline-flex items-center justify-center w-8 h-8 rounded-md transition-all duration-200",t?d?"bg-green-500/20 text-green-400":"bg-green-100 text-green-700":d?"bg-transparent hover:bg-[#30363d] text-[#8b949e] hover:text-[#c9d1d9]":"bg-transparent hover:bg-secondary/80 text-muted-foreground hover:text-foreground"),"aria-label":t?"Copied":"Copy code",title:t?"Copied!":"Copy code",children:t?jsx(F,{className:"w-4 h-4"}):jsx(D,{className:"w-4 h-4"})})}function D({className:t}){return jsxs("svg",{className:t,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",strokeWidth:2,children:[jsx("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",ry:"2"}),jsx("path",{d:"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"})]})}function F({className:t}){return jsx("svg",{className:t,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",strokeWidth:2,children:jsx("polyline",{points:"20 6 9 17 4 12"})})}function W({children:t,className:r}){return jsx("code",{className:b("px-1.5 py-0.5 rounded-md bg-muted text-sm font-mono text-foreground",r),children:t})}export{R as CodeBlock,W as InlineCode};//# sourceMappingURL=data.mjs.map
|
|
4
4
|
//# sourceMappingURL=data.mjs.map
|
package/dist/data.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CodeBlock.tsx"],"names":["CodeBlock","code","language","filename","showLineNumbers","showCopyButton","onCopy","_copySuccessMessage","className","maxHeight","theme","copied","setCopied","useState","handleCopy","useCallback","err","lines","highlightedLines","useMemo","line","highlight","highlightedCode","isDark","jsxs","merge","jsx","CopyButton","i","onClick","CheckIcon","CopyIcon","InlineCode","children"],"mappings":"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","file":"data.mjs","sourcesContent":["\"use client\"\n\nimport React, { useState, useCallback, useMemo } from \"react\"\nimport { highlight } from \"sugar-high\"\nimport { merge } from \"../lib/utils\"\n\n/**\n * CodeBlock 컴포넌트 Props\n */\nexport interface CodeBlockProps {\n /** 표시할 코드 */\n code: string\n /** 프로그래밍 언어 (표시용) */\n language?: string\n /** 파일명 (헤더에 표시) */\n filename?: string\n /** 줄 번호 표시 여부 */\n showLineNumbers?: boolean\n /** 복사 버튼 표시 여부 */\n showCopyButton?: boolean\n /** 복사 성공 시 콜백 */\n onCopy?: () => void\n /** 복사 성공 메시지 */\n copySuccessMessage?: string\n /** 추가 className */\n className?: string\n /** 최대 높이 (스크롤) */\n maxHeight?: string | number\n /** 테마 (기본: dark) */\n theme?: \"dark\" | \"light\"\n}\n\n/**\n * CodeBlock 컴포넌트\n *\n * 코드를 표시하고 복사 기능을 제공하는 컴포넌트입니다.\n * Sugar-high를 사용한 신택스 하이라이팅을 지원합니다.\n *\n * @remarks\n * 신택스 하이라이팅을 위해 CSS 파일을 import하세요:\n * ```tsx\n * import '@hua-labs/ui/styles/codeblock.css';\n * ```\n *\n * @example\n * ```tsx\n * // 기본 사용\n * <CodeBlock code=\"console.log('Hello')\" language=\"javascript\" />\n *\n * // 파일명 표시\n * <CodeBlock\n * code={configCode}\n * language=\"typescript\"\n * filename=\"hua.config.ts\"\n * />\n *\n * // Toast와 함께 사용\n * const { addToast } = useToast()\n * <CodeBlock\n * code={code}\n * onCopy={() => addToast({ type: 'success', message: 'Copied!' })}\n * />\n * ```\n */\nexport function CodeBlock({\n code,\n language,\n filename,\n showLineNumbers = false,\n showCopyButton = true,\n onCopy,\n copySuccessMessage: _copySuccessMessage = \"Copied!\",\n className,\n maxHeight,\n theme = \"dark\",\n}: CodeBlockProps) {\n const [copied, setCopied] = useState(false)\n\n const handleCopy = useCallback(async () => {\n try {\n await navigator.clipboard.writeText(code)\n setCopied(true)\n onCopy?.()\n\n // 2초 후 복사 상태 리셋\n setTimeout(() => setCopied(false), 2000)\n } catch (err) {\n console.error(\"Failed to copy:\", err)\n }\n }, [code, onCopy])\n\n const lines = code.split(\"\\n\")\n\n // 신택스 하이라이팅\n const highlightedLines = useMemo(() => {\n return lines.map(line => highlight(line) || \" \")\n }, [lines])\n\n const highlightedCode = useMemo(() => highlight(code), [code])\n\n const isDark = theme === \"dark\"\n\n return (\n <div\n className={merge(\n \"group relative rounded-lg overflow-hidden\",\n isDark\n ? \"bg-[#0d1117] border border-[#30363d]\"\n : \"bg-muted/50 border border-border\",\n className\n )}\n >\n {/* 헤더 - 항상 표시 */}\n <div className={merge(\n \"flex items-center justify-between px-4 py-2.5 border-b\",\n isDark\n ? \"bg-[#161b22] border-[#30363d]\"\n : \"bg-muted/30 border-border\"\n )}>\n <div className=\"flex items-center gap-3\">\n {/* Traffic lights (macOS 스타일) */}\n <div className=\"flex items-center gap-1.5\">\n <span className=\"w-3 h-3 rounded-full bg-[#ff5f56]\" />\n <span className=\"w-3 h-3 rounded-full bg-[#ffbd2e]\" />\n <span className=\"w-3 h-3 rounded-full bg-[#27c93f]\" />\n </div>\n {filename && (\n <span className={merge(\n \"text-sm font-medium\",\n isDark ? \"text-[#c9d1d9]\" : \"text-foreground\"\n )}>\n {filename}\n </span>\n )}\n {language && !filename && (\n <span className={merge(\n \"text-xs uppercase tracking-wider\",\n isDark ? \"text-[#8b949e]\" : \"text-muted-foreground\"\n )}>\n {language}\n </span>\n )}\n {language && filename && (\n <span className={merge(\n \"text-xs\",\n isDark ? \"text-[#8b949e]\" : \"text-muted-foreground\"\n )}>\n {language}\n </span>\n )}\n </div>\n {showCopyButton && (\n <CopyButton copied={copied} onClick={handleCopy} theme={theme} />\n )}\n </div>\n\n {/* 코드 영역 */}\n <div\n className=\"overflow-auto\"\n style={{ maxHeight: maxHeight }}\n >\n <pre className={merge(\n \"p-4 text-sm leading-7 overflow-x-auto\",\n isDark ? \"text-[#c9d1d9]\" : \"text-foreground\"\n )}>\n {showLineNumbers ? (\n <code className=\"block font-mono\">\n {lines.map((line, i) => (\n <div key={i} className=\"flex\">\n <span className={merge(\n \"select-none w-8 text-right mr-4 flex-shrink-0\",\n isDark ? \"text-[#484f58]\" : \"text-muted-foreground\"\n )}>\n {i + 1}\n </span>\n <span\n dangerouslySetInnerHTML={{ __html: highlightedLines[i] }}\n />\n </div>\n ))}\n </code>\n ) : (\n <code\n className=\"font-mono whitespace-pre\"\n dangerouslySetInnerHTML={{ __html: highlightedCode }}\n />\n )}\n </pre>\n </div>\n\n </div>\n )\n}\n\n/**\n * 복사 버튼 컴포넌트 (아이콘만)\n */\nfunction CopyButton({\n copied,\n onClick,\n theme = \"dark\"\n}: {\n copied: boolean\n onClick: () => void\n theme?: \"dark\" | \"light\"\n}) {\n const isDark = theme === \"dark\"\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n className={merge(\n \"inline-flex items-center justify-center w-8 h-8 rounded-md transition-all duration-200\",\n copied\n ? isDark\n ? \"bg-green-500/20 text-green-400\"\n : \"bg-green-100 text-green-700\"\n : isDark\n ? \"bg-transparent hover:bg-[#30363d] text-[#8b949e] hover:text-[#c9d1d9]\"\n : \"bg-transparent hover:bg-secondary/80 text-muted-foreground hover:text-foreground\"\n )}\n aria-label={copied ? \"Copied\" : \"Copy code\"}\n title={copied ? \"Copied!\" : \"Copy code\"}\n >\n {copied ? (\n <CheckIcon className=\"w-4 h-4\" />\n ) : (\n <CopyIcon className=\"w-4 h-4\" />\n )}\n </button>\n )\n}\n\n/**\n * 복사 아이콘\n */\nfunction CopyIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n >\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n </svg>\n )\n}\n\n/**\n * 체크 아이콘\n */\nfunction CheckIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n )\n}\n\n/**\n * 인라인 코드 컴포넌트\n *\n * 텍스트 내 인라인 코드 표시용\n *\n * @example\n * ```tsx\n * <p>Use the <InlineCode>npm install</InlineCode> command.</p>\n * ```\n */\nexport function InlineCode({\n children,\n className,\n}: {\n children: React.ReactNode\n className?: string\n}) {\n return (\n <code\n className={merge(\n \"px-1.5 py-0.5 rounded-md bg-muted text-sm font-mono text-foreground\",\n className\n )}\n >\n {children}\n </code>\n )\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/CodeBlock.tsx"],"names":["CodeBlock","code","language","filename","showLineNumbers","showCopyButton","onCopy","_copySuccessMessage","className","maxHeight","theme","copied","setCopied","useState","handleCopy","useCallback","err","lines","highlightedLines","useMemo","line","highlight","highlightedCode","isDark","jsxs","merge","jsx","CopyButton","i","onClick","CheckIcon","CopyIcon","InlineCode","children"],"mappings":"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","file":"data.mjs","sourcesContent":["\"use client\"\n\nimport React, { useState, useCallback, useMemo } from \"react\"\nimport { highlight } from \"sugar-high\"\nimport { merge } from \"../lib/utils\"\n\n/**\n * CodeBlock 컴포넌트 Props\n */\nexport interface CodeBlockProps {\n /** 표시할 코드 */\n code: string\n /** 프로그래밍 언어 (표시용) */\n language?: string\n /** 파일명 (헤더에 표시) */\n filename?: string\n /** 줄 번호 표시 여부 */\n showLineNumbers?: boolean\n /** 복사 버튼 표시 여부 */\n showCopyButton?: boolean\n /** 복사 성공 시 콜백 */\n onCopy?: () => void\n /** 복사 성공 메시지 */\n copySuccessMessage?: string\n /** 추가 className */\n className?: string\n /** 최대 높이 (스크롤) */\n maxHeight?: string | number\n /** 테마 (기본: dark) */\n theme?: \"dark\" | \"light\"\n}\n\n/**\n * CodeBlock 컴포넌트\n *\n * 코드를 표시하고 복사 기능을 제공하는 컴포넌트입니다.\n * Sugar-high를 사용한 신택스 하이라이팅을 지원합니다.\n *\n * @remarks\n * 신택스 하이라이팅을 위해 CSS 파일을 import하세요:\n * ```tsx\n * import '@hua-labs/ui/styles/codeblock.css';\n * ```\n *\n * @example\n * ```tsx\n * // 기본 사용\n * <CodeBlock code=\"console.log('Hello')\" language=\"javascript\" />\n *\n * // 파일명 표시\n * <CodeBlock\n * code={configCode}\n * language=\"typescript\"\n * filename=\"hua.config.ts\"\n * />\n *\n * // Toast와 함께 사용\n * const { addToast } = useToast()\n * <CodeBlock\n * code={code}\n * onCopy={() => addToast({ type: 'success', message: 'Copied!' })}\n * />\n * ```\n */\nexport function CodeBlock({\n code,\n language,\n filename,\n showLineNumbers = false,\n showCopyButton = true,\n onCopy,\n copySuccessMessage: _copySuccessMessage = \"Copied!\",\n className,\n maxHeight,\n theme = \"dark\",\n}: CodeBlockProps) {\n const [copied, setCopied] = useState(false)\n\n const handleCopy = useCallback(async () => {\n try {\n await navigator.clipboard.writeText(code)\n setCopied(true)\n onCopy?.()\n\n // 2초 후 복사 상태 리셋\n setTimeout(() => setCopied(false), 2000)\n } catch (err) {\n console.error(\"Failed to copy:\", err)\n }\n }, [code, onCopy])\n\n const lines = code.split(\"\\n\")\n\n // 신택스 하이라이팅\n const highlightedLines = useMemo(() => {\n return lines.map(line => highlight(line) || \" \")\n }, [lines])\n\n const highlightedCode = useMemo(() => highlight(code), [code])\n\n const isDark = theme === \"dark\"\n\n return (\n <div\n className={merge(\n \"group relative rounded-lg overflow-hidden\",\n isDark\n ? \"bg-[#0d1117] border border-[#30363d]\"\n : \"bg-muted/50 border border-border\",\n className\n )}\n >\n {/* 헤더 - 항상 표시 */}\n <div className={merge(\n \"flex items-center justify-between px-4 py-2.5 border-b\",\n isDark\n ? \"bg-[#161b22] border-[#30363d]\"\n : \"bg-muted/30 border-border\"\n )}>\n <div className=\"flex items-center gap-3\">\n {/* Traffic lights (macOS 스타일) */}\n <div className=\"flex items-center gap-1.5\">\n <span className=\"w-3 h-3 rounded-full bg-[#ff5f56]\" />\n <span className=\"w-3 h-3 rounded-full bg-[#ffbd2e]\" />\n <span className=\"w-3 h-3 rounded-full bg-[#27c93f]\" />\n </div>\n {filename && (\n <span className={merge(\n \"text-sm font-medium\",\n isDark ? \"text-[#c9d1d9]\" : \"text-foreground\"\n )}>\n {filename}\n </span>\n )}\n {language && !filename && (\n <span className={merge(\n \"text-xs uppercase tracking-wider\",\n isDark ? \"text-[#8b949e]\" : \"text-muted-foreground\"\n )}>\n {language}\n </span>\n )}\n {language && filename && (\n <span className={merge(\n \"text-xs\",\n isDark ? \"text-[#8b949e]\" : \"text-muted-foreground\"\n )}>\n {language}\n </span>\n )}\n </div>\n {showCopyButton && (\n <CopyButton copied={copied} onClick={handleCopy} theme={theme} />\n )}\n </div>\n\n {/* 코드 영역 */}\n <div\n className=\"overflow-auto\"\n style={{ maxHeight: maxHeight }}\n >\n <pre className={merge(\n \"p-4 text-sm leading-7 overflow-x-auto\",\n isDark ? \"text-[#c9d1d9]\" : \"text-foreground\"\n )}>\n {showLineNumbers ? (\n <code className=\"block font-mono\">\n {lines.map((line, i) => (\n <div key={i} className=\"flex\">\n <span className={merge(\n \"select-none w-8 text-right mr-4 flex-shrink-0\",\n isDark ? \"text-[#484f58]\" : \"text-muted-foreground\"\n )}>\n {i + 1}\n </span>\n <span\n dangerouslySetInnerHTML={{ __html: highlightedLines[i] }}\n />\n </div>\n ))}\n </code>\n ) : (\n <code\n className=\"font-mono whitespace-pre\"\n dangerouslySetInnerHTML={{ __html: highlightedCode }}\n />\n )}\n </pre>\n </div>\n\n </div>\n )\n}\n\n/**\n * 복사 버튼 컴포넌트 (아이콘만)\n */\nfunction CopyButton({\n copied,\n onClick,\n theme = \"dark\"\n}: {\n copied: boolean\n onClick: () => void\n theme?: \"dark\" | \"light\"\n}) {\n const isDark = theme === \"dark\"\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n className={merge(\n \"inline-flex items-center justify-center w-8 h-8 rounded-md transition-all duration-200\",\n copied\n ? isDark\n ? \"bg-green-500/20 text-green-400\"\n : \"bg-green-100 text-green-700\"\n : isDark\n ? \"bg-transparent hover:bg-[#30363d] text-[#8b949e] hover:text-[#c9d1d9]\"\n : \"bg-transparent hover:bg-secondary/80 text-muted-foreground hover:text-foreground\"\n )}\n aria-label={copied ? \"Copied\" : \"Copy code\"}\n title={copied ? \"Copied!\" : \"Copy code\"}\n >\n {copied ? (\n <CheckIcon className=\"w-4 h-4\" />\n ) : (\n <CopyIcon className=\"w-4 h-4\" />\n )}\n </button>\n )\n}\n\n/**\n * 복사 아이콘\n */\nfunction CopyIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n >\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n </svg>\n )\n}\n\n/**\n * 체크 아이콘\n */\nfunction CheckIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n strokeWidth={2}\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n )\n}\n\n/**\n * 인라인 코드 컴포넌트\n *\n * 텍스트 내 인라인 코드 표시용\n *\n * @example\n * ```tsx\n * <p>Use the <InlineCode>npm install</InlineCode> command.</p>\n * ```\n */\nexport function InlineCode({\n children,\n className,\n}: {\n children: React.ReactNode\n className?: string\n}) {\n return (\n <code\n className={merge(\n \"px-1.5 py-0.5 rounded-md bg-muted text-sm font-mono text-foreground\",\n className\n )}\n >\n {children}\n </code>\n )\n}\n"]}
|
package/dist/feedback.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
export{c as ToastProvider,a as useToast,b as useToastSafe}from'./chunk-
|
|
2
|
+
export{c as ToastProvider,a as useToast,b as useToastSafe}from'./chunk-DYNBM24D.mjs';export{a as Alert,d as AlertError,e as AlertInfo,b as AlertSuccess,c as AlertWarning}from'./chunk-TXBZZJNR.mjs';export{a as Tooltip,c as TooltipDark,b as TooltipLight}from'./chunk-3GAUTZXQ.mjs';export{a as LoadingSpinner}from'./chunk-RS6RKW5U.mjs';import'./chunk-U6CTBZ2U.mjs';//# sourceMappingURL=feedback.mjs.map
|
|
3
3
|
//# sourceMappingURL=feedback.mjs.map
|