@sudobility/components 4.0.91 → 4.0.92

package/dist/ui/banner.d.ts

@@ -0,0 +1,101 @@
+import { default as React } from 'react';
+import { InfoType } from '@sudobility/types';
+/** @deprecated Use InfoType from @sudobility/types instead */
+export type BannerVariant = `${InfoType}`;
+export interface BannerProps {
+    /** Whether the banner is visible */
+    isVisible: boolean;
+    /** Callback when banner is dismissed */
+    onDismiss: () => void;
+    /** Banner title */
+    title: string;
+    /** Banner description (optional) */
+    description?: string;
+    /** Visual variant */
+    variant?: InfoType;
+    /** Auto-dismiss duration in milliseconds (0 to disable, default: 5000) */
+    duration?: number;
+    /** Custom icon (overrides variant icon) */
+    icon?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label for close button */
+    closeAriaLabel?: string;
+}
+/**
+ * Banner Component
+ *
+ * A temporary notification banner that slides down from the top of the screen.
+ * Similar to SwiftMessage for iOS - less intrusive than a modal.
+ *
+ * Features:
+ * - Slides down from top with animation
+ * - Auto-dismisses after configurable duration (default 5 seconds)
+ * - Manual dismiss via close button
+ * - Multiple variants: info, success, warning, error
+ * - Dark/light theme support
+ *
+ * @example
+ * ```tsx
+ * const [showBanner, setShowBanner] = useState(false);
+ *
+ * <Banner
+ *   isVisible={showBanner}
+ *   onDismiss={() => setShowBanner(false)}
+ *   variant="success"
+ *   title="Changes saved"
+ *   description="Your settings have been updated successfully."
+ * />
+ * ```
+ */
+export declare const Banner: React.FC<BannerProps>;
+export interface UseBannerOptions {
+    /** Default duration for auto-dismiss (default: 5000) */
+    defaultDuration?: number;
+}
+export interface UseBannerReturn {
+    /** Whether the banner is currently visible */
+    isVisible: boolean;
+    /** Current banner props */
+    bannerProps: {
+        title: string;
+        description?: string;
+        variant: InfoType;
+        duration: number;
+    } | null;
+    /** Show a banner */
+    showBanner: (options: {
+        title: string;
+        description?: string;
+        variant?: InfoType;
+        duration?: number;
+    }) => void;
+    /** Hide the current banner */
+    hideBanner: () => void;
+}
+/**
+ * Hook for managing banner state
+ *
+ * @example
+ * ```tsx
+ * const { isVisible, bannerProps, showBanner, hideBanner } = useBanner();
+ *
+ * // Show a banner
+ * showBanner({
+ *   title: 'Success!',
+ *   description: 'Your changes have been saved.',
+ *   variant: 'success',
+ * });
+ *
+ * // Render the banner
+ * {bannerProps && (
+ *   <Banner
+ *     isVisible={isVisible}
+ *     onDismiss={hideBanner}
+ *     {...bannerProps}
+ *   />
+ * )}
+ * ```
+ */
+export declare const useBanner: (options?: UseBannerOptions) => UseBannerReturn;
+//# sourceMappingURL=banner.d.ts.map

package/dist/ui/banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,8DAA8D;AAC9D,MAAM,MAAM,aAAa,GAAG,GAAG,QAAQ,EAAE,CAAC;AAE1C,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6IxC,CAAC;AAGF,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,QAAQ,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,GAAG,IAAI,CAAC;IACT,oBAAoB;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,8BAA8B;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,SAAS,GAAI,UAAS,gBAAqB,KAAG,eAkC1D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/components",
-  "version": "4.0.91",
+  "version": "4.0.92",
   "description": "Reusable UI components and design system - Reorganized for better maintainability",
   "type": "module",
   "main": "dist/index.umd.js",
@@ -47,7 +47,7 @@
     "@radix-ui/react-switch": ">=1.0.0",
     "@radix-ui/react-tabs": ">=1.0.0",
     "@sudobility/design": "^1.1.15",
-    "@sudobility/types": "^1.9.31",
+    "@sudobility/types": "^1.9.32",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
     "i18next": ">=23.0.0",
@@ -70,7 +70,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@sudobility/design": "^1.1.15",
-    "@sudobility/types": "^1.9.31",
+    "@sudobility/types": "^1.9.32",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",