feat(card): create card component

apps/ng-primitives-docs/src/app/examples/card/card.example.ts

@@ -0,0 +1,16 @@
+import { MgnpCard } from '@mgremy/ng-primitives-extended/card';
+
+import { Component } from '@angular/core';
+
+@Component({
+  imports: [MgnpCard],
+  template: `
+    <mgnp-card>
+
+    </mgnp-card>
+  `,
+  host: {
+    class: 'flex! flex-wrap gap-4 items-center',
+  },
+})
+export default class CardExample {}

apps/ng-primitives-docs/src/app/pages/(documentation)/extended/card.md

@@ -0,0 +1,16 @@
+---
+name: 'Card'
+sourceUrl: 'https://github.com/mgremy/nx_source/tree/main/libs/ng-primitives-extended/card'
+---
+
+# Card
+
+Display a card component
+
+## Usage
+
+<app-example name="card"></app-example>
+
+## Theme
+
+<app-file-content name="card" type="ng-primitives-extended-css"></app-file-content>

libs/ng-primitives-extended/card/README.md

@@ -0,0 +1,4 @@
+# @mgremy/ng-primitives/src/lib/card
+
+Secondary entry point of `@mgremy/ng-primitives-extended`. It can be used by importing from
+`@mgremy/ng-primitives-extended/card`.

libs/ng-primitives-extended/card/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/ng-primitives-extended/card/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/mgnp-card/mgnp-card.component';

libs/ng-primitives-extended/card/src/lib/mgnp-card/mgnp-card.component.ts

@@ -0,0 +1,21 @@
+import { PropertyType } from '@mgremy/ng-primitives-extended';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+export type MgnpCardOrientation = PropertyType<'vertical' | 'horizontal'>;
+
+@Component({
+  selector: 'mgnp-card',
+  imports: [],
+  standalone: true,
+  template: `<ng-content />`,
+  providers: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-mgnp-component': 'mgnp-card',
+    '[attr.data-mgnp-orientation]': 'orientation()',
+  },
+})
+export class MgnpCard {
+  readonly orientation = input<MgnpCardOrientation>('vertical');
+}

libs/ng-primitives-extended/src/index.ts

@@ -1 +1 @@
-export default null;
+export * from './lib/property-type';

libs/ng-primitives-extended/src/lib/property-type.ts

@@ -0,0 +1 @@
+export type PropertyType<T extends string> = T | (string & {});

libs/ng-primitives-extended/theme/components/card.css

@@ -0,0 +1,40 @@
+@utility mgnp-card {
+  display: flex;
+  gap: --spacing(4);
+
+  @variant data-[mgnp-direction=vertical] {
+    flex-direction: row;
+  }
+
+  @variant data-[mgnp-direction=horizontal] {
+    flex-direction: column;
+  }
+}
+
+@utility mgnp-card-header {
+
+}
+
+@utility mgnp-card-content {
+}
+
+@utility mgnp-card-footer {
+}
+
+@layer base {
+  [data-mgnp-component='mgnp-card'] {
+    @apply mgnp-card transition;
+  }
+
+  [data-mgnp-component='mgnp-card-header'] {
+    @apply mgnp-card-header transition;
+  }
+
+  [data-mgnp-component='mgnp-card-content'] {
+    @apply mgnp-card-content transition;
+  }
+
+  [data-mgnp-component='mgnp-card-footer'] {
+    @apply mgnp-card-footer transition;
+  }
+}

tsconfig.base.json

@@ -26,6 +26,7 @@
       "@mgremy/ng-primitives/toast": ["libs/ng-primitives/toast/src/index.ts"],
       "@mgremy/ng-primitives/tooltip": ["libs/ng-primitives/tooltip/src/index.ts"],
       "@mgremy/ng-primitives-extended": ["libs/ng-primitives-extended/src/index.ts"],
+      "@mgremy/ng-primitives-extended/card": ["libs/ng-primitives-extended/card/src/index.ts"],
       "@mgremy/ng-primitives-extended/loader": ["libs/ng-primitives-extended/loader/src/index.ts"],
       "@mgremy/ng-primitives-extended/table": ["libs/ng-primitives-extended/table/src/index.ts"],
       "@mgremy/core": ["libs/core/src/index.ts"]