zabi-components 5.0.22 → 6.0.0

package/dist/types/page.types.d.ts

@@ -0,0 +1,32 @@
+export interface NavItem {
+    label: string;
+    href: string;
+}
+export interface ContactFormData {
+    name: string;
+    email: string;
+    message?: string;
+    subscribe?: boolean;
+}
+export interface ComponentMetadata {
+    name: string;
+    category: 'atoms' | 'molecules' | 'organisms';
+    description: string;
+    props: ComponentProp[];
+    variants?: string[];
+    examples: ComponentExample[];
+}
+export interface ComponentProp {
+    name: string;
+    type: string;
+    required: boolean;
+    defaultValue?: string;
+    description: string;
+}
+export interface ComponentExample {
+    title: string;
+    description: string;
+    code: string;
+    language?: string;
+}
+//# sourceMappingURL=page.types.d.ts.map

package/dist/types/page.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.types.d.ts","sourceRoot":"","sources":["../../src/types/page.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,CAAC;IAC9C,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types/variants.ts

@@ -0,0 +1,76 @@
+/**
+ * Centralized variant type definitions for zabi-components
+ * 
+ * This file provides consistent variant naming conventions across all components.
+ * Variants are categorized into semantic color variants and style variants.
+ */
+
+/**
+ * Semantic color variants - used for state indication
+ * These variants use semantic colors (success, warning, error, info) to indicate meaning
+ */
+export type SemanticVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * Extended semantic variants - includes additional semantic colors
+ * Used by components that support more semantic states
+ */
+export type ExtendedSemanticVariant = SemanticVariant | 'neutral' | 'energetic';
+
+/**
+ * Button style variants - used for different button styles
+ * These are style-based variants, not semantic color variants
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+
+/**
+ * Card style variants - used for different card appearances
+ */
+export type CardVariant = 'default' | 'elevated' | 'outlined' | 'flat';
+
+/**
+ * Component size variants - consistent across all components
+ */
+export type SizeVariant = 'sm' | 'md' | 'lg';
+
+/**
+ * Helper type to check if a variant is a semantic variant
+ */
+export function isSemanticVariant(variant: string): variant is SemanticVariant {
+    return ['default', 'success', 'warning', 'error', 'info'].includes(variant);
+}
+
+/**
+ * Helper type to check if a variant is an extended semantic variant
+ */
+export function isExtendedSemanticVariant(variant: string): variant is ExtendedSemanticVariant {
+    return ['default', 'success', 'warning', 'error', 'info', 'neutral', 'energetic'].includes(variant);
+}
+
+/**
+ * Variant naming conventions:
+ * 
+ * 1. Semantic Color Variants (for state indication):
+ *    - default: Standard/default appearance
+ *    - success: Positive/successful state (green)
+ *    - warning: Cautionary state (yellow/amber)
+ *    - error: Error/dangerous state (red)
+ *    - info: Informational state (blue)
+ *    - neutral: Neutral state (gray)
+ *    - energetic: Energetic/vibrant state (yellow/orange)
+ * 
+ * 2. Style Variants (for visual appearance):
+ *    - Button: primary, secondary, danger, ghost, outline, link
+ *    - Card: default, elevated, outlined, flat
+ * 
+ * 3. Size Variants (consistent across components):
+ *    - sm: Small size
+ *    - md: Medium size (default)
+ *    - lg: Large size
+ * 
+ * Usage Guidelines:
+ * - Use semantic variants when the variant indicates a state or meaning
+ * - Use style variants when the variant changes visual appearance only
+ * - Always use SizeVariant for size props
+ */
+