apr

src/components/primitives/Box.tsx

@@ -1,27 +1,3 @@
-/**
- * Box Component
- *
- * A flexible container component that serves as a fundamental building block for layouts.
- * It provides various visual styles and sizing options through variants.
- *
- * @variants
- * content:
- *  - xs to xl: Content size variants
- *
- * container:
- *  - true/false: Controls container behavior
- *
- * @compoundVariants
- * The component uses compound variants to determine border radius (rounded corners):
- * - When container=true: Uses both size and content values (rounded-${size}+${content})
- * - When container=false: Uses only size value (rounded-${size})
- *
- * @example
- * <Box look="soft" size="md" content="sm" container={true}>
- *   Content goes here
- * </Box>
- */
-
 import { tv } from "tailwind-variants";
 import useThemedVariables from "../../hooks/theming/useThemedVariables";
 import { mergeClass } from "../../utils/css";
@@ -83,6 +59,30 @@ export const boxStyles = tv({
 
 export type BoxProps = Component<Styled<typeof boxStyles> & Themable>;
 
+/**
+ * Box Component
+ *
+ * A flexible container component that serves as a fundamental building block for layouts.
+ * It provides various visual styles and sizing options through variants.
+ *
+ * @variants
+ * content:
+ *  - xs to xl: Content size variants
+ *
+ * container:
+ *  - true/false: Controls container behavior
+ *
+ * @compoundVariants
+ * The component uses compound variants to determine border radius (rounded corners):
+ * - When container=true: Uses both size and content values (rounded-${size}+${content})
+ * - When container=false: Uses only size value (rounded-${size})
+ *
+ * @example
+ * <Box look="soft" size="md" content="sm" container={true}>
+ *   Content goes here
+ * </Box>
+ */
+
 export default function Box({
   look,
   size,

src/components/primitives/Button.tsx

@@ -14,7 +14,7 @@ export const buttonStyles = tv(
         base: "text-main-12 border-1 border-main-11 active:border-main-10",
         bold: "text-main-1 bg-main-11 active:bg-main-10",
         tint: "text-main-1 bg-accent-10 active:bg-accent-9",
-        hype: "text-main-12 bg-accent-9 active:bg-accent-10",
+        hype: "text-main-1 bg-accent-11 active:bg-accent-10",
       },
       size: {
         xs: "px-sm py-xs gap-sm text-xs",

src/components/primitives/PrimitiveTag.tsx

@@ -4,7 +4,7 @@ import { mergeClass } from "../../utils/css";
 import type { Component, Themable } from "../../utils/types";
 
 export const primitiveTagStyles = tv({
-  base: "flex items-center dim select-none !leading-none rounded-full text-nowrap ease focus-visible:outline focus-visible:outline-dashed focus-visible:outline-main-12 font-text font-bold text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
+  base: "flex items-center select-none !leading-none rounded-full text-nowrap ease focus-visible:outline focus-visible:outline-dashed focus-visible:outline-main-12 font-text font-bold text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
   variants: {
     look: {
       soft: "text-main-12 bg-transparent border-1 border-main-9",
@@ -36,6 +36,7 @@ export type PrimitiveTagProps = Component<
       className?: string;
       type?: "button" | "submit" | "reset";
       disabled?: boolean;
+      noClick?: boolean;
     },
   HTMLButtonElement
 >;
@@ -48,16 +49,18 @@ export default function PrimitiveTag({
   children,
   external,
   disabled,
+  noClick,
   ...props
 }: PrimitiveTagProps) {
   const themeVars = useThemableProps(props);
 
   const styleProps = primitiveTagStyles({ look, size });
+  const styleLabel = noClick ? "active:text-main-12 pointer-events-none" : "dim";
 
   return (
     <button
       style={themeVars}
-      className={mergeClass(styleProps, className)}
+      className={mergeClass(styleProps, styleLabel, className)}
       type="button"
       disabled={disabled}
       {...props}>