@okshaun/components 0.4.5 → 0.5.0

package/dist/preset.js

@@ -116,6 +116,28 @@ const keyframes$1 = {
       transform: "none",
       animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
     }
+  },
+  badgePop: {
+    "0%": {
+      transform: "translate(50%, -50%) scale(1)"
+    },
+    "50%": {
+      transform: "translate(50%, -50%) scale(1.2)"
+    },
+    "100%": {
+      transform: "translate(50%, -50%) scale(1)"
+    }
+  },
+  badgePopStandalone: {
+    "0%": {
+      transform: "scale(1)"
+    },
+    "50%": {
+      transform: "scale(1.2)"
+    },
+    "100%": {
+      transform: "scale(1)"
+    }
   }
 };
 const easings = {
@@ -4478,6 +4500,7 @@ const conditions = {
   focusWithin: "&:focus-within",
   focusVisible: "&:is(:focus-visible, [data-focus-visible=true])",
   disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+  deleted: "&:is(:deleted, [deleted], [data-deleted=true])",
   active: "&:is(:active, [data-active=true])",
   visited: "&:visited",
   target: "&:target",
@@ -4548,7 +4571,7 @@ const conditions = {
   open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
   closed: '&:is([closed], [data-closed], [data-state="closed"])',
   fullscreen: "&:is(:fullscreen, [data-fullscreen])",
-  loading: "&:is([data-loading], [aria-busy=true])",
+  loading: "&:is([data-loading=true], [aria-busy=true])",
   hidden: "&:is([hidden], [data-hidden])",
   current: "&:is([aria-current=true], [data-current])",
   currentPage: "&[aria-current=page]",
@@ -4667,78 +4690,6 @@ const globalCss = defineGlobalStyles({
     display: "list-item"
   }
 });
-const badgeRecipe = defineRecipe({
-  className: "badge",
-  jsx: ["Badge"],
-  staticCss: [{ size: ["sm", "md", "lg"] }],
-  base: {
-    alignItems: "center",
-    borderRadius: "full",
-    colorPalette: "accent",
-    display: "inline-flex",
-    fontWeight: "medium",
-    userSelect: "none",
-    whiteSpace: "nowrap"
-  },
-  defaultVariants: {
-    variant: "subtle",
-    size: "md"
-  },
-  variants: {
-    variant: {
-      solid: {
-        background: "colorPalette.default",
-        color: "colorPalette.fg"
-      },
-      subtle: {
-        background: "bg.subtle",
-        borderColor: "border.subtle",
-        borderWidth: "1px",
-        color: "fg.default",
-        "& svg": {
-          color: "fg.muted"
-        }
-      },
-      outline: {
-        color: "fg.default",
-        borderWidth: "2px",
-        borderColor: "border.default"
-      }
-    },
-    size: {
-      sm: {
-        textStyle: "xs",
-        px: "2",
-        h: "5",
-        gap: "1",
-        "& svg": {
-          width: "3",
-          height: "3"
-        }
-      },
-      md: {
-        textStyle: "xs",
-        px: "2.5",
-        h: "6",
-        gap: "1.5",
-        "& svg": {
-          width: "4",
-          height: "4"
-        }
-      },
-      lg: {
-        textStyle: "sm",
-        px: "3",
-        h: "7",
-        gap: "1.5",
-        "& svg": {
-          width: "4",
-          height: "4"
-        }
-      }
-    }
-  }
-});
 const textareaVariants = {
   size: {
     medium: {
@@ -5779,6 +5730,8 @@ const baseButtonStyles = {
     alignItems: "center",
     gap: 4,
     minWidth: 0,
+    width: "fit",
+    height: "fit",
     transitionDuration: "fast",
     transitionProperty: "background, border-color, color, box-shadow",
     transitionTimingFunction: "default",
@@ -5795,12 +5748,10 @@ const baseButtonStyles = {
     outlineWidth: 2,
     outlineStyle: "solid",
     outlineColor: "transparent",
-    // outlineOffset: 1,
     textDecoration: "none",
     whiteSpace: "nowrap",
     cursor: "pointer",
     _focusVisible: {
-      // borderColor: 'border.focused',
       outlineColor: "border.focused"
     },
     _disabled: {
@@ -6731,15 +6682,598 @@ const menuRecipe$1 = defineSlotRecipe({
     indicatorPosition: "left"
   }
 });
+const chipBase = {
+  container: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    width: "fit",
+    borderRadius: "full",
+    fontFamily: "sans",
+    lineHeight: "default",
+    fontWeight: "medium",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle",
+    cursor: "pointer",
+    transitionDuration: "fast",
+    transitionProperty: "background, border-color, color, box-shadow",
+    transitionTimingFunction: "default",
+    userSelect: "none",
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: "transparent",
+    bg: "bg.neutral",
+    color: "text",
+    icon: { fill: "icon.decorative" },
+    _hover: {
+      bg: "bg.neutral.hovered",
+      icon: { fill: "icon.decorative.hovered" }
+    },
+    _active: {
+      bg: "bg.neutral.pressed",
+      icon: { fill: "icon.decorative.hovered" }
+    },
+    _focusVisible: {
+      outlineColor: "border.focused"
+    },
+    _loading: {
+      cursor: "wait",
+      animation: "pulse"
+    },
+    _deleted: {
+      textDecoration: "line-through",
+      cursor: "not-allowed",
+      opacity: 0.6
+    },
+    _disabled: {
+      cursor: "not-allowed",
+      bg: "bg.disabled",
+      color: "text.disabled",
+      borderColor: "border.disabled",
+      icon: { fill: "icon.disabled" },
+      _hover: {
+        bg: "bg.disabled",
+        color: "text.disabled",
+        borderColor: "border.disabled",
+        icon: { fill: "icon.disabled" }
+      }
+    },
+    _selected: {
+      bg: "bg.brand.boldest",
+      color: "text.inverse",
+      icon: { fill: "icon.decorative.inverse" },
+      _hover: {
+        bg: "bg.brand.boldest.hovered",
+        icon: { fill: "icon.inverse" }
+      },
+      _active: {
+        bg: "bg.brand.boldest.pressed",
+        icon: { fill: "icon.inverse" }
+      }
+    }
+  },
+  icon: {
+    aspectRatio: "square",
+    transitionDuration: "fast",
+    transitionProperty: "fill",
+    transitionTimingFunction: "default"
+  }
+};
+const chipRecipe$1 = defineSlotRecipe({
+  className: "chip",
+  jsx: ["Chip"],
+  slots: ["container", "icon"],
+  base: chipBase,
+  variants: {
+    size: {
+      default: {
+        container: {
+          gap: "4",
+          h: "24",
+          px: "8",
+          py: "1",
+          fontSize: "14"
+        },
+        icon: {
+          w: "20",
+          h: "20"
+        }
+      },
+      small: {
+        container: {
+          gap: "2",
+          h: "20",
+          px: "6",
+          py: "0",
+          fontSize: "14"
+        },
+        icon: {
+          w: "20",
+          h: "20"
+        }
+      },
+      large: {
+        container: {
+          gap: "4",
+          h: "32",
+          px: "10",
+          py: "4",
+          fontSize: "16"
+        },
+        icon: {
+          w: "24",
+          h: "24"
+        }
+      }
+    },
+    before: {
+      true: { container: {} }
+    },
+    after: {
+      true: { container: {} }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "default",
+      before: true,
+      css: {
+        container: { ps: "2" }
+      }
+    },
+    {
+      size: "default",
+      after: true,
+      css: {
+        container: { pe: "2" }
+      }
+    },
+    {
+      size: "small",
+      before: true,
+      css: {
+        container: { ps: "2" }
+      }
+    },
+    {
+      size: "small",
+      after: true,
+      css: {
+        container: { pe: "2" }
+      }
+    },
+    {
+      size: "large",
+      before: true,
+      css: {
+        container: { ps: "4" }
+      }
+    },
+    {
+      size: "large",
+      after: true,
+      css: {
+        container: { pe: "4" }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "default"
+  }
+});
+const badgeRecipe$1 = defineSlotRecipe({
+  className: "badge",
+  jsx: ["Badge"],
+  slots: ["root", "indicator"],
+  staticCss: [
+    {
+      size: ["sm", "md", "lg"],
+      standalone: ["true", "false"],
+      dot: ["true", "false"],
+      appearance: [
+        "neutral",
+        "inverted",
+        "subtle",
+        "subtle-inverted",
+        "success",
+        "danger",
+        "warning",
+        "info"
+      ]
+    }
+  ],
+  base: {
+    root: {
+      display: "inline-flex",
+      position: "relative",
+      verticalAlign: "middle"
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      fontWeight: "medium",
+      fontFamily: "sans",
+      lineHeight: "1",
+      whiteSpace: "nowrap",
+      userSelect: "none",
+      zIndex: "1"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        indicator: {
+          h: "6",
+          fontSize: "10",
+          p: "3"
+        }
+      },
+      md: {
+        indicator: {
+          h: "8",
+          fontSize: "12",
+          p: "4"
+        }
+      },
+      lg: {
+        indicator: {
+          h: "10",
+          fontSize: "14",
+          p: "5"
+        }
+      }
+    },
+    // When standalone (no children), don't use absolute positioning
+    standalone: {
+      true: {
+        root: {
+          display: "inline-flex"
+        },
+        indicator: {
+          position: "static",
+          transform: "none"
+        }
+      },
+      false: {
+        root: {
+          display: "inline-flex",
+          position: "relative",
+          verticalAlign: "middle"
+        },
+        indicator: {
+          position: "absolute",
+          top: "0",
+          right: "0",
+          transform: "translate(50%, -50%)"
+        }
+      }
+    },
+    // Dot mode: smaller, no text
+    dot: {
+      true: {
+        indicator: {
+          // Dot mode styles handled by base + size variants
+        }
+      },
+      false: {
+        indicator: {
+          // Count mode - compound variants handle sizing
+        }
+      }
+    },
+    // Appearance variants for color schemes
+    appearance: {
+      neutral: {
+        indicator: {
+          bg: { base: "neutral.30", _dark: "darkNeutral.40" },
+          color: "text"
+        }
+      },
+      subtle: {
+        indicator: {
+          bg: "bg.neutral",
+          color: "text"
+        }
+      },
+      inverted: {
+        indicator: {
+          bg: "bg.neutral.inverse.bold",
+          color: "text.inverse"
+        }
+      },
+      "subtle-inverted": {
+        indicator: {
+          bg: "bg.neutral.inverse.subtle",
+          color: "text"
+        }
+      },
+      success: {
+        indicator: {
+          bg: "bg.success.bold",
+          color: "text.inverse"
+        }
+      },
+      danger: {
+        indicator: {
+          bg: "bg.danger.bold",
+          color: "text.inverse"
+        }
+      },
+      warning: {
+        indicator: {
+          bg: "bg.warning.bold",
+          color: "text.warning.inverse"
+        }
+      },
+      info: {
+        indicator: {
+          bg: "bg.info.bold",
+          color: "text.inverse"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    // Count mode sizes (smaller than count mode)
+    {
+      dot: false,
+      size: "sm",
+      css: {
+        indicator: {
+          minW: "16",
+          h: "fit"
+          // w: '4',
+          // h: '4',
+          // p: '3',
+        }
+      }
+    },
+    {
+      dot: false,
+      size: "md",
+      css: {
+        indicator: {
+          minW: "20",
+          h: "fit"
+          // w: '6',
+          // h: '6',
+          // p: '4',
+        }
+      }
+    },
+    {
+      dot: false,
+      size: "lg",
+      css: {
+        indicator: {
+          minW: "24",
+          h: "fit"
+          // w: '8',
+          // h: '8',
+          // p: '5',
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    appearance: "danger"
+  }
+});
+const avatarRecipe$1 = defineSlotRecipe({
+  className: "avatar",
+  jsx: ["Avatar"],
+  slots: ["root", "image", "fallback", "presence", "status"],
+  staticCss: [
+    {
+      size: ["xs", "sm", "md", "lx", "xl", "2xl"],
+      shape: ["circle", "square", "hexagon"]
+    }
+  ],
+  base: {
+    root: {
+      display: "inline-flex",
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center",
+      verticalAlign: "middle",
+      flexShrink: 0,
+      color: "text",
+      bg: "bg.neutral",
+      userSelect: "none",
+      aspectRatio: "square"
+    },
+    image: {
+      w: "full",
+      h: "full",
+      objectFit: "cover",
+      overflow: "hidden"
+    },
+    fallback: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "full",
+      h: "full",
+      fontFamily: "sans",
+      fontWeight: "medium",
+      textTransform: "uppercase",
+      color: "text.subtle"
+    },
+    presence: {
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+      borderRadius: "full",
+      borderWidth: "2",
+      borderStyle: "solid",
+      borderColor: "bg",
+      zIndex: 1
+    },
+    status: {
+      position: "absolute",
+      top: "0",
+      right: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      borderWidth: "2",
+      borderStyle: "solid",
+      borderColor: "bg",
+      zIndex: 1
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          w: "16",
+          h: "16"
+        },
+        fallback: {
+          fontSize: "8"
+        },
+        presence: {
+          w: "6",
+          h: "6"
+        },
+        status: {
+          w: "8",
+          h: "8"
+        }
+      },
+      sm: {
+        root: {
+          w: "20",
+          h: "20"
+        },
+        fallback: {
+          fontSize: "10"
+        },
+        presence: {
+          w: "8",
+          h: "8"
+        },
+        status: {
+          w: "10",
+          h: "10"
+        }
+      },
+      md: {
+        root: {
+          w: "24",
+          h: "24"
+        },
+        fallback: {
+          fontSize: "12"
+        },
+        presence: {
+          w: "8",
+          h: "8"
+        },
+        status: {
+          w: "10",
+          h: "10"
+        }
+      },
+      lg: {
+        root: {
+          w: "32",
+          h: "32"
+        },
+        fallback: {
+          fontSize: "14"
+        },
+        presence: {
+          w: "10",
+          h: "10"
+        },
+        status: {
+          w: "12",
+          h: "12"
+        }
+      },
+      xl: {
+        root: {
+          w: "48",
+          h: "48"
+        },
+        fallback: {
+          fontSize: "20"
+        },
+        presence: {
+          w: "12",
+          h: "12"
+        },
+        status: {
+          w: "16",
+          h: "16"
+        }
+      },
+      "2xl": {
+        root: {
+          w: "64",
+          h: "64"
+        },
+        fallback: {
+          fontSize: "24"
+        },
+        presence: {
+          w: "14",
+          h: "14"
+        },
+        status: {
+          w: "20",
+          h: "20"
+        }
+      }
+    },
+    shape: {
+      circle: {
+        root: {
+          borderRadius: "full"
+        },
+        image: {
+          borderRadius: "full"
+        }
+      },
+      square: {
+        root: {
+          borderRadius: "4"
+        },
+        image: {
+          borderRadius: "4"
+        }
+      },
+      hexagon: {
+        root: {
+          clipPath: "polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)"
+        },
+        image: {
+          clipPath: "polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle"
+  }
+});
 const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  badgeRecipe,
+  avatarRecipe: avatarRecipe$1,
+  badgeRecipe: badgeRecipe$1,
   boxRecipe,
   breadcrumbsRecipe,
   buttonRecipe: buttonRecipe$1,
   cardRecipe,
   checkboxInputRecipe,
   checkboxRecipe: checkboxRecipe$1,
+  chipRecipe: chipRecipe$1,
   codeRecipe,
   dividerRecipe,
   headingRecipe,
@@ -6761,6 +7295,7 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   tooltipRecipe: tooltipRecipe$1
 }, Symbol.toStringTag, { value: "Module" }));
 const {
+  badgeRecipe,
   buttonRecipe,
   iconButtonRecipe,
   checkboxRecipe,
@@ -6768,6 +7303,8 @@ const {
   tooltipRecipe,
   menuRecipe,
   toggleRecipe,
+  chipRecipe,
+  avatarRecipe,
   ...regularComponents
 } = componentRecipes;
 const transformedRecipes = Object.fromEntries(
@@ -6813,13 +7350,16 @@ const okshaunPreset = definePreset$1({
         ...transformedRecipes
       },
       slotRecipes: {
+        badge: badgeRecipe,
         button: buttonRecipe,
         iconButton: iconButtonRecipe,
         checkbox: checkboxRecipe,
         radio: radioRecipe,
         tooltip: tooltipRecipe,
         menu: menuRecipe,
-        toggle: toggleRecipe
+        toggle: toggleRecipe,
+        chip: chipRecipe,
+        avatar: avatarRecipe
       }
     }
   },