@seekho/ui 0.1.13 → 0.1.16

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 (5) hide show
  1. package/dist/index.js +10 -8
  2. package/dist/index.mjs +10 -8
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
  5. package/readme.md +40 -54
package/dist/index.js CHANGED
@@ -102,7 +102,7 @@ function AutoComplete({
102
102
  {
103
103
  className: [
104
104
  "absolute inset-0 rounded-md border pointer-events-none transition-colors",
105
- error ? "border-red-400" : open ? "border-basePurple border-2" : "border-gray-300"
105
+ error ? "border-red-400" : open ? "border-primary border-2" : "border-gray-300"
106
106
  ].join(" "),
107
107
  style: { paddingLeft: "8px" },
108
108
  children: label && /* @__PURE__ */ jsxRuntime.jsx(
@@ -126,7 +126,7 @@ function AutoComplete({
126
126
  className: [
127
127
  "absolute left-3 transition-all duration-150 pointer-events-none",
128
128
  isFloated ? "-top-[9px] text-[11px] bg-white px-1" : "top-1/2 -translate-y-1/2 text-[13px]",
129
- error ? "text-red-500" : isFloated || open ? "text-basePurple" : "text-gray-500"
129
+ error ? "text-red-500" : isFloated || open ? "text-primary" : "text-gray-500"
130
130
  ].join(" "),
131
131
  children: label
132
132
  }
@@ -245,7 +245,7 @@ function AutoComplete({
245
245
  onMouseEnter: () => setHighlightedIndex(idx),
246
246
  className: [
247
247
  "px-3 py-2 text-[13px] cursor-pointer select-none",
248
- highlightedIndex === idx ? "bg-basePurple/10 text-basePurple" : "text-gray-700",
248
+ highlightedIndex === idx ? "bg-primary/10 text-primary" : "text-gray-700",
249
249
  isSelected({ option }) ? "font-semibold" : ""
250
250
  ].join(" ")
251
251
  };
@@ -358,8 +358,8 @@ var CopyId = ({
358
358
  {
359
359
  onClick: handleClick,
360
360
  className: [
361
- "border border-basePurple px-3 py-[1px] text-basePurple",
362
- "rounded-[24px] text-[11px] mt-1 hover:bg-basePurple/10 transition-colors",
361
+ "border border-primary px-3 py-[1px] text-primary",
362
+ "rounded-[24px] text-[11px] mt-1 hover:bg-primary/10 transition-colors",
363
363
  className || ""
364
364
  ].join(" "),
365
365
  children: [
@@ -493,7 +493,7 @@ function Modal({
493
493
  className: [
494
494
  "px-4 py-2 text-white rounded-md text-[14px] font-semibold",
495
495
  "disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
496
- isWarning ? "bg-red-600 hover:bg-red-700" : "bg-basePurple hover:bg-basePurple/80"
496
+ isWarning ? "bg-red-600 hover:bg-red-700" : "bg-primary hover:bg-primary/80"
497
497
  ].join(" "),
498
498
  children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
499
499
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -549,7 +549,9 @@ function ReadMore({
549
549
  const isLong = (displayText == null ? void 0 : displayText.length) > numberOfCharactersToShow;
550
550
  const handleCopy = async (e) => {
551
551
  e.stopPropagation();
552
- const success = await handleCopyTextToClipboard({ clipboardText: displayText });
552
+ const success = await handleCopyTextToClipboard({
553
+ clipboardText: displayText
554
+ });
553
555
  onCopy == null ? void 0 : onCopy(success);
554
556
  };
555
557
  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -566,7 +568,7 @@ function ReadMore({
566
568
  "button",
567
569
  {
568
570
  onClick: handleToggleReadMore,
569
- className: "text-basePurple cursor-pointer font-semibold text-[11px]",
571
+ className: "text-primary cursor-pointer font-semibold text-[11px]",
570
572
  children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
571
573
  showCopy && /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: handleCopy, children: /* @__PURE__ */ jsxRuntime.jsxs(
572
574
  "svg",
package/dist/index.mjs CHANGED
@@ -96,7 +96,7 @@ function AutoComplete({
96
96
  {
97
97
  className: [
98
98
  "absolute inset-0 rounded-md border pointer-events-none transition-colors",
99
- error ? "border-red-400" : open ? "border-basePurple border-2" : "border-gray-300"
99
+ error ? "border-red-400" : open ? "border-primary border-2" : "border-gray-300"
100
100
  ].join(" "),
101
101
  style: { paddingLeft: "8px" },
102
102
  children: label && /* @__PURE__ */ jsx(
@@ -120,7 +120,7 @@ function AutoComplete({
120
120
  className: [
121
121
  "absolute left-3 transition-all duration-150 pointer-events-none",
122
122
  isFloated ? "-top-[9px] text-[11px] bg-white px-1" : "top-1/2 -translate-y-1/2 text-[13px]",
123
- error ? "text-red-500" : isFloated || open ? "text-basePurple" : "text-gray-500"
123
+ error ? "text-red-500" : isFloated || open ? "text-primary" : "text-gray-500"
124
124
  ].join(" "),
125
125
  children: label
126
126
  }
@@ -239,7 +239,7 @@ function AutoComplete({
239
239
  onMouseEnter: () => setHighlightedIndex(idx),
240
240
  className: [
241
241
  "px-3 py-2 text-[13px] cursor-pointer select-none",
242
- highlightedIndex === idx ? "bg-basePurple/10 text-basePurple" : "text-gray-700",
242
+ highlightedIndex === idx ? "bg-primary/10 text-primary" : "text-gray-700",
243
243
  isSelected({ option }) ? "font-semibold" : ""
244
244
  ].join(" ")
245
245
  };
@@ -352,8 +352,8 @@ var CopyId = ({
352
352
  {
353
353
  onClick: handleClick,
354
354
  className: [
355
- "border border-basePurple px-3 py-[1px] text-basePurple",
356
- "rounded-[24px] text-[11px] mt-1 hover:bg-basePurple/10 transition-colors",
355
+ "border border-primary px-3 py-[1px] text-primary",
356
+ "rounded-[24px] text-[11px] mt-1 hover:bg-primary/10 transition-colors",
357
357
  className || ""
358
358
  ].join(" "),
359
359
  children: [
@@ -487,7 +487,7 @@ function Modal({
487
487
  className: [
488
488
  "px-4 py-2 text-white rounded-md text-[14px] font-semibold",
489
489
  "disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
490
- isWarning ? "bg-red-600 hover:bg-red-700" : "bg-basePurple hover:bg-basePurple/80"
490
+ isWarning ? "bg-red-600 hover:bg-red-700" : "bg-primary hover:bg-primary/80"
491
491
  ].join(" "),
492
492
  children: isLoading ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
493
493
  /* @__PURE__ */ jsxs(
@@ -543,7 +543,9 @@ function ReadMore({
543
543
  const isLong = (displayText == null ? void 0 : displayText.length) > numberOfCharactersToShow;
544
544
  const handleCopy = async (e) => {
545
545
  e.stopPropagation();
546
- const success = await handleCopyTextToClipboard({ clipboardText: displayText });
546
+ const success = await handleCopyTextToClipboard({
547
+ clipboardText: displayText
548
+ });
547
549
  onCopy == null ? void 0 : onCopy(success);
548
550
  };
549
551
  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -560,7 +562,7 @@ function ReadMore({
560
562
  "button",
561
563
  {
562
564
  onClick: handleToggleReadMore,
563
- className: "text-basePurple cursor-pointer font-semibold text-[11px]",
565
+ className: "text-primary cursor-pointer font-semibold text-[11px]",
564
566
  children: isExpanded ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
565
567
  showCopy && /* @__PURE__ */ jsx("span", { onClick: handleCopy, children: /* @__PURE__ */ jsxs(
566
568
  "svg",
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.left-3{left:.75rem}.top-1\/2{top:50%}.z-50{z-index:50}.z-\[999\]{z-index:999}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-0{height:0}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.max-h-56{max-height:14rem}.max-h-\[95vh\]{max-height:95vh}.max-h-full{max-height:100%}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-80{width:20rem}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.w-\[20px\]{width:20px}.w-\[95\%\]{width:95%}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.break-all{word-break:break-all}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-basePurple{--tw-border-opacity:1;border-color:rgb(83 79 143/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.bg-basePurple{--tw-bg-opacity:1;background-color:rgb(83 79 143/var(--tw-bg-opacity,1))}.bg-basePurple\/10{background-color:rgba(83,79,143,.1)}.bg-basePurple\/20{background-color:rgba(83,79,143,.2)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[17px\]{font-size:17px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.leading-\[20px\]{line-height:20px}.tracking-wide{letter-spacing:.025em}.text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-basePurple{--tw-text-opacity:1;color:rgb(83 79 143/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-25{opacity:.25}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.placeholder\:text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:text-\[13px\]::placeholder{font-size:13px}.hover\:bg-basePurple\/10:hover{background-color:rgba(83,79,143,.1)}.hover\:bg-basePurple\/80:hover{background-color:rgba(83,79,143,.8)}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:no-underline:hover{text-decoration-line:none}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.lg\:w-\[30\%\]{width:30%}}
1
+ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.left-3{left:.75rem}.top-1\/2{top:50%}.z-50{z-index:50}.z-\[999\]{z-index:999}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-0{height:0}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.max-h-56{max-height:14rem}.max-h-\[95vh\]{max-height:95vh}.max-h-full{max-height:100%}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-80{width:20rem}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.w-\[20px\]{width:20px}.w-\[95\%\]{width:95%}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.break-all{word-break:break-all}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-primary{border-color:var(--color-primary,#534f8f)}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.bg-primary{background-color:var(--color-primary,#534f8f)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[17px\]{font-size:17px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.leading-\[20px\]{line-height:20px}.tracking-wide{letter-spacing:.025em}.text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-primary{color:var(--color-primary,#534f8f)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-25{opacity:.25}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.placeholder\:text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:text-\[13px\]::placeholder{font-size:13px}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:no-underline:hover{text-decoration-line:none}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.lg\:w-\[30\%\]{width:30%}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seekho/ui",
3
- "version": "0.1.13",
3
+ "version": "0.1.16",
4
4
  "description": "Seekho internal UI component library",
5
5
  "keywords": [
6
6
  "seekho",
package/readme.md CHANGED
@@ -1,103 +1,89 @@
1
1
  # seekho-ui
2
2
 
3
- Seekho internal UI component library — shared components, hooks, and utilities for internal tools built on React + Tailwind.
3
+ A React component library built with TypeScript and Tailwind CSS — pre-built CSS included, works with any Tailwind version or no Tailwind at all.
4
4
 
5
- ## What's included
5
+ ## Components
6
6
 
7
7
  | Export | Description |
8
8
  | ------ | ----------- |
9
- | `<Modal>` | Confirmation/dialog modal with hotkey support (Enter to confirm, Esc to close), loading state, warning variant, and stacked modal management |
9
+ | `<Modal>` | Confirmation/dialog modal with hotkey support (Enter to confirm, Esc to close), loading state, and warning variant |
10
+ | `<AutoComplete>` | Fully custom autocomplete with keyboard navigation, filtering, loading state, and custom render support |
11
+ | `<SearchBar>` | Search input with clear button and URL param support |
12
+ | `<ReadMore>` | Truncated text with expand/collapse and optional copy |
13
+ | `<CopyId>` | Pill button that copies an ID to clipboard |
14
+ | `<ButtonLoader>` | Animated spinner for button loading states |
15
+ | `<CustomAnchor>` | Anchor tag with new tab support |
10
16
  | `useLocalStorage` | useState backed by localStorage |
11
17
  | `cn()` | Utility to merge Tailwind class names |
18
+ | `handleCopyTextToClipboard()` | Cross-browser clipboard copy (Chrome + Safari) |
12
19
 
13
- ## Development
14
-
15
- ```bash
16
- npm install
17
- npm run storybook # component playground at http://localhost:6006
18
- npm run build # build dist/
19
- npm run lint # type check
20
- ```
21
-
22
- ## Using in a consumer project
23
-
24
- ### 1. Install
20
+ ## Installation
25
21
 
26
22
  ```bash
27
23
  npm install @seekho/ui
28
24
  ```
29
25
 
30
- ### 2. Install peer dependencies
26
+ ### Peer dependencies
31
27
 
32
28
  ```bash
33
29
  npm install react-hotkeys-hook
34
30
  ```
35
31
 
36
- ### 3. Import styles once
32
+ ### Import styles
37
33
 
38
- In your app's entry file (`src/index.tsx`, `src/main.tsx`, `app/layout.tsx`, or `pages/_app.tsx`):
34
+ Add once to your app's entry file:
39
35
 
40
36
  ```tsx
41
37
  import "@seekho/ui/styles.css";
42
38
  ```
43
39
 
44
- > The CSS is pre-built and works with any Tailwind version (v3, v4, or no Tailwind at all) — no PostCSS configuration needed.
40
+ ### Theming
45
41
 
46
- ### 4. Use components
42
+ Override the primary color via a CSS variable:
47
43
 
48
- ```tsx
49
- import { Modal } from "@seekho/ui";
44
+ ```css
45
+ :root {
46
+ --color-primary: #534f8f; /* defaults to #534f8f if not set */
47
+ }
50
48
  ```
51
49
 
52
- Refer to Storybook for usage examples of each component.
53
-
54
- ## Modal props
50
+ ### Usage
55
51
 
56
- | Prop | Type | Default | Description |
57
- | ---- | ---- | ------- | ----------- |
58
- | `show` | `boolean` | required | Controls visibility |
59
- | `title` | `string` | `""` | Modal header title |
60
- | `onHide` | `() => void` | — | Called on Cancel / Esc key |
61
- | `handleConfirmation` | `() => void` | — | Called on Confirm / Enter key |
62
- | `handleConfirmationBtnText` | `string` | `"Confirm"` | Confirm button label |
63
- | `isLoading` | `boolean` | `false` | Shows spinner, disables buttons |
64
- | `isWarning` | `boolean` | `false` | Red confirm button + warning icon |
65
- | `isButtonsRequired` | `boolean` | `true` | Hide footer buttons if false |
66
- | `className` | `string` | — | Extra classes on the modal panel |
67
- | `children` | `ReactNode` | — | Modal body content |
52
+ ```tsx
53
+ import { Modal, AutoComplete, SearchBar } from "@seekho/ui";
54
+ ```
68
55
 
69
- ## Publishing
56
+ ## Development
70
57
 
71
58
  ```bash
72
- git add .
73
- git commit -m "your message"
74
- npm version patch # or minor / major
75
- npm publish
59
+ npm install
60
+ npm run storybook # component playground at http://localhost:6006
61
+ npm run build # build dist/
62
+ npm run lint # type check
76
63
  ```
77
64
 
78
- ## Adding a new component
65
+ ## Contributing
79
66
 
80
67
  ```text
81
68
  src/components/
82
69
  └── MyComponent/
83
- ├── MyComponent.tsx # component + types
70
+ ├── MyComponent.tsx
84
71
  ├── MyComponent.stories.tsx
85
- └── index.ts # re-export
72
+ └── index.ts
86
73
  ```
87
74
 
88
- Then add `export * from "./MyComponent"` to [src/components/index.ts](src/components/index.ts).
75
+ Add `export * from "./MyComponent"` to [src/components/index.ts](src/components/index.ts).
89
76
 
90
77
  ## Project structure
91
78
 
92
79
  ```text
93
80
  seekho-ui/
94
81
  ├── src/
95
- │ ├── components/ # React components
96
- │ ├── hooks/ # Shared React hooks
97
- │ ├── utils/ # Pure utility functions
98
- │ └── index.ts # Single entry point
99
- ├── .storybook/ # Storybook config
100
- ├── postcss.config.js # PostCSS (Tailwind v3 for Storybook)
101
- ├── tailwind.config.js # Tailwind config + brand colors
102
- └── tsup.config.ts # Build config
82
+ │ ├── components/
83
+ │ ├── hooks/
84
+ │ ├── utils/
85
+ │ └── index.ts
86
+ ├── .storybook/
87
+ ├── tailwind.config.js
88
+ └── tsup.config.ts
103
89
  ```