@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/core/types.d.ts

@@ -0,0 +1,152 @@
+import type * as CSS from 'csstype';
+/**
+ * TTDK Design System - Responsive Breakpoints Type System
+ *
+ * Standard Breakpoint Scales:
+ * - `sm`: min-width 640px
+ * - `lt_sm`: max-width 639px (less than sm)
+ * - `md`: min-width 768px
+ * - `lt_md`: max-width 767px (less than md)
+ * - `lg`: min-width 1024px
+ * - `lt_lg`: max-width 1023px (less than lg)
+ * - `xl`: min-width 1280px
+ * - `lt_xl`: max-width 1279px (less than xl)
+ */
+export interface ResponsiveBreakpoints<T> {
+    sm?: Partial<T>;
+    lt_sm?: Partial<T>;
+    md?: Partial<T>;
+    lt_md?: Partial<T>;
+    lg?: Partial<T>;
+    lt_lg?: Partial<T>;
+    xl?: Partial<T>;
+    lt_xl?: Partial<T>;
+}
+export declare const ResponsiveBreakpoints: {};
+export declare const UiProps: {};
+/**
+ * Type helper to allow flat props (default) combined with nested responsive breakpoint overrides.
+ */
+export type ResponsiveUiProps<T> = T & ResponsiveBreakpoints<T>;
+/**
+ * Helper to build responsive CSS custom properties from a ResponsiveUiProps object.
+ */
+export declare function buildResponsiveVars(ui: any, keyMap: Record<string, string>): any;
+/** CSS properties yang bisa di-set via ui prop */
+export type CSSValue = string | number;
+/** Pseudo-class props yang support di ui{} */
+export type UiPseudoProps = CSS.Properties<string | number> & {
+    bg?: CSSValue;
+    size?: CSSValue;
+    weight?: CSSValue;
+    [cssProperty: string]: any;
+};
+/**
+ * Pseudo-class props yang juga mendukung nested responsive breakpoints:
+ * hover: { background: 'salmon', md: { background: 'teal' } }
+ */
+export type UiPseudoStateProps = UiPseudoProps & {
+    sm?: UiPseudoProps;
+    md?: UiPseudoProps;
+    lg?: UiPseudoProps;
+    xl?: UiPseudoProps;
+};
+/**
+ * Breakpoint props yang mendukung flat CSS properties plus nested pseudo-classes:
+ * md: { background: 'teal', hover: { background: '#fae8ff', borderColor: '#a21caf' }, focus: { borderColor: '#c026d3' } }
+ */
+export type UiBreakpointProps = UiPseudoProps & {
+    /** Style saat :hover pada breakpoint ini */
+    hover?: UiPseudoProps;
+    /** Style saat :active pada breakpoint ini */
+    active?: UiPseudoProps;
+    /** Style saat :focus / :focus-visible pada breakpoint ini */
+    focus?: UiPseudoProps;
+    /** Style saat disabled pada breakpoint ini */
+    disabled?: UiPseudoProps;
+    /** Style saat dark mode aktif (.dark ancestor class) pada breakpoint ini */
+    dark?: UiPseudoProps;
+};
+/**
+ * UiProps — seperti style object CSS biasa, tapi dengan support pseudo-class & responsive breakpoints.
+ *
+ * Mendukung SEMUA CSS property secara otomatis dengan autocomplete via csstype.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   ui={{
+ *     background: 'purple',
+ *     color: 'white',
+ *     borderRadius: '99px',
+ *     backdropFilter: 'blur(8px)',
+ *     hover: {
+ *       background: 'darkpurple',
+ *       transform: 'scale(1.02)',
+ *     },
+ *     active: { opacity: '0.85' },
+ *     // Dark mode via .dark ancestor class (kompatibel Tailwind dark mode)
+ *     dark: {
+ *       background: '#1a1a2e',
+ *       color: '#e2e8f0',
+ *     },
+ *   }}
+ * />
+ * ```
+ */
+export type UiProps = UiPseudoProps & {
+    /** Style saat :hover */
+    hover?: UiPseudoStateProps;
+    /** Style saat :active */
+    active?: UiPseudoStateProps;
+    /** Style saat :focus / :focus-visible */
+    focus?: UiPseudoStateProps;
+    /** Style saat disabled */
+    disabled?: UiPseudoStateProps;
+    /**
+     * Style saat dark mode aktif — diterapkan lewat ancestor class `.dark`.
+     * Kompatibel dengan Tailwind CSS dark mode (class strategy).
+     *
+     * @example
+     * ```tsx
+     * ui={{ color: '#141313', dark: { color: '#e2e8f0', background: '#1a1a2e' } }}
+     * ```
+     * Menghasilkan: `.dark [style*="--ttdk-ui-dark-color:"] { color: var(...) !important; }`
+     */
+    dark?: UiPseudoStateProps;
+    /** Overrides saat min-width: 640px */
+    sm?: UiBreakpointProps;
+    /** Overrides saat min-width: 768px */
+    md?: UiBreakpointProps;
+    /** Overrides saat min-width: 1024px */
+    lg?: UiBreakpointProps;
+    /** Overrides saat min-width: 1280px */
+    xl?: UiBreakpointProps;
+    /** Overrides saat min-width: 1536px */
+    '2xl'?: UiBreakpointProps;
+    [key: string]: any;
+};
+/** Membersihkan akhiran !important jika user tidak sengaja menyertakannya di string nilai */
+export declare function cleanUiValue(v: any): string;
+export declare function injectDynamicCss(bucket: string, ruleKey: string, cssRule: string): void;
+/**
+ * Mengambil properti CSS native biasa (seperti color, fontSize, letterSpacing, transform, dll.)
+ * untuk langsung diterapkan sebagai inline style native browser.
+ * Mengabaikan pseudo-classes ('hover', 'focus') dan responsive breakpoints ('sm', 'md', dll.).
+ */
+export declare function extractBaseStyles(ui?: UiProps | null): Record<string, any>;
+/**
+ * buildUiVars — konversi UiProps ke CSS custom properties untuk dipakai di style attribute
+ * sekaligus mendaftarkan aturan dinamis (pseudo & responsive media queries) secara otomatis.
+ */
+export declare function buildUiVars(ui?: UiProps | null, prefix?: string): Record<string, any>;
+/**
+ * buildUiStyle — Solusi HYBRID:
+ * Menggabungkan native inline style (agar ratusan CSS properties native langsung jalan 100%)
+ * dengan CSS custom properties (agar :hover dan responsive media query tetap bekerja sempurna).
+ */
+export declare function buildUiStyle(ui?: UiProps | null, prefix?: string): Record<string, any>;
+export declare function buildFlexVars(props: any): Record<string, string>;
+export declare function buildFlexItemVars(props: any): Record<string, string>;
+export declare function buildGridVars(props: any): Record<string, string>;
+export declare function buildGridItemVars(props: any): Record<string, string>;