@aleph-alpha/ui-library 1.1.0 → 1.3.0

package/README.md

@@ -2,10 +2,127 @@
 
 📘 **[View Storybook](https://urban-broccoli-l1okew7.pages.github.io/ui-library)**
 
+## Installation
+
+```bash
+pnpm add @aleph-alpha/ui-library
+```
+
+### Required Peer Dependencies
+
+```bash
+pnpm add -D unocss @unocss/preset-wind4 @unocss/reset unocss-preset-animations unocss-preset-shadcn
+```
+
+## Usage
+
+### 1. Configure UnoCSS
+
+The library exports a helper function `getUiLibraryContentConfig()` to simplify UnoCSS configuration:
+
+```typescript
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import { getUiLibraryContentConfig } from '@aleph-alpha/ui-library/config'
+import presetWind from '@unocss/preset-wind4'
+import presetAnimations from 'unocss-preset-animations'
+import presetShadcn from 'unocss-preset-shadcn'
+
+export default defineConfig({
+  ...getUiLibraryContentConfig(),
+  presets: [
+    presetWind(),
+    presetAnimations(),
+    presetShadcn({ color: 'neutral' }),
+  ],
+})
+```
+
+### 2. Configure Vite
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+
+export default defineConfig({
+  plugins: [vue(), UnoCSS()],
+})
+```
+
+### 3. Import Styles
+
+```typescript
+// main.ts
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+```
+
+### 4. Use Components
+
+```vue
+<script setup lang="ts">
+import { UiButton, UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton>Click me</UiButton>
+  <UiBadge variant="secondary">New</UiBadge>
+</template>
+```
+
+### Using with @aleph-alpha/ds-components-vue
+
+If you're using both `ui-library` and `ds-components-vue`, configure UnoCSS to include both:
+
+> **⚠️ Important:** Do NOT add `presetWind()` or `presetAnimations()` separately when using `presetsAlephAlpha()`. The DS presets already include these utilities. Adding them again from different packages causes style conflicts.
+
+```typescript
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import { presetsAlephAlpha, getDesignSystemContentPathConfig } from '@aleph-alpha/config-css'
+import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons'
+import { getUiLibraryContentConfig } from '@aleph-alpha/ui-library/config'
+import presetShadcn from 'unocss-preset-shadcn'
+
+const uiLibraryConfig = getUiLibraryContentConfig()
+const dsConfig = getDesignSystemContentPathConfig('vue')
+
+export default defineConfig({
+  presets: [
+    // DS presets (already includes presetWind + presetAnimations)
+    ...presetsAlephAlpha(),
+    presetAlephAlphaIcons(),
+    // UI Library preset (for shadcn CSS variables only)
+    presetShadcn({ color: 'neutral' }),
+  ],
+  content: {
+    filesystem: [
+      ...(uiLibraryConfig.content.filesystem || []),
+      ...(dsConfig.content?.filesystem || []),
+    ],
+    pipeline: {
+      include: [
+        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+        'src/**/*.{js,ts,vue}',
+        'node_modules/@aleph-alpha/ui-library/**/*.js',
+        'node_modules/@aleph-alpha/ds-components-vue/**/*.{js,ts}',
+      ],
+    },
+  },
+})
+```
+
 ## External Resources
 
 - [shadcn-vue](https://www.shadcn-vue.com/) — The component library we build upon
-- [Radix Vue](https://www.radix-vue.com/) — Underlying accessible primitives
+- [Reka UI](https://reka-ui.com/) — Underlying accessible primitives
 - [TanStack Table](https://tanstack.com/table/latest) — Headless table library (used in UiDataTable)
 - [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/) — Accessibility patterns guide
 - [WCAG 2.2](https://www.w3.org/TR/WCAG22/) — Web accessibility guidelines

package/config.d.ts

@@ -0,0 +1,11 @@
+/**
+ * UnoCSS content configuration for scanning ui-library components.
+ */
+export declare const getUiLibraryContentConfig: () => {
+  content: {
+    filesystem: string[];
+    pipeline: {
+      include: (RegExp | string)[];
+    };
+  };
+};

package/config.js

@@ -0,0 +1,18 @@
+/**
+ * UnoCSS content configuration for scanning ui-library components.
+ */
+export const getUiLibraryContentConfig = () => ({
+  content: {
+    filesystem: ['node_modules/@aleph-alpha/ui-library/dist/**/*.js'],
+    // NOTE: pipeline.include is NOT redundant with filesystem.
+    // filesystem = where to find files, pipeline.include = which files to extract classes from.
+    // Both are required for UnoCSS to properly scan node_modules.
+    pipeline: {
+      include: [
+        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+        'src/**/*.{js,ts,vue}',
+        'node_modules/@aleph-alpha/ui-library/**/*.js',
+      ],
+    },
+  },
+});

package/dist/system/index.d.ts

@@ -53,21 +53,21 @@ startIcon: Component;
 endIcon: Component;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_17: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_17: DefineComponent<UiCardProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_18: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_18: DefineComponent<UiCardActionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardActionProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_19: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_19: DefineComponent<UiCardContentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardContentProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_2: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
-declare const __VLS_component_20: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLParagraphElement>;
+declare const __VLS_component_20: DefineComponent<UiCardDescriptionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardDescriptionProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLParagraphElement>;
 
-declare const __VLS_component_21: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_21: DefineComponent<UiCardFooterProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardFooterProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_22: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_22: DefineComponent<UiCardHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_23: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLHeadingElement>;
+declare const __VLS_component_23: DefineComponent<UiCardTitleProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiCardTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLHeadingElement>;
 
 declare const __VLS_component_24: DefineComponent<UiDropdownMenuProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:open": (value: boolean) => any;
@@ -1277,19 +1277,18 @@ export declare interface UiBadgeProps {
      */
     asChild?: boolean;
     /**
-     * Icon component to display before the button text.
-     * Hidden when loading is true.
+     * Icon component to display before the badge text.
      * @example
      * ```vue
-     * <UiButton :startIcon="ChevronLeft">Back</UiButton>
+     * <UiBadge :startIcon="InfoIcon">Info</UiBadge>
      * ```
      */
     startIcon?: Component;
     /**
-     * Icon component to display after the button text.
+     * Icon component to display after the badge text.
      * @example
      * ```vue
-     * <UiButton :endIcon="ChevronRight">Next</UiButton>
+     * <UiBadge :endIcon="CloseIcon">Dismissible</UiBadge>
      * ```
      */
     endIcon?: Component;
@@ -1377,16 +1376,93 @@ export declare const UiCard: __VLS_WithTemplateSlots_17<typeof __VLS_component_1
 
 export declare const UiCardAction: __VLS_WithTemplateSlots_18<typeof __VLS_component_18, __VLS_TemplateResult_18["slots"]>;
 
+/**
+ * Props for UiCardAction component.
+ * Container for action buttons in the card header.
+ */
+export declare interface UiCardActionProps {
+    /**
+     * Additional CSS classes to apply to the action container.
+     */
+    class?: HTMLAttributes['class'];
+}
+
 export declare const UiCardContent: __VLS_WithTemplateSlots_19<typeof __VLS_component_19, __VLS_TemplateResult_19["slots"]>;
 
+/**
+ * Props for UiCardContent component.
+ * The main content area of the card.
+ */
+export declare interface UiCardContentProps {
+    /**
+     * Additional CSS classes to apply to the content container.
+     */
+    class?: HTMLAttributes['class'];
+}
+
 export declare const UiCardDescription: __VLS_WithTemplateSlots_20<typeof __VLS_component_20, __VLS_TemplateResult_20["slots"]>;
 
+/**
+ * Props for UiCardDescription component.
+ * A brief description or subtitle for the card.
+ */
+export declare interface UiCardDescriptionProps {
+    /**
+     * Additional CSS classes to apply to the description element.
+     */
+    class?: HTMLAttributes['class'];
+}
+
 export declare const UiCardFooter: __VLS_WithTemplateSlots_21<typeof __VLS_component_21, __VLS_TemplateResult_21["slots"]>;
 
+/**
+ * Props for UiCardFooter component.
+ * Container for card actions or additional information at the bottom.
+ */
+export declare interface UiCardFooterProps {
+    /**
+     * Additional CSS classes to apply to the footer container.
+     */
+    class?: HTMLAttributes['class'];
+}
+
 export declare const UiCardHeader: __VLS_WithTemplateSlots_22<typeof __VLS_component_22, __VLS_TemplateResult_22["slots"]>;
 
+/**
+ * Props for UiCardHeader component.
+ * Container for the card's header content (title, description, action).
+ */
+export declare interface UiCardHeaderProps {
+    /**
+     * Additional CSS classes to apply to the header container.
+     */
+    class?: HTMLAttributes['class'];
+}
+
+/**
+ * Props for UiCard component.
+ * A container with rounded corners and a shadow for grouping related content.
+ */
+export declare interface UiCardProps {
+    /**
+     * Additional CSS classes to apply to the card container.
+     */
+    class?: HTMLAttributes['class'];
+}
+
 export declare const UiCardTitle: __VLS_WithTemplateSlots_23<typeof __VLS_component_23, __VLS_TemplateResult_23["slots"]>;
 
+/**
+ * Props for UiCardTitle component.
+ * The main heading of the card.
+ */
+export declare interface UiCardTitleProps {
+    /**
+     * Additional CSS classes to apply to the title element.
+     */
+    class?: HTMLAttributes['class'];
+}
+
 export declare const UiCheckbox: DefineComponent<__VLS_PublicProps_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: UiCheckboxModelValue) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{