neogestify-ui-components 1.2.21 → 2.0.0

package/src/components/html/Input.tsx

@@ -4,12 +4,16 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string | ReactNode;
   error?: string;
   helperText?: string;
+  icon?: ReactNode;
+  iconSide?: 'left' | 'right';
 }
 
 export const Input: FC<InputProps> = ({
   label,
   error,
   helperText,
+  icon,
+  iconSide = 'left',
   className = '',
   id,
   type,
@@ -20,7 +24,9 @@ export const Input: FC<InputProps> = ({
   // ── Default text input ────────────────────────────────────────────────────
   const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
   const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
-  const classes = `${baseClasses} ${errorClasses} ${className}`;
+  const iconPaddingLeft = icon && iconSide === 'left' ? 'pl-9' : '';
+  const iconPaddingRight = icon && iconSide === 'right' ? 'pr-9' : '';
+  const classes = `${baseClasses} ${errorClasses} ${iconPaddingLeft} ${iconPaddingRight} ${className}`.trim();
 
   // ── Checkbox / Radio ──────────────────────────────────────────────────────
   const toggleShape = type === 'radio' ? 'rounded-full' : 'rounded';
@@ -37,37 +43,31 @@ export const Input: FC<InputProps> = ({
   const wrapperBase = 'space-y-1 w-full';
   const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
 
+  const labelNode = label && (
+    typeof label === 'string' ? (
+      <label htmlFor={inputId} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        {label}
+      </label>
+    ) : label
+  );
+
+  const errorNode = error && (
+    <p className="text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>
+  );
+
+  const helperNode = helperText && !error && (
+    <p className="text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
+  );
+
   if (type === 'checkbox' || type === 'radio') {
     return (
       <div className={wrapperClasses}>
         <div className="flex items-center space-x-2">
-          <input
-            id={inputId}
-            type={type}
-            className={toggleClasses}
-            {...props}
-          />
-          {label && typeof label === 'string' ? (
-            <label
-              htmlFor={inputId}
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >
-              {label}
-            </label>
-          ) : (
-            label
-          )}
+          <input id={inputId} type={type} className={toggleClasses} {...props} />
+          {labelNode}
         </div>
-        {error && (
-          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-            {error}
-          </p>
-        )}
-        {helperText && !error && (
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {helperText}
-          </p>
-        )}
+        {errorNode}
+        {helperNode}
       </div>
     );
   }
@@ -75,64 +75,32 @@ export const Input: FC<InputProps> = ({
   if (type === 'file') {
     return (
       <div className={wrapperClasses}>
-        {label && typeof label === 'string' ? (
-          <label
-            htmlFor={inputId}
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            {label}
-          </label>
-        ) : (
-          label
-        )}
-        <input
-          id={inputId}
-          type="file"
-          className={fileClasses}
-          {...props}
-        />
-        {error && (
-          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-            {error}
-          </p>
-        )}
-        {helperText && !error && (
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {helperText}
-          </p>
-        )}
+        {labelNode}
+        <input id={inputId} type="file" className={fileClasses} {...props} />
+        {errorNode}
+        {helperNode}
       </div>
     );
   }
 
   return (
     <div className={wrapperClasses}>
-      {label && typeof label === 'string' ? (
-        <label
-          htmlFor={inputId}
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          {label}
-        </label>
-      ) : (
-        label
-      )}
-      <input
-        id={inputId}
-        className={classes}
-        type={type}
-        {...props}
-      />
-      {error && (
-        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-          {error}
-        </p>
-      )}
-      {helperText && !error && (
-        <p className="text-sm text-gray-500 dark:text-gray-400">
-          {helperText}
-        </p>
-      )}
+      {labelNode}
+      <div className="relative">
+        {icon && iconSide === 'left' && (
+          <div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500">
+            {icon}
+          </div>
+        )}
+        <input id={inputId} className={classes} type={type} {...props} />
+        {icon && iconSide === 'right' && (
+          <div className="pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500">
+            {icon}
+          </div>
+        )}
+      </div>
+      {errorNode}
+      {helperNode}
     </div>
   );
-};
+};

package/src/components/icons/icons.tsx

@@ -111,19 +111,6 @@ export function LogoutIcon({ className }: Props) {
     )
 }
 
-export function TruckIcon({ className }: Props) {
-    return (
-        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-            />
-        </svg>
-    )
-}
-
 export function HomeIcon({ className }: Props) {
     return (
         <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -498,7 +485,7 @@ export function PasteIcon({ className }: Props) {
 
 export function RestaurantMenuIcon({ className }: Props) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.412-.587T4 20v-2q-.425 0-.712-.288T3 17t.288-.712T4 16v-3q-.425 0-.712-.288T3 12t.288-.712T4 11V8q-.425 0-.712-.288T3 7t.288-.712T4 6V4q0-.825.588-1.412T6 2h12q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4H6v2q.425 0 .713.288T7 7t-.288.713T6 8v3q.425 0 .713.288T7 12t-.288.713T6 13v3q.425 0 .713.288T7 17t-.288.713T6 18zm3.5-7v3.25q0 .325.213.538t.537.212.538-.213.212-.537V13q.65-.175 1.075-.712t.425-1.213V7.5q0-.2-.15-.35T12 7t-.35.15-.15.35v3.275h-.75V7.5q0-.2-.15-.35T10.25 7t-.35.15-.15.35v3.275H9V7.5q0-.2-.15-.35T8.5 7t-.35.15T8 7.5v3.575q0 .675.425 1.213T9.5 13m5.5 0v3.25q0 .325.213.538t.537.212.538-.213.212-.537V7.575q0-.275-.187-.425T15.825 7q-.325 0-.712.175t-.738.525q-.425.425-.65.963T13.5 9.825V12q0 .425.288.713T14.5 13zm-9 7V4z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.412-.587T4 20v-2q-.425 0-.712-.288T3 17t.288-.712T4 16v-3q-.425 0-.712-.288T3 12t.288-.712T4 11V8q-.425 0-.712-.288T3 7t.288-.712T4 6V4q0-.825.588-1.412T6 2h12q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4H6v2q.425 0 .713.288T7 7t-.288.713T6 8v3q.425 0 .713.288T7 12t-.288.713T6 13v3q.425 0 .713.288T7 17t-.288.713T6 18zm3.5-7v3.25q0 .325.213.538t.537.212.538-.213.212-.537V13q.65-.175 1.075-.712t.425-1.213V7.5q0-.2-.15-.35T12 7t-.35.15-.15.35v3.275h-.75V7.5q0-.2-.15-.35T10.25 7t-.35.15-.15.35v3.275H9V7.5q0-.2-.15-.35T8.5 7t-.35.15T8 7.5v3.575q0 .675.425 1.213T9.5 13m5.5 0v3.25q0 .325.213.538t.537.212.538-.213.212-.537V7.575q0-.275-.187-.425T15.825 7q-.325 0-.712.175t-.738.525q-.425.425-.65.963T13.5 9.825V12q0 .425.288.713T14.5 13zm-9 7V4z" /></svg>
     )
 }
 
@@ -548,4 +535,156 @@ export function MonitorIcon({ className }: Props) {
             <path fill="currentColor" d="M4 18q-.825 0-1.412-.587T2 16V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v11q0 .825-.587 1.413T20 18h-3l.7.7q.15.15.225.338t.075.387V20q0 .425-.288.712T17 21H7q-.425 0-.712-.288T6 20v-.575q0-.2.075-.387T6.3 18.7L7 18zm0-2h16V5H4zm0 0V5z" />
         </svg>
     )
+}
+
+export function TruckIcon({ className }: Props) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
+        </svg>
+    )
+}
+
+export function IconCursor({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M2 1l12 5.5-5.5 1.5L7 13.5 2 1z" />
+    </svg>
+  );
+}
+
+export function IconHand({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M8 1a1 1 0 011 1v4.586l1.293-1.293a1 1 0 111.414 1.414L8 10.414 4.293 6.707a1 1 0 111.414-1.414L7 6.586V2a1 1 0 011-1z" />
+      <path d="M3 8a1 1 0 011-1h.5V4.5a1 1 0 012 0V7h1V3.5a1 1 0 012 0V7h1V4.5a1 1 0 012 0V9a5 5 0 01-5 5H6A3 3 0 013 11V8z" />
+    </svg>
+  );
+}
+
+export function IconGrid({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path
+        fillRule="evenodd"
+        d="M1 1h6v6H1V1zm8 0h6v6H9V1zM1 9h6v6H1V9zm8 0h6v6H9V9z"
+        clipRule="evenodd"
+        opacity={0.7}
+      />
+    </svg>
+  );
+}
+
+export function IconZoomIn({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M6.5 1a5.5 5.5 0 104.39 8.803l3.154 3.153a.75.75 0 001.06-1.06l-3.153-3.154A5.5 5.5 0 006.5 1zM2.5 6.5a4 4 0 118 0 4 4 0 01-8 0zM6 4.75a.75.75 0 011.5 0V6h1.25a.75.75 0 010 1.5H7.5v1.25a.75.75 0 01-1.5 0V7.5H4.75a.75.75 0 010-1.5H6V4.75z" />
+    </svg>
+  );
+}
+
+export function IconZoomOut({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M6.5 1a5.5 5.5 0 104.39 8.803l3.154 3.153a.75.75 0 001.06-1.06l-3.153-3.154A5.5 5.5 0 006.5 1zM2.5 6.5a4 4 0 118 0 4 4 0 01-8 0zM4.75 6a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z" />
+    </svg>
+  );
+}
+
+export function IconReset({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.5a5.5 5.5 0 110 11 5.5 5.5 0 010-11zM8 4a.75.75 0 01.75.75v3.19l1.28 1.28a.75.75 0 01-1.06 1.06l-1.5-1.5A.75.75 0 017.25 8V4.75A.75.75 0 018 4z" />
+    </svg>
+  );
+}
+
+export function IconUndo({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M2.5 5.5A.5.5 0 013 5h5a5 5 0 110 10H3a.5.5 0 010-1h5a4 4 0 100-8H3.707l1.647 1.646a.5.5 0 01-.708.708l-2.5-2.5a.5.5 0 010-.708l2.5-2.5a.5.5 0 01.708.708L3.207 5H3a.5.5 0 01-.5-.5z" />
+    </svg>
+  );
+}
+
+export function IconRedo({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M13.5 5.5A.5.5 0 0113 5H8a4 4 0 100 8h5a.5.5 0 010 1H8A5 5 0 118 5h4.293l-1.647-1.646a.5.5 0 01.708-.708l2.5 2.5a.5.5 0 010 .708l-2.5 2.5a.5.5 0 01-.708-.708L12.793 6H13a.5.5 0 01.5.5z" />
+    </svg>
+  );
+}
+
+export function IconPlace({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M2 2a.5.5 0 01.5-.5h2a.5.5 0 010 1H3v1.5a.5.5 0 01-1 0V2zm11 0a.5.5 0 00-.5-.5h-2a.5.5 0 000 1H12v1.5a.5.5 0 001 0V2zM2 14a.5.5 0 00.5.5h2a.5.5 0 000-1H3v-1.5a.5.5 0 00-1 0V14zm11 0a.5.5 0 01-.5.5h-2a.5.5 0 010-1H12v-1.5a.5.5 0 011 0V14zM8 4.5a.5.5 0 000 1V7H6.5a.5.5 0 000 1H8v1.5a.5.5 0 001 0V8h1.5a.5.5 0 000-1H9V5.5a.5.5 0 00-1 0z" />
+    </svg>
+  );
+}
+
+export function IconErase({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M8.086 2.207a2 2 0 012.828 0l2.879 2.878a2 2 0 010 2.83l-7.513 7.51A2 2 0 014.872 16H2.4a1 1 0 01-.966-.741L.8 13.2a2 2 0 01.5-1.946l7.786-9.047zM7.586 5L5 7.586 8.414 11 11 8.414 7.586 5zM6 12L4 10l-1.5 1.5a1 1 0 000 1.414l.587.587A1 1 0 003.793 15H5l1-1-1-1 1-1z" />
+    </svg>
+  );
+}
+
+export function IconDuplicate({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M4 2a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H4zm0 1h8a1 1 0 011 1v8a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1z" />
+      <path d="M2 5H1a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-1H9v1H1V6h1V5z" />
+    </svg>
+  );
+}
+
+export function IconWall({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+      {/* Two parallel lines forming a wall corner — represents wall cross-section */}
+      <path strokeWidth="2" d="M3 14 L3 2 L14 2" />
+      <path strokeWidth="2" d="M6 14 L6 5 L14 5" />
+    </svg>
+  );
+}
+
+export function IconDownload({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M.5 9.9a.5.5 0 01.5.5v2.5a1 1 0 001 1h12a1 1 0 001-1v-2.5a.5.5 0 011 0v2.5a2 2 0 01-2 2H2a2 2 0 01-2-2v-2.5a.5.5 0 01.5-.5z"/>
+      <path d="M7.646 11.854a.5.5 0 00.708 0l3-3a.5.5 0 00-.708-.708L8.5 10.293V1.5a.5.5 0 00-1 0v8.793L5.354 8.146a.5.5 0 10-.708.708l3 3z"/>
+    </svg>
+  );
+}
+
+export function IconUpload({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M.5 9.9a.5.5 0 01.5.5v2.5a1 1 0 001 1h12a1 1 0 001-1v-2.5a.5.5 0 011 0v2.5a2 2 0 01-2 2H2a2 2 0 01-2-2v-2.5a.5.5 0 01.5-.5z"/>
+      <path d="M7.646 1.146a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8.5 2.707V11.5a.5.5 0 01-1 0V2.707L5.354 4.854a.5.5 0 11-.708-.708l3-3z"/>
+    </svg>
+  );
+}
+
+export function IconPolygon({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="none" stroke="currentColor" strokeLinejoin="round">
+      <path strokeWidth="1.5" d="M8 2 L14 6 L12 13 L4 13 L2 6 Z"/>
+      <circle cx="8" cy="2" r="1.5" fill="currentColor" stroke="none"/>
+      <circle cx="14" cy="6" r="1.5" fill="currentColor" stroke="none"/>
+      <circle cx="12" cy="13" r="1.5" fill="currentColor" stroke="none"/>
+      <circle cx="4" cy="13" r="1.5" fill="currentColor" stroke="none"/>
+      <circle cx="2" cy="6" r="1.5" fill="currentColor" stroke="none"/>
+    </svg>
+  );
+}
+
+export function IconLayers({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor">
+      <path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .265 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
+    </svg>
+  );
 }

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './components/html/index';
 export * from './components/icons/index';
 export * from './components/alerts/index';
 export * from './context/theme/index';
+export * from './components/VenueMapEditor/index';