@guard-rail/core 0.1.0

package/dist/react/styles.d.ts

@@ -0,0 +1,421 @@
+/**
+ * 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.
+ */
+declare const S: {
+    banner: {
+        position: "fixed";
+        bottom: number;
+        left: number;
+        width: string;
+        background: string;
+        color: "#000";
+        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";
+    };
+    error: {
+        color: "#dc2626";
+        fontSize: number;
+        fontWeight: number;
+    };
+    input: {
+        border: string;
+        borderRadius: number;
+        padding: string;
+        fontSize: number;
+        color: "#000";
+        background: string;
+        outline: string;
+    };
+    primaryBtn: {
+        background: string;
+        color: "#fff";
+        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: "#fff";
+        padding: string;
+        borderRadius: number;
+        boxShadow: "0 20px 40px rgba(0,0,0,0.35)";
+        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: "#dbeafe";
+    };
+    divider: {
+        width: number;
+        height: number;
+        background: string;
+    };
+    linkBtn: {
+        fontSize: number;
+        fontWeight: number;
+        textTransform: "uppercase";
+        letterSpacing: string;
+        color: "#9ca3af";
+        background: string;
+        border: string;
+        cursor: "pointer";
+    };
+    popover: {
+        position: "fixed";
+        bottom: number;
+        left: string;
+        transform: "translateX(-50%)";
+        zIndex: number;
+        background: string;
+        padding: number;
+        borderRadius: number;
+        boxShadow: "0 20px 40px rgba(0,0,0,0.25)";
+        border: string;
+        minWidth: number;
+        cursor: "default";
+        fontFamily: "system-ui, -apple-system, sans-serif";
+    };
+    label: {
+        display: "block";
+        fontSize: number;
+        fontWeight: number;
+        color: "#9ca3af";
+        marginBottom: number;
+        textTransform: "uppercase";
+    };
+    field: {
+        border: string;
+        borderRadius: number;
+        padding: string;
+        fontSize: number;
+        color: "#000";
+        background: string;
+        width: string;
+        marginBottom: number;
+        boxSizing: "border-box";
+    };
+    row: {
+        display: "flex";
+        gap: number;
+        marginTop: number;
+        paddingTop: number;
+        borderTop: string;
+    };
+    cancelBtn: {
+        background: string;
+        color: "#4b5563";
+        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;
+        backdropFilter: "blur(8px)";
+        padding: number;
+        borderRadius: number;
+        boxShadow: "0 8px 24px rgba(0,0,0,0.3)";
+        border: string;
+        fontFamily: "system-ui, -apple-system, sans-serif";
+    };
+    anchoredPanel: {
+        position: "fixed";
+        zIndex: number;
+        maxHeight: string;
+        overflowY: "auto";
+        background: string;
+        padding: number;
+        borderRadius: number;
+        boxShadow: "0 12px 32px rgba(0,0,0,0.25)";
+        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: "#e5e7eb";
+        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: "#111827";
+        zIndex: number;
+        boxShadow: "-12px 0 32px rgba(0,0,0,0.2)";
+        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: "#111827";
+    };
+    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: "#9ca3af";
+        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: "#111827";
+        borderRadius: number;
+        zIndex: number;
+        boxShadow: "0 24px 64px rgba(0,0,0,0.35)";
+        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: "#2563eb";
+    };
+    pickerThumb: {
+        width: string;
+        height: string;
+        objectFit: "cover";
+        display: "block";
+    };
+    dropzone: {
+        border: string;
+        borderRadius: number;
+        padding: number;
+        textAlign: "center";
+        fontSize: number;
+        color: "#6b7280";
+        marginBottom: number;
+        cursor: "pointer";
+    };
+    dropzoneActive: {
+        borderColor: "#2563eb";
+        background: string;
+        color: "#1d4ed8";
+    };
+    previewThumb: {
+        width: string;
+        maxWidth: number;
+        height: string;
+        maxHeight: number;
+        objectFit: "contain";
+        background: string;
+        borderRadius: number;
+        display: "block";
+        marginBottom: number;
+    };
+    secondaryBtn: {
+        background: string;
+        color: "#111827";
+        padding: string;
+        borderRadius: number;
+        fontSize: number;
+        fontWeight: number;
+        border: string;
+        cursor: "pointer";
+        width: string;
+        marginBottom: number;
+    };
+    repeaterItem: {
+        position: "relative";
+        outline: string;
+        outlineOffset: number;
+    };
+    repeaterToolbar: {
+        position: "absolute";
+        top: number;
+        right: number;
+        zIndex: number;
+        display: "flex";
+        gap: number;
+        background: string;
+        backdropFilter: "blur(6px)";
+        padding: number;
+        borderRadius: number;
+        boxShadow: "0 4px 12px rgba(0,0,0,0.25)";
+    };
+    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: "#2563eb";
+        fontSize: number;
+        fontWeight: number;
+        cursor: "pointer";
+    };
+    repeaterSlugInput: {
+        border: string;
+        borderRadius: number;
+        padding: string;
+        fontSize: number;
+        color: "#000";
+        background: string;
+        minWidth: number;
+    };
+};
+
+export { S };