@jbpark/ui-kit 10.0.0 → 10.0.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/dist/components/atoms/skeleton/node.mjs +1 -1
- package/dist/components/atoms/skeleton/node.mjs.map +1 -1
- package/dist/components/atoms/skeleton/skeleton.mjs +2 -2
- package/dist/components/atoms/skeleton/skeleton.mjs.map +1 -1
- package/dist/components/molecules/reveals/reveals.mjs +1 -1
- package/dist/components/molecules/reveals/reveals.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node.mjs","names":[],"sources":["../../../../src/components/atoms/skeleton/node.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Skeleton, { type Props as SkeletonProps } from './skeleton';\n\nconst Node = ({ classNames, ...props }: SkeletonProps) => {\n return (\n <Skeleton\n {...props}\n avatar={false}\n classNames={{\n ...classNames,\n item: cn(\n 'h-50 w-full
|
|
1
|
+
{"version":3,"file":"node.mjs","names":[],"sources":["../../../../src/components/atoms/skeleton/node.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Skeleton, { type Props as SkeletonProps } from './skeleton';\n\nconst Node = ({ classNames, ...props }: SkeletonProps) => {\n return (\n <Skeleton\n {...props}\n avatar={false}\n classNames={{\n ...classNames,\n item: cn(\n 'h-50 w-full',\n 'rounded-3xl',\n classNames?.item,\n //\n ),\n }}\n />\n );\n};\nexport default Node;\n"],"mappings":";;;;AAIA,MAAM,QAAQ,EAAE,YAAY,GAAG,YAA2B;CACxD,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,YAAY;GACV,GAAG;GACH,MAAM,GACJ,eACA,eACA,YAAY,IAEd;EACF;CACD,CAAA;AAEL"}
|
|
@@ -23,13 +23,13 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
|
|
|
23
23
|
style,
|
|
24
24
|
...props,
|
|
25
25
|
children: [avatar && /* @__PURE__ */ jsx(Core, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
|
|
26
|
-
className: cn("flex grow", direction === "vertical" && "flex-col", classNames.wrapper),
|
|
26
|
+
className: cn("flex min-w-0 grow", direction === "vertical" && "flex-col", classNames.wrapper),
|
|
27
27
|
style: { gap },
|
|
28
28
|
children: Array.from({ length: count }).map((_, index) => {
|
|
29
29
|
const itemWidth = getValueAtIndex(width, index);
|
|
30
30
|
const itemHeight = getValueAtIndex(height, index);
|
|
31
31
|
return /* @__PURE__ */ jsx(Core, {
|
|
32
|
-
className: cn("rounded-md", !active && "animate-none", SIZES[size], classNames.item),
|
|
32
|
+
className: cn("rounded-md", !active && "animate-none", SIZES[size], "max-w-full", classNames.item),
|
|
33
33
|
style: {
|
|
34
34
|
width: itemWidth,
|
|
35
35
|
height: itemHeight
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n active?: boolean;\n loading?: boolean;\n avatar?: boolean;\n size?: 'default' | 'small' | 'large';\n count?: number;\n gap?: number;\n direction?: 'horizontal' | 'vertical';\n width?: string | number | (string | number)[];\n height?: string | number | (string | number)[];\n classNames?: {\n wrapper?: string;\n avatar?: string;\n item?: string;\n };\n}\n\nconst SIZES = {\n small: 'w-48 h-4',\n default: 'w-60 h-6',\n large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n active = true,\n loading = true,\n avatar,\n size = 'default',\n direction = 'vertical',\n count = 1,\n gap = 6,\n className,\n classNames = {},\n style,\n width,\n height,\n children,\n ...props\n}: Props) => {\n const { locale } = useConfig();\n\n // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n // is meant to swap in arbitrary real content once loading finishes,\n // which can include elements with strict parent requirements (e.g. a\n // `<tr>`), so adding a wrapper div could produce invalid markup.\n // `className`/`style`/rest props only ever describe the skeleton's own\n // placeholder markup, so there's nothing for them to apply to here.\n if (!loading) {\n return children ?? null;\n }\n\n return (\n <div\n role=\"status\"\n aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n className={cn('flex items-center gap-3', className)}\n style={style}\n {...props}\n >\n {avatar && (\n <Core\n className={cn(\n 'h-12 w-12',\n 'rounded-xl',\n !active && 'animate-none',\n classNames.avatar,\n )}\n />\n )}\n <div\n className={cn(\n 'flex grow',\n direction === 'vertical' && 'flex-col',\n classNames.wrapper,\n )}\n style={{\n gap,\n }}\n >\n {Array.from({ length: count }).map((_, index) => {\n const itemWidth = getValueAtIndex(width, index);\n const itemHeight = getValueAtIndex(height, index);\n\n return (\n <Core\n key={index}\n className={cn(\n 'rounded-md',\n !active && 'animate-none',\n SIZES[size],\n classNames.item,\n //\n )}\n style={{\n width: itemWidth,\n height: itemHeight,\n }}\n />\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAmBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,
|
|
1
|
+
{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n active?: boolean;\n loading?: boolean;\n avatar?: boolean;\n size?: 'default' | 'small' | 'large';\n count?: number;\n gap?: number;\n direction?: 'horizontal' | 'vertical';\n width?: string | number | (string | number)[];\n height?: string | number | (string | number)[];\n classNames?: {\n wrapper?: string;\n avatar?: string;\n item?: string;\n };\n}\n\nconst SIZES = {\n small: 'w-48 h-4',\n default: 'w-60 h-6',\n large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n active = true,\n loading = true,\n avatar,\n size = 'default',\n direction = 'vertical',\n count = 1,\n gap = 6,\n className,\n classNames = {},\n style,\n width,\n height,\n children,\n ...props\n}: Props) => {\n const { locale } = useConfig();\n\n // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n // is meant to swap in arbitrary real content once loading finishes,\n // which can include elements with strict parent requirements (e.g. a\n // `<tr>`), so adding a wrapper div could produce invalid markup.\n // `className`/`style`/rest props only ever describe the skeleton's own\n // placeholder markup, so there's nothing for them to apply to here.\n if (!loading) {\n return children ?? null;\n }\n\n return (\n <div\n role=\"status\"\n aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n className={cn('flex items-center gap-3', className)}\n style={style}\n {...props}\n >\n {avatar && (\n <Core\n className={cn(\n 'h-12 w-12',\n 'rounded-xl',\n !active && 'animate-none',\n classNames.avatar,\n )}\n />\n )}\n <div\n className={cn(\n 'flex min-w-0 grow',\n direction === 'vertical' && 'flex-col',\n classNames.wrapper,\n )}\n style={{\n gap,\n }}\n >\n {Array.from({ length: count }).map((_, index) => {\n const itemWidth = getValueAtIndex(width, index);\n const itemHeight = getValueAtIndex(height, index);\n\n return (\n <Core\n key={index}\n className={cn(\n 'rounded-md',\n !active && 'animate-none',\n // SIZES are fixed widths; cap them so a narrow container\n // shrinks the placeholder instead of being overflowed.\n SIZES[size],\n 'max-w-full',\n classNames.item,\n //\n )}\n style={{\n width: itemWidth,\n height: itemHeight,\n }}\n />\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAmBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,qBACA,cAAc,cAAc,YAC5B,WAAW,OACb;GACA,OAAO,EACL,IACF;GAEC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,KAAK;IAC9C,MAAM,aAAa,gBAAgB,QAAQ,KAAK;IAEhD,OACE,oBAAC,MAAD;KAEE,WAAW,GACT,cACA,CAAC,UAAU,gBAGX,MAAM,OACN,cACA,WAAW,IAEb;KACA,OAAO;MACL,OAAO;MACP,QAAQ;KACV;IACD,GAfM,KAeN;GAEL,CAAC;EACE,CAAA,CACF;;AAET"}
|
|
@@ -20,7 +20,7 @@ const Reveals = ({ children, className, classNames, items = [], cascade = CASCAD
|
|
|
20
20
|
children: item.children
|
|
21
21
|
}, index));
|
|
22
22
|
return /* @__PURE__ */ jsx("div", {
|
|
23
|
-
className: cn("flex gap-5", className, classNames?.root),
|
|
23
|
+
className: cn("flex flex-wrap gap-5", className, classNames?.root),
|
|
24
24
|
...props,
|
|
25
25
|
children: renderItems(children ? Children.toArray(children).map((child) => ({ children: child })) : items)
|
|
26
26
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reveals.mjs","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props\n extends React.ComponentPropsWithoutRef<'div'>, ItemProps {\n cascade?: number;\n classNames?: {\n root?: string;\n item?: string;\n };\n once?: boolean;\n items?: ItemProps[];\n}\n\nexport const DURATION = 0.6;\nexport const DELAY = 0;\nexport const CASCADE = 0.1;\n\nconst Reveals = ({\n children,\n className,\n classNames,\n items = [],\n cascade = CASCADE,\n duration = DURATION,\n delay = DELAY,\n effect,\n once,\n viewport,\n variants,\n transition,\n ...props\n}: Props) => {\n const renderItems = (items: ItemProps[]) =>\n items.map((item, index) => (\n <Item\n key={index}\n effect={effect}\n duration={duration}\n delay={delay + cascade * index}\n once={once}\n viewport={viewport}\n variants={variants}\n transition={transition}\n {...item}\n className={cn(\n item.className,\n classNames?.item,\n //\n )}\n >\n {item.children}\n </Item>\n ));\n\n return (\n <div\n className={cn(\n 'flex gap-5',\n className,\n classNames?.root,\n //\n )}\n {...props}\n >\n {renderItems(\n children\n ? Children.toArray(children).map(child => ({\n children: child,\n }))\n : items,\n )}\n </div>\n );\n};\n\nexport default Reveals;\n"],"mappings":";;;;;AAiBA,MAAa,WAAW;AACxB,MAAa,QAAQ;AACrB,MAAa,UAAU;AAEvB,MAAM,WAAW,EACf,UACA,WACA,YACA,QAAQ,CAAC,GACT,UAAU,SACV,WAAW,UACX,QAAA,GACA,QACA,MACA,UACA,UACA,YACA,GAAG,YACQ;CACX,MAAM,eAAe,UACnB,MAAM,KAAK,MAAM,UACf,oBAAC,MAAD;EAEU;EACE;EACV,OAAO,QAAQ,UAAU;EACnB;EACI;EACA;EACE;EACZ,GAAI;EACJ,WAAW,GACT,KAAK,WACL,YAAY,IAEd;EAEC,UAAA,KAAK;CACF,GAhBC,KAgBD,CACP;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,GACT,
|
|
1
|
+
{"version":3,"file":"reveals.mjs","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props\n extends React.ComponentPropsWithoutRef<'div'>, ItemProps {\n cascade?: number;\n classNames?: {\n root?: string;\n item?: string;\n };\n once?: boolean;\n items?: ItemProps[];\n}\n\nexport const DURATION = 0.6;\nexport const DELAY = 0;\nexport const CASCADE = 0.1;\n\nconst Reveals = ({\n children,\n className,\n classNames,\n items = [],\n cascade = CASCADE,\n duration = DURATION,\n delay = DELAY,\n effect,\n once,\n viewport,\n variants,\n transition,\n ...props\n}: Props) => {\n const renderItems = (items: ItemProps[]) =>\n items.map((item, index) => (\n <Item\n key={index}\n effect={effect}\n duration={duration}\n delay={delay + cascade * index}\n once={once}\n viewport={viewport}\n variants={variants}\n transition={transition}\n {...item}\n className={cn(\n item.className,\n classNames?.item,\n //\n )}\n >\n {item.children}\n </Item>\n ));\n\n return (\n <div\n className={cn(\n 'flex flex-wrap gap-5',\n className,\n classNames?.root,\n //\n )}\n {...props}\n >\n {renderItems(\n children\n ? Children.toArray(children).map(child => ({\n children: child,\n }))\n : items,\n )}\n </div>\n );\n};\n\nexport default Reveals;\n"],"mappings":";;;;;AAiBA,MAAa,WAAW;AACxB,MAAa,QAAQ;AACrB,MAAa,UAAU;AAEvB,MAAM,WAAW,EACf,UACA,WACA,YACA,QAAQ,CAAC,GACT,UAAU,SACV,WAAW,UACX,QAAA,GACA,QACA,MACA,UACA,UACA,YACA,GAAG,YACQ;CACX,MAAM,eAAe,UACnB,MAAM,KAAK,MAAM,UACf,oBAAC,MAAD;EAEU;EACE;EACV,OAAO,QAAQ,UAAU;EACnB;EACI;EACA;EACE;EACZ,GAAI;EACJ,WAAW,GACT,KAAK,WACL,YAAY,IAEd;EAEC,UAAA,KAAK;CACF,GAhBC,KAgBD,CACP;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,GACT,wBACA,WACA,YAAY,IAEd;EACA,GAAI;EAEH,UAAA,YACC,WACI,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAI,WAAU,EACvC,UAAU,MACZ,EAAE,IACF,KACN;CACG,CAAA;AAET"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbpark/ui-kit",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.1",
|
|
4
4
|
"description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Base UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|