@guard-rail/core 0.9.1 → 0.11.0

package/dist/react/styles.d.ts

@@ -1,504 +0,0 @@
-/**
- * Guardrail's own chrome is styled with inline styles on purpose. Utility
- * classes would make the package depend on the consumer having Tailwind *and*
- * adding node_modules/guardrail to their content globs — it would render
- * unstyled on a clean install. Developer-authored content is never touched.
- *
- * Colors are CSS variables so the chrome can follow the visitor's OS light/dark
- * preference — inline styles can't express a media query, but they can read a
- * variable that one defines. THEME_CSS (rendered once by <GRailAdmin>) sets the
- * variables; every use below carries the light value as its fallback, so the
- * chrome still renders correctly if that stylesheet is ever absent.
- */
-declare const LIGHT: {
-    readonly bg: "#ffffff";
-    readonly "bg-glass": "rgba(255,255,255,0.97)";
-    readonly fg: "#111827";
-    readonly fg2: "#4b5563";
-    readonly muted: "#6b7280";
-    readonly subtle: "#9ca3af";
-    readonly border: "#e5e7eb";
-    readonly "border-strong": "#d1d5db";
-    readonly "border-soft": "#f3f4f6";
-    readonly "input-bg": "#ffffff";
-    readonly soft: "#f3f4f6";
-    readonly accent: "#2563eb";
-    readonly "accent-soft": "#eff6ff";
-    readonly "accent-text": "#1d4ed8";
-    readonly "primary-bg": "#111827";
-    readonly "primary-fg": "#ffffff";
-    readonly danger: "#dc2626";
-    readonly label: "#1e3a8a";
-    readonly shadow: "rgba(0,0,0,0.25)";
-};
-/** A themed color: reads the variable, falls back to the light value. */
-declare const v: (name: keyof typeof LIGHT) => string;
-/**
- * Rendered once by <GRailAdmin>. Variables go on :root so portaled chrome
- * inherits them. `color-scheme` is deliberately scoped to Guardrail's own
- * elements, never :root — that would flip the host site's form controls and
- * scrollbars too. It's what makes native controls inside the chrome (the
- * team drawer's role <select>, its dropdown list) match the palette.
- */
-declare const THEME_CSS: string;
-declare const S: {
-    banner: {
-        position: "fixed";
-        bottom: number;
-        left: number;
-        width: string;
-        background: string;
-        color: string;
-        padding: string;
-        zIndex: number;
-        borderTop: string;
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    bannerForm: {
-        display: "flex";
-        gap: number;
-        justifyContent: "center";
-        alignItems: "center";
-        flexWrap: "wrap";
-    };
-    brand: {
-        fontWeight: number;
-        letterSpacing: string;
-        fontSize: number;
-        textTransform: "uppercase";
-    };
-    /** Brand plus any status/error text under it, stacked instead of sharing
-     * the form's row — otherwise a login error reads as if it's labeling the
-     * next field over, not feedback about the brand's own sign-in attempt. */
-    brandStack: {
-        display: "flex";
-        flexDirection: "column";
-        alignItems: "flex-start";
-        gap: number;
-    };
-    error: {
-        color: string;
-        fontSize: number;
-        fontWeight: number;
-    };
-    input: {
-        border: string;
-        borderRadius: number;
-        padding: string;
-        fontSize: number;
-        color: string;
-        background: string;
-        outline: string;
-    };
-    primaryBtn: {
-        background: string;
-        color: string;
-        padding: string;
-        borderRadius: number;
-        fontSize: number;
-        fontWeight: number;
-        border: string;
-        cursor: "pointer";
-    };
-    toolbar: {
-        position: "fixed";
-        bottom: number;
-        left: string;
-        transform: "translateX(-50%)";
-        zIndex: number;
-        background: string;
-        backdropFilter: "blur(8px)";
-        color: string;
-        padding: string;
-        borderRadius: number;
-        boxShadow: `0 20px 40px ${string}`;
-        display: "flex";
-        alignItems: "center";
-        gap: number;
-        border: string;
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    dot: {
-        display: "inline-block";
-        width: number;
-        height: number;
-        borderRadius: string;
-        background: string;
-    };
-    toolbarLabel: {
-        fontSize: number;
-        fontWeight: number;
-        textTransform: "uppercase";
-        letterSpacing: string;
-        color: string;
-    };
-    divider: {
-        width: number;
-        height: number;
-        background: string;
-    };
-    linkBtn: {
-        fontSize: number;
-        fontWeight: number;
-        textTransform: "uppercase";
-        letterSpacing: string;
-        color: string;
-        background: string;
-        border: string;
-        cursor: "pointer";
-    };
-    popover: {
-        position: "fixed";
-        bottom: number;
-        left: string;
-        transform: "translateX(-50%)";
-        zIndex: number;
-        background: string;
-        color: string;
-        padding: number;
-        borderRadius: number;
-        boxShadow: `0 20px 40px ${string}`;
-        border: string;
-        minWidth: number;
-        cursor: "default";
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    label: {
-        display: "block";
-        fontSize: number;
-        fontWeight: number;
-        color: string;
-        marginBottom: number;
-        textTransform: "uppercase";
-    };
-    field: {
-        border: string;
-        borderRadius: number;
-        padding: string;
-        fontSize: number;
-        color: string;
-        background: string;
-        width: string;
-        marginBottom: number;
-        boxSizing: "border-box";
-    };
-    row: {
-        display: "flex";
-        gap: number;
-        marginTop: number;
-        paddingTop: number;
-        borderTop: string;
-    };
-    cancelBtn: {
-        background: string;
-        color: string;
-        padding: string;
-        borderRadius: number;
-        fontSize: number;
-        border: string;
-        cursor: "pointer";
-    };
-    /** Anchored to the element's rect at runtime; top/left are set inline. */
-    anchoredBar: {
-        position: "fixed";
-        zIndex: number;
-        display: "flex";
-        alignItems: "center";
-        gap: number;
-        background: string;
-        color: string;
-        backdropFilter: "blur(8px)";
-        padding: number;
-        borderRadius: number;
-        boxShadow: `0 8px 24px ${string}`;
-        border: string;
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    anchoredPanel: {
-        position: "fixed";
-        zIndex: number;
-        maxHeight: string;
-        overflowY: "auto";
-        background: string;
-        color: string;
-        padding: number;
-        borderRadius: number;
-        boxShadow: `0 12px 32px ${string}`;
-        border: string;
-        minWidth: number;
-        maxWidth: string;
-        cursor: "default";
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    iconBtn: {
-        display: "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
-        width: number;
-        height: number;
-        borderRadius: number;
-        border: string;
-        background: string;
-        color: string;
-        cursor: "pointer";
-        padding: number;
-    };
-    iconBtnPrimary: {
-        display: "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
-        width: number;
-        height: number;
-        borderRadius: number;
-        border: string;
-        background: string;
-        color: "#fff";
-        cursor: "pointer";
-        padding: number;
-    };
-    scrim: {
-        position: "fixed";
-        inset: number;
-        background: string;
-        zIndex: number;
-    };
-    drawer: {
-        position: "fixed";
-        top: number;
-        right: number;
-        height: string;
-        width: string;
-        background: string;
-        color: string;
-        zIndex: number;
-        boxShadow: `-12px 0 32px ${string}`;
-        display: "flex";
-        flexDirection: "column";
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    drawerHead: {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "space-between";
-        padding: string;
-        borderBottom: string;
-    };
-    drawerTitle: {
-        fontSize: number;
-        fontWeight: number;
-        margin: number;
-    };
-    drawerBody: {
-        padding: number;
-        overflowY: "auto";
-        flex: number;
-    };
-    memberRow: {
-        display: "flex";
-        alignItems: "center";
-        gap: number;
-        padding: string;
-        borderBottom: string;
-    };
-    memberEmail: {
-        flex: number;
-        fontSize: number;
-        overflow: "hidden";
-        textOverflow: "ellipsis";
-        whiteSpace: "nowrap";
-    };
-    select: {
-        border: string;
-        borderRadius: number;
-        padding: string;
-        fontSize: number;
-        background: string;
-        color: string;
-    };
-    badge: {
-        fontSize: number;
-        fontWeight: number;
-        textTransform: "uppercase";
-        letterSpacing: string;
-        padding: string;
-        borderRadius: number;
-        background: string;
-        color: "#92400e";
-    };
-    sectionLabel: {
-        fontSize: number;
-        fontWeight: number;
-        textTransform: "uppercase";
-        letterSpacing: string;
-        color: string;
-        margin: string;
-    };
-    pickerScrim: {
-        position: "fixed";
-        inset: number;
-        background: string;
-        zIndex: number;
-    };
-    picker: {
-        position: "fixed";
-        top: string;
-        left: string;
-        transform: "translate(-50%, -50%)";
-        width: string;
-        maxHeight: string;
-        background: string;
-        color: string;
-        borderRadius: number;
-        zIndex: number;
-        boxShadow: `0 24px 64px ${string}`;
-        display: "flex";
-        flexDirection: "column";
-        overflow: "hidden";
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    pickerGrid: {
-        display: "grid";
-        gridTemplateColumns: string;
-        gap: number;
-    };
-    pickerTile: {
-        position: "relative";
-        aspectRatio: "1";
-        borderRadius: number;
-        overflow: "hidden";
-        border: string;
-        background: string;
-        cursor: "pointer";
-        padding: number;
-    };
-    pickerTileActive: {
-        borderColor: string;
-    };
-    pickerThumb: {
-        width: string;
-        height: string;
-        objectFit: "cover";
-        display: "block";
-    };
-    dropzone: {
-        border: string;
-        borderRadius: number;
-        padding: number;
-        textAlign: "center";
-        fontSize: number;
-        color: string;
-        marginBottom: number;
-        cursor: "pointer";
-    };
-    dropzoneActive: {
-        borderColor: string;
-        background: string;
-        color: string;
-    };
-    previewThumb: {
-        width: string;
-        maxWidth: number;
-        height: string;
-        maxHeight: number;
-        objectFit: "contain";
-        background: string;
-        borderRadius: number;
-        display: "block";
-        marginBottom: number;
-    };
-    secondaryBtn: {
-        background: string;
-        color: string;
-        padding: string;
-        borderRadius: number;
-        fontSize: number;
-        fontWeight: number;
-        border: string;
-        cursor: "pointer";
-        width: string;
-        marginBottom: number;
-    };
-    /**
-     * Edit affordance for image fields, drawn as separate fixed elements instead
-     * of styling the <img> itself. Backgrounds (next/image `fill` behind
-     * overlaid content) can't take an in-place affordance: it either sits under
-     * the content and can't be clicked, or gets lifted over it and hides it.
-     * The outline ignores the pointer so overlaid content stays interactive;
-     * the handle is the one clickable piece.
-     */
-    markerOutline: {
-        position: "fixed";
-        zIndex: number;
-        pointerEvents: "none";
-        boxSizing: "border-box";
-        borderRadius: number;
-    };
-    markerHandle: {
-        position: "fixed";
-        zIndex: number;
-        display: "inline-flex";
-        alignItems: "center";
-        gap: number;
-        padding: string;
-        borderRadius: number;
-        border: string;
-        background: string;
-        color: "#fff";
-        fontSize: number;
-        fontWeight: number;
-        fontFamily: "system-ui, -apple-system, sans-serif";
-        cursor: "pointer";
-        boxShadow: `0 4px 12px ${string}`;
-    };
-    repeaterItem: {
-        position: "relative";
-        outline: string;
-        outlineOffset: number;
-    };
-    repeaterToolbar: {
-        position: "absolute";
-        top: number;
-        right: number;
-        zIndex: number;
-        display: "flex";
-        gap: number;
-        background: string;
-        color: string;
-        backdropFilter: "blur(6px)";
-        padding: number;
-        borderRadius: number;
-        boxShadow: `0 4px 12px ${string}`;
-        border: string;
-    };
-    repeaterAddRow: {
-        display: "flex";
-        gap: number;
-        alignItems: "center";
-        marginTop: number;
-        fontFamily: "system-ui, -apple-system, sans-serif";
-    };
-    repeaterAddBtn: {
-        display: "inline-flex";
-        alignItems: "center";
-        gap: number;
-        padding: string;
-        borderRadius: number;
-        border: string;
-        background: string;
-        color: string;
-        fontSize: number;
-        fontWeight: number;
-        cursor: "pointer";
-    };
-    repeaterSlugInput: {
-        border: string;
-        borderRadius: number;
-        padding: string;
-        fontSize: number;
-        color: string;
-        background: string;
-        minWidth: number;
-    };
-};
-
-export { S, THEME_CSS, v };