@oneplatformdev/ui 0.1.99-beta.250 → 0.1.99-beta.252

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/Combobox/Combobox.js +193 -158
  3. package/Combobox/Combobox.js.map +1 -1
  4. package/Combobox/Combobox.stories.js +152 -107
  5. package/Combobox/Combobox.stories.js.map +1 -1
  6. package/Combobox/Combobox.types.d.ts +12 -1
  7. package/Combobox/Combobox.types.d.ts.map +1 -1
  8. package/Combobox/Combobox.types.js.map +1 -1
  9. package/Combobox/ComboboxRenderContent.d.ts +4 -0
  10. package/Combobox/ComboboxRenderContent.d.ts.map +1 -1
  11. package/Combobox/ComboboxRenderContent.js +88 -66
  12. package/Combobox/ComboboxRenderContent.js.map +1 -1
  13. package/Switch/Switch.js +2 -2
  14. package/Switch/Switch.js.map +1 -1
  15. package/package.json +5 -4
package/Combobox/ComboboxRenderContent.js CHANGED
@@ -1,108 +1,130 @@
1
- import { jsx as e, jsxs as i, Fragment as u } from "react/jsx-runtime";
2
- import { LoadingMask as M } from "../LoadingMask/LoadingMask.js";
1
+ import { jsx as e, jsxs as i, Fragment as w } from "react/jsx-runtime";
2
+ import { LoadingMask as O } from "../LoadingMask/LoadingMask.js";
3
3
  import "../LoadingMask/RenderLoadingMask.js";
4
- import { PopoverContent as P } from "../Popover/Popover.js";
5
- import { Command as j, CommandInput as k, CommandList as E, CommandGroup as O, CommandEmpty as x, CommandItem as R } from "../Command/Command.js";
6
- import { cn as m } from "@oneplatformdev/utils";
7
- import { ComboboxRenderOptions as D } from "./ComboboxRenderOptions.js";
8
- const z = (b) => {
4
+ import { PopoverContent as D } from "../Popover/Popover.js";
5
+ import { Command as G, CommandInput as H, CommandList as J, CommandGroup as T, CommandEmpty as y, CommandItem as W } from "../Command/Command.js";
6
+ import { cn as s } from "@oneplatformdev/utils";
7
+ import { ComboboxRenderOptions as _ } from "./ComboboxRenderOptions.js";
8
+ import { useRef as q, useEffect as z } from "react";
9
+ import { useInView as B } from "react-intersection-observer";
10
+ import { Skeleton as K } from "../Skeleton/Skeleton.js";
11
+ const Q = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-0", children: Array.from({ length: t.length || 2 }).map((c, m) => /* @__PURE__ */ e(
12
+ "div",
13
+ {
14
+ className: "flex items-center min-h-10 w-full px-4",
15
+ children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(K, { className: "h-4 w-full" }) })
16
+ },
17
+ m
18
+ )) }), le = (t) => {
9
19
  const {
10
- type: y,
11
- search: p,
20
+ open: c,
21
+ type: m,
22
+ search: u,
12
23
  onSearch: C,
13
- loading: t,
14
- isEmptyList: l,
15
- onSelect: N,
16
- options: f = [],
24
+ hasNext: v,
25
+ loading: r,
26
+ loadingMore: A,
27
+ isEmptyList: d,
28
+ onSelect: L,
29
+ options: x = [],
17
30
  callbackStateParams: o,
18
- value: g,
19
- searchLabel: w = "Type to search...",
20
- emptyLabel: h = "No options",
31
+ value: F,
32
+ searchLabel: I = "Type to search...",
33
+ emptyLabel: N = "No options",
21
34
  emptyAction: n,
22
- commandInputAction: d,
23
- listHeadAction: r,
35
+ commandInputAction: p,
36
+ listHeadAction: l,
24
37
  listFooterAction: a,
25
- slotProps: s = {},
26
- defaultNodeDisabled: A,
27
- defaultNodeMatched: F,
28
- defaultNodeMuted: L,
29
- defaultNodeInteractive: v,
30
- renderList: c
31
- } = b;
32
- return /* @__PURE__ */ e(
33
- P,
38
+ slotProps: f = {},
39
+ defaultNodeDisabled: M,
40
+ defaultNodeMatched: R,
41
+ defaultNodeMuted: S,
42
+ defaultNodeInteractive: k,
43
+ renderList: h,
44
+ onLoadMore: E
45
+ } = t, b = q(null), { ref: P, inView: g } = B({
46
+ root: b.current,
47
+ rootMargin: "0px 0px 200px 0px",
48
+ threshold: 0
49
+ });
50
+ return z(() => {
51
+ c && g && E?.();
52
+ }, [g, c]), /* @__PURE__ */ e(
53
+ D,
34
54
  {
35
- className: m(
55
+ className: s(
36
56
  "w-(--radix-popper-anchor-width) max-w-none p-2"
37
57
  ),
38
58
  align: "start",
39
- children: /* @__PURE__ */ i(j, { shouldFilter: !1, children: [
59
+ children: /* @__PURE__ */ i(G, { shouldFilter: !1, children: [
40
60
  /* @__PURE__ */ e(
41
- k,
61
+ H,
42
62
  {
43
- placeholder: w,
44
- value: p,
63
+ placeholder: I,
64
+ value: u,
45
65
  onValueChange: C
46
66
  }
47
67
  ),
48
- typeof d == "function" ? d(o) : d,
49
- /* @__PURE__ */ e(E, { children: /* @__PURE__ */ i(
50
- O,
68
+ typeof p == "function" ? p(o) : p,
69
+ /* @__PURE__ */ e(J, { ref: b, children: /* @__PURE__ */ i(
70
+ T,
51
71
  {
52
- className: m(
53
- !f.length && "p-0 shadow-none",
72
+ className: s(
73
+ !x.length && "p-0 shadow-none",
54
74
  "px-0 py-2"
55
75
  ),
56
76
  children: [
57
- t && /* @__PURE__ */ e(M, { fullWidth: !0 }),
58
- !t && l && /* @__PURE__ */ e(u, { children: n ? /* @__PURE__ */ i(x, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
59
- /* @__PURE__ */ e("span", { children: h }),
77
+ r && /* @__PURE__ */ e(O, { fullWidth: !0 }),
78
+ !r && d && /* @__PURE__ */ e(w, { children: n ? /* @__PURE__ */ i(y, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
79
+ /* @__PURE__ */ e("span", { children: N }),
60
80
  typeof n == "function" ? n(o) : n
61
- ] }) : /* @__PURE__ */ e(x, { children: h }) }),
62
- !t && !l && /* @__PURE__ */ i(u, { children: [
63
- r && /* @__PURE__ */ e(
64
- R,
81
+ ] }) : /* @__PURE__ */ e(y, { children: N }) }),
82
+ !r && !d && /* @__PURE__ */ i(w, { children: [
83
+ l && /* @__PURE__ */ e(
84
+ W,
65
85
  {
66
86
  asChild: !0,
67
87
  className: "w-full",
68
- children: typeof r == "function" ? r(o) : r
88
+ children: typeof l == "function" ? l(o) : l
69
89
  },
70
90
  "combobox-list-head-action"
71
91
  ),
72
- c && c(o),
73
- !c && /* @__PURE__ */ e(
74
- D,
92
+ h && h(o),
93
+ !h && /* @__PURE__ */ e(
94
+ _,
75
95
  {
76
- type: y,
77
- search: p,
78
- value: g,
79
- options: f,
80
- onSelect: N,
81
- defaultNodeDisabled: A,
82
- defaultNodeMatched: F,
83
- defaultNodeMuted: L,
84
- defaultNodeInteractive: v
96
+ type: m,
97
+ search: u,
98
+ value: F,
99
+ options: x,
100
+ onSelect: L,
101
+ defaultNodeDisabled: M,
102
+ defaultNodeMatched: R,
103
+ defaultNodeMuted: S,
104
+ defaultNodeInteractive: k
85
105
  }
86
- )
106
+ ),
107
+ v && /* @__PURE__ */ e("div", { ref: P, className: "h-px w-full" }),
108
+ A && /* @__PURE__ */ e(Q, {})
87
109
  ] })
88
110
  ]
89
111
  }
90
112
  ) }),
91
- !t && a && !l && /* @__PURE__ */ e(
113
+ !r && a && !d && /* @__PURE__ */ e(
92
114
  "div",
93
115
  {
94
116
  "data-slot": "command-footer-wrapper",
95
117
  ...(() => {
96
- const { bordered: I = !0, ...S } = s?.listFooterAction || {};
118
+ const { bordered: V = !0, ...j } = f?.listFooterAction || {};
97
119
  return {
98
- ...S,
99
- "data-slot-bordered": JSON.stringify(I)
120
+ ...j,
121
+ "data-slot-bordered": JSON.stringify(V)
100
122
  };
101
123
  })(),
102
- className: m(
124
+ className: s(
103
125
  "flex w-full items-center gap-2 px-0",
104
- (s?.listFooterAction?.bordered ?? !0) && "border-t px-0 pt-2",
105
- s?.listFooterAction?.className
126
+ (f?.listFooterAction?.bordered ?? !0) && "border-t px-0 pt-2",
127
+ f?.listFooterAction?.className
106
128
  ),
107
129
  children: typeof a == "function" ? a(o) : a
108
130
  }
@@ -112,6 +134,6 @@ const z = (b) => {
112
134
  );
113
135
  };
114
136
  export {
115
- z as ComboboxRenderContent
137
+ le as ComboboxRenderContent
116
138
  };
117
139
  //# sourceMappingURL=ComboboxRenderContent.js.map
package/Combobox/ComboboxRenderContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\nimport { PopoverContent } from '../Popover';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption, ComboboxProps,\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\n ISlotProps,\n} from './Combobox.types';\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\n\ntype ComboboxRenderContentProps<Data extends object = object> = IComboboxOptionsNodeHandlersProps<Data> & {\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n\n loading: boolean;\n options: ComboboxOption<Data>[];\n search?: string;\n onSearch?: (term: string) => void;\n isEmptyList?: boolean;\n onSelect?: (option: ComboboxOption<Data>) => void;\n\n searchLabel?: string;\n emptyLabel?: string;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n slotProps?: ISlotProps;\n}\n\n\nexport const ComboboxRenderContent = <Data extends object = object>(\n props: ComboboxRenderContentProps<Data>\n) => {\n const {\n type,\n search,\n onSearch,\n loading,\n isEmptyList,\n onSelect,\n options = [],\n callbackStateParams,\n value,\n searchLabel = 'Type to search...',\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n slotProps = {},\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n renderList,\n } = props;\n\n return (\n <PopoverContent\n className={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\n )}\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={search}\n onValueChange={onSearch}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(callbackStateParams)\n : commandInputAction}\n\n <CommandList>\n <CommandGroup\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(callbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(callbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n\n {renderList && renderList(callbackStateParams)}\n\n {!renderList && (\n <ComboboxRenderOptions\n type={type}\n search={search}\n value={value}\n options={options}\n onSelect={onSelect}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}/>\n )}\n </>\n )}\n\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full items-center gap-2 px-0\",\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\n slotProps?.listFooterAction?.className,\n )}\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(callbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n );\n}\n"],"names":["ComboboxRenderContent","props","type","search","onSearch","loading","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderList","jsx","PopoverContent","cn","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
1
+ {"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\nimport { PopoverContent } from '../Popover';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption, ComboboxProps,\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\n ISlotProps,\n} from './Combobox.types';\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { Skeleton } from \"../Skeleton\";\n\ntype ComboboxRenderContentProps<Data extends object = object> =\n IComboboxOptionsNodeHandlersProps<Data>\n & {\n open?: boolean;\n\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n\n hasNext: boolean;\n\n loading: boolean;\n loadingMore: boolean;\n\n options: ComboboxOption<Data>[];\n search?: string;\n onSearch?: (term: string) => void;\n isEmptyList?: boolean;\n onSelect?: (option: ComboboxOption<Data>) => void;\n\n searchLabel?: string;\n emptyLabel?: string;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n slotProps?: ISlotProps;\n\n onLoadMore?: () => Promise<void>;\n}\n\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\n <div className=\"flex w-full flex-col gap-0\">\n {Array.from({ length: props.length || 2 }).map((_, i) => (\n <div\n key={i}\n className='flex items-center min-h-10 w-full px-4'\n >\n <div className={cn('flex items-center w-full', props.className)}>\n <Skeleton className='h-4 w-full'/>\n </div>\n </div>\n ))}\n </div>\n);\n\n\nexport const ComboboxRenderContent = <Data extends object = object>(\n props: ComboboxRenderContentProps<Data>\n) => {\n const {\n open,\n type,\n search,\n onSearch,\n hasNext,\n loading,\n loadingMore,\n isEmptyList,\n onSelect,\n options = [],\n callbackStateParams,\n value,\n searchLabel = 'Type to search...',\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n slotProps = {},\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n renderList,\n onLoadMore,\n } = props;\n\n const scrollRootRef = useRef<HTMLDivElement>(null);\n const { ref: sentinelRef, inView } = useInView({\n root: scrollRootRef.current,\n rootMargin: \"0px 0px 200px 0px\",\n threshold: 0,\n });\n\n useEffect(() => {\n if (!open) return;\n if (!inView) return;\n void onLoadMore?.();\n }, [ inView, open ]);\n\n return (\n <PopoverContent\n className={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\n )}\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={search}\n onValueChange={onSearch}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(callbackStateParams)\n : commandInputAction}\n\n <CommandList ref={scrollRootRef}>\n <CommandGroup\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(callbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(callbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n\n {renderList && renderList(callbackStateParams)}\n\n {!renderList && (\n <ComboboxRenderOptions\n type={type}\n search={search}\n value={value}\n options={options}\n onSelect={onSelect}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}/>\n )}\n\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\n {loadingMore && <SkeletonItems />}\n </>\n )}\n\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full items-center gap-2 px-0\",\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\n slotProps?.listFooterAction?.className,\n )}\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(callbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n );\n}\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
package/Switch/Switch.js CHANGED
@@ -25,10 +25,10 @@ function o(r) {
25
25
  {
26
26
  "data-slot": "switch-thumb",
27
27
  className: a(
28
- "block rounded-full h-[calc(100%-1px)] aspect-square",
28
+ "block rounded-full h-[calc(100%-2px)] aspect-square box-border",
29
29
  "data-[state=checked]:bg-[#FCFCFC] data-[state=unchecked]:bg-[#8C8F9A]",
30
30
  "dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
31
- "data-[state=unchecked]:translate-x-px data-[state=checked]:translate-x-[calc(100%+1px)]",
31
+ "data-[state=unchecked]:translate-x-px data-[state=checked]:translate-x-[calc(100%+2px)]",
32
32
  "pointer-events-none ring-0 transition-transform"
33
33
  )
34
34
  }
package/Switch/Switch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Switch(props: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n const { className, ...rest } = props;\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer inline-flex h-5 w-9.5 shrink-0 items-center box-border rounded-full',\n 'data-[state=checked]:bg-[#9368FF] data-[state=unchecked]:bg-transparent',\n 'border data-[state=checked]:border-[#9368FF] data-[state=unchecked]:border-[#8C8F9A]',\n 'dark:data-[state=unchecked]:bg-input/80',\n 'cursor-pointer',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'shadow-none outline-none focus-visible:ring-[3px]',\n 'focus-visible:border-ring focus-visible:ring-ring/50',\n \"transition-all\",\n className\n )}\n {...rest}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'block rounded-full h-[calc(100%-1px)] aspect-square',\n 'data-[state=checked]:bg-[#FCFCFC] data-[state=unchecked]:bg-[#8C8F9A]',\n 'dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground',\n 'data-[state=unchecked]:translate-x-px data-[state=checked]:translate-x-[calc(100%+1px)]',\n \"pointer-events-none ring-0 transition-transform\"\n )}\n />\n </SwitchPrimitive.Root>\n )\n}\n\nexport { Switch }\n"],"names":["Switch","props","className","rest","jsx","SwitchPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAAOC,GAA0D;AACxE,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAC/B,SACE,gBAAAG;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAWC;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Switch(props: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n const { className, ...rest } = props;\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer inline-flex h-5 w-9.5 shrink-0 items-center box-border rounded-full',\n 'data-[state=checked]:bg-[#9368FF] data-[state=unchecked]:bg-transparent',\n 'border data-[state=checked]:border-[#9368FF] data-[state=unchecked]:border-[#8C8F9A]',\n 'dark:data-[state=unchecked]:bg-input/80',\n 'cursor-pointer',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'shadow-none outline-none focus-visible:ring-[3px]',\n 'focus-visible:border-ring focus-visible:ring-ring/50',\n \"transition-all\",\n className\n )}\n {...rest}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'block rounded-full h-[calc(100%-2px)] aspect-square box-border',\n 'data-[state=checked]:bg-[#FCFCFC] data-[state=unchecked]:bg-[#8C8F9A]',\n 'dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground',\n 'data-[state=unchecked]:translate-x-px data-[state=checked]:translate-x-[calc(100%+2px)]',\n \"pointer-events-none ring-0 transition-transform\"\n )}\n />\n </SwitchPrimitive.Root>\n )\n}\n\nexport { Switch }\n"],"names":["Switch","props","className","rest","jsx","SwitchPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAAOC,GAA0D;AACxE,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAC/B,SACE,gBAAAG;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAWC;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.99-beta.250",
3
+ "version": "0.1.99-beta.252",
4
4
  "description": "UI component library for OnePlatform",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -102,13 +102,14 @@
102
102
  "next-themes": "^0.4.6",
103
103
  "react-day-picker": "9.10.0",
104
104
  "react-dropzone": "^14.3.8",
105
+ "react-intersection-observer": "^10.0.2",
105
106
  "react-resizable-panels": "^3.0.6",
106
107
  "recharts": "^3.2.0",
107
108
  "sonner": "^2.0.7",
108
109
  "vaul": "^1.1.2",
109
- "@oneplatformdev/hooks": "^0.1.99-beta.250",
110
- "@oneplatformdev/utils": "^0.1.99-beta.250",
111
- "@oneplatformdev/tokens": "^0.1.99-beta.250"
110
+ "@oneplatformdev/tokens": "^0.1.99-beta.252",
111
+ "@oneplatformdev/hooks": "^0.1.99-beta.252",
112
+ "@oneplatformdev/utils": "^0.1.99-beta.252"
112
113
  },
113
114
  "scripts": {
114
115
  "chromatic": "chromatic"