@jbpark/ui-kit 9.0.0 → 9.1.0
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.
|
@@ -1,10 +1,18 @@
|
|
|
1
|
+
import { ComponentSize } from "../../providers/config/types.mjs";
|
|
1
2
|
//#region src/components/atoms/switch.d.ts
|
|
2
3
|
interface Props extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange'> {
|
|
3
4
|
classNames?: {
|
|
4
5
|
track?: string;
|
|
5
6
|
handle?: string;
|
|
6
7
|
};
|
|
7
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Density on the shared `ComponentSize` scale (`small` | `middle` | `large`),
|
|
10
|
+
* falling back to the nearest `Config`'s `componentSize`, then `middle`.
|
|
11
|
+
*
|
|
12
|
+
* `medium` is accepted as a deprecated alias of `middle` — kept so existing
|
|
13
|
+
* `size="medium"` calls keep working; removed in the next major.
|
|
14
|
+
*/
|
|
15
|
+
size?: ComponentSize | 'medium';
|
|
8
16
|
defaultChecked?: boolean;
|
|
9
17
|
checked?: boolean;
|
|
10
18
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/atoms/switch.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/atoms/switch.tsx"],"mappings":";;UA+CiB,cAAc,KAC7B,MAAM;EAGN;IACE;IACA;;;;;;;;;EASF,OAAO;EACP;EACA;EACA;EACA,YAAY;EACZ,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;;cAGtB,WAAU,WAAA,YAAA,MAAA,gBAAA,SAAA,UAAA,UAAA,WAAA,iBAAA,sBAAA,SAUb,0BAAK,IAAA"}
|
|
@@ -1,20 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../../utils.mjs";
|
|
3
|
+
import { useConfig } from "../../providers/config/context.mjs";
|
|
3
4
|
import { switch_exports } from "../../core/switch.mjs";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
import { useControllableState } from "@jbpark/use-hooks";
|
|
6
7
|
//#region src/components/atoms/switch.tsx
|
|
7
8
|
const { Switch: Core } = switch_exports;
|
|
8
9
|
const sizeConfig = {
|
|
9
|
-
medium: {
|
|
10
|
-
core: "default",
|
|
11
|
-
track: "h-8! w-12!",
|
|
12
|
-
handle: "size-6!",
|
|
13
|
-
handleChecked: "data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]",
|
|
14
|
-
fontSize: "text-xs",
|
|
15
|
-
marginChecked: "mr-7 ml-2",
|
|
16
|
-
marginUnchecked: "mr-2 ml-7"
|
|
17
|
-
},
|
|
18
10
|
small: {
|
|
19
11
|
core: "sm",
|
|
20
12
|
track: "h-6! w-10!",
|
|
@@ -23,16 +15,36 @@ const sizeConfig = {
|
|
|
23
15
|
fontSize: "text-[10px]",
|
|
24
16
|
marginChecked: "mr-6 ml-1.5",
|
|
25
17
|
marginUnchecked: "mr-1.5 ml-6"
|
|
18
|
+
},
|
|
19
|
+
middle: {
|
|
20
|
+
core: "default",
|
|
21
|
+
track: "h-8! w-12!",
|
|
22
|
+
handle: "size-6!",
|
|
23
|
+
handleChecked: "data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]",
|
|
24
|
+
fontSize: "text-xs",
|
|
25
|
+
marginChecked: "mr-7 ml-2",
|
|
26
|
+
marginUnchecked: "mr-2 ml-7"
|
|
27
|
+
},
|
|
28
|
+
large: {
|
|
29
|
+
core: "default",
|
|
30
|
+
track: "h-10! w-16!",
|
|
31
|
+
handle: "size-8!",
|
|
32
|
+
handleChecked: "data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-34px)]",
|
|
33
|
+
fontSize: "text-sm",
|
|
34
|
+
marginChecked: "mr-9 ml-2.5",
|
|
35
|
+
marginUnchecked: "mr-2.5 ml-9"
|
|
26
36
|
}
|
|
27
37
|
};
|
|
28
|
-
const Switch = ({ className, classNames, size
|
|
38
|
+
const Switch = ({ className, classNames, size, defaultChecked, checked: _checked, onChange: _onChange = () => {}, checkedChildren, unCheckedChildren, ...props }) => {
|
|
29
39
|
const [checked, onChange] = useControllableState({
|
|
30
40
|
value: _checked,
|
|
31
41
|
defaultValue: defaultChecked ?? false,
|
|
32
42
|
onChange: _onChange
|
|
33
43
|
});
|
|
44
|
+
const { componentSize } = useConfig();
|
|
45
|
+
const resolvedSize = (size === "medium" ? "middle" : size) ?? componentSize ?? "middle";
|
|
34
46
|
const hasChildren = !!(checkedChildren || unCheckedChildren);
|
|
35
|
-
const config = sizeConfig[
|
|
47
|
+
const config = sizeConfig[resolvedSize];
|
|
36
48
|
return /* @__PURE__ */ jsx(Core, {
|
|
37
49
|
checked,
|
|
38
50
|
size: config.core,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.mjs","names":["switchComponent"],"sources":["../../../src/components/atoms/switch.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { switchComponent } from '../../core';\n\nconst { Switch: Core } = switchComponent;\n\nconst sizeConfig = {\n
|
|
1
|
+
{"version":3,"file":"switch.mjs","names":["switchComponent"],"sources":["../../../src/components/atoms/switch.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { switchComponent } from '../../core';\n\nconst { Switch: Core } = switchComponent;\n\n// Keyed by the shared `ComponentSize` vocabulary (#350). The `calc` offset on\n// each `handleChecked` is `handle width + 2px` (the `left-0.5` inset), so the\n// handle lands flush at both ends — it must be recomputed per row, not copied.\nconst sizeConfig = {\n small: {\n core: 'sm' as const,\n track: 'h-6! w-10!',\n handle: 'size-5!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-22px)]',\n fontSize: 'text-[10px]',\n marginChecked: 'mr-6 ml-1.5',\n marginUnchecked: 'mr-1.5 ml-6',\n },\n middle: {\n core: 'default' as const,\n track: 'h-8! w-12!',\n handle: 'size-6!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]',\n fontSize: 'text-xs',\n marginChecked: 'mr-7 ml-2',\n marginUnchecked: 'mr-2 ml-7',\n },\n large: {\n core: 'default' as const,\n track: 'h-10! w-16!',\n handle: 'size-8!',\n handleChecked:\n 'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-34px)]',\n fontSize: 'text-sm',\n marginChecked: 'mr-9 ml-2.5',\n marginUnchecked: 'mr-2.5 ml-9',\n },\n} satisfies Record<ComponentSize, unknown>;\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onChange'\n> {\n classNames?: {\n track?: string;\n handle?: string;\n };\n /**\n * Density on the shared `ComponentSize` scale (`small` | `middle` | `large`),\n * falling back to the nearest `Config`'s `componentSize`, then `middle`.\n *\n * `medium` is accepted as a deprecated alias of `middle` — kept so existing\n * `size=\"medium\"` calls keep working; removed in the next major.\n */\n size?: ComponentSize | 'medium';\n defaultChecked?: boolean;\n checked?: boolean;\n disabled?: boolean;\n onChange?: (checked: boolean) => void;\n checkedChildren?: React.ReactNode;\n unCheckedChildren?: React.ReactNode;\n}\n\nconst Switch = ({\n className,\n classNames,\n size,\n defaultChecked,\n checked: _checked,\n onChange: _onChange = () => {},\n checkedChildren,\n unCheckedChildren,\n ...props\n}: Props) => {\n const [checked, onChange] = useControllableState<boolean>({\n value: _checked,\n defaultValue: defaultChecked ?? false,\n onChange: _onChange,\n });\n\n const { componentSize } = useConfig();\n // `medium` is the deprecated spelling of `middle`; an explicit `size` wins,\n // then the Config default, then `middle`.\n const resolvedSize =\n (size === 'medium' ? 'middle' : size) ?? componentSize ?? 'middle';\n\n const hasChildren = !!(checkedChildren || unCheckedChildren);\n const config = sizeConfig[resolvedSize];\n\n return (\n <Core\n checked={checked}\n size={config.core}\n className={cn(\n 'relative',\n config.track,\n hasChildren && 'w-auto! overflow-hidden',\n className,\n classNames?.track,\n //\n )}\n handleClassName={cn(\n config.handle,\n '!absolute top-1/2 !-translate-y-1/2 !translate-x-0',\n 'transition-[left] duration-200 will-change-[left]',\n config.handleChecked,\n classNames?.handle,\n //\n )}\n onCheckedChange={checked => {\n onChange(checked);\n }}\n {...props}\n >\n {hasChildren && (\n <span\n className={cn(\n `grid leading-none transition-[margin] duration-200\n will-change-[margin]`,\n config.fontSize,\n checked\n ? [config.marginChecked, 'text-primary-foreground']\n : [config.marginUnchecked, 'text-foreground'],\n //\n )}\n >\n <span\n className={cn(\n 'col-start-1 row-start-1 transition-opacity duration-200',\n checked ? 'opacity-100' : 'opacity-0',\n )}\n >\n {checkedChildren}\n </span>\n <span\n className={cn(\n 'col-start-1 row-start-1 transition-opacity duration-200',\n checked ? 'opacity-0' : 'opacity-100',\n )}\n >\n {unCheckedChildren}\n </span>\n </span>\n )}\n </Core>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;;AASA,MAAM,EAAE,QAAQ,SAASA;AAKzB,MAAM,aAAa;CACjB,OAAO;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;CACnB;CACA,QAAQ;EACN,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;CACnB;CACA,OAAO;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;CACnB;AACF;AA0BA,MAAM,UAAU,EACd,WACA,YACA,MACA,gBACA,SAAS,UACT,UAAU,kBAAkB,CAAC,GAC7B,iBACA,mBACA,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,YAAY,qBAA8B;EACxD,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,kBAAkB,UAAU;CAGpC,MAAM,gBACH,SAAS,WAAW,WAAW,SAAS,iBAAiB;CAE5D,MAAM,cAAc,CAAC,EAAE,mBAAmB;CAC1C,MAAM,SAAS,WAAW;CAE1B,OACE,oBAAC,MAAD;EACW;EACT,MAAM,OAAO;EACb,WAAW,GACT,YACA,OAAO,OACP,eAAe,2BACf,WACA,YAAY,KAEd;EACA,iBAAiB,GACf,OAAO,QACP,sDACA,qDACA,OAAO,eACP,YAAY,MAEd;EACA,kBAAiB,YAAW;GAC1B,SAAS,OAAO;EAClB;EACA,GAAI;EAEH,UAAA,eACC,qBAAC,QAAD;GACE,WAAW,GACT;mCAEA,OAAO,UACP,UACI,CAAC,OAAO,eAAe,yBAAyB,IAChD,CAAC,OAAO,iBAAiB,iBAAiB,CAEhD;GATF,UAAA,CAWE,oBAAC,QAAD;IACE,WAAW,GACT,2DACA,UAAU,gBAAgB,WAC5B;IAEC,UAAA;GACG,CAAA,GACN,oBAAC,QAAD;IACE,WAAW,GACT,2DACA,UAAU,cAAc,aAC1B;IAEC,UAAA;GACG,CAAA,CACF;;CAEJ,CAAA;AAEV"}
|
package/dist/index.d.mts
CHANGED
|
@@ -25,6 +25,10 @@ import Select from "./components/atoms/select.mjs";
|
|
|
25
25
|
import Skeleton from "./components/atoms/skeleton/index.mjs";
|
|
26
26
|
import Slider from "./components/atoms/slider/slider.mjs";
|
|
27
27
|
import Spin from "./components/atoms/spin.mjs";
|
|
28
|
+
import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
|
|
29
|
+
import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
|
|
30
|
+
import Config, { Props as Props$3 } from "./providers/config/config.mjs";
|
|
31
|
+
import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
|
|
28
32
|
import Switch from "./components/atoms/switch.mjs";
|
|
29
33
|
import "./components/atoms/index.mjs";
|
|
30
34
|
import Collapse, { Props as Props$2 } from "./components/molecules/collapse.mjs";
|
|
@@ -49,8 +53,4 @@ import Result, { Props as Props$17 } from "./components/templates/result.mjs";
|
|
|
49
53
|
import PageHeader, { Props as Props$16 } from "./components/templates/page-header.mjs";
|
|
50
54
|
import Row, { Props as Props$19 } from "./components/templates/grid/row.mjs";
|
|
51
55
|
import Col, { Props as Props$1 } from "./components/templates/grid/col.mjs";
|
|
52
|
-
import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
|
|
53
|
-
import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
|
|
54
|
-
import Config, { Props as Props$3 } from "./providers/config/config.mjs";
|
|
55
|
-
import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
|
|
56
56
|
export { Button, Card, type Props as CardProps, Checkbox, Col, type Props$1 as ColProps, Collapse, type Props$2 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$3 as ConfigProps, ConfigSnapshotProvider, Container, type Props$4 as ContainerProps, type Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$6 as DrawerProps, Dropdown, type Props$7 as DropdownProps, Empty, type Props$8 as EmptyProps, FloatButton, type Props$9 as FooterProps, type Props$10 as HeaderProps, Input, Layout, type Props$11 as LayoutProps, List, type Props$12 as ListProps, type Locale, Marquees, type Props$13 as MarqueesProps, Menu, type Props$14 as MenuProps, Modal, type Props$15 as ModalProps, PageHeader, type Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, type Props$17 as ResultProps, Reveals, type Props$18 as RevealsProps, RichTextEditor, Row, type Props$19 as RowProps, Select, type Props$20 as SiderProps, Skeleton, Slider, Space, type Props$21 as SpaceProps, Spin, Splitter, type Props$22 as SplitterProps, Swiper, type Props$23 as SwiperProps, Switch, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Typography, Upload, type UploadFile, type Props$24 as UploadProps, getRootConfigValue, useConfig };
|
package/dist/style.css
CHANGED
|
@@ -337,6 +337,9 @@
|
|
|
337
337
|
.left-0 {
|
|
338
338
|
left: 0px;
|
|
339
339
|
}
|
|
340
|
+
.left-0\.5 {
|
|
341
|
+
left: calc(var(--spacing) * 0.5);
|
|
342
|
+
}
|
|
340
343
|
.left-1\/2 {
|
|
341
344
|
left: calc(1 / 2 * 100%);
|
|
342
345
|
}
|
|
@@ -436,12 +439,18 @@
|
|
|
436
439
|
.mr-2 {
|
|
437
440
|
margin-right: calc(var(--spacing) * 2);
|
|
438
441
|
}
|
|
442
|
+
.mr-2\.5 {
|
|
443
|
+
margin-right: calc(var(--spacing) * 2.5);
|
|
444
|
+
}
|
|
439
445
|
.mr-6 {
|
|
440
446
|
margin-right: calc(var(--spacing) * 6);
|
|
441
447
|
}
|
|
442
448
|
.mr-7 {
|
|
443
449
|
margin-right: calc(var(--spacing) * 7);
|
|
444
450
|
}
|
|
451
|
+
.mr-9 {
|
|
452
|
+
margin-right: calc(var(--spacing) * 9);
|
|
453
|
+
}
|
|
445
454
|
.mb-2 {
|
|
446
455
|
margin-bottom: calc(var(--spacing) * 2);
|
|
447
456
|
}
|
|
@@ -457,6 +466,9 @@
|
|
|
457
466
|
.ml-2 {
|
|
458
467
|
margin-left: calc(var(--spacing) * 2);
|
|
459
468
|
}
|
|
469
|
+
.ml-2\.5 {
|
|
470
|
+
margin-left: calc(var(--spacing) * 2.5);
|
|
471
|
+
}
|
|
460
472
|
.ml-4 {
|
|
461
473
|
margin-left: calc(var(--spacing) * 4);
|
|
462
474
|
}
|
|
@@ -466,6 +478,9 @@
|
|
|
466
478
|
.ml-7 {
|
|
467
479
|
margin-left: calc(var(--spacing) * 7);
|
|
468
480
|
}
|
|
481
|
+
.ml-9 {
|
|
482
|
+
margin-left: calc(var(--spacing) * 9);
|
|
483
|
+
}
|
|
469
484
|
.box-border {
|
|
470
485
|
box-sizing: border-box;
|
|
471
486
|
}
|
|
@@ -541,6 +556,10 @@
|
|
|
541
556
|
width: calc(var(--spacing) * 8);
|
|
542
557
|
height: calc(var(--spacing) * 8);
|
|
543
558
|
}
|
|
559
|
+
.size-8\! {
|
|
560
|
+
width: calc(var(--spacing) * 8) !important;
|
|
561
|
+
height: calc(var(--spacing) * 8) !important;
|
|
562
|
+
}
|
|
544
563
|
.size-9 {
|
|
545
564
|
width: calc(var(--spacing) * 9);
|
|
546
565
|
height: calc(var(--spacing) * 9);
|
|
@@ -579,6 +598,9 @@
|
|
|
579
598
|
.h-10 {
|
|
580
599
|
height: calc(var(--spacing) * 10);
|
|
581
600
|
}
|
|
601
|
+
.h-10\! {
|
|
602
|
+
height: calc(var(--spacing) * 10) !important;
|
|
603
|
+
}
|
|
582
604
|
.h-12 {
|
|
583
605
|
height: calc(var(--spacing) * 12);
|
|
584
606
|
}
|
|
@@ -642,6 +664,9 @@
|
|
|
642
664
|
.w-15 {
|
|
643
665
|
width: calc(var(--spacing) * 15);
|
|
644
666
|
}
|
|
667
|
+
.w-16\! {
|
|
668
|
+
width: calc(var(--spacing) * 16) !important;
|
|
669
|
+
}
|
|
645
670
|
.w-20 {
|
|
646
671
|
width: calc(var(--spacing) * 20);
|
|
647
672
|
}
|
|
@@ -2386,6 +2411,9 @@
|
|
|
2386
2411
|
.data-\[state\=checked\]\:left-\[calc\(100\%-26px\)\][data-state="checked"] {
|
|
2387
2412
|
left: calc(100% - 26px);
|
|
2388
2413
|
}
|
|
2414
|
+
.data-\[state\=checked\]\:left-\[calc\(100\%-34px\)\][data-state="checked"] {
|
|
2415
|
+
left: calc(100% - 34px);
|
|
2416
|
+
}
|
|
2389
2417
|
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
|
|
2390
2418
|
--tw-translate-x: calc(100% - 2px);
|
|
2391
2419
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbpark/ui-kit",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.1.0",
|
|
4
4
|
"description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|