agnosticui-core 2.0.0-alpha.2

package/src/components/Divider/core/_Divider.ts

@@ -0,0 +1,238 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { hasSlotContent } from '../../../utils/slot';
+
+export type DividerJustify = 'center' | 'start' | 'end';
+export type DividerSize = 'default' | 'small' | 'large' | 'xlarge';
+export type DividerVariant = 'default' | 'success' | 'info' | 'warning' | 'error' | 'monochrome';
+
+/**
+ * @csspart ag-divider - The main divider container element
+ * @csspart ag-divider-content - The content container (when slotted content is provided)
+ */
+export interface DividerProps {
+  vertical?: boolean;
+  justify?: DividerJustify;
+  size?: DividerSize;
+  variant?: DividerVariant;
+}
+
+/**
+ * Divider component for visually separating content
+ *
+ * @element ag-divider
+ * @slot default - Optional content to display within the divider (text, icons, etc.)
+ */
+export class AgDivider extends LitElement implements DividerProps {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([is-vertical]) {
+      align-self: stretch;
+    }
+
+    .divider {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    .divider::before,
+    .divider::after {
+      content: '';
+      background-color: var(--ag-border);
+      height: var(--ag-border-width-2);
+      flex-grow: 1;
+    }
+
+    /* Sizes - Horizontal */
+    .divider-small::before,
+    .divider-small::after {
+      height: var(--ag-border-width-1);
+    }
+
+    .divider-large::before,
+    .divider-large::after {
+      height: var(--ag-border-width-3);
+    }
+
+    .divider-xlarge::before,
+    .divider-xlarge::after {
+      height: 4px;
+    }
+
+    /* Justify */
+    .divider-justify-end::after,
+    .divider-justify-start::before {
+      flex-grow: 0;
+      flex-basis: 3%;
+    }
+
+    /* Content */
+    .divider-has-content {
+      padding-inline-start: var(--ag-space-4);
+      padding-inline-end: var(--ag-space-4);
+    }
+
+    /* Vertical */
+    .divider-vertical {
+      height: 100%;
+      margin: 0 var(--ag-space-4);
+      width: var(--ag-space-4);
+      flex-direction: column;
+    }
+
+    .divider-vertical::before,
+    .divider-vertical::after {
+      width: var(--ag-border-width-2);
+      height: auto;  /* Override the fixed height for vertical growth */
+    }
+
+    /* Sizes - Vertical */
+    .divider-vertical.divider-small::before,
+    .divider-vertical.divider-small::after {
+      width: var(--ag-border-width-1);
+    }
+
+    .divider-vertical.divider-large::before,
+    .divider-vertical.divider-large::after {
+      width: var(--ag-border-width-3);
+    }
+
+    .divider-vertical.divider-xlarge::before,
+    .divider-vertical.divider-xlarge::after {
+      width: 4px;
+    }
+
+    .divider-vertical .divider-has-content {
+      padding-inline-start: var(--ag-space-6);
+      padding-inline-end: var(--ag-space-6);
+      padding-block-start: var(--ag-space-3);
+      padding-block-end: var(--ag-space-3);
+    }
+
+    /* Variants */
+    .divider-warning::before,
+    .divider-warning::after {
+      background-color: var(--ag-warning);
+    }
+
+    .divider-warning .divider-content {
+      color: var(--ag-text-primary);
+    }
+
+    .divider-error::before,
+    .divider-error::after {
+      background-color: var(--ag-danger);
+    }
+
+    .divider-error .divider-content {
+      color: var(--ag-text-primary);
+    }
+
+    .divider-success::before,
+    .divider-success::after {
+      background-color: var(--ag-success);
+    }
+
+    .divider-success .divider-content {
+      color: var(--ag-text-primary);
+    }
+
+    .divider-info::before,
+    .divider-info::after {
+      background-color: var(--ag-info);
+    }
+
+    .divider-info .divider-content {
+      color: var(--ag-text-primary);
+    }
+
+    .divider-monochrome::before,
+    .divider-monochrome::after {
+      background-color: var(--ag-text-primary);
+    }
+
+    .divider-monochrome .divider-content {
+      color: var(--ag-text-primary);
+    }
+  `;
+
+  @property({ type: Boolean, attribute: 'is-vertical', reflect: true })
+  declare vertical: boolean;
+
+  @property({ type: String, reflect: true })
+  declare justify: DividerJustify;
+
+  @property({ type: String, reflect: true })
+  declare size: DividerSize;
+
+  @property({ type: String, reflect: true })
+  declare variant: DividerVariant;
+
+  @property({ type: Boolean, state: true })
+  private declare hasContent: boolean;
+
+  constructor() {
+    super();
+    this.vertical = false;
+    this.justify = 'center';
+    this.size = 'default';
+    this.variant = 'default';
+    this.hasContent = false;
+  }
+
+  private handleSlotChange(e: Event) {
+    this.hasContent = hasSlotContent(e.target as HTMLSlotElement);
+  }
+
+  private getClasses() {
+    const classes = ['divider'];
+
+    if (this.vertical) {
+      classes.push('divider-vertical');
+    }
+
+    if (this.justify !== 'center' && !this.vertical) {
+      classes.push(`divider-justify-${this.justify}`);
+    }
+
+    if (this.size !== 'default') {
+      classes.push(`divider-${this.size}`);
+    }
+
+    if (this.variant !== 'default') {
+      classes.push(`divider-${this.variant}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  render() {
+    const orientation = this.vertical ? 'vertical' : 'horizontal';
+    const contentClasses = this.hasContent ? 'divider-content divider-has-content' : 'divider-content';
+
+    return html`
+      <div
+        class="${this.getClasses()}"
+        part="ag-divider"
+        role="separator"
+        aria-orientation="${orientation}"
+      >
+        <span class="${contentClasses}" part="ag-divider-content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-divider': AgDivider;
+  }
+}

package/src/components/Divider/core/index.ts

@@ -0,0 +1,2 @@
+export { AgDivider } from './_Divider';
+export type { DividerProps, DividerJustify, DividerSize, DividerVariant } from './_Divider';

package/src/components/Divider/react/ReactDivider.tsx

@@ -0,0 +1,14 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { AgDivider, type DividerProps } from '../core/Divider';
+
+export type ReactDividerProps = DividerProps;
+
+export const ReactDivider = createComponent({
+  tagName: 'ag-divider',
+  elementClass: AgDivider,
+  react: React,
+  events: {
+    // onEventName: 'event-name',
+  },
+});

package/src/components/Divider/react/index.ts

@@ -0,0 +1,2 @@
+export { ReactDivider } from './ReactDivider';
+export type { ReactDividerProps } from './ReactDivider';

package/src/components/Divider/vue/VueDivider.vue

@@ -0,0 +1,84 @@
+<template>
+  <ag-divider
+    ref="agComponent"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </ag-divider>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  watchEffect,
+  nextTick,
+  type PropType,
+} from "vue";
+import type {
+  DividerProps,
+  DividerJustify,
+  DividerSize,
+  DividerVariant,
+} from "../core/Divider";
+import "../core/Divider"; // Registers the ag-divider web component
+
+export default defineComponent({
+  name: "VueDivider",
+  props: {
+    vertical: { type: Boolean, default: false },
+    justify: {
+      type: String as PropType<DividerJustify>,
+      default: "center" as DividerJustify,
+    },
+    size: {
+      type: String as PropType<DividerSize>,
+      default: "default" as DividerSize,
+    },
+    variant: {
+      type: String as PropType<DividerVariant>,
+      default: "default" as DividerVariant,
+    },
+  },
+  setup(props) {
+    const agComponent = ref<(HTMLElement & DividerProps) | null>(null);
+
+    const syncProps = () => {
+      const webComponent = agComponent.value;
+      if (!webComponent) return;
+
+      webComponent.vertical = props.vertical;
+      webComponent.justify = props.justify;
+      webComponent.size = props.size;
+      webComponent.variant = props.variant;
+    };
+
+    onMounted(async () => {
+      await customElements.whenDefined("ag-divider");
+      await nextTick();
+      syncProps();
+
+      // Manually trigger slot content detection for Vue
+      // Vue's slot content might not trigger slotchange event reliably
+      await nextTick();
+      const webComponent = agComponent.value;
+      if (webComponent) {
+        const slot = webComponent.shadowRoot?.querySelector("slot");
+        if (slot) {
+          // Force the slot change handler to run
+          slot.dispatchEvent(new Event("slotchange"));
+        }
+      }
+    });
+
+    watchEffect(() => {
+      if (agComponent.value) {
+        syncProps();
+      }
+    });
+
+    return { agComponent };
+  },
+});
+</script>

package/src/components/Divider/vue/index.ts

@@ -0,0 +1,5 @@
+import VueDivider from './VueDivider.vue';
+import type { DividerProps as VueDividerProps } from '../core/_Divider';
+
+export { VueDivider };
+export type { VueDividerProps };

package/src/components/Drawer/core/Drawer.ts

@@ -0,0 +1,13 @@
+import { AgnosticDrawer } from './_drawer.js';
+
+if (!customElements.get('ag-drawer')) {
+  customElements.define('ag-drawer', AgnosticDrawer);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-drawer': AgnosticDrawer;
+  }
+}
+
+export * from './_drawer.js';

package/src/components/Drawer/core/_drawer.ts

@@ -0,0 +1,146 @@
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+// Import from barrel file to ensure Dialog custom element is registered
+import { AgnosticDialog } from "../../Dialog/core/Dialog";
+
+// Event types
+export type DrawerOpenEvent = CustomEvent<void>;
+export type DrawerCloseEvent = CustomEvent<void>;
+export type DrawerCancelEvent = CustomEvent<void>;
+
+// Props interface following INTERFACE_STANDARDS.md
+export interface DrawerProps {
+  open?: boolean;
+  heading?: string;
+  description?: string;
+  noCloseOnEscape?: boolean;
+  noCloseOnBackdrop?: boolean;
+  showCloseButton?: boolean;
+  position?: 'start' | 'end' | 'top' | 'bottom';
+  // Event handlers
+  onDrawerOpen?: (event: DrawerOpenEvent) => void;
+  onDrawerClose?: (event: DrawerCloseEvent) => void;
+  onDrawerCancel?: (event: DrawerCancelEvent) => void;
+}
+
+export class AgnosticDrawer extends LitElement implements DrawerProps {
+  @property({ type: Boolean, reflect: true })
+  declare open: boolean;
+
+  @property({ type: String })
+  declare heading: string;
+
+  @property({ type: String })
+  declare description: string;
+
+  @property({ type: Boolean })
+  declare noCloseOnEscape: boolean;
+
+  @property({ type: Boolean })
+  declare noCloseOnBackdrop: boolean;
+
+  @property({ type: Boolean })
+  declare showCloseButton: boolean;
+
+  @property({ type: String, reflect: true, attribute: 'position' })
+  declare position: 'start' | 'end' | 'top' | 'bottom';
+
+  @property({ attribute: false })
+  declare onDrawerOpen?: (event: DrawerOpenEvent) => void;
+
+  @property({ attribute: false })
+  declare onDrawerClose?: (event: DrawerCloseEvent) => void;
+
+  @property({ attribute: false })
+  declare onDrawerCancel?: (event: DrawerCancelEvent) => void;
+
+  private _dialogElement?: AgnosticDialog;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = '';
+    this.description = '';
+    this.position = 'bottom';
+    this.noCloseOnEscape = false;
+    this.noCloseOnBackdrop = false;
+    this.showCloseButton = false;
+  }
+
+  firstUpdated(changedProperties: Map<string, unknown>) {
+    super.firstUpdated(changedProperties);
+    this._dialogElement = this.shadowRoot?.querySelector('ag-dialog') as AgnosticDialog | undefined;
+
+    if (this._dialogElement) {
+      // Set up event forwarding from Dialog events to Drawer events
+      this._dialogElement.addEventListener('dialog-open', () => {
+        const openEvent = new CustomEvent<void>('drawer-open', {
+          bubbles: true,
+          composed: true,
+        });
+        this.dispatchEvent(openEvent);
+        this.onDrawerOpen?.(openEvent);
+      });
+
+      this._dialogElement.addEventListener('dialog-close', () => {
+        const closeEvent = new CustomEvent<void>('drawer-close', {
+          bubbles: true,
+          composed: true,
+        });
+        this.dispatchEvent(closeEvent);
+        this.onDrawerClose?.(closeEvent);
+        // Sync Drawer's state when Dialog closes itself
+        if (this.open) {
+          this.open = false;
+        }
+      });
+
+      this._dialogElement.addEventListener('dialog-cancel', () => {
+        const cancelEvent = new CustomEvent<void>('drawer-cancel', {
+          bubbles: true,
+          composed: true,
+        });
+        this.dispatchEvent(cancelEvent);
+        this.onDrawerCancel?.(cancelEvent);
+        // Sync Drawer's state when Dialog cancels itself
+        if (this.open) {
+          this.open = false;
+        }
+      });
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // Sync open property changes from Drawer to Dialog
+    if (changedProperties.has('open') && this._dialogElement) {
+      if (this._dialogElement.open !== this.open) {
+        this._dialogElement.open = this.open;
+      }
+    }
+  }
+
+  /*
+  Property Bindings
+  In Lit, the dot (.) prefix is used to create a property binding, which sets a JavaScript property on an element instead of an HTML attribute. This is a critical distinction because properties can hold any JavaScript data type, including objects, arrays, and booleans, while HTML attributes can only store strings.
+  https://lit.dev/docs/v1/lit-html/template-reference/#binding-types
+  https://vaadin.com/docs/latest/hilla/lit/components/create#binding-to-a-property
+  */
+  render() {
+    return html`
+      <ag-dialog
+        .open=${this.open}
+        .heading=${this.heading}
+        .description=${this.description}
+        .noCloseOnEscape=${this.noCloseOnEscape}
+        .noCloseOnBackdrop=${this.noCloseOnBackdrop}
+        .showCloseButton=${this.showCloseButton}
+        .drawerPosition=${this.position}
+      >
+        <slot></slot>
+      </ag-dialog>
+    `;
+  }
+
+}

package/src/components/Drawer/react/ReactDrawer.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import {
+  AgnosticDrawer,
+  type DrawerProps,
+  type DrawerOpenEvent,
+  type DrawerCloseEvent,
+  type DrawerCancelEvent
+} from '../core/Drawer';
+
+/**
+ * React-specific props for Drawer
+ */
+export interface ReactDrawerProps extends DrawerProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Helper component for drawer header slot
+ */
+export interface DrawerHeaderProps {
+  children?: React.ReactNode;
+}
+
+/**
+ * Helper component for drawer footer slot
+ */
+export interface DrawerFooterProps {
+  children?: React.ReactNode;
+}
+
+// Create Drawer component with @lit/react
+export const ReactDrawer = createComponent({
+  tagName: 'ag-drawer',
+  elementClass: AgnosticDrawer,
+  react: React,
+  events: {
+    onDrawerOpen: 'drawer-open' as EventName<DrawerOpenEvent>,
+    onDrawerClose: 'drawer-close' as EventName<DrawerCloseEvent>,
+    onDrawerCancel: 'drawer-cancel' as EventName<DrawerCancelEvent>,
+  },
+});
+
+// Helper components for slots (simple React components)
+export const DrawerHeader: React.FC<DrawerHeaderProps> = ({ children }) => {
+  return <div slot="header">{children}</div>;
+};
+
+export const DrawerFooter: React.FC<DrawerFooterProps> = ({ children }) => {
+  return <div slot="footer">{children}</div>;
+};
+
+// Re-export event types
+export type { DrawerOpenEvent, DrawerCloseEvent, DrawerCancelEvent } from '../core/Drawer';

package/src/components/Drawer/react/index.ts

@@ -0,0 +1,5 @@
+export { ReactDrawer } from './ReactDrawer';
+export type { ReactDrawerProps } from './ReactDrawer';
+
+// Re-export event types from core for convenience
+export type { DrawerOpenEvent, DrawerCloseEvent, DrawerCancelEvent } from '../core/Drawer';

package/src/components/Drawer/vue/VueDrawer.vue

@@ -0,0 +1,67 @@
+<template>
+  <ag-drawer
+    ref="drawerRef"
+    .open="open"
+    .noCloseOnEscape="noCloseOnEscape"
+    .noCloseOnBackdrop="noCloseOnBackdrop"
+    .showCloseButton="showCloseButton"
+    .position="position"
+    :heading="heading"
+    :description="description"
+    @drawer-open="handleOpen"
+    @drawer-close="handleClose"
+    @drawer-cancel="handleCancel"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import "../core/Drawer";
+
+export interface VueDrawerProps {
+  open?: boolean;
+  heading?: string;
+  description?: string;
+  noCloseOnEscape?: boolean;
+  noCloseOnBackdrop?: boolean;
+  showCloseButton?: boolean;
+  position?: "start" | "end" | "top" | "bottom";
+}
+
+const props = withDefaults(defineProps<VueDrawerProps>(), {
+  open: false,
+  heading: "",
+  description: "",
+  noCloseOnEscape: false,
+  noCloseOnBackdrop: false,
+  showCloseButton: false,
+  position: "bottom",
+});
+
+const emit = defineEmits<{
+  "drawer-open": [event: Event];
+  "drawer-close": [event: Event];
+  "drawer-cancel": [event: Event];
+  "update:open": [value: boolean];
+}>();
+
+const drawerRef = ref<HTMLElement>();
+
+const handleOpen = (event: Event) => {
+  emit("drawer-open", event);
+  emit("update:open", true);
+};
+
+const handleClose = (event: Event) => {
+  emit("drawer-close", event);
+  emit("update:open", false);
+};
+
+const handleCancel = (event: Event) => {
+  emit("drawer-cancel", event);
+  emit("update:open", false);
+};
+</script>

package/src/components/Drawer/vue/index.ts

@@ -0,0 +1,13 @@
+export { default } from './VueDrawer.vue';
+export { default as VueDrawer } from './VueDrawer.vue';
+
+// Define types separately since Vue component types are handled differently
+export interface VueDrawerProps {
+  open?: boolean;
+  heading?: string;
+  description?: string;
+  noCloseOnEscape?: boolean;
+  noCloseOnBackdrop?: boolean;
+  showCloseButton?: boolean;
+  position?: 'start' | 'end' | 'top' | 'bottom';
+}

package/src/components/EmptyState/core/EmptyState.ts

@@ -0,0 +1,14 @@
+import { AgEmptyState } from './_EmptyState.js';
+
+if (!customElements.get('ag-empty-state')) {
+  customElements.define('ag-empty-state', AgEmptyState);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-empty-state': AgEmptyState;
+  }
+}
+
+// Re-export everything from core
+export * from './_EmptyState.js';