medos-sdk 1.1.9 → 1.1.11

package/dist/components/theme-styles.js

@@ -1,258 +1,349 @@
-export function getContainerStyles(theme, prefix = "medos") {
+export function getContainerStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
     return {
         container: {
             display: "flex",
             justifyContent: "center",
-            padding: theme.spacing.xl,
+            padding: isMobile ? "16px" : "20px",
             fontFamily: theme.typography.fontFamily,
             background: theme.colors.background,
         },
         card: {
             width: "100%",
-            maxWidth: 720,
+            maxWidth: isMobile || isTablet ? "100%" : 720,
             background: theme.colors.surface,
-            borderRadius: theme.radii.lg,
-            boxShadow: theme.shadows.lg,
-            padding: theme.spacing["2xl"],
+            borderRadius: "12px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+            padding: isMobile ? "20px" : "24px",
             boxSizing: "border-box",
         },
         header: {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            marginBottom: theme.spacing.lg,
+            marginBottom: "20px",
+            flexWrap: isMobile ? "wrap" : "nowrap",
         },
         title: {
-            marginLeft: 10,
-            fontSize: theme.typography.fontSizeXl,
-            fontWeight: theme.typography.fontWeightSemibold,
+            marginLeft: isMobile ? 0 : 10,
+            fontSize: isMobile ? "18px" : "20px",
+            fontWeight: 600,
             color: theme.colors.text,
+            margin: 0,
         },
         section: {
-            marginTop: theme.spacing.md,
+            marginTop: "16px",
         },
         errorMessage: {
-            marginBottom: theme.spacing.md,
+            marginBottom: "16px",
+            padding: "12px 16px",
+            borderRadius: "8px",
+            backgroundColor: theme.colors.errorBackground,
             color: theme.colors.error,
-            fontWeight: theme.typography.fontWeightSemibold,
+            fontWeight: 500,
+            fontSize: "14px",
+            border: `1px solid ${theme.colors.error}20`,
         },
         actions: {
             display: "flex",
-            gap: theme.spacing.sm,
-            marginTop: theme.spacing.lg,
-            justifyContent: "flex-end",
+            gap: "12px",
+            marginTop: "24px",
+            paddingTop: "20px",
+            borderTop: `1px solid ${theme.colors.border}`,
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            flexDirection: isMobile ? "column" : "row",
         },
     };
 }
-export function getButtonStyles(theme, prefix = "medos") {
+export function getButtonStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const minHeight = isMobile ? "44px" : "40px";
+    const basePadding = isMobile ? "12px 20px" : "10px 20px";
+    const borderRadius = "8px";
     return {
         primary: {
             background: theme.colors.secondary,
             color: theme.colors.textOnSecondary,
             border: "none",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
+            padding: basePadding,
+            borderRadius,
             cursor: "pointer",
-            fontWeight: theme.typography.fontWeightSemibold,
-            fontSize: theme.typography.fontSizeSm,
-            transition: theme.transitions.normal,
+            fontWeight: 600,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+            lineHeight: "1.5",
         },
         primaryHover: {
             background: theme.colors.secondaryHover,
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+        },
+        primaryDisabled: {
+            opacity: 0.6,
+            cursor: "not-allowed",
         },
         secondary: {
             background: theme.colors.surface,
             color: theme.colors.primary,
-            border: `1px solid ${theme.colors.primary}`,
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+            padding: basePadding,
+            borderRadius,
             cursor: "pointer",
-            fontSize: theme.typography.fontSizeSm,
-            transition: theme.transitions.normal,
+            fontWeight: 600,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            lineHeight: "1.5",
         },
         secondaryHover: {
             background: theme.colors.surfaceHover,
+            borderColor: theme.colors.borderHover,
+        },
+        outline: {
+            background: "transparent",
+            color: theme.colors.text,
+            border: `1px solid ${theme.colors.border}`,
+            padding: basePadding,
+            borderRadius,
+            cursor: "pointer",
+            fontWeight: 500,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            lineHeight: "1.5",
+        },
+        outlineHover: {
+            background: theme.colors.backgroundSecondary,
+            borderColor: theme.colors.borderHover,
+        },
+        ghost: {
+            background: "transparent",
+            color: theme.colors.primary,
+            border: "none",
+            padding: basePadding,
+            borderRadius,
+            cursor: "pointer",
+            fontWeight: 500,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            lineHeight: "1.5",
+        },
+        ghostHover: {
+            background: `${theme.colors.primary}10`,
         },
     };
 }
-export function getPhoneVerifyStyles(theme, prefix = "medos") {
+export function getPhoneVerifyStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const borderRadius = "12px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
     return {
         container: {
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.radii.lg,
+            border: cardBorder,
+            borderRadius,
             overflow: "hidden",
             backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
         },
         header: {
-            padding: "20px 24px 10px 24px",
+            padding: isMobile ? "16px 20px" : "18px 24px",
+            borderBottom: cardBorder,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        title: {
+            fontSize: isMobile ? "16px" : "18px",
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.textOnPrimary,
         },
-        title: { fontSize: 20, fontWeight: 600, margin: 0 },
         content: {
-            padding: theme.spacing["2xl"],
+            padding: isMobile ? "20px" : "24px",
         },
         label: {
             display: "block",
-            fontSize: theme.typography.fontSizeSm,
-            fontWeight: theme.typography.fontWeightMedium,
+            fontSize: "14px",
+            fontWeight: 500,
             color: theme.colors.text,
-            marginBottom: theme.spacing.sm,
+            marginBottom: "8px",
         },
         phoneInputContainer: {
             display: "flex",
-            gap: theme.spacing.sm,
+            gap: "10px",
+            flexDirection: isMobile ? "column" : "row",
         },
         phoneInput: {
             flex: 1,
             width: "100%",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
+            padding: "10px 14px",
+            borderRadius: "8px",
             border: `1px solid ${theme.colors.border}`,
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             outline: "none",
             color: theme.colors.text,
             boxSizing: "border-box",
-            transition: theme.transitions.normal,
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            minHeight: isMobile ? "44px" : "40px",
+            backgroundColor: theme.colors.surface,
         },
         phoneInputFocus: {
-            borderColor: theme.colors.borderFocus,
-            outline: `2px solid ${theme.colors.borderFocus}20`,
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 0 3px ${theme.colors.primary}15`,
         },
         phoneDisplay: {
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            padding: "10px 14px",
             background: theme.colors.backgroundSecondary,
-            borderRadius: theme.radii.md,
-            fontSize: theme.typography.fontSizeSm,
-            color: theme.colors.textSecondary,
-            fontWeight: theme.typography.fontWeightMedium,
+            borderRadius: "8px",
+            fontSize: "14px",
+            color: theme.colors.text,
+            fontWeight: 500,
+            border: `1px solid ${theme.colors.border}`,
         },
         otpInput: {
             width: "100%",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            border: `1px solid ${theme.colors.borderHover}`,
-            borderRadius: theme.radii.md,
-            fontSize: theme.typography.fontSizeSm,
+            padding: "10px 14px",
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: "8px",
+            fontSize: "14px",
             outline: "none",
             color: theme.colors.text,
             boxSizing: "border-box",
-            transition: theme.transitions.normal,
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            backgroundColor: theme.colors.surface,
         },
         otpInputFocus: {
-            borderColor: theme.colors.borderFocus,
-            outline: `2px solid ${theme.colors.borderFocus}20`,
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 0 3px ${theme.colors.primary}15`,
         },
         otpHint: {
-            marginTop: theme.spacing.sm,
-            fontSize: theme.typography.fontSizeXs,
-            color: theme.colors.textTertiary,
+            marginTop: "8px",
+            fontSize: "12px",
+            color: theme.colors.textSecondary,
         },
         successMessage: {
-            marginTop: theme.spacing.xl,
-            padding: theme.spacing.lg,
-            borderRadius: theme.radii.md,
+            marginTop: "20px",
+            padding: "16px",
+            borderRadius: "8px",
             backgroundColor: theme.colors.successBackground,
             border: `1px solid ${theme.colors.success}`,
             display: "flex",
             alignItems: "center",
-            gap: theme.spacing.md,
+            gap: "12px",
         },
         successIcon: {
-            fontSize: theme.typography.fontSize2xl,
+            fontSize: "24px",
             color: theme.colors.success,
         },
         successTitle: {
-            fontSize: theme.typography.fontSizeSm,
-            fontWeight: theme.typography.fontWeightSemibold,
+            fontSize: "14px",
+            fontWeight: 600,
             color: theme.colors.success,
         },
         successSubtitle: {
-            fontSize: theme.typography.fontSizeXs,
-            color: theme.colors.textTertiary,
-            marginTop: 2,
+            fontSize: "12px",
+            color: theme.colors.textSecondary,
+            marginTop: "2px",
         },
         footer: {
-            padding: `${theme.spacing.lg} ${theme.spacing["2xl"]}`,
+            padding: isMobile ? "16px 20px" : "18px 24px",
             borderTop: `1px solid ${theme.colors.border}`,
             backgroundColor: theme.colors.surface,
             display: "flex",
-            gap: theme.spacing.md,
-            justifyContent: "flex-end",
+            gap: "12px",
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            flexDirection: isMobile ? "column" : "row",
         },
     };
 }
-export function getPatientDetailsStyles(theme, prefix = "medos") {
+export function getPatientDetailsStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const borderRadius = "12px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
     return {
         sectionCard: {
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.radii.lg,
-            marginBottom: theme.spacing["2xl"],
+            border: cardBorder,
+            borderRadius,
+            marginBottom: "24px",
+            overflow: "visible",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
         },
         sectionHeader: {
             backgroundColor: theme.colors.primary,
-            padding: `${theme.spacing.lg} ${theme.spacing.xl}`,
+            padding: isMobile ? "16px 20px" : "18px 24px",
             display: "flex",
             alignItems: "center",
-            gap: theme.spacing.md,
-            borderBottom: `1px solid ${theme.colors.border}`,
+            gap: "12px",
+            borderBottom: cardBorder,
             color: theme.colors.textOnPrimary,
         },
         sectionTitle: {
-            fontSize: theme.typography.fontSizeLg,
-            fontWeight: theme.typography.fontWeightSemibold,
+            fontSize: isMobile ? "16px" : "18px",
+            fontWeight: 600,
             margin: 0,
             color: theme.colors.textOnPrimary,
         },
         sectionBody: {
-            padding: theme.spacing["2xl"],
+            padding: isMobile ? "20px" : "24px",
         },
         gridRow: {
             display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gap: theme.spacing.xl,
-            marginTop: theme.spacing.xl,
+            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+            gap: isMobile ? "16px" : "20px",
+            marginTop: "20px",
         },
         label: {
             display: "block",
-            fontSize: theme.typography.fontSizeXs,
-            marginBottom: theme.spacing.xs,
-            color: theme.colors.textSecondary,
-            fontWeight: theme.typography.fontWeightMedium,
+            fontSize: "14px",
+            marginBottom: "8px",
+            color: theme.colors.text,
+            fontWeight: 500,
         },
         input: {
             width: "100%",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
-            border: `1px solid ${theme.colors.border}`,
+            padding: "10px 14px",
+            borderRadius: "8px",
+            border: cardBorder,
             outline: "none",
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             boxSizing: "border-box",
             color: theme.colors.text,
-            transition: theme.transitions.normal,
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            minHeight: isMobile ? "44px" : "40px",
+            backgroundColor: theme.colors.surface,
         },
         inputFocus: {
-            borderColor: theme.colors.borderFocus,
-            outline: `2px solid ${theme.colors.borderFocus}20`,
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 0 3px ${theme.colors.primary}15`,
         },
         phoneDisplay: {
             display: "flex",
-            gap: theme.spacing.sm,
+            gap: "10px",
+            flexDirection: isMobile ? "column" : "row",
         },
         phoneCode: {
-            width: "100px",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
-            border: `1px solid ${theme.colors.border}`,
+            width: isMobile ? "100%" : "100px",
+            padding: "10px 14px",
+            borderRadius: "8px",
+            border: cardBorder,
             backgroundColor: theme.colors.backgroundSecondary,
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             boxSizing: "border-box",
             color: theme.colors.textSecondary,
         },
         phoneNumber: {
             flex: 1,
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
-            border: `1px solid ${theme.colors.border}`,
+            padding: "10px 14px",
+            borderRadius: "8px",
+            border: cardBorder,
             backgroundColor: theme.colors.backgroundSecondary,
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             boxSizing: "border-box",
             color: theme.colors.textSecondary,
         },
@@ -263,51 +354,56 @@ export function getSuccessStyles(theme, prefix = "medos") {
         container: {
             display: "flex",
             flexDirection: "column",
-            height: "100%",
-        },
-        header: {
-            marginTop: `-${theme.spacing.lg}`,
             alignItems: "center",
+            padding: "32px 24px",
             textAlign: "center",
-            color: theme.colors.success,
-            fontWeight: theme.typography.fontWeightBold,
-            fontSize: theme.typography.fontSizeLg,
-            marginBottom: theme.spacing.xl,
+        },
+        header: {
+            marginBottom: "24px",
         },
         iconContainer: {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            padding: `${theme.spacing.md} 0`,
+            width: "72px",
+            height: "72px",
+            borderRadius: "50%",
+            backgroundColor: theme.colors.successBackground,
+            marginBottom: "20px",
         },
         detailsContainer: {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            gap: theme.spacing.md,
+            gap: "12px",
             textAlign: "center",
-            color: theme.colors.success,
         },
         detailsTitle: {
-            fontWeight: theme.typography.fontWeightSemibold,
-            fontSize: theme.typography.fontSizeMd,
+            fontWeight: 600,
+            fontSize: "18px",
+            color: theme.colors.success,
+            margin: 0,
         },
         detailsList: {
             display: "flex",
             flexDirection: "column",
-            gap: theme.spacing.xs,
-            fontSize: theme.typography.fontSizeSm,
+            gap: "4px",
+            fontSize: "14px",
             width: "100%",
-            maxWidth: "28rem",
+            maxWidth: "400px",
             textAlign: "center",
+            color: theme.colors.textSecondary,
         },
         confirmationNote: {
-            marginTop: theme.spacing.sm,
-            fontSize: theme.typography.fontSizeXs,
-            color: theme.colors.textTertiary,
+            marginTop: "12px",
+            fontSize: "14px",
+            color: theme.colors.textSecondary,
+            lineHeight: "1.5",
         },
         actionContainer: {
-            marginTop: theme.spacing["2xl"],
+            marginTop: "32px",
+            display: "flex",
+            justifyContent: "center",
         },
     };
 }