@aggc/ui 0.7.1 → 0.8.0

package/src/css/base.css

@@ -83,9 +83,58 @@ body {
   }
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toastFadeOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
+@keyframes toastSwipeOut {
+  from {
+    transform: translateX(var(--reka-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aggc-spin,
-  [data-ui-loading-pulse] {
+  [data-ui-loading-pulse],
+  [data-state="open"],
+  [data-state="closed"] {
     animation: none !important;
   }
 

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./components/index";
+export * from "./composables/useToast";
 export * from "./styles/index";
 export * from "./tokens/index";

package/src/stories/feedback/UiToast.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiButton, UiToast, UiToastProvider } from "../../components";
+import { useToast } from "../../composables/useToast";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storySurfaceClass,
+  storySurfaceCompactClass,
+} from "../support/storyStyles";
+
+const meta: Meta = {
+  title: "Feedback/UiToast",
+  id: "ui-toast",
+  component: UiToast,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Notification toast with tone-based styling, auto-dismiss, and swipe-to-dismiss. Built on Reka UI Toast.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Tones: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiToast, UiToastProvider, UiButton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const toast = useToast();
+      return { previewTheme, toast };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="toast-tones">
+        <UiToastProvider>
+          <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+            <UiButton variant="outline" @click="toast.success('Workspace created successfully')">Success</UiButton>
+            <UiButton variant="outline" @click="toast.error('Failed to upload document')">Error</UiButton>
+            <UiButton variant="outline" @click="toast.info('API key copied to clipboard')">Info</UiButton>
+            <UiButton variant="outline" @click="toast.warning('Storage quota almost full')">Warning</UiButton>
+          </div>
+        </UiToastProvider>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Static: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiToast, UiToastProvider },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="toast-static">
+        <UiToastProvider>
+          <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; flex-direction: column; gap: 0.75rem;">
+            <UiToast tone="success" message="Document uploaded and processed." :duration="0" />
+            <UiToast tone="error" message="Upload failed. Please try again." :duration="0" />
+            <UiToast tone="info" message="New workspace available." :duration="0" />
+            <UiToast tone="warning" message="Rate limit approaching." :duration="0" />
+          </div>
+        </UiToastProvider>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/layout/UiModal.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiButton, UiField, UiModal } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storySurfaceClass,
+  storySurfaceCompactClass,
+} from "../support/storyStyles";
+
+const meta: Meta = {
+  title: "Layout/UiModal",
+  id: "ui-modal",
+  component: UiModal,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Accessible dialog overlay with focus trap, ESC close, and portal rendering. Built on Reka UI Dialog.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiModal, UiButton, UiField },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const open = ref(false);
+      return { previewTheme, open };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="modal-default">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <UiButton @click="open = true">Open Modal</UiButton>
+          <UiModal v-model:open="open" title="Create Workspace" description="Add a new workspace to your tenant.">
+            <div style="display: flex; flex-direction: column; gap: 1rem;">
+              <UiField label="Name" for-id="ws-name">
+                <input id="ws-name" type="text" placeholder="e.g., Legal Documents Q2" style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--colors-border-default); background: var(--colors-bg-input); color: var(--colors-text-primary); font-size: 0.875rem;" />
+              </UiField>
+            </div>
+            <template #actions>
+              <UiButton variant="outline" @click="open = false">Cancel</UiButton>
+              <UiButton @click="open = false">Create</UiButton>
+            </template>
+          </UiModal>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiModal, UiButton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const openSm = ref(false);
+      const openMd = ref(false);
+      const openLg = ref(false);
+      return { previewTheme, openSm, openMd, openLg };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="modal-sizes">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; gap: 0.75rem;">
+          <UiButton variant="outline" @click="openSm = true">Small</UiButton>
+          <UiButton variant="outline" @click="openMd = true">Medium</UiButton>
+          <UiButton variant="outline" @click="openLg = true">Large</UiButton>
+          <UiModal v-model:open="openSm" size="sm" title="Small Modal">
+            <p>This is a small modal (400px max width).</p>
+          </UiModal>
+          <UiModal v-model:open="openMd" size="md" title="Medium Modal">
+            <p>This is a medium modal (560px max width).</p>
+          </UiModal>
+          <UiModal v-model:open="openLg" size="lg" title="Large Modal">
+            <p>This is a large modal (720px max width).</p>
+            <template #actions>
+              <UiButton variant="outline" @click="openLg = false">Close</UiButton>
+            </template>
+          </UiModal>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/primitives/UiAvatar.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiAvatar } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storySurfaceClass,
+  storySurfaceCompactClass,
+} from "../support/storyStyles";
+
+const meta: Meta = {
+  title: "Primitives/UiAvatar",
+  id: "ui-avatar",
+  component: UiAvatar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "User avatar with image support and initials fallback. Built on Reka UI Avatar.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiAvatar },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="avatar-sizes">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; align-items: center; gap: 1rem;">
+          <UiAvatar name="Alice Johnson" size="sm" />
+          <UiAvatar name="Alice Johnson" size="md" />
+          <UiAvatar name="Alice Johnson" size="lg" />
+          <UiAvatar name="Alice Johnson" size="xl" />
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Shapes: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiAvatar },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="avatar-shapes">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; align-items: center; gap: 1rem;">
+          <UiAvatar name="Alice Johnson" size="lg" shape="circle" />
+          <UiAvatar name="Alice Johnson" size="lg" shape="square" />
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiAvatar },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="avatar-image">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; align-items: center; gap: 1rem;">
+          <UiAvatar name="Colm Tuite" src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" size="lg" />
+          <UiAvatar name="Fallback User" src="https://broken-url.invalid/photo.jpg" size="lg" />
+          <UiAvatar name="No Image" size="lg" />
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};