@codefast/ui 0.0.7 → 0.0.8

package/src/box.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Box
+ * -------------------------------------------------------------------------- */
+
+interface BoxDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: "div";
+}
+
+interface BoxSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
+  as: "span";
+}
+
+type BoxProps = (BoxDivProps | BoxSpanProps) & {
+  asChild?: boolean;
+};
+
+const Box = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ as: Tag = "div", asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : Tag;
+
+    return <Comp ref={ref} {...props} />;
+  },
+);
+Box.displayName = "Box";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Box };

package/src/code.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+const Code = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
+>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "code";
+
+  return <Comp ref={ref} {...props} />;
+});
+Code.displayName = "Code";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Code };

package/src/container.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Container
+ * -------------------------------------------------------------------------- */
+
+const Container = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+  }
+>(({ className, asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return <Comp ref={ref} className={cn("container", className)} {...props} />;
+});
+Container.displayName = "Container";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Container };

package/src/em.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Em
+ * -------------------------------------------------------------------------- */
+
+const Em = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
+>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "em";
+
+  return <Comp ref={ref} {...props} />;
+});
+Em.displayName = "Em";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Em };

package/src/heading.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Heading
+ * -------------------------------------------------------------------------- */
+
+const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    asChild?: boolean;
+  }
+>(({ asChild, as: Tag = "h1", ...props }, ref) => {
+  const Com = asChild ? Slot : Tag;
+
+  return <Com ref={ref} {...props} />;
+});
+Heading.displayName = "Heading";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Heading };

package/src/kbd.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Kbd
+ * -------------------------------------------------------------------------- */
+
+const Kbd = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "kbd";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Kbd.displayName = "Kbd";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Kbd };

package/src/pre.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Pre
+ * -------------------------------------------------------------------------- */
+
+const Pre = React.forwardRef<
+  HTMLPreElement,
+  React.HTMLAttributes<HTMLPreElement> & { asChild?: boolean }
+>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "pre";
+
+  return <Comp ref={ref} {...props} />;
+});
+Pre.displayName = "Pre";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Pre };

package/src/quote.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Quote
+ * -------------------------------------------------------------------------- */
+
+const Quote = React.forwardRef<
+  HTMLQuoteElement,
+  React.QuoteHTMLAttributes<HTMLQuoteElement> & { asChild?: boolean }
+>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "q";
+
+  return <Comp ref={ref} {...props} />;
+});
+Quote.displayName = "Quote";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Quote };

package/src/section.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Section
+ * -------------------------------------------------------------------------- */
+
+const Section = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & {
+    asChild?: boolean;
+  }
+>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "section";
+
+  return <Comp ref={ref} {...props} />;
+});
+Section.displayName = "Section";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Section };

package/src/strong.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Strong
+ * -------------------------------------------------------------------------- */
+
+const Strong = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
+>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "strong";
+
+  return <Comp ref={ref} {...props} />;
+});
+Strong.displayName = "Strong";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Strong };

package/src/text.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Text
+ * -------------------------------------------------------------------------- */
+
+interface TextParagraphProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  as?: "p";
+}
+
+interface TextSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
+  as: "span";
+}
+
+type TextProps = (TextParagraphProps | TextSpanProps) & {
+  asChild?: boolean;
+};
+
+const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
+  ({ as: Tag = "p", asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : Tag;
+
+    return <Comp ref={ref} {...props} />;
+  },
+);
+Text.displayName = "Text";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Text };