@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/alert/README.md

@@ -0,0 +1,117 @@
+# Alert
+
+Displays a callout for important information.
+
+## Components
+
+- `ScAlert` - Container with variant styling and icon support
+- `ScAlertTitle` - Bold title text
+- `ScAlertDescription` - Description text
+- `ScAlertAction` - Action button or link
+
+## Usage
+
+```html
+<div sc-alert>
+  <svg class="size-4"><!-- icon --></svg>
+  <h5 sc-alert-title>Heads up!</h5>
+  <div sc-alert-description>You can add components using the cli.</div>
+  <button sc-alert-action>Action</button>
+</div>
+```
+
+## Variants
+
+### Default
+
+```html
+<div sc-alert>
+  <h5 sc-alert-title>Note</h5>
+  <div sc-alert-description>This is an informational alert.</div>
+  <button sc-alert-action>Action</button>
+</div>
+```
+
+### Destructive
+
+```html
+<div sc-alert variant="destructive">
+  <h5 sc-alert-title>Error</h5>
+  <div sc-alert-description>Your session has expired.</div>
+  <button sc-alert-action>Action</button>
+</div>
+```
+
+## With Icon
+
+Icons are automatically positioned using CSS selectors:
+
+```html
+<div sc-alert>
+  <svg class="size-4"><!-- icon --></svg>
+  <h5 sc-alert-title>Title</h5>
+  <div sc-alert-description>Description with icon offset.</div>
+  <button sc-alert-action>Action</button>
+</div>
+```
+
+## Custom Variants
+
+Use the `class` input for custom styling:
+
+```html
+<!-- Success -->
+<div sc-alert class="border-green-500/50 text-green-600 [&>svg]:text-green-600">
+  <h5 sc-alert-title>Success!</h5>
+  <div sc-alert-description>Changes saved.</div>
+  <button sc-alert-action>Action</button>
+</div>
+
+<!-- Warning -->
+<div sc-alert class="border-yellow-500/50 text-yellow-600 [&>svg]:text-yellow-600">
+  <h5 sc-alert-title>Warning</h5>
+  <div sc-alert-description>Account expiring soon.</div>
+  <button sc-alert-action>Action</button>
+</div>
+```
+
+## ScAlert Inputs
+
+| Input     | Type                         | Default     | Description            |
+| --------- | ---------------------------- | ----------- | ---------------------- |
+| `variant` | `'default' \| 'destructive'` | `'default'` | Alert variant          |
+| `class`   | `string`                     | `''`        | Additional CSS classes |
+
+## ScAlertTitle Inputs
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+## ScAlertDescription Inputs
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+## ScAlertAction Inputs
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+## Styling
+
+The alert uses CSS selectors to position icons:
+
+- `[&>svg~*]:pl-7` - Adds left padding to siblings after SVG
+- `[&>svg+div]:translate-y-[-3px]` - Adjusts vertical alignment
+- `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4` - Positions icon
+
+## Accessibility
+
+- Uses `role="alert"` for screen reader announcements
+- Semantic heading structure with alert title
+- Sufficient color contrast for both variants
+- Icons are decorative (content is in title/description)
+- Action is a `button` or `a` element for keyboard accessibility.

package/src/lib/components/alert/alert-action.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-alert-action]',
+  host: {
+    'data-slot': 'alert-action',
+    '[class]': 'class()',
+  },
+})
+export class ScAlertAction {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('absolute top-2 right-2', this.classInput()),
+  );
+}

package/src/lib/components/alert/alert-description.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-alert-description]',
+  host: {
+    'data-slot': 'alert-description',
+    '[class]': 'class()',
+  },
+})
+export class ScAlertDescription {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/alert/alert-title.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-alert-title]',
+  host: {
+    'data-slot': 'alert-title',
+    '[class]': 'class()',
+  },
+})
+export class ScAlertTitle {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/alert/alert.ts

@@ -0,0 +1,39 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type ScAlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+  selector: '[sc-alert]',
+  host: {
+    'data-slot': 'alert',
+    role: 'alert',
+    '[class]': 'class()',
+  },
+})
+export class ScAlert {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<ScAlertVariants['variant']>('default');
+
+  protected readonly class = computed(() =>
+    cn(alertVariants({ variant: this.variant() }), this.classInput()),
+  );
+}

package/src/lib/components/alert/index.ts

@@ -0,0 +1,4 @@
+export * from './alert';
+export * from './alert-title';
+export * from './alert-description';
+export * from './alert-action';