@orbitkit/components 0.0.1

package/README.md

@@ -0,0 +1,25 @@
+# @orbitkit/components
+
+_A collection of accessible, customizable, and lightweight UI components for Astro projects, powered by Tailwind CSS._
+
+> **Warning:** Do not install or use this package directly in your projects. Use the Orbit CLI for integration and component management.
+
+## 🛠️ Customization
+
+All components are styled with Tailwind CSS utility classes. You can easily override or extend styles via your project's Tailwind configuration.
+
+## 📖 Documentation
+
+Full documentation is coming soon.
+
+## 🤝 Contributing
+
+Pull requests are welcome! For major changes, please open an issue first.
+
+## 📜 License
+
+This project is licensed under the MIT License - See [MIT License](https://github.com/NSMichelJ/orbitkit/blob/main/LICENSE) for details.
+
+---
+
+<p align="center"><strong>Built with ❤️</strong></p>

package/dist/astro/alert/Alert.astro

@@ -0,0 +1,30 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { alertVariants } from "./alertVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof alertVariants> {}
+
+const {
+  class: className,
+  variant,
+  rounded,
+  size,
+  direction,
+  border,
+  ...attrs
+} = Astro.props;
+---
+
+<div
+  {...attrs}
+  role="alert"
+  class={cn(
+    alertVariants({ variant, rounded, size, direction, border, className }),
+  )}
+>
+  <slot />
+</div>

package/dist/astro/alert/AlertDescription.astro

@@ -0,0 +1,10 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<p {...attrs} class={cn(className)}><slot /></p>

package/dist/astro/alert/AlertTitle.astro

@@ -0,0 +1,15 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<p
+  {...attrs}
+  class={cn("font-medium flex items-center justify-start gap-2", className)}
+>
+  <slot />
+</p>

package/dist/astro/alert/alertVariants.ts

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+
+const baseClass = "flex justify-start gap-y-1 gap-x-2 flex-wrap w-full";
+
+const alertVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default: "bg-surface border-border text-foreground",
+      info: " text-blue-800 border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800",
+      danger:
+        "text-red-800 border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800",
+      success:
+        "text-green-800 border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800",
+      warning:
+        "text-yellow-800 border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-800",
+    },
+    rounded: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+    size: {
+      xs: "p-3 text-xs",
+      sm: "p-3 text-sm",
+      md: "p-4 text-sm",
+      lg: "p-5 text-base",
+      xl: "p-5 text-lg",
+    },
+    direction: {
+      row: "flex-row",
+      col: "flex-col",
+    },
+    border: {
+      false: null,
+      true: "border",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "sm",
+    rounded: "lg",
+    direction: "col",
+    border: true,
+  },
+});
+
+export { alertVariants };

package/dist/astro/alert/index.ts

@@ -0,0 +1,6 @@
+import Alert from "./Alert.astro";
+import AlertDescription from "./AlertDescription.astro";
+import AlertTitle from "./AlertTitle.astro";
+import { alertVariants } from "./alertVariants";
+
+export { Alert, AlertDescription, AlertTitle, alertVariants };

package/dist/astro/avatar/Avatar.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { avatarVariants } from "./avatarVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof avatarVariants> {}
+
+const { class: className, variant, bordered, ...attrs } = Astro.props;
+---
+
+<div {...attrs} class={cn(avatarVariants({ variant, bordered, className }))}>
+  <slot />
+</div>

package/dist/astro/avatar/AvatarFallback.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  class={cn(
+    "absolute z-0 font-medium text-gray-600 dark:text-gray-300",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/avatar/AvatarImage.astro

@@ -0,0 +1,14 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"img"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<img
+  {...attrs}
+  class={cn("relative aspect-square object-cover z-10", className)}
+  onerror="this.style.display='none'"
+/>

package/dist/astro/avatar/avatarVariants.ts

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+
+const avatarBaseClass =
+  "relative inline-flex items-center justify-center size-10 overflow-hidden bg-secondary text-secondary-foreground z-10";
+
+const avatarVariants = cva(avatarBaseClass, {
+  variants: {
+    variant: {
+      circular: "rounded-full",
+      square: "rounded-sm",
+    },
+    bordered: {
+      false: null,
+      true: "ring-2 ring-border",
+    },
+  },
+  defaultVariants: {
+    variant: "circular",
+    bordered: false,
+  },
+});
+
+export { avatarVariants };

package/dist/astro/avatar/index.ts

@@ -0,0 +1,6 @@
+import Avatar from "./Avatar.astro";
+import AvatarFallback from "./AvatarFallback.astro";
+import AvatarImage from "./AvatarImage.astro";
+import { avatarVariants } from "./avatarVariants";
+
+export { Avatar, AvatarFallback, AvatarImage, avatarVariants };

package/dist/astro/badge/Badge.astro

@@ -0,0 +1,22 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { badgeVariants } from "./badgeVariants";
+
+interface Props
+  extends HTMLAttributes<"div">,
+    HTMLAttributes<"a">,
+    VariantProps<typeof badgeVariants> {}
+
+const { class: className, variant, rounded, size, ...attrs } = Astro.props;
+
+const Comp = Astro.props.href ? "a" : "div";
+---
+
+<Comp
+  {...attrs}
+  class={cn(badgeVariants({ variant, rounded, size, className }))}
+>
+  <slot />
+</Comp>

package/dist/astro/badge/badgeVariants.ts

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+
+const classBase =
+  "inline-flex justify-center items-center gap-1 text-xs font-medium px-2.5 py-0.5";
+
+const badgeVariants = cva(classBase, {
+  variants: {
+    variant: {
+      default: "bg-secondary text-secondary-foreground",
+      outline:
+        "bg-secondary text-secondary-foreground border-secondary-accent border",
+    },
+    rounded: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+    size: {
+      xs: "text-xs [&_svg]:size-2.5",
+      sm: "text-sm [&_svg]:size-3",
+      md: "text-base [&_svg]:size-3",
+      lg: "text-lg [&_svg]:size-4",
+      xl: "text-xl [&_svg]:size-4",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    rounded: "sm",
+    size: "xs",
+  },
+});
+
+export { badgeVariants };

package/dist/astro/badge/index.ts

@@ -0,0 +1,4 @@
+import Badge from "./Badge.astro";
+import { badgeVariants } from "./badgeVariants";
+
+export { Badge, badgeVariants };

package/dist/astro/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,12 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<nav aria-label="breadcrumb" class={cn("w-max", className)}>
+  <slot />
+</nav>

package/dist/astro/breadcrumb/BreadcrumbEllipsis.astro

@@ -0,0 +1,20 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"span">;
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<span
+  {...attrs}
+  role="presentation"
+  aria-hidden="true"
+  class={cn(
+    "flex size-6 items-center justify-center [&>svg]:size-4",
+    className,
+  )}
+>
+  <slot> ... </slot>
+</span>

package/dist/astro/breadcrumb/BreadcrumbItem.astro

@@ -0,0 +1,15 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<li
+  {...attrs}
+  class={cn("flex flex-row items-center justify-between gap-1", className)}
+>
+  <slot />
+</li>

package/dist/astro/breadcrumb/BreadcrumbLink.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<a
+  {...attrs}
+  class={cn(
+    "flex items-center justify-between gap-1 cursor-pointer hover:text-foreground [&_svg]:size-4",
+    className,
+  )}
+>
+  <slot />
+</a>

package/dist/astro/breadcrumb/BreadcrumbList.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"ol"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<ol
+  {...attrs}
+  class={cn(
+    "flex flex-row flex-wrap items-center gap-2 rtl:flex-row-reverse text-muted-foreground break-words font-medium",
+    className,
+  )}
+>
+  <slot />
+</ol>

package/dist/astro/breadcrumb/BreadcrumbPage.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<spam
+  {...attrs}
+  class={cn(
+    "flex items-center justify-between gap-1 cursor-pointer text-foreground [&_svg]:size-4",
+    className,
+  )}
+>
+  <slot />
+</spam>

package/dist/astro/breadcrumb/BreadcrumbSeparator.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"li">;
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<li
+  {...attrs}
+  role="presentation"
+  aria-hidden="true"
+  class={cn("[&_svg]:size-4", className)}
+>
+  <slot> / </slot>
+</li>

package/dist/astro/breadcrumb/index.ts

@@ -0,0 +1,17 @@
+import Breadcrumb from "./Breadcrumb.astro";
+import BreadcrumbEllipsis from "./BreadcrumbEllipsis.astro";
+import BreadcrumbItem from "./BreadcrumbItem.astro";
+import BreadcrumbLink from "./BreadcrumbLink.astro";
+import BreadcrumbList from "./BreadcrumbList.astro";
+import BreadcrumbPage from "./BreadcrumbPage.astro";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.astro";
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/dist/astro/button/Button.astro

@@ -0,0 +1,29 @@
+---
+import { cn } from "@/utils/cn";
+import type { HTMLAttributes } from "astro/types";
+import { type VariantProps } from "class-variance-authority";
+import buttonVariants from "./buttonVariants";
+
+export interface Props
+  extends Omit<HTMLAttributes<"button">, "disabled">,
+    Omit<HTMLAttributes<"a">, "type">,
+    VariantProps<typeof buttonVariants> {}
+
+const {
+  class: className,
+  variant,
+  size,
+  rounded,
+  disabled,
+  ...attrs
+} = Astro.props;
+
+const Comp = Astro.props.href ? "a" : "button";
+---
+
+<Comp
+  {...attrs}
+  class={cn(buttonVariants({ variant, size, rounded, disabled, className }))}
+>
+  <slot />
+</Comp>

package/dist/astro/button/buttonVariants.ts

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "flex justify-center gap-1.5 items-center font-medium cursor-pointer outline-none border [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const buttonVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default: "border-primary text-primary-foreground bg-primary",
+      outline: "text-primary  border-primary",
+      ghost: "text-primary bg-transparent border-transparent",
+    },
+    rounded: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+    size: {
+      xs: "px-3 py-2 text-xs [&_svg]:size-3.5",
+      sm: "px-3 py-2 text-sm [&_svg]:size-4",
+      md: "px-5 py-2.5 text-sm [&_svg]:size-4",
+      lg: "px-5 py-3 text-base [&_svg]:size-[18px]",
+      xl: "px-6 py-3.5 text-base [&_svg]:size-[18px]",
+    },
+    disabled: {
+      false: null,
+      true: ["opacity-50", "cursor-not-allowed"],
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: false,
+      class: "hover:bg-primary-accent hover:border-primary-accent",
+    },
+    {
+      variant: "outline",
+      disabled: false,
+      class:
+        "hover:text-primary-foreground hover:bg-primary-accent hover:border-primary-accent",
+    },
+    {
+      variant: "ghost",
+      disabled: false,
+      class:
+        "hover:bg-primary hover:text-primary-foreground hover:border-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "sm",
+    rounded: "lg",
+    disabled: false,
+  },
+});
+
+export default buttonVariants;

package/dist/astro/button/index.ts

@@ -0,0 +1,4 @@
+import Button from "./Button.astro";
+import buttonVariants from "./buttonVariants";
+
+export { Button, buttonVariants };

package/dist/astro/card/Card.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  class={cn(
+    "bg-surface text-foreground border-border border rounded-lg shadow-sm",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/card/CardContent.astro

@@ -0,0 +1,12 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div {...attrs} class={cn("p-6", className)}>
+  <slot />
+</div>

package/dist/astro/card/CardDescription.astro

@@ -0,0 +1,12 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<p {...attrs} class={cn("font-normal text-muted-foreground", className)}>
+  <slot />
+</p>

package/dist/astro/card/CardFooter.astro

@@ -0,0 +1,15 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div
+  {...attrs}
+  class={cn("p-6 pt-0 flex items-center justify-between gap-2", className)}
+>
+  <slot />
+</div>

package/dist/astro/card/CardHeader.astro

@@ -0,0 +1,12 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<div {...attrs} class={cn("p-6 pb-0 flex flex-col gap-1", className)}>
+  <slot />
+</div>

package/dist/astro/card/CardTitle.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h5"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<h5
+  {...attrs}
+  class={cn(
+    "flex items-center justify-start gap-2 text-2xl font-semibold tracking-tight",
+    className,
+  )}
+>
+  <slot />
+</h5>

package/dist/astro/card/index.ts

@@ -0,0 +1,15 @@
+import Card from "./Card.astro";
+import CardContent from "./CardContent.astro";
+import CardDescription from "./CardDescription.astro";
+import CardFooter from "./CardFooter.astro";
+import CardHeader from "./CardHeader.astro";
+import CardTitle from "./CardTitle.astro";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/dist/astro/checkbox/Checkbox.astro

@@ -0,0 +1,38 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+
+const { class: className, id, ...attrs } = Astro.props;
+---
+
+<div class="inline-flex items-center">
+  <label class="relative flex cursor-pointer items-center" for={id}>
+    <input
+      {...attrs}
+      id={id}
+      type="checkbox"
+      class={"peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-border checked:bg-primary disabled:opacity-50 disabled:cursor-not-allowed"}
+    />
+    <span
+      class={cn(
+        "text-primary-foreground pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform opacity-0 peer-checked:opacity-100",
+        className,
+      )}
+    >
+      <slot>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-3.5 w-3.5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="4"
+        >
+          <path d="M20 6 9 17l-5-5"></path>
+        </svg>
+      </slot>
+    </span>
+  </label>
+</div>

package/dist/astro/checkbox/index.ts

@@ -0,0 +1,3 @@
+import Checkbox from "./Checkbox.astro";
+
+export { Checkbox };

package/dist/astro/input/Input.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { inputVariants } from "./inputVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"input">, "disabled">,
+    VariantProps<typeof inputVariants> {}
+
+const { class: className, variant, disabled, ...attrs } = Astro.props;
+---
+
+<input
+  {...attrs}
+  disabled={disabled}
+  class={cn(inputVariants({ variant, disabled, className }))}
+/>

package/dist/astro/input/index.ts

@@ -0,0 +1,4 @@
+import Input from "./Input.astro";
+import { inputVariants } from "./inputVariants";
+
+export { Input, inputVariants };

package/dist/astro/input/inputVariants.ts

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1";
+
+const inputVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default:
+        "text-foreground bg-input outline-input-border placeholder-input-placeholder",
+    },
+    disabled: {
+      false: null,
+      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed ",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: false,
+      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    disabled: false,
+  },
+});
+
+export { inputVariants };

package/dist/astro/label/Label.astro

@@ -0,0 +1,14 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"label"> {}
+
+const { class: className, ...attrs } = Astro.props;
+---
+
+<label
+  {...attrs}
+  class={cn("block mb-2 text-sm font-medium text-foreground", className)}
+  ><slot /></label
+>

package/dist/astro/label/index.ts

@@ -0,0 +1,3 @@
+import Label from "./Label.astro";
+
+export { Label };

package/dist/astro/progress/Progress.astro

@@ -0,0 +1,23 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  value?: number;
+}
+
+const { class: className, value = 50 } = Astro.props;
+
+if (value < 0 || value > 100) {
+  throw new Error("Value must be between 0 and 100");
+}
+---
+
+<div
+  class={cn(
+    "flex items-center justify-center h-full overflow-hidden text-primary-foreground break-all bg-primary rounded-full",
+    className,
+  )}
+  style={{ width: `${value}%` }}
+>
+</div>

package/dist/astro/progress/index.ts

@@ -0,0 +1,4 @@
+import Progress from "./Progress.astro";
+import ProgressContainer from "./progressContainer.astro";
+
+export { Progress, ProgressContainer };

package/dist/astro/progress/progressContainer.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "flex-start flex h-2.5 w-full overflow-hidden rounded-full bg-muted font-sans text-xs font-medium",
+    className,
+  )}
+>
+  <slot />
+</div>

package/dist/astro/radio/Radio.astro

@@ -0,0 +1,26 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+
+const { class: className, id, ...attrs } = Astro.props;
+---
+
+<div class="inline-flex items-center">
+  <label class="relative flex cursor-pointer items-center" for={id}>
+    <input
+      {...attrs}
+      id={id}
+      type="radio"
+      class="border-input-border checked:border-primary peer h-5 w-5 cursor-pointer appearance-none rounded-full border transition-all"
+    />
+    <span
+      class={cn(
+        "absolute bg-primary w-3 h-3 rounded-full opacity-0 peer-checked:opacity-100 transition-opacity duration-200 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+    >
+    </span>
+  </label>
+</div>

package/dist/astro/radio/index.ts

@@ -0,0 +1,3 @@
+import Radio from "./Radio.astro";
+
+export { Radio };

package/dist/astro/select/Option.astro

@@ -0,0 +1,11 @@
+---
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"select">, "type"> {}
+
+const { ...attrs } = Astro.props;
+---
+
+<option {...attrs}>
+  <slot />
+</option>

package/dist/astro/select/Select.astro

@@ -0,0 +1,39 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { selectVariants } from "./selectVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"select">, "disabled">,
+    VariantProps<typeof selectVariants> {}
+
+const { class: className, multiple, variant, disabled, ...attrs } = Astro.props;
+---
+
+<div class="relative">
+  <select
+    {...attrs}
+    disabled={disabled}
+    multiple={multiple}
+    class={cn(selectVariants({ variant, disabled, className }))}
+  >
+    <slot />
+  </select>
+
+  {
+    !multiple && (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="text-input-placeholder absolute right-2.5 top-2.5 h-5 w-5"
+      >
+        <path d="m7 15 5 5 5-5" />
+        <path d="m7 9 5-5 5 5" />
+      </svg>
+    )
+  }
+</div>

package/dist/astro/select/index.ts

@@ -0,0 +1,5 @@
+import Option from "./Option.astro";
+import Select from "./Select.astro";
+import { selectVariants } from "./selectVariants";
+
+export { Option, Select, selectVariants };

package/dist/astro/select/selectVariants.ts

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1 appearance-none";
+
+const selectVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default:
+        "text-foreground bg-input outline-input-border placeholder-input-placeholder cursor-pointer",
+    },
+    disabled: {
+      false: null,
+      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: false,
+      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    disabled: false,
+  },
+});
+
+export { selectVariants };

package/dist/astro/switch/Switch.astro

@@ -0,0 +1,19 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {}
+
+const { class: className, id, ...attrs } = Astro.props;
+---
+
+<label class="inline-flex cursor-pointer items-center" id={id}>
+  <input {...attrs} id={id} type="checkbox" class="peer sr-only" />
+  <span
+    class={cn(
+      "relative w-11 h-6 bg-input-border rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      className,
+    )}
+  >
+  </span>
+</label>

package/dist/astro/switch/index.ts

@@ -0,0 +1,3 @@
+import Switch from "./Switch.astro";
+
+export { Switch };

package/dist/astro/textarea/Textarea.astro

@@ -0,0 +1,19 @@
+---
+import { cn } from "@/utils/cn";
+import { type HTMLAttributes } from "astro/types";
+import type { VariantProps } from "class-variance-authority";
+import { textareaVariants } from "./TextareaVariants";
+
+interface Props
+  extends Omit<HTMLAttributes<"textarea">, "disabled">,
+    VariantProps<typeof textareaVariants> {}
+
+const { class: className, variant, disabled, ...attrs } = Astro.props;
+---
+
+<textarea
+  {...attrs}
+  disabled={disabled}
+  class={cn(textareaVariants({ variant, disabled, className }))}
+>
+</textarea>

package/dist/astro/textarea/TextareaVariants.ts

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+const baseClass =
+  "block w-full p-2.5 mb-2 text-sm rounded-lg outline-1 -outline-offset-1";
+
+const textareaVariants = cva(baseClass, {
+  variants: {
+    variant: {
+      default:
+        "text-foreground bg-input outline-input-border placeholder-input-placeholder",
+    },
+    disabled: {
+      false: null,
+      true: "bg-input/40 outline-input-border/40 text-muted-foreground cursor-not-allowed ",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      disabled: false,
+      class: "focus:outline-2 focus:-outline-offset-2 focus:outline-primary",
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    disabled: false,
+  },
+});
+
+export { textareaVariants };

package/dist/astro/textarea/index.ts

@@ -0,0 +1,4 @@
+import Textarea from "./Textarea.astro";
+import { textareaVariants } from "./TextareaVariants";
+
+export { Textarea, textareaVariants };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+interface ComponentRegistryEntry {
+    name: string;
+    version: string;
+}
+
+declare function getAllComponents(): ComponentRegistryEntry[];
+declare function getComponentPath(componentName: string): string;
+declare function checkComponentsInRegistry(components: string[]): Promise<{
+    valid: ComponentRegistryEntry[];
+    invalid: string[];
+}>;
+
+export { type ComponentRegistryEntry, checkComponentsInRegistry, getAllComponents, getComponentPath };

package/dist/index.js

@@ -0,0 +1,94 @@
+// src/registry.json
+var registry_default = {
+  components: [
+    {
+      name: "button",
+      version: "0.0.1"
+    },
+    {
+      name: "alert",
+      version: "0.0.1"
+    },
+    {
+      name: "badge",
+      version: "0.0.1"
+    },
+    {
+      name: "avatar",
+      version: "0.0.1"
+    },
+    {
+      name: "card",
+      version: "0.0.1"
+    },
+    {
+      name: "input",
+      version: "0.0.1"
+    },
+    {
+      name: "label",
+      version: "0.0.1"
+    },
+    {
+      name: "breadcrumb",
+      version: "0.0.1"
+    },
+    {
+      name: "progress",
+      version: "0.0.1"
+    },
+    {
+      name: "textarea",
+      version: "0.0.1"
+    },
+    {
+      name: "select",
+      version: "0.0.1"
+    },
+    {
+      name: "switch",
+      version: "0.0.1"
+    },
+    {
+      name: "checkbox",
+      version: "0.0.1"
+    },
+    {
+      name: "radio",
+      version: "0.0.1"
+    }
+  ]
+};
+
+// src/index.ts
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+function getAllComponents() {
+  return registry_default.components;
+}
+function getComponentPath(componentName) {
+  return path.join(__dirname, "astro", componentName);
+}
+async function checkComponentsInRegistry(components) {
+  const valid = [];
+  const invalid = [];
+  const allComponents = getAllComponents();
+  for (const component of components) {
+    const found = allComponents.find(
+      (c) => c.name.toLowerCase() === component.toLowerCase()
+    );
+    if (found) {
+      valid.push(found);
+    } else {
+      invalid.push(component);
+    }
+  }
+  return { valid, invalid };
+}
+export {
+  checkComponentsInRegistry,
+  getAllComponents,
+  getComponentPath
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry.json","../src/index.ts"],"sourcesContent":["{\n  \"components\": [\n    {\n      \"name\": \"button\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"alert\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"badge\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"avatar\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"card\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"input\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"label\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"breadcrumb\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"progress\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"textarea\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"select\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"switch\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"checkbox\",\n      \"version\": \"0.0.1\"\n    },\n    {\n      \"name\": \"radio\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}\n","import registry from \"@/registry.json\";\nimport { fileURLToPath } from \"node:url\";\n\nimport path from \"node:path\";\nimport { ComponentRegistryEntry } from \"./types/registry\";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nexport function getAllComponents() {\n  return registry.components as ComponentRegistryEntry[];\n}\n\nexport function getComponentPath(componentName: string) {\n  return path.join(__dirname, \"astro\", componentName);\n}\n\nexport async function checkComponentsInRegistry(components: string[]) {\n  const valid: ComponentRegistryEntry[] = [];\n  const invalid: string[] = [];\n  const allComponents = getAllComponents();\n\n  for (const component of components) {\n    const found = allComponents.find(\n      (c) => c.name.toLowerCase() === component.toLowerCase(),\n    );\n    if (found) {\n      valid.push(found);\n    } else {\n      invalid.push(component);\n    }\n  }\n\n  return { valid, invalid };\n}\n\nexport { type ComponentRegistryEntry } from \"@/types/registry\";\n"],"mappings":";AAAA;AAAA,EACE,YAAc;AAAA,IACZ;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAQ;AAAA,MACR,SAAW;AAAA,IACb;AAAA,EACF;AACF;;;AC1DA,SAAS,qBAAqB;AAE9B,OAAO,UAAU;AAGjB,IAAM,YAAY,KAAK,QAAQ,cAAc,YAAY,GAAG,CAAC;AAEtD,SAAS,mBAAmB;AACjC,SAAO,iBAAS;AAClB;AAEO,SAAS,iBAAiB,eAAuB;AACtD,SAAO,KAAK,KAAK,WAAW,SAAS,aAAa;AACpD;AAEA,eAAsB,0BAA0B,YAAsB;AACpE,QAAM,QAAkC,CAAC;AACzC,QAAM,UAAoB,CAAC;AAC3B,QAAM,gBAAgB,iBAAiB;AAEvC,aAAW,aAAa,YAAY;AAClC,UAAM,QAAQ,cAAc;AAAA,MAC1B,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,UAAU,YAAY;AAAA,IACxD;AACA,QAAI,OAAO;AACT,YAAM,KAAK,KAAK;AAAA,IAClB,OAAO;AACL,cAAQ,KAAK,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,SAAO,EAAE,OAAO,QAAQ;AAC1B;","names":[]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@orbitkit/components",
+  "version": "0.0.1",
+  "description": "Customizable UI components designed for seamless integration and scalability.",
+  "main": "./dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "format:check": "eslint . && prettier --check .",
+    "format:fix": "eslint --fix . && prettier --write .",
+    "components:link": "pnpm link . --global",
+    "components:unlink": "pnpm rm --global @orbitkit/components"
+  },
+  "keywords": [
+    "ui",
+    "kit",
+    "components",
+    "orbit",
+    "tailwind"
+  ],
+  "author": "NSMichelJ (Michelito)",
+  "license": "MIT",
+  "packageManager": "pnpm@10.9.0",
+  "devDependencies": {
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "22.15.3",
+    "astro": "5.7.10",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "fs-extra": "11.3.0",
+    "tailwind-merge": "3.2.0",
+    "tailwindcss": "4.1.5",
+    "tsup": "8.4.0"
+  },
+  "files": [
+    "dist"
+  ]
+}