@neoptocom/neopto-ui 1.6.3 → 1.6.6

package/README.md

@@ -195,7 +195,7 @@ The library uses a comprehensive design token system:
 
 ## 📚 Documentation
 
-Visit our [Storybook documentation](https://neoptocom.github.io/neopto-ui/) for:
+Visit our [Storybook documentation](https://neoptocom.github.io/neopto-ui/storybook-static) for:
 
 - Interactive component playground
 - Design system guidelines

package/dist/index.cjs

@@ -1179,13 +1179,64 @@ var Button = React11__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
+function getTextColorForBackground(bgClassName) {
+  if (!bgClassName) return "";
+  const lightColors = [
+    "white",
+    "gray-50",
+    "gray-100",
+    "slate-50",
+    "slate-100",
+    "zinc-50",
+    "zinc-100",
+    "neutral-50",
+    "neutral-100",
+    "stone-50",
+    "stone-100"
+  ];
+  const darkColors = [
+    "black",
+    "gray-900",
+    "gray-950",
+    "slate-900",
+    "slate-950",
+    "zinc-900",
+    "zinc-950",
+    "neutral-900",
+    "neutral-950",
+    "stone-900",
+    "stone-950"
+  ];
+  for (const lightColor of lightColors) {
+    if (bgClassName.includes(lightColor)) {
+      return "text-gray-900";
+    }
+  }
+  for (const darkColor of darkColors) {
+    if (bgClassName.includes(darkColor)) {
+      return "text-white";
+    }
+  }
+  const shadeMatch = bgClassName.match(/-(\d{2,3})/);
+  if (shadeMatch) {
+    const shade = parseInt(shadeMatch[1], 10);
+    if (shade >= 100 && shade <= 400) {
+      return "text-gray-900";
+    }
+    if (shade >= 500) {
+      return "text-white";
+    }
+  }
+  return "text-white";
+}
 function Chip({
   variant = "success",
   icon,
   className = "",
   label,
-  backgroundColor,
   textColor,
+  bgClassName,
+  title,
   style,
   onDelete,
   ...props
@@ -1198,28 +1249,30 @@ function Chip({
     light: "bg-[var(--muted)] text-[var(--fg)]",
     dark: "bg-[var(--surface)] text-[var(--fg)]"
   };
-  const hasCustomColors = backgroundColor || textColor;
-  const colorClasses = hasCustomColors ? "" : variantCls[variant];
+  const hasCustomTextColor = !!textColor;
+  const hasBgClassName = !!bgClassName;
+  const colorClasses = hasBgClassName ? "" : hasCustomTextColor ? "" : variantCls[variant];
+  const autoTextColor = hasBgClassName && !textColor ? getTextColorForBackground(bgClassName) : "";
   const mergedStyle = {
     ...style,
-    ...backgroundColor && { backgroundColor },
     ...textColor && { color: textColor }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [base, colorClasses, className].join(" "),
+      className: [base, colorClasses, bgClassName, autoTextColor, className].join(" "),
       style: mergedStyle,
+      title,
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5 flex-shrink-0" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
         onDelete ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             onClick: onDelete,
-            className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30",
+            className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30 flex-shrink-0",
             "aria-label": "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", size: "sm" })
           }
@@ -1628,7 +1681,7 @@ function Calendar({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "title-md", bold: "medium", className: "text-[var(--fg)]", children: MONTHS[currentMonth.getMonth()] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "title-md", className: "text-[var(--fg)]", children: MONTHS[currentMonth.getMonth()] }),
         /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "title-md", bold: "medium", className: "text-cyan-500", children: currentMonth.getFullYear() })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [

package/dist/index.d.cts

@@ -292,14 +292,16 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: "warning" | "success" | "error" | "light" | "dark";
     icon?: string;
     label?: string;
-    /** Custom background color (overrides variant) */
-    backgroundColor?: string;
     /** Custom text color (overrides variant) */
     textColor?: string;
+    /** Tailwind class for background color (overrides variant) */
+    bgClassName?: string;
+    /** Title attribute for tooltip */
+    title?: string;
     /** Optional handler to render a delete affordance */
     onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
-declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function Chip({ variant, icon, className, label, textColor, bgClassName, title, style, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
 type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value?: number;

package/dist/index.d.ts

@@ -292,14 +292,16 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: "warning" | "success" | "error" | "light" | "dark";
     icon?: string;
     label?: string;
-    /** Custom background color (overrides variant) */
-    backgroundColor?: string;
     /** Custom text color (overrides variant) */
     textColor?: string;
+    /** Tailwind class for background color (overrides variant) */
+    bgClassName?: string;
+    /** Title attribute for tooltip */
+    title?: string;
     /** Optional handler to render a delete affordance */
     onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
-declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function Chip({ variant, icon, className, label, textColor, bgClassName, title, style, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
 type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value?: number;

package/dist/index.js

@@ -1158,13 +1158,64 @@ var Button = React11.forwardRef(
   }
 );
 Button.displayName = "Button";
+function getTextColorForBackground(bgClassName) {
+  if (!bgClassName) return "";
+  const lightColors = [
+    "white",
+    "gray-50",
+    "gray-100",
+    "slate-50",
+    "slate-100",
+    "zinc-50",
+    "zinc-100",
+    "neutral-50",
+    "neutral-100",
+    "stone-50",
+    "stone-100"
+  ];
+  const darkColors = [
+    "black",
+    "gray-900",
+    "gray-950",
+    "slate-900",
+    "slate-950",
+    "zinc-900",
+    "zinc-950",
+    "neutral-900",
+    "neutral-950",
+    "stone-900",
+    "stone-950"
+  ];
+  for (const lightColor of lightColors) {
+    if (bgClassName.includes(lightColor)) {
+      return "text-gray-900";
+    }
+  }
+  for (const darkColor of darkColors) {
+    if (bgClassName.includes(darkColor)) {
+      return "text-white";
+    }
+  }
+  const shadeMatch = bgClassName.match(/-(\d{2,3})/);
+  if (shadeMatch) {
+    const shade = parseInt(shadeMatch[1], 10);
+    if (shade >= 100 && shade <= 400) {
+      return "text-gray-900";
+    }
+    if (shade >= 500) {
+      return "text-white";
+    }
+  }
+  return "text-white";
+}
 function Chip({
   variant = "success",
   icon,
   className = "",
   label,
-  backgroundColor,
   textColor,
+  bgClassName,
+  title,
   style,
   onDelete,
   ...props
@@ -1177,28 +1228,30 @@ function Chip({
     light: "bg-[var(--muted)] text-[var(--fg)]",
     dark: "bg-[var(--surface)] text-[var(--fg)]"
   };
-  const hasCustomColors = backgroundColor || textColor;
-  const colorClasses = hasCustomColors ? "" : variantCls[variant];
+  const hasCustomTextColor = !!textColor;
+  const hasBgClassName = !!bgClassName;
+  const colorClasses = hasBgClassName ? "" : hasCustomTextColor ? "" : variantCls[variant];
+  const autoTextColor = hasBgClassName && !textColor ? getTextColorForBackground(bgClassName) : "";
   const mergedStyle = {
     ...style,
-    ...backgroundColor && { backgroundColor },
     ...textColor && { color: textColor }
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: [base, colorClasses, className].join(" "),
+      className: [base, colorClasses, bgClassName, autoTextColor, className].join(" "),
       style: mergedStyle,
+      title,
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
-        /* @__PURE__ */ jsx("span", { children: label }),
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5 flex-shrink-0" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
         onDelete ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: onDelete,
-            className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30",
+            className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30 flex-shrink-0",
             "aria-label": "Remove",
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm" })
           }
@@ -1607,7 +1660,7 @@ function Calendar({
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Typo, { variant: "title-md", bold: "medium", className: "text-[var(--fg)]", children: MONTHS[currentMonth.getMonth()] }),
+        /* @__PURE__ */ jsx(Typo, { variant: "title-md", className: "text-[var(--fg)]", children: MONTHS[currentMonth.getMonth()] }),
         /* @__PURE__ */ jsx(Typo, { variant: "title-md", bold: "medium", className: "text-cyan-500", children: currentMonth.getFullYear() })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.3",
+  "version": "1.6.6",
   "private": false,
   "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+.",
   "keywords": [

package/src/components/Breadcrumb.docs.mdx

@@ -62,3 +62,9 @@ page load. The interactive example demonstrates an in-app documents flow.
 
 
 
+
+
+
+
+
+

package/src/components/Breadcrumb.stories.tsx

@@ -80,3 +80,9 @@ export const InteractiveNavigation: Story = {
 
 
 
+
+
+
+
+
+

package/src/components/Button.docs.mdx

@@ -58,3 +58,9 @@ Use variants to communicate hierarchy:
 
 
 
+
+
+
+
+
+

package/src/components/Button.stories.tsx

@@ -112,3 +112,9 @@ export const FullWidthCallToAction: Story = {
 
 
 
+
+
+
+
+
+

package/src/components/Calendar.tsx

@@ -119,7 +119,7 @@ export default function Calendar({
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
-            <Typo variant="title-md" bold="medium" className="text-[var(--fg)]">
+            <Typo variant="title-md"  className="text-[var(--fg)]">
             {MONTHS[currentMonth.getMonth()]}
             </Typo> 
             <Typo variant="title-md" bold="medium" className="text-cyan-500">

package/src/components/Card.docs.mdx

@@ -58,3 +58,9 @@ attaching click handlers to the card root.
 
 
 
+
+
+
+
+
+

package/src/components/Chip.tsx

@@ -5,21 +5,92 @@ export type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: "warning" | "success" | "error" | "light" | "dark";
   icon?: string;
   label?: string;
-  /** Custom background color (overrides variant) */
-  backgroundColor?: string;
   /** Custom text color (overrides variant) */
   textColor?: string;
+  /** Tailwind class for background color (overrides variant) */
+  bgClassName?: string;
+  /** Title attribute for tooltip */
+  title?: string;
   /** Optional handler to render a delete affordance */
   onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
+/**
+ * Detects if a Tailwind background class represents a light or dark background
+ * and returns the appropriate text color class for optimal contrast.
+ */
+function getTextColorForBackground(bgClassName: string | undefined): string {
+  if (!bgClassName) return "";
+
+  // Named light colors - use dark text
+  const lightColors = [
+    "white",
+    "gray-50",
+    "gray-100",
+    "slate-50",
+    "slate-100",
+    "zinc-50",
+    "zinc-100",
+    "neutral-50",
+    "neutral-100",
+    "stone-50",
+    "stone-100"
+  ];
+
+  // Named dark colors - use white text
+  const darkColors = [
+    "black",
+    "gray-900",
+    "gray-950",
+    "slate-900",
+    "slate-950",
+    "zinc-900",
+    "zinc-950",
+    "neutral-900",
+    "neutral-950",
+    "stone-900",
+    "stone-950"
+  ];
+
+  // Check for named colors
+  for (const lightColor of lightColors) {
+    if (bgClassName.includes(lightColor)) {
+      return "text-gray-900";
+    }
+  }
+
+  for (const darkColor of darkColors) {
+    if (bgClassName.includes(darkColor)) {
+      return "text-white";
+    }
+  }
+
+  // Extract shade number from patterns like bg-blue-500, bg-purple-200, etc.
+  const shadeMatch = bgClassName.match(/-(\d{2,3})/);
+  if (shadeMatch) {
+    const shade = parseInt(shadeMatch[1], 10);
+    // Shades 100-400 are typically light, use dark text
+    if (shade >= 100 && shade <= 400) {
+      return "text-gray-900";
+    }
+    // Shades 500-950 are typically dark, use white text
+    if (shade >= 500) {
+      return "text-white";
+    }
+  }
+
+  // Default to white text if pattern is unclear (safer for most backgrounds)
+  return "text-white";
+}
+
 export default function Chip({
   variant = "success",
   icon,
   className = "",
   label,
-  backgroundColor,
   textColor,
+  bgClassName,
+  title,
   style,
   onDelete,
   ...props
@@ -37,30 +108,34 @@ export default function Chip({
     dark: "bg-[var(--surface)] text-[var(--fg)]"
   };
 
-  // Use custom colors if provided, otherwise use variant styles
-  const hasCustomColors = backgroundColor || textColor;
-  const colorClasses = hasCustomColors ? "" : variantCls[variant];
+  // Use bgClassName if provided, otherwise use custom text color, otherwise use variant styles
+  const hasCustomTextColor = !!textColor;
+  const hasBgClassName = !!bgClassName;
+  const colorClasses = hasBgClassName ? "" : hasCustomTextColor ? "" : variantCls[variant];
+
+  // Automatically detect text color for custom background classes
+  const autoTextColor = hasBgClassName && !textColor ? getTextColorForBackground(bgClassName) : "";
 
-  // Merge custom colors into style prop
+  // Merge custom text color into style prop
   const mergedStyle: React.CSSProperties = {
     ...style,
-    ...(backgroundColor && { backgroundColor }),
     ...(textColor && { color: textColor })
   };
 
   return (
     <div
-      className={[base, colorClasses, className].join(" ")}
+      className={[base, colorClasses, bgClassName, autoTextColor, className].join(" ")}
       style={mergedStyle}
+      title={title}
       {...props}
     >
-      {icon ? <Icon name={icon} size="sm" className="mr-0.5" /> : null}
-      <span>{label}</span>
+      {icon ? <Icon name={icon} size="sm" className="mr-0.5 flex-shrink-0" /> : null}
+      <span className="truncate">{label}</span>
       {onDelete ? (
         <button
           type="button"
           onClick={onDelete}
-          className="ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30"
+          className="ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30 flex-shrink-0"
           aria-label="Remove"
         >
           <Icon name="close" size="sm" />

package/src/stories/Chip.stories.tsx

@@ -48,4 +48,51 @@ export const Deletable: Story = {
   )
 };
 
+export const CustomBackgroundColor: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Dark backgrounds (auto white text):</p>
+        <div className="flex flex-wrap items-center gap-3">
+          <Chip bgClassName="bg-blue-500" label="Blue 500" title="Custom blue background" />
+          <Chip bgClassName="bg-purple-500" label="Purple 500" title="Custom purple background" />
+          <Chip bgClassName="bg-pink-500" label="Pink 500" title="Custom pink background" />
+          <Chip bgClassName="bg-indigo-500" label="Indigo 500" title="Custom indigo background" />
+          <Chip bgClassName="bg-teal-500" label="Teal 500" title="Custom teal background" />
+          <Chip bgClassName="bg-orange-500" label="Orange 500" title="Custom orange background" />
+          <Chip bgClassName="bg-cyan-500" label="Cyan 500" title="Custom cyan background" />
+          <Chip bgClassName="bg-emerald-500" label="Emerald 500" title="Custom emerald background" />
+          <Chip bgClassName="bg-red-600" label="Red 600" title="Custom red background" />
+          <Chip bgClassName="bg-gray-900" label="Gray 900" title="Custom gray background" />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Light backgrounds (auto dark text):</p>
+        <div className="flex flex-wrap items-center gap-3">
+          <Chip bgClassName="bg-blue-200" label="Blue 200" title="Light blue background" />
+          <Chip bgClassName="bg-purple-200" label="Purple 200" title="Light purple background" />
+          <Chip bgClassName="bg-pink-200" label="Pink 200" title="Light pink background" />
+          <Chip bgClassName="bg-indigo-200" label="Indigo 200" title="Light indigo background" />
+          <Chip bgClassName="bg-teal-200" label="Teal 200" title="Light teal background" />
+          <Chip bgClassName="bg-orange-200" label="Orange 200" title="Light orange background" />
+          <Chip bgClassName="bg-cyan-200" label="Cyan 200" title="Light cyan background" />
+          <Chip bgClassName="bg-emerald-200" label="Emerald 200" title="Light emerald background" />
+          <Chip bgClassName="bg-yellow-300" label="Yellow 300" title="Light yellow background" />
+          <Chip bgClassName="bg-white" label="White" title="White background" />
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export const CustomBackgroundWithIcon: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Chip bgClassName="bg-blue-500" icon="check" label="Completed" title="Task completed" />
+      <Chip bgClassName="bg-purple-500" icon="star" label="Featured" title="Featured item" />
+      <Chip bgClassName="bg-pink-500" icon="favorite" label="Favorite" title="Marked as favorite" />
+      <Chip bgClassName="bg-indigo-500" icon="schedule" label="Scheduled" title="Scheduled for later" />
+    </div>
+  )
+};
 

package/src/stories/DateInput.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DateInput } from "../components/DateInput";
+import * as assets from "../assets";
 
 const meta: Meta<typeof DateInput> = {
   title: "Components/DateInput",
@@ -134,3 +135,23 @@ export const Multiple: Story = {
   }
 };
 
+export const WithBackgroundImages: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | null>(null);
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Select date"
+          value={date}
+          onChange={(d) => setDate(d)}
+          lightBackgroundImage={assets.bgLight}
+          darkBackgroundImage={assets.bgDark}
+        />
+        <p className="text-xs text-[var(--muted-fg)]">
+          Calendar popup uses background images that adapt to light/dark mode.
+        </p>
+      </div>
+    );
+  }
+};
+

package/src/styles/library.css

@@ -31,7 +31,6 @@
   vertical-align: middle;
   white-space: nowrap;
   -webkit-font-smoothing: antialiased;
-  color: inherit;
 }
 
 .btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }

package/src/styles/tailwind.css

@@ -34,7 +34,6 @@
   vertical-align: middle;
   white-space: nowrap;
   -webkit-font-smoothing: antialiased;
-  color: inherit;
 }
 
 /* Optional shared utility classes used by some components */