@1001tv/manara 0.0.3-beta.0

package/dist/lib/utils/cn.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue } from 'clsx';
+/**
+ * Combines Tailwind CSS classes safely and intelligently.
+ * It uses `clsx` for conditional class joining and `twMerge` to resolve
+ * conflicting Tailwind classes by prioritizing the last one.
+ * @param inputs - Class values to be combined.
+ * @returns A single string of merged and cleaned Tailwind classes.
+ */
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/lib/utils/isTypingTarget.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns `true` when the event target is a text-entry context
+ * (`<input>`, `<textarea>`, `<select>`, or `[contenteditable]`).
+ * Use it to bail out of global keyboard handlers so shortcuts don't
+ * fire while the user is typing.
+ */
+export declare const isTypingTarget: (target: EventTarget | null) => boolean;

package/dist/lib/utils/language.d.ts

@@ -0,0 +1,4 @@
+/** Returns true if the given language key uses RTL script. */
+export declare const isRtlLanguage: (langKey: string) => boolean;
+/** Returns true if the given language is written in the Arabic script. */
+export declare const usesArabicFont: (langKey: string) => boolean;

package/dist/library.css

@@ -0,0 +1,489 @@
+/* Manara design system — library CSS shipped to npm consumers.
+   Contains only side-effects that consumers cannot recreate from the Tailwind plugin:
+   primitives (CSS variables), font-face declarations, and keyframe animations.
+   Tailwind directives stay in `index.css` (dev/Storybook only); consumers run their own
+   Tailwind build with `manaraPlugin` to generate the manara-* utilities. */
+
+/*
+  This file defines color-related primitive values for the Manara design system.
+  These are "primitives". They should not be used directly in components.
+  Instead, they are referenced by the semantic tokens in the Tailwind config.
+*/
+
+:root {
+  /**
+  * ==============================================================================
+  *   VERDANT
+  * ==============================================================================
+  */
+  --color-verdant-0: #ffffff;
+  --color-verdant-50: #e7faef;
+  --color-verdant-100: #b6efcc;
+  --color-verdant-200: #92e7b4;
+  --color-verdant-300: #61dc92;
+  --color-verdant-400: #42d57d;
+  --color-verdant-500: #13cb5c;
+  --color-verdant-600: #11b954;
+  --color-verdant-700: #0d9041;
+  --color-verdant-800: #0a7033;
+  --color-verdant-850: #085527;
+  --color-verdant-900: #063c1c;
+  --color-verdant-1000: #042f15;
+
+  /**
+  * ==============================================================================
+  *   NAVY
+  * ==============================================================================
+  */
+  --color-navy-0: #ffffff;
+  --color-navy-10: #fafafa;
+  --color-navy-20: #f5f5f6;
+  --color-navy-30: #ebebed;
+  --color-navy-40: #dedee1;
+  --color-navy-50: #bfc0c6;
+  --color-navy-60: #b0b0b8;
+  --color-navy-70: #a3a4ac;
+  --color-navy-80: #94949e;
+  --color-navy-90: #858591;
+  --color-navy-100: #757683;
+  --color-navy-200: #666775;
+  --color-navy-300: #575767;
+  --color-navy-400: #4a4b5c;
+  --color-navy-500: #3b3b4e;
+  --color-navy-600: #2e2f42;
+  --color-navy-700: #1c1d32;
+  --color-navy-700-transparent: #1c1d3299; /* 60% opacity */
+  --color-navy-750: #15162d;
+  --color-navy-800: #0d0e25;
+  --color-navy-900: #000119;
+  --color-navy-900-transparent: #000119cc; /* 80% opacity */
+
+  /**
+  * ==============================================================================
+  *   NEUTRAL
+  * ==============================================================================
+  */
+  --color-neutral-0: #ffffff;
+  --color-neutral-0-transparent: #ffffff33; /* 20% opacity */
+  --color-neutral-10: #fafafa;
+  --color-neutral-20: #f5f5f6;
+  --color-neutral-30: #ebebeb;
+  --color-neutral-40: #dedede;
+  --color-neutral-50: #bfbfbf;
+  --color-neutral-60: #b0b0b0;
+  --color-neutral-70: #a3a3a3;
+  --color-neutral-80: #949494;
+  --color-neutral-90: #858585;
+  --color-neutral-100: #757575;
+  --color-neutral-200: #666666;
+  --color-neutral-300: #575757;
+  --color-neutral-400: #4a4a4a;
+  --color-neutral-500: #3b3b3b;
+  --color-neutral-600: #2e2e2e;
+  --color-neutral-700: #1c1c1c;
+  --color-neutral-750: #151515;
+  --color-neutral-800: #0d0d0d;
+  --color-neutral-900: #000000;
+
+  /**
+  * ==============================================================================
+  *   CRITICAL
+  * ==============================================================================
+  */
+  --color-critical-0: #ffffff;
+  --color-critical-50: #f7eaea;
+  --color-critical-100: #e6bfbf;
+  --color-critical-200: #d9a0a0;
+  --color-critical-300: #c87575;
+  --color-critical-400: #bd5a5a;
+  --color-critical-500: #ad3131;
+  --color-critical-600: #9d2d2d;
+  --color-critical-700: #7b2323;
+  --color-critical-800: #5f1b1b;
+  --color-critical-900: #491515;
+
+  /**
+  * ==============================================================================
+  *   WARNING 
+  * ==============================================================================
+  */
+  --color-warning-0: #ffffff;
+  --color-warning-50: #fdf8e6;
+  --color-warning-100: #f7e8b0;
+  --color-warning-200: #f4dd8a;
+  --color-warning-300: #eecd54;
+  --color-warning-400: #ebc333;
+  --color-warning-500: #e6b400;
+  --color-warning-600: #d1a400;
+  --color-warning-700: #a38000;
+  --color-warning-800: #7f6300;
+  --color-warning-900: #614c00;
+
+  /**
+  * ==============================================================================
+  *   INFO
+  * ==============================================================================
+  */
+  --color-info-0: #ffffff;
+  --color-info-50: #e6f0ff;
+  --color-info-100: #98c0ff;
+  --color-info-200: #6ba6ff;
+  --color-info-300: #2b7fff;
+  --color-info-400: #0065ff;
+  --color-info-500: #0047b3;
+  --color-info-600: #003e9c;
+  --color-ring-focus: var(--color-info-300); /* Figma blue focus ring — reuses text/info token */
+}
+
+/**
+  * ==============================================================================
+  * Alpha Hex Values: use this for transparent colors
+  * ==============================================================================
+  */
+
+/* How the alpha hex values work:
+
+FF = 100% opacity (fully opaque)
+CC = 80% opacity
+99 = 60% opacity
+80 = 50% opacity
+66 = 40% opacity
+4D = 30% opacity
+33 = 20% opacity
+1A = 10% opacity
+00 = 0% opacity (fully transparent) 
+*/
+
+/*
+  This file defines font-related primitive values for the Manara design system.
+  These values should not be used directly in components.
+  Instead, they are referenced by semantic tokens in the Tailwind config.
+*/
+
+:root {
+  /**
+  * ==============================================================================
+  * Font Primitives - Weight
+  * ==============================================================================
+  */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /**
+  * ==============================================================================
+  * Font Primitives - Spacing
+  * ==============================================================================
+  * Letter-spacing tokens. Manara's Figma foundation exposes these variables for
+  * every typography style but currently sets both to 0 — i.e. no tracking is
+  * applied anywhere. We mirror that token surface so design and code stay 1:1:
+  * if Figma ever introduces real tracking (e.g. -0.25px on display sizes), flip
+  * the value here and every `.text-manara-*` utility picks it up automatically.
+  */
+  --font-spacing-regular: 0;
+  --font-spacing-small: 0;
+
+  /**
+  * ==============================================================================
+  * Font Primitives - Family
+  * ==============================================================================
+  */
+  --font-family-english: 'Inter Display';
+  --font-family-arabic: 'NotoKufiArabic'; /* used for both Arabic (`ar`) and Kurdish-Sorani (`ckb`) */
+}
+
+/*
+  This file defines spacing-related primitive values for the Manara design system.
+  These are "primitives". They should not be used directly in components.
+  Instead, they are referenced by the semantic tokens in the Tailwind config.
+*/
+
+:root {
+  /**
+  * ==============================================================================
+  * BASE UNITS (used for spacing, radius, border...etc.)
+  * ==============================================================================
+  */
+  --base-unit-0: 0px;
+  --base-unit-015: 0.6px;
+  --base-unit-020: 1px;
+  --base-unit-025: 2px;
+  --base-unit-050: 4px;
+  --base-unit-075: 6px;
+  --base-unit-100: 8px;
+  --base-unit-150: 12px;
+  --base-unit-200: 16px;
+  --base-unit-250: 20px;
+  --base-unit-300: 24px;
+  --base-unit-400: 32px;
+  --base-unit-500: 40px;
+  --base-unit-600: 48px;
+  --base-unit-700: 56px;
+  --base-unit-800: 64px;
+  --base-unit-900: 72px;
+  --base-unit-1000: 80px;
+  --base-unit-9999: 999px;
+}
+
+/*
+  This file defines responsive typography tokens for the Manara design system.
+  It uses a mobile-first approach for font sizes and line heights.
+
+  For each typography token (e.g., --typography-display-medium-size):
+  - The default value is set to its mobile primitive (e.g., --font-size-mobile-display-medium).
+  - A media query at the Manara foundation viewport threshold (600px) overrides this value
+    to its desktop primitive (e.g., --font-size-desktop-display-medium).
+
+  This allows the `manaraTypographyPlugin` to automatically apply responsive font sizes
+  and line heights without needing explicit breakpoint utilities in component markup.
+
+  Example:
+  The .text-manara-display-medium utility will:
+  - Use mobile font-size/line-height below 600px.
+  - Automatically switch to desktop font-size/line-height at 600px and above.
+
+  @see manaraTypographyPlugin.ts for how these tokens are consumed into Tailwind utilities.
+*/
+
+:root {
+  /**
+  * ==============================================================================
+  * Typography Tokens - Responsive (Mobile First)
+  * ==============================================================================
+  */
+
+  /* Display Medium */
+  --typography-display-medium-size: var(--font-size-mobile-display-medium);
+  --typography-display-medium-line-height: var(--line-height-mobile-display-medium);
+  --typography-display-medium-weight: var(--font-weight-semibold);
+  --typography-display-medium-spacing: var(--font-spacing-regular);
+
+  /* Display Small */
+  --typography-display-small-size: var(--font-size-mobile-display-small);
+  --typography-display-small-line-height: var(--line-height-mobile-display-small);
+  --typography-display-small-weight: var(--font-weight-semibold);
+  --typography-display-small-spacing: var(--font-spacing-regular);
+
+  /* Header Medium */
+  --typography-header-medium-size: var(--font-size-mobile-header-medium);
+  --typography-header-medium-line-height: var(--line-height-mobile-header-medium);
+  --typography-header-medium-weight: var(--font-weight-semibold);
+  --typography-header-medium-spacing: var(--font-spacing-regular);
+
+  /* Header Small */
+  --typography-header-small-size: var(--font-size-mobile-header-small);
+  --typography-header-small-line-height: var(--line-height-mobile-header-small);
+  --typography-header-small-weight: var(--font-weight-semibold);
+  --typography-header-small-spacing: var(--font-spacing-regular);
+
+  /* Title Medium */
+  --typography-title-medium-size: var(--font-size-mobile-title-medium);
+  --typography-title-medium-line-height: var(--line-height-mobile-title-medium);
+  --typography-title-medium-weight: var(--font-weight-semibold);
+  --typography-title-medium-spacing: var(--font-spacing-regular);
+
+  /* Title Small */
+  --typography-title-small-size: var(--font-size-mobile-title-small);
+  --typography-title-small-line-height: var(--line-height-mobile-title-small);
+  --typography-title-small-weight: var(--font-weight-semibold);
+  --typography-title-small-spacing: var(--font-spacing-regular);
+
+  /* Body Large */
+  --typography-body-large-size: var(--font-size-mobile-body-large);
+  --typography-body-large-line-height: var(--line-height-mobile-body-large);
+  --typography-body-large-spacing: var(--font-spacing-small);
+
+  /* Body Default */
+  --typography-body-default-size: var(--font-size-mobile-body-default);
+  --typography-body-default-line-height: var(--line-height-mobile-body-default);
+  --typography-body-default-spacing: var(--font-spacing-small);
+
+  /* Body Small */
+  --typography-body-small-size: var(--font-size-mobile-body-small);
+  --typography-body-small-line-height: var(--line-height-mobile-body-small);
+  --typography-body-small-spacing: var(--font-spacing-small);
+
+  /* Caption Default */
+  --typography-caption-default-size: var(--font-size-mobile-caption-default);
+  --typography-caption-default-line-height: var(--line-height-mobile-caption-default);
+  --typography-caption-default-spacing: var(--font-spacing-regular);
+
+  /* Caption Small */
+  --typography-caption-small-size: var(--font-size-mobile-caption-small);
+  --typography-caption-small-line-height: var(--line-height-mobile-caption-small);
+  --typography-caption-small-spacing: var(--font-spacing-regular);
+
+  /**
+  * ==============================================================================
+  * Font Size Primitives (Mobile)
+  * ==============================================================================
+  */
+  --font-size-mobile-display-medium: 40px;
+  --font-size-mobile-display-small: 36px;
+  --font-size-mobile-header-medium: 24px;
+  --font-size-mobile-header-small: 20px;
+  --font-size-mobile-title-medium: 18px;
+  --font-size-mobile-title-small: 16px;
+  --font-size-mobile-body-large: 18px;
+  --font-size-mobile-body-default: 16px;
+  --font-size-mobile-body-small: 14px;
+  --font-size-mobile-caption-default: 12px;
+  --font-size-mobile-caption-small: 10px;
+
+  /**
+  * ==============================================================================
+  * Line Height Primitives (Mobile)
+  * ==============================================================================
+  */
+  --line-height-mobile-display-medium: 46px;
+  --line-height-mobile-display-small: 40px;
+  --line-height-mobile-header-medium: 32px;
+  --line-height-mobile-header-small: 30px;
+  --line-height-mobile-title-medium: 24px;
+  --line-height-mobile-title-small: 24px;
+  --line-height-mobile-body-large: 24px;
+  --line-height-mobile-body-default: 24px;
+  --line-height-mobile-body-small: 20px;
+  --line-height-mobile-caption-default: 16px;
+  --line-height-mobile-caption-small: 16px;
+
+  /**
+  * ==============================================================================
+  * Font Size Primitives (Desktop)
+  * ==============================================================================
+  */
+  --font-size-desktop-display-medium: 48px;
+  --font-size-desktop-display-small: 40px;
+  --font-size-desktop-header-medium: 32px;
+  --font-size-desktop-header-small: 24px;
+  --font-size-desktop-title-medium: 20px;
+  --font-size-desktop-title-small: 18px;
+  --font-size-desktop-body-large: 18px;
+  --font-size-desktop-body-default: 16px;
+  --font-size-desktop-body-small: 14px;
+  --font-size-desktop-caption-default: 12px;
+  --font-size-desktop-caption-small: 10px;
+
+  /**
+  * ==============================================================================
+  * Line Height Primitives (Desktop)
+  * ==============================================================================
+  */
+  --line-height-desktop-display-medium: 54px;
+  --line-height-desktop-display-small: 46px;
+  --line-height-desktop-header-medium: 40px;
+  --line-height-desktop-header-small: 32px;
+  --line-height-desktop-title-medium: 30px;
+  --line-height-desktop-title-small: 24px;
+  --line-height-desktop-body-large: 24px;
+  --line-height-desktop-body-default: 24px;
+  --line-height-desktop-body-small: 20px;
+  --line-height-desktop-caption-default: 16px;
+  --line-height-desktop-caption-small: 16px;
+}
+
+/* Desktop breakpoint per Manara foundation: > 600px is desktop. */
+
+@media (min-width: 600px) {
+  :root {
+    /* Display */
+    --typography-display-medium-size: var(--font-size-desktop-display-medium);
+    --typography-display-medium-line-height: var(--line-height-desktop-display-medium);
+
+    --typography-display-small-size: var(--font-size-desktop-display-small);
+    --typography-display-small-line-height: var(--line-height-desktop-display-small);
+
+    /* Header */
+    --typography-header-medium-size: var(--font-size-desktop-header-medium);
+    --typography-header-medium-line-height: var(--line-height-desktop-header-medium);
+
+    --typography-header-small-size: var(--font-size-desktop-header-small);
+    --typography-header-small-line-height: var(--line-height-desktop-header-small);
+
+    /* Title */
+    --typography-title-medium-size: var(--font-size-desktop-title-medium);
+    --typography-title-medium-line-height: var(--line-height-desktop-title-medium);
+
+    --typography-title-small-size: var(--font-size-desktop-title-small);
+    --typography-title-small-line-height: var(--line-height-desktop-title-small);
+
+    /* Body */
+    --typography-body-large-size: var(--font-size-desktop-body-large);
+    --typography-body-large-line-height: var(--line-height-desktop-body-large);
+
+    --typography-body-default-size: var(--font-size-desktop-body-default);
+    --typography-body-default-line-height: var(--line-height-desktop-body-default);
+
+    --typography-body-small-size: var(--font-size-desktop-body-small);
+    --typography-body-small-line-height: var(--line-height-desktop-body-small);
+
+    /* Caption */
+    --typography-caption-default-size: var(--font-size-desktop-caption-default);
+    --typography-caption-default-line-height: var(--line-height-desktop-caption-default);
+
+    --typography-caption-small-size: var(--font-size-desktop-caption-small);
+    --typography-caption-small-line-height: var(--line-height-desktop-caption-small);
+  }
+}
+
+/* Inter Display ships as static per-weight files (no variable build). Each
+   weight gets its own @font-face under the same family — the browser picks
+   the right file based on font-weight in the cascading style. */
+
+@font-face {
+  font-family: 'Inter Display';
+  src: url('./fonts/Inter/InterDisplay-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Display';
+  src: url('./fonts/Inter/InterDisplay-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Display';
+  src: url('./fonts/Inter/InterDisplay-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Display';
+  src: url('./fonts/Inter/InterDisplay-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'NotoKufiArabic';
+  src: url('./fonts/NotoKufiArabic-VariableFont.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Opt-in base font — consumers add `class="manara-root"` on any ancestor of the app tree. */
+
+.manara-root {
+  font-family: 'Inter Display', 'NotoKufiArabic', sans-serif;
+}
+
+@keyframes fadeSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/styles/plugins/borders-plugin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Manara Borders Plugin
+ * Provides semantic border utilities with manara- prefix
+ *
+ * Usage examples:
+ * - Border radius: rounded-manara-100, rounded-t-manara-200, rounded-br-manara-150, rounded-manara-full
+ * - Border width: border-manara-25, border-t-manara-50, border-x-manara-100
+ * - Combined: border-manara-25 border-manara-focused rounded-manara-150
+ *
+ * Available radius values: 0, 25, 50, 75, 100, 150, 200, 250, 300, full
+ * Available width values: 0, 15, 20, 25, 50, 100
+ *
+ * Example usage:
+ * <div className="border-manara-25 border-manara-focused rounded-manara-200">
+ *   Card with border
+ * </div>
+ * <button className="border-manara-50 border-manara-brand rounded-manara-100 hover:border-manara-brand-hover">
+ *   Button
+ * </button>
+ */
+export declare const manaranBordersPlugin: {
+    handler: import('tailwindcss/types/config').PluginCreator;
+    config?: Partial<import('tailwindcss/types/config').Config>;
+};

package/dist/styles/plugins/colors-plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Manara Colors Plugin
+ * Provides semantic color utilities with manara- prefix
+ *
+ * Usage examples:
+ * - Text: text-manara-primary, text-manara-brand, text-manara-critical
+ * - Icon: icon-manara-primary, icon-manara-brand-hover
+ * - Background: bg-manara-primary, hover:bg-manara-brand-hover
+ * - Border: border-manara-focused, active:border-manara-critical-pressed
+ * - Surface: surface-manara-primary, surface-manara-navbar
+ * - Link: link-manara-primary (handles base, hover, and active states automatically)
+ */
+export declare const manaraColorsPlugin: {
+    handler: import('tailwindcss/types/config').PluginCreator;
+    config?: Partial<import('tailwindcss/types/config').Config>;
+};

package/dist/styles/plugins/index.d.ts

@@ -0,0 +1,38 @@
+import { manaraColorsPlugin } from './colors-plugin';
+import { manaraTypographyPlugin } from './typography-plugin';
+import { manaraSpacingPlugin } from './spacing-plugin';
+import { manaranBordersPlugin } from './borders-plugin';
+/**
+ * Main Manara Design System Plugin
+ * Combines all Manara plugins into a single export
+ *
+ * This plugin provides:
+ * - Colors: text-manara-*, bg-manara-*, border-manara-*, surface-manara-*, link-manara-*
+ * - Typography: text-manara-display-*, text-manara-body-*, font-manara-*
+ * - Spacing: p-manara-*, m-manara-*, gap-manara-*, w-manara-*, h-manara-*
+ * - Borders: rounded-manara-*, border-manara-*, ring-manara-*
+ *
+ * Usage: Import and add to the tailwind.config.ts plugins array
+ *
+ * Example usage in components:
+ * <div className="bg-manara-primary p-manara-300 rounded-manara-200 border-manara-25 border-manara-focused">
+ *   <h1 className="text-manara-display-medium font-manara-english text-manara-brand">
+ *     Welcome to Manara
+ *   </h1>
+ *   <p className="text-manara-body-default-regular text-manara-secondary mt-manara-150">
+ *     This is using the Manara design system.
+ *   </p>
+ *   <button className="bg-manara-brand text-white px-manara-200 py-manara-100 rounded-manara-100 hover:bg-manara-brand-hover">
+ *     Click me
+ *   </button>
+ * </div>
+ */
+export declare const manaraPlugin: {
+    (options: unknown): {
+        handler: import('tailwindcss/types/config').PluginCreator;
+        config?: Partial<import('tailwindcss/types/config').Config>;
+    };
+    __isOptionsFunction: true;
+};
+export { manaraColorsPlugin, manaraTypographyPlugin, manaraSpacingPlugin, manaranBordersPlugin };
+export default manaraPlugin;

package/dist/styles/plugins/spacing-plugin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Manara Spacing Plugin
+ * Provides semantic spacing utilities with manara- prefix
+ *
+ * Usage examples:
+ * - Padding: p-manara-100, px-manara-200, py-manara-300, pt-manara-150
+ * - Margin: m-manara-100, mx-manara-250, my-manara-400, mb-manara-500
+ * - Gap: gap-manara-200, gap-x-manara-150, gap-y-manara-300
+ * - Space between: space-x-manara-100, space-y-manara-200
+ * - Width/Height: w-manara-400, h-manara-600, min-w-manara-300, max-h-manara-800
+ * - Positioning: top-manara-100, left-manara-150, inset-manara-200
+ *
+ * Available values: 0, 25, 50, 75, 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900, 1000
+ *
+ * Example usage:
+ * <div className="p-manara-300 m-manara-200 gap-manara-150">
+ *   <div className="w-manara-400 h-manara-600">Content</div>
+ * </div>
+ */
+export declare const manaraSpacingPlugin: {
+    handler: import('tailwindcss/types/config').PluginCreator;
+    config?: Partial<import('tailwindcss/types/config').Config>;
+};

package/dist/styles/plugins/typography-plugin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Manara Typography Plugin
+ * Provides semantic typography utilities with manara- prefix
+ *
+ * Usage examples:
+ * - Display: text-manara-display-medium, text-manara-display-small
+ * - Headers: text-manara-header-medium, text-manara-header-small
+ * - Titles: text-manara-title-medium, text-manara-title-small
+ * - Body: text-manara-body-large-semibold, text-manara-body-default-regular, text-manara-body-small-light
+ * - Caption: text-manara-caption-default-medium, text-manara-caption-small-regular
+ * - Fonts: font-manara-english, font-manara-arabic
+ *
+ * Example usage:
+ * <h1 className="text-manara-display-medium font-manara-english text-manara-brand">
+ *   Main Heading
+ * </h1>
+ * <p className="text-manara-body-default-regular font-manara-english text-manara-primary">
+ *   Body content
+ * </p>
+ */
+export declare const manaraTypographyPlugin: {
+    handler: import('tailwindcss/types/config').PluginCreator;
+    config?: Partial<import('tailwindcss/types/config').Config>;
+};