@ojiepermana/angular 21.2.4 → 21.3.0

package/fesm2022/ojiepermana-angular-ui-component-tooltip.mjs

@@ -0,0 +1,56 @@
+import * as i0 from '@angular/core';
+import { inject, input, effect, Directive } from '@angular/core';
+import * as i1 from '@angular/material/tooltip';
+import { MatTooltip } from '@angular/material/tooltip';
+
+/**
+ * Shadcn-styled tooltip directive. Thin wrapper around `matTooltip` that
+ * forces the shadcn panel class and sensible defaults.
+ *
+ * @example
+ * <button ui-button [uiTooltip]="'Save changes'" uiTooltipPosition="above">Save</button>
+ */
+class TooltipDirective {
+    tooltip = inject(MatTooltip, { host: true });
+    uiTooltip = input('', ...(ngDevMode ? [{ debugName: "uiTooltip" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.tooltip.tooltipClass = 'ui-tooltip-panel';
+        effect(() => {
+            this.tooltip.message = this.uiTooltip();
+        });
+    }
+    show() {
+        this.tooltip.show();
+    }
+    hide() {
+        this.tooltip.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: TooltipDirective, isStandalone: true, selector: "[uiTooltip]", inputs: { uiTooltip: { classPropertyName: "uiTooltip", publicName: "uiTooltip", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["uiTooltip"], hostDirectives: [{ directive: i1.MatTooltip, inputs: ["matTooltipPosition", "uiTooltipPosition", "matTooltipDisabled", "uiTooltipDisabled", "matTooltipShowDelay", "uiTooltipShowDelay", "matTooltipHideDelay", "uiTooltipHideDelay", "matTooltipTouchGestures", "uiTooltipTouchGestures"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTooltip]',
+                    hostDirectives: [
+                        {
+                            directive: MatTooltip,
+                            inputs: [
+                                'matTooltipPosition: uiTooltipPosition',
+                                'matTooltipDisabled: uiTooltipDisabled',
+                                'matTooltipShowDelay: uiTooltipShowDelay',
+                                'matTooltipHideDelay: uiTooltipHideDelay',
+                                'matTooltipTouchGestures: uiTooltipTouchGestures',
+                            ],
+                        },
+                    ],
+                    exportAs: 'uiTooltip',
+                }]
+        }], ctorParameters: () => [], propDecorators: { uiTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiTooltip", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TooltipDirective };
+//# sourceMappingURL=ojiepermana-angular-ui-component-tooltip.mjs.map

package/fesm2022/ojiepermana-angular-ui-component-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-ui-component-tooltip.mjs","sources":["../../../projects/angular/ui/component/tooltip/src/lib/tooltip.directive.ts","../../../projects/angular/ui/component/tooltip/ojiepermana-angular-ui-component-tooltip.ts"],"sourcesContent":["import { Directive, effect, inject, input } from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\n/**\n * Shadcn-styled tooltip directive. Thin wrapper around `matTooltip` that\n * forces the shadcn panel class and sensible defaults.\n *\n * @example\n * <button ui-button [uiTooltip]=\"'Save changes'\" uiTooltipPosition=\"above\">Save</button>\n */\n@Directive({\n  selector: '[uiTooltip]',\n  hostDirectives: [\n    {\n      directive: MatTooltip,\n      inputs: [\n        'matTooltipPosition: uiTooltipPosition',\n        'matTooltipDisabled: uiTooltipDisabled',\n        'matTooltipShowDelay: uiTooltipShowDelay',\n        'matTooltipHideDelay: uiTooltipHideDelay',\n        'matTooltipTouchGestures: uiTooltipTouchGestures',\n      ],\n    },\n  ],\n  exportAs: 'uiTooltip',\n})\nexport class TooltipDirective {\n  private readonly tooltip = inject(MatTooltip, { host: true });\n\n  readonly uiTooltip = input<string>('');\n\n  constructor() {\n    this.tooltip.tooltipClass = 'ui-tooltip-panel';\n    effect(() => {\n      this.tooltip.message = this.uiTooltip();\n    });\n  }\n\n  show(): void {\n    this.tooltip.show();\n  }\n\n  hide(): void {\n    this.tooltip.hide();\n  }\n}\n\nexport type { TooltipPosition };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAGA;;;;;;AAMG;MAiBU,gBAAgB,CAAA;IACV,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEpD,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAEtC,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,kBAAkB;QAC9C,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE;AACzC,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;wGAlBW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,yBAAA,EAAA,wBAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAhB5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,UAAU;AACrB,4BAAA,MAAM,EAAE;gCACN,uCAAuC;gCACvC,uCAAuC;gCACvC,yCAAyC;gCACzC,yCAAyC;gCACzC,iDAAiD;AAClD,6BAAA;AACF,yBAAA;AACF,qBAAA;AACD,oBAAA,QAAQ,EAAE,WAAW;AACtB,iBAAA;;;ACzBD;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-ui-component-utils.mjs

@@ -0,0 +1,13 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { cn };
+//# sourceMappingURL=ojiepermana-angular-ui-component-utils.mjs.map

package/fesm2022/ojiepermana-angular-ui-component-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-ui-component-utils.mjs","sources":["../../../projects/angular/ui/component/utils/src/lib/cn.util.ts","../../../projects/angular/ui/component/utils/ojiepermana-angular-ui-component-utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAGM,SAAU,EAAE,CAAC,GAAG,MAAoB,EAAA;AACxC,IAAA,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9B;;ACLA;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular.mjs

@@ -3,13 +3,15 @@
  *
  * Components and utilities are shipped via subpath entries:
  *   - `@ojiepermana/angular/theme`      — design tokens, CSS variables, `ThemeService`, `provideMaterialTheme`
- *   - `@ojiepermana/angular/component`     — shadcn/ui primitives on top of Material M3
+ *   - `@ojiepermana/angular/component/<slug>` — shadcn/ui primitives and utilities shipped only as granular entrypoints
  *   - `@ojiepermana/angular/layout`     — layout primitives (WIP)
  *   - `@ojiepermana/angular/navigation` — navigation primitives (WIP)
- *   - `@ojiepermana/angular/chart`      — chart primitives (WIP)
+ *   - `@ojiepermana/angular/navigation/icon` — standalone icon entrypoint for bundle-sensitive consumers
+ *   - `@ojiepermana/angular/component/chart`      — shared chart primitives
+ *   - `@ojiepermana/angular/component/chart/<type>` — chart implementations
  *   - `@ojiepermana/angular/generator/api` — OpenAPI → Angular SDK generator (schematics + config types)
  *
- * Consumers should import from the subpaths directly.
+ * Consumers should import from the smallest subpath that fits their use case.
  */
 const MATERIAL_VERSION = '0.0.1';
 

package/fesm2022/ojiepermana-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular.mjs","sources":["../../../projects/angular/public-api.ts","../../../projects/angular/ojiepermana-angular.ts"],"sourcesContent":["/*\n * Public API Surface of @ojiepermana/angular (primary entry)\n *\n * Components and utilities are shipped via subpath entries:\n *   - `@ojiepermana/angular/theme`      — design tokens, CSS variables, `ThemeService`, `provideMaterialTheme`\n *   - `@ojiepermana/angular/component`     — shadcn/ui primitives on top of Material M3\n *   - `@ojiepermana/angular/layout`     — layout primitives (WIP)\n *   - `@ojiepermana/angular/navigation` — navigation primitives (WIP)\n *   - `@ojiepermana/angular/chart`      — chart primitives (WIP)\n *   - `@ojiepermana/angular/generator/api` — OpenAPI → Angular SDK generator (schematics + config types)\n *\n * Consumers should import from the subpaths directly.\n */\n\nexport const MATERIAL_VERSION = '0.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;AAYG;AAEI,MAAM,gBAAgB,GAAG;;ACdhC;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular.mjs","sources":["../../../projects/angular/public-api.ts","../../../projects/angular/ojiepermana-angular.ts"],"sourcesContent":["/*\n * Public API Surface of @ojiepermana/angular (primary entry)\n *\n * Components and utilities are shipped via subpath entries:\n *   - `@ojiepermana/angular/theme`      — design tokens, CSS variables, `ThemeService`, `provideMaterialTheme`\n *   - `@ojiepermana/angular/component/<slug>` — shadcn/ui primitives and utilities shipped only as granular entrypoints\n *   - `@ojiepermana/angular/layout`     — layout primitives (WIP)\n *   - `@ojiepermana/angular/navigation` — navigation primitives (WIP)\n *   - `@ojiepermana/angular/navigation/icon` — standalone icon entrypoint for bundle-sensitive consumers\n *   - `@ojiepermana/angular/component/chart`      — shared chart primitives\n *   - `@ojiepermana/angular/component/chart/<type>` — chart implementations\n *   - `@ojiepermana/angular/generator/api` — OpenAPI → Angular SDK generator (schematics + config types)\n *\n * Consumers should import from the smallest subpath that fits their use case.\n */\n\nexport const MATERIAL_VERSION = '0.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;AAEI,MAAM,gBAAgB,GAAG;;AChBhC;;AAEG;;;;"}

package/layout/theme/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../../fesm2022/ojiepermana-angular-layout-theme.mjs",
+  "typings": "../../types/ojiepermana-angular-layout-theme.d.ts"
+}

package/navigation-icon/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/ojiepermana-angular-navigation-icon.mjs",
+  "typings": "../types/ojiepermana-angular-navigation-icon.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "21.2.4",
+  "version": "21.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ojiepermana/angular.git"
@@ -79,14 +79,6 @@
       "types": "./types/ojiepermana-angular.d.ts",
       "default": "./fesm2022/ojiepermana-angular.mjs"
     },
-    "./chart": {
-      "types": "./types/ojiepermana-angular-chart.d.ts",
-      "default": "./fesm2022/ojiepermana-angular-chart.mjs"
-    },
-    "./component": {
-      "types": "./types/ojiepermana-angular-component.d.ts",
-      "default": "./fesm2022/ojiepermana-angular-component.mjs"
-    },
     "./generator/api": {
       "types": "./types/ojiepermana-angular-generator-api.d.ts",
       "default": "./fesm2022/ojiepermana-angular-generator-api.mjs"
@@ -95,6 +87,10 @@
       "types": "./types/ojiepermana-angular-layout.d.ts",
       "default": "./fesm2022/ojiepermana-angular-layout.mjs"
     },
+    "./layout/theme": {
+      "types": "./types/ojiepermana-angular-layout-theme.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-layout-theme.mjs"
+    },
     "./navigation": {
       "types": "./types/ojiepermana-angular-navigation.d.ts",
       "default": "./fesm2022/ojiepermana-angular-navigation.mjs"
@@ -107,9 +103,213 @@
       "types": "./types/ojiepermana-angular-layout.d.ts",
       "default": "./fesm2022/ojiepermana-angular-layout.mjs"
     },
-    "./layout/theme": {
-      "types": "./types/ojiepermana-angular-component.d.ts",
-      "default": "./fesm2022/ojiepermana-angular-component.mjs"
+    "./component/accordion": {
+      "types": "./types/ojiepermana-angular-ui-component-accordion.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-accordion.mjs"
+    },
+    "./component/alert": {
+      "types": "./types/ojiepermana-angular-ui-component-alert.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-alert.mjs"
+    },
+    "./component/alert-dialog": {
+      "types": "./types/ojiepermana-angular-ui-component-alert-dialog.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-alert-dialog.mjs"
+    },
+    "./component/aspect-ratio": {
+      "types": "./types/ojiepermana-angular-ui-component-aspect-ratio.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-aspect-ratio.mjs"
+    },
+    "./component/avatar": {
+      "types": "./types/ojiepermana-angular-ui-component-avatar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-avatar.mjs"
+    },
+    "./component/badge": {
+      "types": "./types/ojiepermana-angular-ui-component-badge.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-badge.mjs"
+    },
+    "./component/breadcrumb": {
+      "types": "./types/ojiepermana-angular-ui-component-breadcrumb.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-breadcrumb.mjs"
+    },
+    "./component/button": {
+      "types": "./types/ojiepermana-angular-ui-component-button.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-button.mjs"
+    },
+    "./component/button-group": {
+      "types": "./types/ojiepermana-angular-ui-component-button-group.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-button-group.mjs"
+    },
+    "./component/calendar": {
+      "types": "./types/ojiepermana-angular-ui-component-calendar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-calendar.mjs"
+    },
+    "./component/card": {
+      "types": "./types/ojiepermana-angular-ui-component-card.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-card.mjs"
+    },
+    "./component/carousel": {
+      "types": "./types/ojiepermana-angular-ui-component-carousel.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-carousel.mjs"
+    },
+    "./component/chart": {
+      "types": "./types/ojiepermana-angular-ui-component-chart.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart.mjs"
+    },
+    "./component/chart/area": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-area.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-area.mjs"
+    },
+    "./component/chart/bar": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-bar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-bar.mjs"
+    },
+    "./component/chart/line": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-line.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-line.mjs"
+    },
+    "./component/chart/pie": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-pie.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-pie.mjs"
+    },
+    "./component/chart/radar": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-radar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-radar.mjs"
+    },
+    "./component/chart/radial": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-radial.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-radial.mjs"
+    },
+    "./component/chart/scatter": {
+      "types": "./types/ojiepermana-angular-ui-component-chart-scatter.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-chart-scatter.mjs"
+    },
+    "./component/checkbox": {
+      "types": "./types/ojiepermana-angular-ui-component-checkbox.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-checkbox.mjs"
+    },
+    "./component/collapsible": {
+      "types": "./types/ojiepermana-angular-ui-component-collapsible.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-collapsible.mjs"
+    },
+    "./component/combobox": {
+      "types": "./types/ojiepermana-angular-ui-component-combobox.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-combobox.mjs"
+    },
+    "./component/command": {
+      "types": "./types/ojiepermana-angular-ui-component-command.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-command.mjs"
+    },
+    "./component/context-menu": {
+      "types": "./types/ojiepermana-angular-ui-component-context-menu.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-context-menu.mjs"
+    },
+    "./component/date-picker": {
+      "types": "./types/ojiepermana-angular-ui-component-date-picker.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-date-picker.mjs"
+    },
+    "./component/dialog": {
+      "types": "./types/ojiepermana-angular-ui-component-dialog.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-dialog.mjs"
+    },
+    "./component/drawer": {
+      "types": "./types/ojiepermana-angular-ui-component-drawer.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-drawer.mjs"
+    },
+    "./component/dropdown-menu": {
+      "types": "./types/ojiepermana-angular-ui-component-dropdown-menu.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-dropdown-menu.mjs"
+    },
+    "./component/form": {
+      "types": "./types/ojiepermana-angular-ui-component-form.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-form.mjs"
+    },
+    "./component/input": {
+      "types": "./types/ojiepermana-angular-ui-component-input.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-input.mjs"
+    },
+    "./component/input-group": {
+      "types": "./types/ojiepermana-angular-ui-component-input-group.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-input-group.mjs"
+    },
+    "./component/item": {
+      "types": "./types/ojiepermana-angular-ui-component-item.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-item.mjs"
+    },
+    "./component/label": {
+      "types": "./types/ojiepermana-angular-ui-component-label.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-label.mjs"
+    },
+    "./component/pagination": {
+      "types": "./types/ojiepermana-angular-ui-component-pagination.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-pagination.mjs"
+    },
+    "./component/popover": {
+      "types": "./types/ojiepermana-angular-ui-component-popover.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-popover.mjs"
+    },
+    "./component/progress": {
+      "types": "./types/ojiepermana-angular-ui-component-progress.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-progress.mjs"
+    },
+    "./component/radio": {
+      "types": "./types/ojiepermana-angular-ui-component-radio.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-radio.mjs"
+    },
+    "./component/scroll-area": {
+      "types": "./types/ojiepermana-angular-ui-component-scroll-area.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-scroll-area.mjs"
+    },
+    "./component/select": {
+      "types": "./types/ojiepermana-angular-ui-component-select.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-select.mjs"
+    },
+    "./component/separator": {
+      "types": "./types/ojiepermana-angular-ui-component-separator.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-separator.mjs"
+    },
+    "./component/sheet": {
+      "types": "./types/ojiepermana-angular-ui-component-sheet.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-sheet.mjs"
+    },
+    "./component/skeleton": {
+      "types": "./types/ojiepermana-angular-ui-component-skeleton.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-skeleton.mjs"
+    },
+    "./component/slider": {
+      "types": "./types/ojiepermana-angular-ui-component-slider.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-slider.mjs"
+    },
+    "./component/switch": {
+      "types": "./types/ojiepermana-angular-ui-component-switch.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-switch.mjs"
+    },
+    "./component/table": {
+      "types": "./types/ojiepermana-angular-ui-component-table.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-table.mjs"
+    },
+    "./component/tabs": {
+      "types": "./types/ojiepermana-angular-ui-component-tabs.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-tabs.mjs"
+    },
+    "./component/textarea": {
+      "types": "./types/ojiepermana-angular-ui-component-textarea.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-textarea.mjs"
+    },
+    "./component/toast": {
+      "types": "./types/ojiepermana-angular-ui-component-toast.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-toast.mjs"
+    },
+    "./component/tooltip": {
+      "types": "./types/ojiepermana-angular-ui-component-tooltip.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-tooltip.mjs"
+    },
+    "./component/utils": {
+      "types": "./types/ojiepermana-angular-ui-component-utils.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-ui-component-utils.mjs"
+    },
+    "./navigation/icon": {
+      "types": "./types/ojiepermana-angular-navigation-icon.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-navigation-icon.mjs"
     }
   },
   "module": "fesm2022/ojiepermana-angular.mjs",

package/types/ojiepermana-angular-layout-theme.d.ts

@@ -0,0 +1,205 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+type ThemePanelColor = 'base' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+type ThemePanelMode = 'light' | 'dark' | 'system';
+type ThemePanelStyle = 'default' | 'sharp' | 'brutal' | 'soft';
+type ThemePanelLayoutMode = 'vertical' | 'horizontal' | 'empty';
+type ThemePanelLayoutWidth = 'full' | 'container' | 'wide';
+interface ThemePanelThemePort {
+    readonly color: Signal<ThemePanelColor>;
+    readonly scheme: Signal<ThemePanelMode>;
+    readonly style: Signal<ThemePanelStyle>;
+    setColor(color: ThemePanelColor): void;
+    setScheme(mode: ThemePanelMode): void;
+    setStyle(style: ThemePanelStyle): void;
+}
+interface ThemePanelLayoutPort {
+    readonly mode: Signal<ThemePanelLayoutMode>;
+    readonly width: Signal<ThemePanelLayoutWidth>;
+    setMode(mode: ThemePanelLayoutMode): void;
+    setWidth(width: ThemePanelLayoutWidth): void;
+}
+declare const THEME_PANEL_THEME_PORT: InjectionToken<ThemePanelThemePort>;
+declare const THEME_PANEL_LAYOUT_PORT: InjectionToken<ThemePanelLayoutPort>;
+type ThemePanelIconName = 'sun' | 'moon' | 'system' | 'default-style' | 'sharp-style' | 'brutal-style' | 'soft-style' | 'vertical-layout' | 'horizontal-layout' | 'empty-layout' | 'full-width' | 'container-width' | 'wide-width';
+declare class ThemePanelComponent {
+    private readonly sanitizer;
+    private readonly themePort;
+    private readonly layoutPort;
+    readonly connected: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly userName: _angular_core.InputSignal<string>;
+    readonly userSubtitle: _angular_core.InputSignal<string>;
+    readonly userInitials: _angular_core.InputSignal<string>;
+    readonly themeColor: _angular_core.InputSignal<ThemePanelColor>;
+    readonly themeMode: _angular_core.InputSignal<ThemePanelMode>;
+    readonly themeStyle: _angular_core.InputSignal<ThemePanelStyle>;
+    readonly layoutMode: _angular_core.InputSignal<ThemePanelLayoutMode>;
+    readonly layoutWidth: _angular_core.InputSignal<ThemePanelLayoutWidth>;
+    readonly themeColorChange: _angular_core.OutputEmitterRef<ThemePanelColor>;
+    readonly themeModeChange: _angular_core.OutputEmitterRef<ThemePanelMode>;
+    readonly themeStyleChange: _angular_core.OutputEmitterRef<ThemePanelStyle>;
+    readonly layoutModeChange: _angular_core.OutputEmitterRef<ThemePanelLayoutMode>;
+    readonly layoutWidthChange: _angular_core.OutputEmitterRef<ThemePanelLayoutWidth>;
+    protected readonly currentThemeColor: _angular_core.WritableSignal<ThemePanelColor>;
+    protected readonly currentThemeMode: _angular_core.WritableSignal<ThemePanelMode>;
+    protected readonly currentThemeStyle: _angular_core.WritableSignal<ThemePanelStyle>;
+    protected readonly currentLayoutMode: _angular_core.WritableSignal<ThemePanelLayoutMode>;
+    protected readonly currentLayoutWidth: _angular_core.WritableSignal<ThemePanelLayoutWidth>;
+    protected readonly themeColorOptions: readonly [{
+        readonly value: "base";
+        readonly label: "Base";
+        readonly swatchClass: "bg-zinc-800";
+    }, {
+        readonly value: "red";
+        readonly label: "Red";
+        readonly swatchClass: "bg-red-500";
+    }, {
+        readonly value: "orange";
+        readonly label: "Orange";
+        readonly swatchClass: "bg-orange-500";
+    }, {
+        readonly value: "amber";
+        readonly label: "Amber";
+        readonly swatchClass: "bg-amber-400";
+    }, {
+        readonly value: "yellow";
+        readonly label: "Yellow";
+        readonly swatchClass: "bg-yellow-400";
+    }, {
+        readonly value: "lime";
+        readonly label: "Lime";
+        readonly swatchClass: "bg-lime-400";
+    }, {
+        readonly value: "green";
+        readonly label: "Green";
+        readonly swatchClass: "bg-green-600";
+    }, {
+        readonly value: "emerald";
+        readonly label: "Emerald";
+        readonly swatchClass: "bg-emerald-600";
+    }, {
+        readonly value: "teal";
+        readonly label: "Teal";
+        readonly swatchClass: "bg-teal-600";
+    }, {
+        readonly value: "cyan";
+        readonly label: "Cyan";
+        readonly swatchClass: "bg-cyan-600";
+    }, {
+        readonly value: "sky";
+        readonly label: "Sky";
+        readonly swatchClass: "bg-sky-600";
+    }, {
+        readonly value: "blue";
+        readonly label: "Blue";
+        readonly swatchClass: "bg-blue-500";
+    }, {
+        readonly value: "indigo";
+        readonly label: "Indigo";
+        readonly swatchClass: "bg-indigo-500";
+    }, {
+        readonly value: "violet";
+        readonly label: "Violet";
+        readonly swatchClass: "bg-violet-500";
+    }, {
+        readonly value: "purple";
+        readonly label: "Purple";
+        readonly swatchClass: "bg-purple-500";
+    }, {
+        readonly value: "fuchsia";
+        readonly label: "Fuchsia";
+        readonly swatchClass: "bg-fuchsia-600";
+    }, {
+        readonly value: "pink";
+        readonly label: "Pink";
+        readonly swatchClass: "bg-pink-600";
+    }, {
+        readonly value: "rose";
+        readonly label: "Rose";
+        readonly swatchClass: "bg-rose-500";
+    }];
+    protected readonly themeModeOptions: readonly [{
+        readonly value: "light";
+        readonly label: "Light";
+        readonly icon: "sun";
+    }, {
+        readonly value: "dark";
+        readonly label: "Dark";
+        readonly icon: "moon";
+    }, {
+        readonly value: "system";
+        readonly label: "System";
+        readonly icon: "system";
+    }];
+    protected readonly themeStyleOptions: readonly [{
+        readonly value: "default";
+        readonly label: "Default";
+        readonly icon: "default-style";
+    }, {
+        readonly value: "sharp";
+        readonly label: "Sharp";
+        readonly icon: "sharp-style";
+    }, {
+        readonly value: "brutal";
+        readonly label: "Brutal";
+        readonly icon: "brutal-style";
+    }, {
+        readonly value: "soft";
+        readonly label: "Soft";
+        readonly icon: "soft-style";
+    }];
+    protected readonly layoutModeOptions: readonly [{
+        readonly value: "vertical";
+        readonly label: "Vertical";
+        readonly icon: "vertical-layout";
+    }, {
+        readonly value: "horizontal";
+        readonly label: "Horizontal";
+        readonly icon: "horizontal-layout";
+    }, {
+        readonly value: "empty";
+        readonly label: "Empty";
+        readonly icon: "empty-layout";
+    }];
+    protected readonly layoutWidthOptions: readonly [{
+        readonly value: "full";
+        readonly label: "Full";
+        readonly icon: "full-width";
+    }, {
+        readonly value: "container";
+        readonly label: "Container";
+        readonly icon: "container-width";
+    }, {
+        readonly value: "wide";
+        readonly label: "Wide";
+        readonly icon: "wide-width";
+    }];
+    protected readonly hostClasses: Signal<string>;
+    protected readonly hasUserHeader: Signal<boolean>;
+    protected readonly resolvedUserInitials: Signal<string>;
+    protected readonly currentThemeColorLabel: Signal<"Base" | "Red" | "Orange" | "Amber" | "Yellow" | "Lime" | "Green" | "Emerald" | "Teal" | "Cyan" | "Sky" | "Blue" | "Indigo" | "Violet" | "Purple" | "Fuchsia" | "Pink" | "Rose" | "">;
+    constructor();
+    protected setThemeColor(color: ThemePanelColor): void;
+    protected setThemeMode(mode: ThemePanelMode): void;
+    protected setThemeStyle(style: ThemePanelStyle): void;
+    protected setLayoutMode(mode: ThemePanelLayoutMode): void;
+    protected setLayoutWidth(width: ThemePanelLayoutWidth): void;
+    protected sectionEyebrowClasses(): string;
+    protected segmentedOptionClasses(active: boolean): string;
+    protected swatchButtonClasses(active: boolean): string;
+    protected optionIconClasses(active: boolean): string;
+    protected colorSwatchClasses(swatchClass: string | undefined, isActive: boolean): string;
+    protected iconSvg(name: ThemePanelIconName): SafeHtml;
+    private rawIconSvg;
+    private toInitials;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemePanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemePanelComponent, "ui-theme-panel", never, { "connected": { "alias": "connected"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "userSubtitle": { "alias": "userSubtitle"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": false; "isSignal": true; }; "themeColor": { "alias": "themeColor"; "required": false; "isSignal": true; }; "themeMode": { "alias": "themeMode"; "required": false; "isSignal": true; }; "themeStyle": { "alias": "themeStyle"; "required": false; "isSignal": true; }; "layoutMode": { "alias": "layoutMode"; "required": false; "isSignal": true; }; "layoutWidth": { "alias": "layoutWidth"; "required": false; "isSignal": true; }; }, { "themeColorChange": "themeColorChange"; "themeModeChange": "themeModeChange"; "themeStyleChange": "themeStyleChange"; "layoutModeChange": "layoutModeChange"; "layoutWidthChange": "layoutWidthChange"; }, never, never, true, never>;
+}
+
+export { THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, ThemePanelComponent };
+export type { ThemePanelColor, ThemePanelLayoutMode, ThemePanelLayoutPort, ThemePanelLayoutWidth, ThemePanelMode, ThemePanelStyle, ThemePanelThemePort };

package/types/ojiepermana-angular-layout.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders } from '@angular/core';
 import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } from '@ojiepermana/angular/navigation';
-import { PopoverTriggerDefaults, PopoverSide, PopoverAlign } from '@ojiepermana/angular/component';
+import { PopoverTriggerDefaults, PopoverSide, PopoverAlign } from '@ojiepermana/angular/component/popover';
 
 /**
  * Vertical layout — sidebar + main (scrollable).

package/types/ojiepermana-angular-navigation-icon.d.ts

@@ -0,0 +1,17 @@
+import * as _angular_core from '@angular/core';
+
+declare class UiNavIconComponent {
+    private readonly doc;
+    private readonly platformId;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<number | null>;
+    protected readonly fontVariationSettings = "\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24";
+    constructor();
+    protected readonly classes: _angular_core.Signal<string>;
+    private ensureFontStylesheet;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavIconComponent, "ui-nav-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { UiNavIconComponent };