@nanahoshi/mona-ui 0.4.0 → 0.5.0

package/types/nanahoshi-mona-ui-skeleton.d.ts

@@ -0,0 +1,51 @@
+import * as _angular_core from '@angular/core';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+declare const skeletonBaseThemeVariants: (props?: ({
+    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SkeletonVariantProps = VariantProps<typeof skeletonBaseThemeVariants>;
+type SkeletonVariantInput = VariantInputs<SkeletonVariantProps>;
+
+/**
+ * @description
+ * A placeholder block standing in for content that has not loaded yet. Size it with `width` and
+ * `height`, or with utility classes for anything more involved.
+ *
+ * It is decorative, so it is hidden from assistive technology. Mark the region it fills with
+ * `aria-busy` and describe what is loading there instead.
+ */
+declare class SkeletonComponent implements SkeletonVariantInput {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly heightString: _angular_core.Signal<string>;
+    protected readonly widthString: _angular_core.Signal<string>;
+    /**
+     * @description Height of the placeholder. Numbers are treated as pixels.
+     * @default "1rem"
+     */
+    readonly height: _angular_core.InputSignal<string | number>;
+    /**
+     * @description Border-radius preset applied to the placeholder.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"small" | "medium" | "large" | "full" | "none" | null | undefined>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    /**
+     * @description Width of the placeholder. Numbers are treated as pixels.
+     * @default "100%"
+     */
+    readonly width: _angular_core.InputSignal<string | number>;
+    private toCssSize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "mona-skeleton", never, { "height": { "alias": "height"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SkeletonComponent };
+export type { SkeletonVariantProps };

package/types/nanahoshi-mona-ui-theme.d.ts

@@ -72,6 +72,20 @@ interface ThemeColorPaletteSeeds {
     readonly warning?: string;
 }
 type GeneratedThemeColorPalette = Readonly<Record<ThemeVariant, ThemeColors>>;
+/**
+ * Inputs to the sidebar colour roles. Everything but the background falls back to the theme's
+ * corresponding page role, so a theme only states what it wants the sidebar to do differently.
+ */
+interface SidebarColorRoleSeeds {
+    readonly accent?: string;
+    readonly accentForeground?: string;
+    readonly background: string;
+    readonly border?: string;
+    readonly foreground?: string;
+    readonly primary?: string;
+    readonly primaryForeground?: string;
+    readonly ring?: string;
+}
 interface ThemeColorPaletteRegistration {
     readonly seeds: ThemeColorPaletteSeeds;
     readonly theme: ThemeName;
@@ -101,6 +115,18 @@ declare class ThemeService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
 }
 
+/**
+ * Builds the sidebar's own colour roles. The sidebar is a persistent chrome region rather than page
+ * content, so it is given a surface of its own instead of borrowing the page's — which is what lets a
+ * theme sit it slightly apart from the content beside it without every consumer restyling it.
+ *
+ * Only `background` has to be chosen per theme. Hover defaults to the neutral interaction roles, while
+ * the sidebar's primary pair follows the selected-state roles. This keeps ordinary navigation quiet,
+ * reserves identity colour for the current item, and makes runtime primary-palette changes flow through
+ * without rebuilding the sidebar recipe.
+ */
+declare function createSidebarColorRoles(seeds: SidebarColorRoleSeeds): ThemeColors;
+
 declare function provideThemeFamily(registration: ThemeFamilyRegistration): EnvironmentProviders;
 declare function provideThemeOverrides(registration: ThemeOverrideRegistration): EnvironmentProviders;
 declare function provideThemeOptions(options: ThemeOptions): EnvironmentProviders;
@@ -118,5 +144,5 @@ declare const THEME_STRATEGY: InjectionToken<ThemeStrategy>;
  */
 declare function generateThemeColorPalette(seeds: ThemeColorPaletteSeeds): GeneratedThemeColorPalette;
 
-export { THEME_STRATEGY, ThemeService, flattenThemeProfile, generateThemeColorPalette, provideThemeColorPalette, provideThemeFamily, provideThemeOptions, provideThemeOverrides };
-export type { BuiltInThemeName, GeneratedThemeColorPalette, ThemeColorPaletteRegistration, ThemeColorPaletteSeeds, ThemeColorVariable, ThemeColors, ThemeComponentVariable, ThemeComponents, ThemeEffectLevel, ThemeEffectVariable, ThemeEffects, ThemeFamilyRegistration, ThemeFamilyVariants, ThemeMotion, ThemeMotionVariable, ThemeName, ThemeOptions, ThemeOverrideRegistration, ThemeProfile, ThemeProfileOverrides, ThemeSelection, ThemeShadowVariable, ThemeShadows, ThemeShape, ThemeShapeVariable, ThemeStrategy, ThemeVariable, ThemeVariables, ThemeVariant };
+export { THEME_STRATEGY, ThemeService, createSidebarColorRoles, flattenThemeProfile, generateThemeColorPalette, provideThemeColorPalette, provideThemeFamily, provideThemeOptions, provideThemeOverrides };
+export type { BuiltInThemeName, GeneratedThemeColorPalette, SidebarColorRoleSeeds, ThemeColorPaletteRegistration, ThemeColorPaletteSeeds, ThemeColorVariable, ThemeColors, ThemeComponentVariable, ThemeComponents, ThemeEffectLevel, ThemeEffectVariable, ThemeEffects, ThemeFamilyRegistration, ThemeFamilyVariants, ThemeMotion, ThemeMotionVariable, ThemeName, ThemeOptions, ThemeOverrideRegistration, ThemeProfile, ThemeProfileOverrides, ThemeSelection, ThemeShadowVariable, ThemeShadows, ThemeShape, ThemeShapeVariable, ThemeStrategy, ThemeVariable, ThemeVariables, ThemeVariant };