npm - @pyreweb/fabric - Versions diffs - 1.2.6 - Mend

@pyreweb/fabric 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/src/index.ts ADDED Viewed

@@ -0,0 +1,167 @@
+import './styles/tailwind.css';
+import {
+	FAvatar,
+	FBadge,
+	FButton,
+	FCheckbox,
+	FDivider,
+	FIcon,
+	FInput,
+	FLoader,
+	FRadio,
+	FTextarea,
+	FToggle,
+	FTypography
+} from './components/atoms';
+import {
+	FAccordionItem,
+	FAlert,
+	FBreadcrumb,
+	FButtonGroup,
+	FDatePicker,
+	FEmptyState,
+	FFilePreview,
+	FFormField,
+	FCard,
+	FSearchBar,
+	FListItem,
+	FPagination,
+	FSelect,
+	FTabs,
+	FTab,
+	FToast
+} from './components/molecules';
+import {
+	FActivityFeed,
+	FForm,
+	FDataTable,
+	FDrawer,
+	FFileUpload,
+	FPageHeader,
+	FModal,
+	FUserMenu,
+	FOnboardingStepper,
+	FProfileSection,
+	FToastProvider
+} from './components/organisms';
+import { FThemeProvider } from './components/utils';
+import type { VueConstructor, Component } from 'vue';
+// Export all types
+export * from './types';
+// Export composables
+export * from './composables';
+// Type for components record
+type ComponentsRecord = Record<string, Component>;
+const components: ComponentsRecord = {
+	FAccordionItem,
+	FActivityFeed,
+	FAlert,
+	FAvatar,
+	FBadge,
+	FBreadcrumb,
+	FButton,
+	FButtonGroup,
+	FCheckbox,
+	FDataTable,
+	FDatePicker,
+	FDivider,
+	FDrawer,
+	FEmptyState,
+	FFilePreview,
+	FFileUpload,
+	FIcon,
+	FInput,
+	FListItem,
+	FLoader,
+	FModal,
+	FOnboardingStepper,
+	FPageHeader,
+	FProfileSection,
+	FRadio,
+	FSelect,
+	FTab,
+	FTabs,
+	FTextarea,
+	FToggle,
+	FTypography,
+	FFormField,
+	FCard,
+	FForm,
+	FSearchBar,
+	FPagination,
+	FUserMenu,
+	FToast,
+	FToastProvider,
+	FThemeProvider
+};
+const install = (Vue: VueConstructor): void => {
+	Object.keys(components).forEach((name) => {
+		// Type assertion is necessary because Vue 2's component registration
+		// doesn't have perfect TypeScript support for dynamic component maps
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Vue.component(name, components[name] as any);
+	});
+};
+// Auto-install when Vue is found (browser global)
+declare global {
+	interface Window {
+		Vue?: VueConstructor;
+	}
+}
+if (typeof window !== 'undefined' && window.Vue) {
+	install(window.Vue);
+}
+export default {
+	install
+};
+export {
+	FAccordionItem,
+	FActivityFeed,
+	FAlert,
+	FAvatar,
+	FBadge,
+	FBreadcrumb,
+	FButton,
+	FButtonGroup,
+	FCheckbox,
+	FDataTable,
+	FDatePicker,
+	FDivider,
+	FDrawer,
+	FEmptyState,
+	FFilePreview,
+	FFileUpload,
+	FIcon,
+	FInput,
+	FListItem,
+	FLoader,
+	FModal,
+	FOnboardingStepper,
+	FPageHeader,
+	FProfileSection,
+	FRadio,
+	FSelect,
+	FTab,
+	FTabs,
+	FTextarea,
+	FToggle,
+	FTypography,
+	FFormField,
+	FCard,
+	FForm,
+	FSearchBar,
+	FPagination,
+	FUserMenu,
+	FToast,
+	FToastProvider,
+	FThemeProvider
+};

package/src/styles/tailwind.css ADDED Viewed

@@ -0,0 +1,173 @@
+@import "tailwindcss";
+/*
+ * Fabric Design System - Theme System with Dark/Light Mode Support
+ *
+ * This theming system uses CSS custom properties for dynamic theme switching.
+ *
+ * Theme Usage:
+ * - Add `data-theme="light"` or `data-theme="dark"` to any container (typically <html> or <body>)
+ * - Use FThemeProvider component for automatic theme management
+ *
+ * Customization:
+ * Override these variables in your application's CSS:
+ *
+ * :root {
+ *   --color-primary-500: oklch(0.55 0.20 250);
+ *   --theme-background: oklch(1 0 0);
+ *   ...
+ * }
+ */
+@theme {
+	/* Transition durations for consistent micro-interactions */
+	--transition-duration-fast: 100ms;
+	--transition-duration-base: 200ms;
+	--transition-duration-slow: 300ms;
+	/* Transition easing functions for smooth animations */
+	--transition-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out with slight emphasis */
+	--transition-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ease-out for emphasized movements */
+	/* Primary color palette - Blue by default */
+	--color-primary-50: oklch(0.97 0.01 250);
+	--color-primary-100: oklch(0.93 0.03 250);
+	--color-primary-200: oklch(0.87 0.06 250);
+	--color-primary-300: oklch(0.76 0.11 250);
+	--color-primary-400: oklch(0.63 0.17 250);
+	--color-primary-500: oklch(0.55 0.20 250);
+	--color-primary-600: oklch(0.49 0.20 250);
+	--color-primary-700: oklch(0.42 0.17 250);
+	--color-primary-800: oklch(0.35 0.14 250);
+	--color-primary-900: oklch(0.28 0.10 250);
+	--color-primary-950: oklch(0.21 0.07 250);
+	/* Success color palette - Green by default */
+	--color-success-50: oklch(0.98 0.02 145);
+	--color-success-100: oklch(0.94 0.05 145);
+	--color-success-200: oklch(0.87 0.10 145);
+	--color-success-300: oklch(0.76 0.15 145);
+	--color-success-400: oklch(0.64 0.18 145);
+	--color-success-500: oklch(0.55 0.18 145);
+	--color-success-600: oklch(0.47 0.16 145);
+	--color-success-700: oklch(0.40 0.13 145);
+	--color-success-800: oklch(0.34 0.10 145);
+	--color-success-900: oklch(0.28 0.08 145);
+	--color-success-950: oklch(0.18 0.05 145);
+	/* Danger color palette - Red by default */
+	--color-danger-50: oklch(0.97 0.02 25);
+	--color-danger-100: oklch(0.94 0.04 25);
+	--color-danger-200: oklch(0.88 0.08 25);
+	--color-danger-300: oklch(0.78 0.13 25);
+	--color-danger-400: oklch(0.67 0.18 25);
+	--color-danger-500: oklch(0.58 0.20 25);
+	--color-danger-600: oklch(0.51 0.19 25);
+	--color-danger-700: oklch(0.44 0.16 25);
+	--color-danger-800: oklch(0.37 0.13 25);
+	--color-danger-900: oklch(0.30 0.10 25);
+	--color-danger-950: oklch(0.20 0.06 25);
+	/* Warning color palette - Yellow/Orange by default */
+	--color-warning-50: oklch(0.98 0.02 85);
+	--color-warning-100: oklch(0.95 0.05 85);
+	--color-warning-200: oklch(0.90 0.10 85);
+	--color-warning-300: oklch(0.82 0.15 85);
+	--color-warning-400: oklch(0.74 0.18 85);
+	--color-warning-500: oklch(0.68 0.18 85);
+	--color-warning-600: oklch(0.60 0.16 85);
+	--color-warning-700: oklch(0.52 0.13 75);
+	--color-warning-800: oklch(0.44 0.10 75);
+	--color-warning-900: oklch(0.36 0.07 75);
+	--color-warning-950: oklch(0.25 0.05 75);
+	/* Neutral color palette - Gray by default */
+	--color-neutral-50: oklch(0.98 0.00 0);
+	--color-neutral-100: oklch(0.96 0.00 0);
+	--color-neutral-200: oklch(0.92 0.00 0);
+	--color-neutral-300: oklch(0.87 0.00 0);
+	--color-neutral-400: oklch(0.70 0.00 0);
+	--color-neutral-500: oklch(0.55 0.00 0);
+	--color-neutral-600: oklch(0.45 0.00 0);
+	--color-neutral-700: oklch(0.37 0.00 0);
+	--color-neutral-800: oklch(0.27 0.00 0);
+	--color-neutral-900: oklch(0.20 0.00 0);
+	--color-neutral-950: oklch(0.13 0.00 0);
+}
+/*
+ * Semantic Theme Variables
+ * These variables adapt to the current theme (light/dark)
+ */
+:root,
+[data-theme="light"] {
+	/* Background colors */
+	--theme-background: var(--color-neutral-50);
+	--theme-foreground: var(--color-neutral-900);
+	/* Card/Surface colors */
+	--theme-card: oklch(1 0 0); /* Pure white for cards in light mode */
+	--theme-card-foreground: var(--color-neutral-900);
+	/* Muted backgrounds (for secondary surfaces) */
+	--theme-muted: var(--color-neutral-100);
+	--theme-muted-foreground: var(--color-neutral-600);
+	/* Border colors */
+	--theme-border: var(--color-neutral-300);
+	/* Input colors */
+	--theme-input-background: oklch(1 0 0);
+	--theme-input-border: var(--color-neutral-300);
+	--theme-input-foreground: var(--color-neutral-900);
+	--theme-input-placeholder: var(--color-neutral-500);
+	/* Accent colors (maintain brand colors) */
+	--theme-primary: var(--color-primary-600);
+	--theme-primary-foreground: oklch(1 0 0);
+	--theme-success: var(--color-success-600);
+	--theme-success-foreground: oklch(1 0 0);
+	--theme-danger: var(--color-danger-600);
+	--theme-danger-foreground: oklch(1 0 0);
+	--theme-warning: var(--color-warning-600);
+	--theme-warning-foreground: oklch(1 0 0);
+}
+[data-theme="dark"] {
+	/* Background colors - darker shades */
+	--theme-background: oklch(0.15 0.00 0);
+	--theme-foreground: var(--color-neutral-50);
+	/* Card/Surface colors - slightly lighter than background */
+	--theme-card: oklch(0.18 0.00 0);
+	--theme-card-foreground: var(--color-neutral-50);
+	/* Muted backgrounds */
+	--theme-muted: oklch(0.20 0.00 0);
+	--theme-muted-foreground: var(--color-neutral-400);
+	/* Border colors - more subtle in dark mode */
+	--theme-border: oklch(0.30 0.00 0);
+	/* Input colors */
+	--theme-input-background: oklch(0.18 0.00 0);
+	--theme-input-border: oklch(0.30 0.00 0);
+	--theme-input-foreground: var(--color-neutral-50);
+	--theme-input-placeholder: var(--color-neutral-500);
+	/* Accent colors - slightly adjusted for dark mode visibility */
+	--theme-primary: var(--color-primary-500);
+	--theme-primary-foreground: oklch(0.15 0.00 0);
+	--theme-success: var(--color-success-500);
+	--theme-success-foreground: oklch(0.15 0.00 0);
+	--theme-danger: var(--color-danger-500);
+	--theme-danger-foreground: oklch(0.15 0.00 0);
+	--theme-warning: var(--color-warning-500);
+	--theme-warning-foreground: oklch(0.15 0.00 0);
+}