Add new components: toggle-group & skeleton

package.json

@@ -45,8 +45,7 @@
     "rxjs": "~7.8.0",
     "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.1.11",
-    "tslib": "^2.3.0",
-    "tw-animate-css": "^1.3.7"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular/build": "^20.1.3",
@@ -63,6 +62,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-packagr": "^20.1.0",
+    "tw-animate-css": "^1.3.8",
     "typescript": "~5.8.2"
   }
 }

projects/docs/src/app/pages/docs/components/components.routes.ts

@@ -88,6 +88,14 @@ export const routes: Routes = [
                 path: 'toggle',
                 loadComponent: () => import('./toggle/toggle').then(m => m.Toggle)
             },
+            {
+                path: 'toggle-group',
+                loadComponent: () => import('./toggle-group/toggle-group').then(m => m.ToggleGroup)
+            },
+            {
+                path: 'skeleton',
+                loadComponent: () => import('./skeleton/skeleton').then(m => m.Skeleton)
+            },
             {
                 path: '',
                 redirectTo: 'alert',

projects/docs/src/app/pages/docs/components/skeleton/skeleton.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { ComponentPreview } from '@components/component-preview/component-preview';
+import { skeletonVariants, skeletonMeta } from './skeleton.variants';
+
+@Component({
+  selector: 'docs-skeleton',
+  imports: [ComponentPreview],
+  template: `
+    <docs-component-preview 
+      [meta]="skeletonMeta" 
+      [variants]="skeletonVariants">
+    </docs-component-preview>
+  `
+})
+export class Skeleton {
+  skeletonMeta = skeletonMeta;
+  skeletonVariants = skeletonVariants;
+}

projects/docs/src/app/pages/docs/components/skeleton/skeleton.variants.ts

@@ -0,0 +1,161 @@
+import { Component } from '@angular/core';
+import { UiSkeleton } from 'ui';
+import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';
+
+@Component({
+  selector: 'skeleton-default-example',
+  template: `
+    <div class="flex items-center space-x-4">
+      <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+      <div class="space-y-2">
+        <div uiSkeleton class="h-4 w-[250px]"></div>
+        <div uiSkeleton class="h-4 w-[200px]"></div>
+      </div>
+    </div>
+  `,
+  imports: [UiSkeleton]
+})
+export class SkeletonDefaultExample {}
+
+@Component({
+  selector: 'skeleton-card-example',
+  template: `
+    <div class="flex flex-col space-y-3">
+      <div uiSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
+      <div class="space-y-2">
+        <div uiSkeleton class="h-4 w-[250px]"></div>
+        <div uiSkeleton class="h-4 w-[200px]"></div>
+      </div>
+    </div>
+  `,
+  imports: [UiSkeleton]
+})
+export class SkeletonCardExample {}
+
+@Component({
+  selector: 'skeleton-list-example',
+  template: `
+    <div class="space-y-3">
+      <div class="flex items-center space-x-4">
+        <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+        <div class="space-y-2">
+          <div uiSkeleton class="h-4 w-[250px]"></div>
+          <div uiSkeleton class="h-4 w-[200px]"></div>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+        <div class="space-y-2">
+          <div uiSkeleton class="h-4 w-[250px]"></div>
+          <div uiSkeleton class="h-4 w-[200px]"></div>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+        <div class="space-y-2">
+          <div uiSkeleton class="h-4 w-[250px]"></div>
+          <div uiSkeleton class="h-4 w-[200px]"></div>
+        </div>
+      </div>
+    </div>
+  `,
+  imports: [UiSkeleton]
+})
+export class SkeletonListExample {}
+
+export const skeletonMeta: IComponentMeta = {
+  title: 'Skeleton',
+  description: 'Use to show a placeholder while content is loading.',
+  installation: {
+    package: 'skeleton',
+    import: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';`,
+    usage: `<div uiSkeleton class="h-4 w-[250px]"></div>`
+  },
+  api: {
+    props: [
+      { name: 'class', type: 'string', description: 'Additional CSS classes to apply to the skeleton element.' }
+    ]
+  }
+};
+
+export const skeletonVariants: IVariant[] = [
+  {
+    title: 'Default',
+    description: 'A basic skeleton with avatar and text placeholders.',
+    code: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';
+
+@Component({
+  selector: 'skeleton-default-example',
+  template: \`
+    <div class="flex items-center space-x-4">
+      <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+      <div class="space-y-2">
+        <div uiSkeleton class="h-4 w-[250px]"></div>
+        <div uiSkeleton class="h-4 w-[200px]"></div>
+      </div>
+    </div>
+  \`,
+  imports: [UiSkeleton]
+})
+export class SkeletonDefaultExample {}`,
+    component: SkeletonDefaultExample
+  },
+  {
+    title: 'Card',
+    description: 'A skeleton for card layouts with image and text placeholders.',
+    code: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';
+
+@Component({
+  selector: 'skeleton-card-example',
+  template: \`
+    <div class="flex flex-col space-y-3">
+      <div uiSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
+      <div class="space-y-2">
+        <div uiSkeleton class="h-4 w-[250px]"></div>
+        <div uiSkeleton class="h-4 w-[200px]"></div>
+      </div>
+    </div>
+  \`,
+  imports: [UiSkeleton]
+})
+export class SkeletonCardExample {}`,
+    component: SkeletonCardExample
+  },
+  {
+    title: 'List',
+    description: 'A skeleton for list layouts with multiple items.',
+    code: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';
+
+@Component({
+  selector: 'skeleton-list-example',
+  template: \`
+    <div class="space-y-3">
+      <div class="flex items-center space-x-4">
+        <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+        <div class="space-y-2">
+          <div uiSkeleton class="h-4 w-[250px]"></div>
+          <div uiSkeleton class="h-4 w-[200px]"></div>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+        <div class="space-y-2">
+          <div uiSkeleton class="h-4 w-[250px]"></div>
+          <div uiSkeleton class="h-4 w-[200px]"></div>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <div uiSkeleton class="h-12 w-12 rounded-full"></div>
+        <div class="space-y-2">
+          <div uiSkeleton class="h-4 w-[250px]"></div>
+          <div uiSkeleton class="h-4 w-[200px]"></div>
+        </div>
+      </div>
+    </div>
+  \`,
+  imports: [UiSkeleton]
+})
+export class SkeletonListExample {}`,
+    component: SkeletonListExample
+  }
+];

projects/docs/src/app/pages/docs/components/toggle-group/toggle-group.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ComponentPreview } from '@components/component-preview/component-preview';
+import { toggleGroupVariants, toggleGroupMeta } from './toggle-group.variants';
+
+@Component({
+  selector: 'docs-toggle-group',
+  imports: [ComponentPreview],
+  template: `
+    <docs-component-preview 
+      [meta]="toggleGroupMeta" 
+      [variants]="toggleGroupVariants">
+    </docs-component-preview>
+  `
+})
+export class ToggleGroup {
+  toggleGroupMeta = toggleGroupMeta;
+  toggleGroupVariants = toggleGroupVariants;
+}
+