@knymbus/voxel-ui 1.0.1 → 1.0.5

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 (8) hide show
  1. package/dist/assets/voxel-ui.css +3 -0
  2. package/dist/index.js +6 -3
  3. package/package.json +10 -9
  4. package/src/components/search/SearchInput.stories.tsx +6 -2
  5. package/src/components/search/SearchInput.tsx +14 -6
  6. package/src/index.css +1 -0
  7. package/src/index.ts +1 -0
  8. package/vite.config.ts +4 -1
package/dist/assets/voxel-ui.css ADDED
@@ -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,7 +887,7 @@ 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 = a > 0 && t.length > 0;
890
+ let e = t.length > 0;
891
891
  return /* @__PURE__ */ (0, d.jsxs)("div", {
892
892
  className: `${D} ${p}`.trim(),
893
893
  children: [/* @__PURE__ */ (0, d.jsxs)("div", {
@@ -907,7 +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
+ style: { right: "4px" },
911
911
  children: /* @__PURE__ */ (0, d.jsx)(m, {
912
912
  icon: v,
913
913
  color: "ghost",
@@ -926,7 +926,10 @@ function W({ variant: e = "simple", value: t, onChange: n, onClear: r, placehold
926
926
  },
927
927
  children: /* @__PURE__ */ (0, d.jsx)("div", {
928
928
  className: "bg-vsc-sidebar shadow-sm p-1.5 pt-1 ",
929
- children: g || /* @__PURE__ */ (0, d.jsxs)("p", {
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", {
930
933
  className: "text-[10px] font-mono text-vsc-muted pl-1 truncate",
931
934
  children: [
932
935
  "Showing ",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knymbus/voxel-ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.5",
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
+ }
package/src/components/search/SearchInput.stories.tsx CHANGED
@@ -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 {filteredMenuResults.length} Manifest records</div>
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={simpleQuery ? 14 : 0}
57
+ resultsCount={filteredSimpleResults.length}
54
58
  placeholder="Type track ID to evaluate records count..."
55
59
  resultIndicatorPanel={<ResultPanel />}
56
60
  />
package/src/components/search/SearchInput.tsx CHANGED
@@ -59,7 +59,7 @@ export default function SearchInput({
59
59
 
60
60
  // --- 1. SIMPLE VARIANT PANEL ---
61
61
  if (variant === 'simple') {
62
- const hasResults = resultsCount > 0 && value.length > 0;
62
+ const hasResults = value.length > 0;
63
63
 
64
64
  return (
65
65
  <div className={`${baseWrapper} ${className}`.trim()}>
@@ -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" style={{ marginRight: '4px' }}>
78
+ <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center" style={{ right: '4px' }}>
79
79
  <Button
80
80
  icon={Close}
81
81
  color="ghost"
@@ -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
- resultIndicatorPanel ? resultIndicatorPanel : (
106
- <p className="text-[10px] font-mono text-vsc-muted pl-1 truncate">
107
- Showing <span className="text-vsc-accent font-bold">{resultsCount}</span> matching database metrics records
108
- </p>
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
@@ -1,5 +1,6 @@
1
1
  @import "tailwindcss";
2
2
 
3
+ @import "tailwindcss" prefix(voxel);
3
4
 
4
5
  /* 🎛️ Tailwind v4 Theme Extension Configuration Panel */
5
6
  @theme {
package/src/index.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import './index.css';
1
2
  export * from './components/resizable';
2
3
  export * from './components/tabs';
3
4
  export * from './components/button';
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: {