@knymbus/voxel-ui 1.0.0 → 1.0.3
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.
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer theme{:root,:host{--voxel-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--voxel-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--voxel-default-font-family:var(--voxel-font-sans);--voxel-default-mono-font-family:var(--voxel-font-mono)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--voxel-default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--voxel-default-font-feature-settings,normal);font-variation-settings:var(--voxel-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--voxel-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--voxel-default-mono-font-feature-settings,normal);font-variation-settings:var(--voxel-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.dark{--color-vsc-bg:#1e1e1e;--color-vsc-sidebar:#252526;--color-vsc-border:#3c3c3c;--color-vsc-accent:#007acc;--color-vsc-accent-hover:#0062a3;--color-vsc-hover:#2a2d2e;--color-vsc-text:#ccc;--color-vsc-muted:#8b949e;--color-vsc-bg-input:#1f1f1f}}@layer components,utilities;
|
|
3
|
+
/*$vite$:1*/
|
package/dist/index.js
CHANGED
|
@@ -887,9 +887,9 @@ function W({ variant: e = "simple", value: t, onChange: n, onClear: r, placehold
|
|
|
887
887
|
y(!0), setTimeout(() => w.current?.focus(), 50);
|
|
888
888
|
}, D = "relative flex flex-col font-sans text-xs select-none";
|
|
889
889
|
if (e === "simple") {
|
|
890
|
-
let e =
|
|
890
|
+
let e = t.length > 0;
|
|
891
891
|
return /* @__PURE__ */ (0, d.jsxs)("div", {
|
|
892
|
-
className:
|
|
892
|
+
className: `${D} ${p}`.trim(),
|
|
893
893
|
children: [/* @__PURE__ */ (0, d.jsxs)("div", {
|
|
894
894
|
className: "relative flex items-center bg-vsc-bg-input border border-vsc-border rounded-sm h-8 group hover:border-vsc-accent transition-colors z-20",
|
|
895
895
|
children: [
|
|
@@ -907,6 +907,7 @@ function W({ variant: e = "simple", value: t, onChange: n, onClear: r, placehold
|
|
|
907
907
|
}),
|
|
908
908
|
t && /* @__PURE__ */ (0, d.jsx)("div", {
|
|
909
909
|
className: "absolute right-1 top-1/2 -translate-y-1/2 flex items-center",
|
|
910
|
+
style: { marginRight: "4px" },
|
|
910
911
|
children: /* @__PURE__ */ (0, d.jsx)(m, {
|
|
911
912
|
icon: v,
|
|
912
913
|
color: "ghost",
|
|
@@ -917,7 +918,7 @@ function W({ variant: e = "simple", value: t, onChange: n, onClear: r, placehold
|
|
|
917
918
|
})
|
|
918
919
|
]
|
|
919
920
|
}), /* @__PURE__ */ (0, d.jsx)("div", {
|
|
920
|
-
className: `absolute left-0 right-0 top-8 z-
|
|
921
|
+
className: `absolute left-0 right-0 top-8 z-50 overflow-hidden transition-all duration-200 cubic-bezier(0.34, 1.56, 0.64, 1) ${e ? "" : "pointer-events-none"}`,
|
|
921
922
|
style: {
|
|
922
923
|
height: e ? "auto" : "0px",
|
|
923
924
|
opacity: +!!e,
|
|
@@ -925,7 +926,10 @@ function W({ variant: e = "simple", value: t, onChange: n, onClear: r, placehold
|
|
|
925
926
|
},
|
|
926
927
|
children: /* @__PURE__ */ (0, d.jsx)("div", {
|
|
927
928
|
className: "bg-vsc-sidebar shadow-sm p-1.5 pt-1 ",
|
|
928
|
-
children:
|
|
929
|
+
children: a === 0 ? /* @__PURE__ */ (0, d.jsx)("div", {
|
|
930
|
+
className: "pl-1 text-start text-[11px] text-vsc-muted italic",
|
|
931
|
+
children: "No record match your search query constraints."
|
|
932
|
+
}) : g || /* @__PURE__ */ (0, d.jsxs)("p", {
|
|
929
933
|
className: "text-[10px] font-mono text-vsc-muted pl-1 truncate",
|
|
930
934
|
children: [
|
|
931
935
|
"Showing ",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knymbus/voxel-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -17,18 +17,19 @@
|
|
|
17
17
|
"import": "./dist/components/resizable/index.js",
|
|
18
18
|
"types": "./dist/components/resizable/index.d.ts"
|
|
19
19
|
},
|
|
20
|
-
"./button":{
|
|
20
|
+
"./button": {
|
|
21
21
|
"import": "./dist/components/button/index.js",
|
|
22
|
-
"types":"./dist/components/button/index.d.ts"
|
|
22
|
+
"types": "./dist/components/button/index.d.ts"
|
|
23
23
|
},
|
|
24
|
-
"./icons":{
|
|
24
|
+
"./icons": {
|
|
25
25
|
"import": "./dist/components/icons/index.js",
|
|
26
|
-
"types":"./dist/components/icons/index.d.ts"
|
|
26
|
+
"types": "./dist/components/icons/index.d.ts"
|
|
27
27
|
},
|
|
28
|
-
"./search":{
|
|
28
|
+
"./search": {
|
|
29
29
|
"import": "./dist/components/search/index.js",
|
|
30
|
-
"types":"./dist/components/search/index.d.ts"
|
|
31
|
-
}
|
|
30
|
+
"types": "./dist/components/search/index.d.ts"
|
|
31
|
+
},
|
|
32
|
+
"./dist/style.css": "./dist/style.css"
|
|
32
33
|
},
|
|
33
34
|
"scripts": {
|
|
34
35
|
"build": "vite build && tsc --emitDeclarationOnly",
|
|
@@ -65,4 +66,4 @@
|
|
|
65
66
|
"vite": "^8.1.0",
|
|
66
67
|
"vite-plugin-dts": "^5.0.3"
|
|
67
68
|
}
|
|
68
|
-
}
|
|
69
|
+
}
|
|
@@ -29,12 +29,16 @@ const MultiSearchWorkspace = () => {
|
|
|
29
29
|
item.title.toLowerCase().includes(menuQuery.toLowerCase()) ||
|
|
30
30
|
item.subtitle?.toLowerCase().includes(menuQuery.toLowerCase())
|
|
31
31
|
);
|
|
32
|
+
const filteredSimpleResults = MOCK_DATASET.filter(item =>
|
|
33
|
+
item.title.toLowerCase().includes(simpleQuery.toLowerCase()) ||
|
|
34
|
+
item.subtitle?.toLowerCase().includes(simpleQuery.toLowerCase())
|
|
35
|
+
);
|
|
32
36
|
|
|
33
37
|
|
|
34
38
|
const ResultPanel = () => {
|
|
35
39
|
return (
|
|
36
40
|
<div className="flex flex-row items-center justify-between">
|
|
37
|
-
<div>Showing {
|
|
41
|
+
<div>Showing {filteredSimpleResults.length} Manifest records</div>
|
|
38
42
|
<Button size='xs' color='primary' onClick={() => alert("Show more result clicked")}>View More</Button>
|
|
39
43
|
</div>
|
|
40
44
|
)
|
|
@@ -50,7 +54,7 @@ const MultiSearchWorkspace = () => {
|
|
|
50
54
|
variant="simple"
|
|
51
55
|
value={simpleQuery}
|
|
52
56
|
onChange={setSimpleQuery}
|
|
53
|
-
resultsCount={
|
|
57
|
+
resultsCount={filteredSimpleResults.length}
|
|
54
58
|
placeholder="Type track ID to evaluate records count..."
|
|
55
59
|
resultIndicatorPanel={<ResultPanel />}
|
|
56
60
|
/>
|
|
@@ -59,10 +59,10 @@ export default function SearchInput({
|
|
|
59
59
|
|
|
60
60
|
// --- 1. SIMPLE VARIANT PANEL ---
|
|
61
61
|
if (variant === 'simple') {
|
|
62
|
-
const hasResults =
|
|
62
|
+
const hasResults = value.length > 0;
|
|
63
63
|
|
|
64
64
|
return (
|
|
65
|
-
<div className={
|
|
65
|
+
<div className={`${baseWrapper} ${className}`.trim()}>
|
|
66
66
|
{/* Core Input Box Frame */}
|
|
67
67
|
<div className="relative flex items-center bg-vsc-bg-input border border-vsc-border rounded-sm h-8 group hover:border-vsc-accent transition-colors z-20">
|
|
68
68
|
<Search size={14} className="absolute left-2.5 text-vsc-muted group-hover:text-vsc-text" />
|
|
@@ -75,7 +75,7 @@ export default function SearchInput({
|
|
|
75
75
|
className="w-full h-full pl-8 pr-10 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
|
|
76
76
|
/>
|
|
77
77
|
{value && (
|
|
78
|
-
<div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center">
|
|
78
|
+
<div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center" style={{ marginRight: '4px' }}>
|
|
79
79
|
<Button
|
|
80
80
|
icon={Close}
|
|
81
81
|
color="ghost"
|
|
@@ -93,7 +93,7 @@ export default function SearchInput({
|
|
|
93
93
|
- Utilizes hardware-accelerated transforms (translateY) for a smooth glide effect.
|
|
94
94
|
*/}
|
|
95
95
|
<div
|
|
96
|
-
className={`absolute left-0 right-0 top-8 z-
|
|
96
|
+
className={`absolute left-0 right-0 top-8 z-50 overflow-hidden transition-all duration-200 cubic-bezier(0.34, 1.56, 0.64, 1) ${!hasResults ? 'pointer-events-none' : ''}`}
|
|
97
97
|
style={{
|
|
98
98
|
height: hasResults ? 'auto' : '0px',
|
|
99
99
|
opacity: hasResults ? 1 : 0,
|
|
@@ -102,10 +102,18 @@ export default function SearchInput({
|
|
|
102
102
|
>
|
|
103
103
|
<div className="bg-vsc-sidebar shadow-sm p-1.5 pt-1 ">
|
|
104
104
|
{
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
</
|
|
105
|
+
resultsCount === 0 ? (
|
|
106
|
+
<div className="pl-1 text-start text-[11px] text-vsc-muted italic">
|
|
107
|
+
No record match your search query constraints.
|
|
108
|
+
</div>
|
|
109
|
+
) : (
|
|
110
|
+
|
|
111
|
+
resultIndicatorPanel ? resultIndicatorPanel : (
|
|
112
|
+
<p className="text-[10px] font-mono text-vsc-muted pl-1 truncate">
|
|
113
|
+
Showing <span className="text-vsc-accent font-bold">{resultsCount}</span> matching database metrics records
|
|
114
|
+
</p>
|
|
115
|
+
)
|
|
116
|
+
|
|
109
117
|
)
|
|
110
118
|
}
|
|
111
119
|
</div>
|
package/src/index.css
CHANGED
package/src/index.ts
CHANGED
package/vite.config.ts
CHANGED
|
@@ -25,8 +25,11 @@ export default defineConfig({
|
|
|
25
25
|
entry: {
|
|
26
26
|
index: resolve(__dirname, 'src/index.ts'),
|
|
27
27
|
'components/tabs/index': resolve(__dirname, 'src/components/tabs/index.ts'),
|
|
28
|
-
'components/resizable/index': resolve(__dirname, 'src/components/resizable/index.ts')
|
|
28
|
+
'components/resizable/index': resolve(__dirname, 'src/components/resizable/index.ts'),
|
|
29
|
+
|
|
29
30
|
},
|
|
31
|
+
name: "voxelUi",
|
|
32
|
+
fileName: (format) => `index.${format}.js`,
|
|
30
33
|
formats: ['es'] // Output strictly as modern ES Modules for dead-code elimination (tree-shaking)
|
|
31
34
|
},
|
|
32
35
|
rollupOptions: {
|