@neoptocom/neopto-ui 0.8.0 → 0.8.1

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 (6) hide show
  1. package/dist/index.cjs +22 -4
  2. package/dist/index.d.cts +5 -1
  3. package/dist/index.d.ts +5 -1
  4. package/dist/index.js +22 -4
  5. package/package.json +1 -1
  6. package/src/components/Chip.tsx +24 -2
package/dist/index.cjs CHANGED
@@ -891,6 +891,9 @@ function Chip({
891
891
  icon,
892
892
  className = "",
893
893
  label,
894
+ backgroundColor,
895
+ textColor,
896
+ style,
894
897
  ...props
895
898
  }) {
896
899
  const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold";
@@ -901,10 +904,25 @@ function Chip({
901
904
  light: "bg-[var(--muted)] text-[var(--fg)]",
902
905
  dark: "bg-[var(--surface)] text-[var(--fg)]"
903
906
  };
904
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [base, variantCls[variant], className].join(" "), ...props, children: [
905
- icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
906
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
907
- ] });
907
+ const hasCustomColors = backgroundColor || textColor;
908
+ const colorClasses = hasCustomColors ? "" : variantCls[variant];
909
+ const mergedStyle = {
910
+ ...style,
911
+ ...backgroundColor && { backgroundColor },
912
+ ...textColor && { color: textColor }
913
+ };
914
+ return /* @__PURE__ */ jsxRuntime.jsxs(
915
+ "div",
916
+ {
917
+ className: [base, colorClasses, className].join(" "),
918
+ style: mergedStyle,
919
+ ...props,
920
+ children: [
921
+ icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
922
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
923
+ ]
924
+ }
925
+ );
908
926
  }
909
927
  function Counter({
910
928
  value = 0,
package/dist/index.d.cts CHANGED
@@ -214,8 +214,12 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
214
214
  variant?: "warning" | "success" | "error" | "light" | "dark";
215
215
  icon?: string;
216
216
  label?: string;
217
+ /** Custom background color (overrides variant) */
218
+ backgroundColor?: string;
219
+ /** Custom text color (overrides variant) */
220
+ textColor?: string;
217
221
  };
218
- declare function Chip({ variant, icon, className, label, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
222
+ declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
219
223
 
220
224
  type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
221
225
  value?: number;
package/dist/index.d.ts CHANGED
@@ -214,8 +214,12 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
214
214
  variant?: "warning" | "success" | "error" | "light" | "dark";
215
215
  icon?: string;
216
216
  label?: string;
217
+ /** Custom background color (overrides variant) */
218
+ backgroundColor?: string;
219
+ /** Custom text color (overrides variant) */
220
+ textColor?: string;
217
221
  };
218
- declare function Chip({ variant, icon, className, label, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
222
+ declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
219
223
 
220
224
  type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
221
225
  value?: number;
package/dist/index.js CHANGED
@@ -870,6 +870,9 @@ function Chip({
870
870
  icon,
871
871
  className = "",
872
872
  label,
873
+ backgroundColor,
874
+ textColor,
875
+ style,
873
876
  ...props
874
877
  }) {
875
878
  const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold";
@@ -880,10 +883,25 @@ function Chip({
880
883
  light: "bg-[var(--muted)] text-[var(--fg)]",
881
884
  dark: "bg-[var(--surface)] text-[var(--fg)]"
882
885
  };
883
- return /* @__PURE__ */ jsxs("div", { className: [base, variantCls[variant], className].join(" "), ...props, children: [
884
- icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
885
- /* @__PURE__ */ jsx("span", { children: label })
886
- ] });
886
+ const hasCustomColors = backgroundColor || textColor;
887
+ const colorClasses = hasCustomColors ? "" : variantCls[variant];
888
+ const mergedStyle = {
889
+ ...style,
890
+ ...backgroundColor && { backgroundColor },
891
+ ...textColor && { color: textColor }
892
+ };
893
+ return /* @__PURE__ */ jsxs(
894
+ "div",
895
+ {
896
+ className: [base, colorClasses, className].join(" "),
897
+ style: mergedStyle,
898
+ ...props,
899
+ children: [
900
+ icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
901
+ /* @__PURE__ */ jsx("span", { children: label })
902
+ ]
903
+ }
904
+ );
887
905
  }
888
906
  function Counter({
889
907
  value = 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "private": false,
5
5
  "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
6
6
  "keywords": [
package/src/components/Chip.tsx CHANGED
@@ -5,6 +5,10 @@ export type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
5
5
  variant?: "warning" | "success" | "error" | "light" | "dark";
6
6
  icon?: string;
7
7
  label?: string;
8
+ /** Custom background color (overrides variant) */
9
+ backgroundColor?: string;
10
+ /** Custom text color (overrides variant) */
11
+ textColor?: string;
8
12
  };
9
13
 
10
14
  export default function Chip({
@@ -12,13 +16,16 @@ export default function Chip({
12
16
  icon,
13
17
  className = "",
14
18
  label,
19
+ backgroundColor,
20
+ textColor,
21
+ style,
15
22
  ...props
16
23
  }: ChipProps) {
17
24
  const base =
18
25
  "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 " +
19
26
  "text-xs font-semibold";
20
27
 
21
- // Token-based backgrounds + readable text
28
+ // Token-based backgrounds + readable text (only used if no custom colors)
22
29
  const variantCls: Record<NonNullable<ChipProps["variant"]>, string> = {
23
30
  warning: "bg-[var(--warning)] text-white",
24
31
  success: "bg-[var(--success)] text-white",
@@ -27,8 +34,23 @@ export default function Chip({
27
34
  dark: "bg-[var(--surface)] text-[var(--fg)]"
28
35
  };
29
36
 
37
+ // Use custom colors if provided, otherwise use variant styles
38
+ const hasCustomColors = backgroundColor || textColor;
39
+ const colorClasses = hasCustomColors ? "" : variantCls[variant];
40
+
41
+ // Merge custom colors into style prop
42
+ const mergedStyle: React.CSSProperties = {
43
+ ...style,
44
+ ...(backgroundColor && { backgroundColor }),
45
+ ...(textColor && { color: textColor }),
46
+ };
47
+
30
48
  return (
31
- <div className={[base, variantCls[variant], className].join(" ")} {...props}>
49
+ <div
50
+ className={[base, colorClasses, className].join(" ")}
51
+ style={mergedStyle}
52
+ {...props}
53
+ >
32
54
  {icon ? <Icon name={icon} size="sm" className="mr-0.5" /> : null}
33
55
  <span>{label}</span>
34
56
  </div>