ux4g-components-web 1.0.0

package/dist/types/types.d.ts

@@ -0,0 +1,144 @@
+export type ButtonVariant = 'primary' | 'outline-primary' | 'text-primary' | 'tonal-primary' | 'danger' | 'outline-danger' | 'text-danger' | 'tonal-danger';
+export type ButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type ButtonShape = 'rectangle' | 'pill';
+export declare const VARIANT_CLASS_MAP: Record<ButtonVariant, string>;
+export declare const SIZE_CLASS_MAP: Record<ButtonSize, string | null>;
+export declare function buildButtonClasses(variant: ButtonVariant, size: ButtonSize, disabled: boolean, loading: boolean, shape?: ButtonShape, extra?: string): string;
+export type SpinnerVariant = 'primary' | 'inverse' | 'danger';
+export type SpinnerSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type SpinnerType = 'full' | 'split' | 'partial';
+export declare const SPINNER_VARIANT_CLASS_PART: Record<SpinnerVariant, string>;
+export declare const SPINNER_SIZE_CLASS_PART: Record<SpinnerSize, string>;
+export declare const SPINNER_TYPE_CLASS_PART: Record<SpinnerType, string>;
+/** Returns the CSS class(es) for a spinner.
+ *  Base class: `ux4g-spinner-{variant}-{type}` (always present)
+ *  Size class:  `ux4g-spinner-{size}` (omitted when size is 'md' — the default)
+ *  e.g. `ux4g-spinner-primary-full` (md default)
+ *       `ux4g-spinner-primary-full ux4g-spinner-xl` (xl size)
+ */
+export declare function buildSpinnerClasses(variant: SpinnerVariant, size: SpinnerSize, type: SpinnerType, extra?: string): string;
+export type LinkVariant = 'default' | 'neutral';
+export type LinkSize = 'sm' | 'md';
+export declare function buildLinkClasses(variant: LinkVariant, size: LinkSize, extra?: string): string;
+export type BadgeType = 'dot' | 'icon' | 'digit';
+export type BadgeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | 'tertiary' | 'neutral';
+export type BadgeSize = 's' | 'm' | 'l' | 'profile-l' | 'profile-xl' | 'profile-2xl' | 'profile-3xl';
+export declare function buildBadgeClasses(type: BadgeType, color: BadgeColor, size?: BadgeSize, extra?: string): string;
+export type AvatarType = 'status' | 'profile' | 'group';
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export declare function buildAvatarClasses(avatarType: AvatarType, size?: AvatarSize, extra?: string): string;
+export type ImageRatio = '1-1' | '4-3' | '3-2' | '16-10' | '16-9' | '2-1' | '5-2' | '3-1' | '1-16' | '2-3' | '3-4';
+export type ImageOverlayPosition = 'bottom' | 'top';
+export declare function buildImageContainerClasses(ratio?: ImageRatio, rounded?: boolean, overlay?: boolean, extra?: string): string;
+export type ChipType = 'filter' | 'choice' | 'input';
+export type ChipSize = 'md' | 'sm' | 'xs';
+export declare function buildChipClasses(chipType: ChipType, size: ChipSize, active?: boolean, extra?: string): string;
+export type TagVariant = 'tonal' | 'filled' | 'outline' | 'text';
+export type TagColor = 'neutral' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+export declare function buildTagClasses(variant: TagVariant, color: TagColor, small?: boolean, extra?: string): string;
+export type DividerOrientation = 'horizontal' | 'vertical';
+export declare function buildDividerClasses(orientation: DividerOrientation, extra?: string): string;
+export type BreadcrumbSeparator = 'divider' | 'icon';
+export declare function buildBreadcrumbClasses(separator: BreadcrumbSeparator, extra?: string): string;
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+export declare function buildCheckboxClasses(size: CheckboxSize, error?: boolean, extra?: string): string;
+export type RadioSize = 'sm' | 'md' | 'lg';
+export declare function buildRadioClasses(size: RadioSize, error?: boolean, extra?: string): string;
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export declare function buildSwitchClasses(size: SwitchSize, extra?: string): string;
+export type CardVariant = 'solid' | 'outline' | 'no-fill';
+export type CardLayout = 'vertical' | 'horizontal';
+export declare function buildCardClasses(variant: CardVariant, layout: CardLayout, extra?: string): string;
+export type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+export type InputState = 'default' | 'error' | 'success' | 'warning';
+export declare function buildInputContainerClasses(size: InputSize, state: InputState, extra?: string): string;
+export type ListVariant = 'default' | 'error' | 'success' | 'warning';
+export type ListSize = 's' | 'm' | 'l' | 'xl';
+export declare function buildListClasses(variant: ListVariant, size: ListSize, extra?: string): string;
+export type DropdownType = 'selection' | 'button' | 'overflow';
+export type DropdownMode = 'single' | 'multi';
+export type DropdownSize = 'sm' | 'md' | 'lg';
+export type DropdownState = 'default' | 'error' | 'success' | 'warning';
+export declare function buildDropdownClasses(type: DropdownType, mode: DropdownMode, size: DropdownSize, state: DropdownState, open?: boolean, extra?: string): string;
+export type ComboboxType = 'single' | 'multi';
+export type ComboboxSize = 'sm' | 'md' | 'lg';
+export type ComboboxState = 'default' | 'error' | 'success' | 'warning';
+export declare function buildComboboxClasses(type: ComboboxType, size: ComboboxSize, state: ComboboxState, open?: boolean, extra?: string): string;
+export type ModalSize = 's' | 'm' | 'l';
+export type ModalOpacity = '25' | '50' | '75';
+export declare function buildModalBackdropClasses(opacity: ModalOpacity, blur?: boolean, open?: boolean, extra?: string): string;
+export declare function buildModalBoxClasses(size: ModalSize, centerContent?: boolean, extra?: string): string;
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export type AlertLayout = 'fluid' | 'center' | 'wide';
+export type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare function buildAlertClasses(variant: AlertVariant, layout?: AlertLayout, extra?: string): string;
+export declare function buildContextAlertClasses(variant: AlertVariant, extra?: string): string;
+export declare function buildAlertContainerClasses(position: AlertPosition, extra?: string): string;
+export type SearchSize = 's' | 'm' | 'lg';
+export declare function buildSearchContainerClasses(size: SearchSize, extra?: string): string;
+export type PaginationVariant = 'default' | 'dotted';
+export type PaginationStyle = 'default' | 'solid' | 'translucent';
+export declare function buildPaginationClasses(variant: PaginationVariant, paginationStyle?: PaginationStyle, extra?: string): string;
+export type TableSize = 's' | 'm' | 'lg';
+export type TableDivider = 'row' | 'column' | 'none';
+export type TableZebra = 'none' | 'rows' | 'cols';
+export declare function buildTableClasses(size: TableSize, divider?: TableDivider, zebra?: TableZebra, interactive?: boolean, sortable?: boolean, resizable?: boolean, headerBrand?: boolean, extra?: string): string;
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export declare function buildPopoverClasses(placement: PopoverPlacement, show?: boolean, extra?: string): string;
+export type TooltipPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center';
+export type TooltipSize = 's' | 'xs';
+export declare function buildTooltipClasses(placement: TooltipPlacement, size: TooltipSize, extra?: string): string;
+export type TabVariant = 'underline' | 'pill';
+export type TabSize = 'sm' | 'md' | 'lg';
+export declare function buildTabClasses(variant: TabVariant, size: TabSize, vertical?: boolean, extra?: string): string;
+export type IconButtonVariant = 'primary' | 'outline-primary' | 'tonal-primary' | 'text-primary';
+export type IconButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export declare function buildIconButtonClasses(variant: IconButtonVariant, size: IconButtonSize, pill?: boolean, extra?: string): string;
+export declare function buildAccessibilityBarClasses(extra?: string): string;
+export type AccordionArrowPosition = 'right' | 'left';
+export type AccordionVariant = 'default' | 'bordered';
+export declare function buildAccordionClasses(arrowPosition?: AccordionArrowPosition, variant?: AccordionVariant, extra?: string): string;
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperAlignment = 'default' | 'center' | 'left';
+export type StepperVariant = 'default' | 'bottom-line' | 'bottom-line-fill' | 'mobile' | 'progress';
+export type StepperSize = 'default' | 's';
+export declare function buildStepperClasses(orientation?: StepperOrientation, alignment?: StepperAlignment, variant?: StepperVariant, size?: StepperSize, extra?: string): string;
+export type SliderSize = 'sm' | 'md';
+export declare function buildSliderFieldClasses(size?: SliderSize, extra?: string): string;
+export type DrawerPlacement = 'right' | 'left' | 'top' | 'bottom';
+export declare function buildDrawerClasses(placement: DrawerPlacement, open?: boolean, extra?: string): string;
+export type DateTimePickerMode = 'date' | 'time';
+export declare function buildDateTimePickerClasses(mode: DateTimePickerMode, extra?: string): string;
+export type StatusPipelineOrientation = 'horizontal' | 'vertical';
+export type StatusPipelineAlignment = 'default' | 'center' | 'left';
+export type StatusPipelineVariant = 'default' | 'bottom-line' | 'bottom-line-fill' | 'mobile' | 'progress';
+export type StatusPipelineSize = 'default' | 's';
+export declare function buildStatusPipelineClasses(orientation?: StatusPipelineOrientation, alignment?: StatusPipelineAlignment, variant?: StatusPipelineVariant, size?: StatusPipelineSize, extra?: string): string;
+export type JourneyTimelineOrientation = 'vertical' | 'horizontal';
+export declare function buildJourneyTimelineClasses(orientation?: JourneyTimelineOrientation, extra?: string): string;
+export declare function buildFormFieldGroupClasses(extra?: string): string;
+export type OtpInputState = 'default' | 'success' | 'error' | 'locked';
+export declare function buildOtpInputClasses(state?: OtpInputState, extra?: string): string;
+export type FileUploadState = 'default' | 'default-vle' | 'selecting' | 'scanning' | 'uploaded' | 'uploaded-vle' | 'error';
+export declare function buildFileUploadClasses(state?: FileUploadState, extra?: string): string;
+export type ProgressIndicatorType = 'bar' | 'circle';
+export type ProgressIndicatorSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export declare function buildProgressIndicatorClasses(type: ProgressIndicatorType, extra?: string): string;
+export declare function buildFeedbackClasses(extra?: string): string;
+export type DraftStatusBannerVariant = 'default' | 'auto' | 'success';
+export declare function buildDraftStatusBannerClasses(variant?: DraftStatusBannerVariant, extra?: string): string;
+export type SlaProgressIndicatorType = 'circle' | 'linear' | 'badge';
+export declare function buildSlaProgressIndicatorClasses(type: SlaProgressIndicatorType, extra?: string): string;
+export declare function buildCarouselClasses(extra?: string): string;
+export declare function buildEmptyStateClasses(extra?: string): string;
+export type ChipGroupVariant = 'filter' | 'choice';
+export declare function buildChipGroupClasses(variant?: ChipGroupVariant, active?: boolean, extra?: string): string;
+export declare function buildNavbarClasses(extra?: string): string;
+export type SocialLinksSize = 'sm' | 'md' | 'lg';
+export declare function buildSocialLinksClasses(size?: SocialLinksSize, extra?: string): string;
+export type SlotGridVariant = 'weekly' | 'compact';
+export declare function buildSlotGridClasses(variant?: SlotGridVariant, extra?: string): string;
+export type FooterTheme = 'default' | 'primary' | 'dark';
+export declare function buildFooterClasses(theme?: FooterTheme, extra?: string): string;
+export type ResultListRowVariation = 'default' | 'v1' | 'v2' | 'v3' | 'v4' | 'v5';
+export declare function buildResultListRowClasses(variation?: ResultListRowVariation, extra?: string): string;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "ux4g-components-web",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "UX4G Design System — CSS bundle, design tokens, utilities, and shared Class_Builder types",
+  "scripts": {
+    "build:css": "node scripts/build-css.mjs",
+    "build:types": "rollup -c rollup.config.mjs",
+    "build": "npm run build:css && npm run build:types",
+    "prepublishOnly": "npm run build",
+    "test": "jest"
+  },
+  "exports": {
+    "./styles.css": {
+      "default": "./styles/ux4g.css"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.mjs",
+      "require": "./dist/types/index.cjs",
+      "default": "./dist/types/index.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "types": [
+        "./dist/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "styles/ux4g.css",
+    "styles/cascade-fixes.css",
+    "dist/"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@types/jest": "^29.5.14",
+    "cssnano": "^7.0.0",
+    "fast-check": "^3.23.2",
+    "jest": "^29.7.0",
+    "postcss": "^8.4.0",
+    "postcss-import": "^16.1.1",
+    "postcss-url": "^10.1.3",
+    "rollup": "^4.0.0",
+    "ts-jest": "^29.4.9",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
+  }
+}

package/styles/cascade-fixes.css

@@ -0,0 +1,52 @@
+/*
+ * UX4G Cascade Fixes
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Single file for ALL vendor CSS source-order conflicts.
+ * Imported LAST in build-css.mjs — after all vendor component CSS.
+ *
+ * WHY THIS EXISTS
+ * ───────────────
+ * The vendor CSS sometimes declares dimensional properties (min-height, width,
+ * padding) on variant/color classes that appear AFTER size classes in source
+ * order. Since all are single-class selectors with equal specificity (0,1,0),
+ * the variant rule wins via cascade — overriding the size class.
+ *
+ * FIX PATTERN
+ * ───────────
+ * Re-declare the size values here using a doubled selector (0,2,0 specificity)
+ * so they always beat any single-class variant rule, regardless of source order.
+ *
+ *   .ux4g-btn-sm.ux4g-btn-sm { min-height: 32px; }
+ *
+ * RULES
+ * ─────
+ * 1. Never modify vendor CSS directly
+ * 2. All cascade conflict fixes go HERE — not in per-component files
+ * 3. When adding a new component, audit its CSS for this pattern and add fixes here
+ * 4. Document each fix with the component name and the conflicting selectors
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+
+/* ── BUTTON ──────────────────────────────────────────────────────────────────
+ * Conflict: .ux4g-btn-primary / .ux4g-btn-danger etc. declare min-height: 40px
+ * and appear AFTER .ux4g-btn-sm / .ux4g-btn-xs in button.css source order.
+ * Result: size classes lose — all buttons render at 40px regardless of size.
+ * Fix: doubled selector (0,2,0) beats variant (0,1,0).
+ */
+.ux4g-btn-xl.ux4g-btn-xl { min-height: 56px; }
+.ux4g-btn-lg.ux4g-btn-lg { min-height: 48px; }
+.ux4g-btn-md.ux4g-btn-md { min-height: 40px; }
+.ux4g-btn-sm.ux4g-btn-sm { min-height: 32px; }
+.ux4g-btn-xs.ux4g-btn-xs { min-height: 24px; }
+
+/*
+ * ── ADD NEW COMPONENT FIXES BELOW ────────────────────────────────────────────
+ * Format:
+ *
+ * // ── COMPONENT_NAME ────────────────────────────────────────────────────────
+ * // Conflict: .ux4g-xxx-variant declares YYY after .ux4g-xxx-size in source
+ * // Fix: doubled selector
+ * .ux4g-xxx-sm.ux4g-xxx-sm { property: value; }
+ */