@vibes.diy/use-vibes-base 0.0.1-dev

package/utils/styles.js

@@ -0,0 +1,230 @@
+export const imgGenTheme = {
+    colors: {
+        text: '#333',
+        background: '#333333',
+        overlayBg: 'rgba(255, 255, 255, 0.5)',
+        accent: '#0066cc',
+        flash: '#fe0',
+        errorBg: 'rgba(0, 0, 0, 0.7)',
+        errorBorder: '#ff6666',
+        errorText: '#ff6666',
+        errorTextBody: '#ffffff',
+        buttonBg: 'rgba(255, 255, 255, 0.7)',
+        deleteHover: '#ff3333',
+    },
+    dimensions: {
+        borderRadius: '8px',
+        padding: '8px',
+        buttonSize: '28px',
+        progressHeight: '8px',
+    },
+    typography: {
+        fontSize: '14px',
+        fontWeight: 'bold',
+        lineHeight: '1.5',
+    },
+    effects: {
+        blurRadius: '4px',
+        transitionSpeed: '0.2s',
+        shadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+    },
+};
+export const imgGenStyles = {
+    root: {
+        position: 'relative',
+        maxWidth: '100%',
+        overflow: 'hidden',
+    },
+    container: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+    },
+    imageContainer: {
+        position: 'relative',
+        width: '100%',
+        overflow: 'hidden',
+    },
+    image: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+    },
+    overlay: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: imgGenTheme.dimensions.padding,
+        backgroundColor: imgGenTheme.colors.overlayBg,
+        backdropFilter: `blur(${imgGenTheme.effects.blurRadius})`,
+        transition: `opacity ${imgGenTheme.effects.transitionSpeed} ease`,
+        zIndex: 10,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    topLine: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    prompt: {
+        width: '100%',
+        padding: '4px',
+        marginBottom: '8px',
+    },
+    promptText: {
+        color: imgGenTheme.colors.text,
+        width: '100%',
+        textAlign: 'center',
+        fontWeight: imgGenTheme.typography.fontWeight,
+        padding: '2px',
+        cursor: 'pointer',
+    },
+    promptInput: {
+        width: '100%',
+        boxSizing: 'border-box',
+        padding: '6px 8px',
+        border: '1px solid #ccc',
+        borderRadius: '4px',
+        fontSize: imgGenTheme.typography.fontSize,
+        fontWeight: imgGenTheme.typography.fontWeight,
+        color: imgGenTheme.colors.text,
+        backgroundColor: 'white',
+    },
+    controls: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        paddingTop: '2px',
+    },
+    controlGroup: {
+        display: 'flex',
+        gap: '6px',
+        alignItems: 'center',
+    },
+    button: {
+        background: imgGenTheme.colors.buttonBg,
+        borderRadius: '50%',
+        width: imgGenTheme.dimensions.buttonSize,
+        height: imgGenTheme.dimensions.buttonSize,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: 'none',
+        cursor: 'pointer',
+        opacity: 0.5,
+        transition: `opacity ${imgGenTheme.effects.transitionSpeed} ease`,
+        padding: 0,
+        fontSize: imgGenTheme.typography.fontSize,
+        color: imgGenTheme.colors.text,
+    },
+    progressContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 50,
+    },
+    progress: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: imgGenTheme.dimensions.progressHeight,
+        backgroundColor: imgGenTheme.colors.accent,
+        transition: 'width 0.3s ease-in-out',
+        zIndex: 11,
+    },
+    placeholder: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: imgGenTheme.colors.background,
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+    },
+    statusText: {
+        width: '100%',
+        textAlign: 'center',
+        fontSize: imgGenTheme.typography.fontSize,
+        color: imgGenTheme.colors.text,
+        opacity: 0.7,
+        padding: '8px 0',
+    },
+    errorContainer: {
+        backgroundColor: '#222',
+        aspectRatio: '1 / 1',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '1rem',
+        width: '100%',
+        borderRadius: imgGenTheme.dimensions.borderRadius,
+        overflow: 'hidden',
+    },
+    error: {
+        backgroundColor: '#000',
+        color: imgGenTheme.colors.errorText,
+        padding: '1.5rem',
+        borderRadius: imgGenTheme.dimensions.borderRadius,
+        border: `1px solid ${imgGenTheme.colors.errorBorder}`,
+        boxShadow: imgGenTheme.effects.shadow,
+        maxWidth: '80%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textAlign: 'center',
+    },
+    errorTitle: {
+        color: imgGenTheme.colors.errorText,
+        marginTop: 0,
+        fontWeight: 'bold',
+        fontSize: '18px',
+        marginBottom: '12px',
+        textAlign: 'center',
+    },
+    errorMessage: {
+        whiteSpace: 'pre-wrap',
+        color: imgGenTheme.colors.errorTextBody,
+        fontSize: imgGenTheme.typography.fontSize,
+        lineHeight: imgGenTheme.typography.lineHeight,
+        textAlign: 'left',
+        fontFamily: 'monospace, sans-serif',
+        marginBottom: 0,
+    },
+    promptInputEditMode: {
+        border: `2px solid ${imgGenTheme.colors.accent}`,
+        padding: '6px 10px',
+        borderRadius: '6px',
+    },
+    truncate: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+};
+export function createStyledVariant(baseStyle, variants = {}) {
+    return { ...baseStyle, ...variants };
+}
+export const styleUtils = {
+    hover: (styles) => ({
+        '&:hover': styles,
+    }),
+    disabled: (styles) => ({
+        '&:disabled': styles,
+    }),
+    mediaQuery: (query, styles) => ({
+        [`@media ${query}`]: styles,
+    }),
+    transition: (properties, duration = imgGenTheme.effects.transitionSpeed) => ({
+        transition: properties.map((prop) => `${prop} ${duration} ease`).join(', '),
+    }),
+};
+//# sourceMappingURL=styles.js.map

package/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../jsr/utils/styles.ts"],"names":[],"mappings":"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"}