@inherent.design/brand 0.2.0 → 0.3.0

package/components/button/Button.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+interface Props
+  extends
+    HTMLAttributes<"button">,
+    Omit<HTMLAttributes<"a">, "type">,
+    VariantProps<typeof button> {}
+
+const { variant, size, class: className, ...rest } = Astro.props;
+
+export const button = tv({
+  base: [
+    "inline-flex items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
+  ],
+  variants: {
+    variant: {
+      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
+      primary:
+        "bg-primary text-primary-foreground hover:bg-primary-accent focus-visible:ring-primary/50",
+      secondary:
+        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      outline:
+        "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
+      ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
+      success:
+        "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50",
+      warning:
+        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50",
+    },
+    size: {
+      sm: "h-9 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3.5",
+      md: "h-11 px-5 text-base has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4.5",
+      lg: "h-12 px-8 text-lg has-[>svg]:px-6 [&_svg:not([class*='size-'])]:size-5",
+      "icon-sm": "size-9 [&_svg:not([class*='size-'])]:size-3.5",
+      icon: "size-11 [&_svg:not([class*='size-'])]:size-4.5",
+      "icon-lg": "size-12 [&_svg:not([class*='size-'])]:size-5",
+    },
+  },
+  defaultVariants: { variant: "default", size: "md" },
+});
+
+const Tag = Astro.props.href ? "a" : "button";
+---
+
+<Tag class={button({ variant, size, class: className })} data-slot="button" {...rest}>
+  <slot />
+</Tag>

package/components/button/index.ts

@@ -0,0 +1,7 @@
+import Button, { button } from "./Button.astro";
+
+const ButtonVariants = { button };
+
+export { Button, ButtonVariants };
+
+export default Button;

package/components/image/Image.astro

@@ -0,0 +1,24 @@
+---
+import type { ComponentProps } from "astro/types";
+import { Image as AstroImage } from "astro:assets";
+import { tv } from "tailwind-variants";
+
+export const image = tv({ base: "starwind-image h-auto w-full" });
+
+type Props = Partial<ComponentProps<typeof AstroImage>> & { inferSize?: boolean };
+
+const { class: className, src, alt = "", inferSize = true, ...rest } = Astro.props;
+---
+
+{
+  src && (
+    <AstroImage
+      class={image({ class: className })}
+      src={src}
+      alt={alt}
+      inferSize={inferSize}
+      data-slot="image"
+      {...(rest as any)}
+    />
+  )
+}

package/components/image/index.ts

@@ -0,0 +1,9 @@
+import Image, { image } from "./Image.astro";
+
+const ImageVariants = {
+  image,
+};
+
+export { Image, ImageVariants };
+
+export default Image;