@orbitkit/components 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,25 +1,25 @@
1
- # @orbitkit/components
2
-
3
- _A collection of accessible, customizable, and lightweight UI components for Astro projects, powered by Tailwind CSS._
4
-
5
- > **Warning:** Do not install or use this package directly in your projects. Use the Orbit CLI for integration and component management.
6
-
7
- ## 🛠️ Customization
8
-
9
- All components are styled with Tailwind CSS utility classes. You can easily override or extend styles via your project's Tailwind configuration.
10
-
11
- ## 📖 Documentation
12
-
13
- Full documentation is coming soon.
14
-
15
- ## 🤝 Contributing
16
-
17
- Pull requests are welcome! For major changes, please open an issue first.
18
-
19
- ## 📜 License
20
-
21
- This project is licensed under the MIT License - See [MIT License](https://github.com/NSMichelJ/orbitkit/blob/main/LICENSE) for details.
22
-
23
- ---
24
-
25
- <p align="center"><strong>Built with ❤️</strong></p>
1
+ # @orbitkit/components
2
+
3
+ _A collection of accessible, customizable, and lightweight UI components for Astro projects, powered by Tailwind CSS._
4
+
5
+ > **Warning:** Do not install or use this package directly in your projects. Use the Orbit CLI for integration and component management.
6
+
7
+ ## 🛠️ Customization
8
+
9
+ All components are styled with Tailwind CSS utility classes. You can easily override or extend styles via your project's Tailwind configuration.
10
+
11
+ ## 📖 Documentation
12
+
13
+ Full documentation is coming soon.
14
+
15
+ ## 🤝 Contributing
16
+
17
+ Pull requests are welcome! For major changes, please open an issue first.
18
+
19
+ ## 📜 License
20
+
21
+ This project is licensed under the MIT License - See [MIT License](https://github.com/NSMichelJ/orbitkit/blob/main/LICENSE) for details.
22
+
23
+ ---
24
+
25
+ <p align="center"><strong>Built with ❤️</strong></p>
@@ -0,0 +1,22 @@
1
+ ---
2
+ import { cn } from "@/utils/cn";
3
+ import type { HTMLAttributes } from "astro/types";
4
+
5
+ interface Props extends HTMLAttributes<"div"> {
6
+ orientation?: "horizontal" | "vertical";
7
+ }
8
+
9
+ const { class: className, orientation = "horizontal", ...attrs } = Astro.props;
10
+ ---
11
+
12
+ <div
13
+ {...attrs}
14
+ aria-orientation={orientation}
15
+ role="separator"
16
+ class={cn(
17
+ "shrink-0 bg-border",
18
+ orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
19
+ className,
20
+ )}
21
+ >
22
+ </div>
@@ -0,0 +1,3 @@
1
+ import Divider from "./Divider.astro";
2
+
3
+ export { Divider };
@@ -0,0 +1,25 @@
1
+ ---
2
+ import { cn } from "@/utils/cn";
3
+ import type { HTMLAttributes } from "astro/types";
4
+ import type { VariantProps } from "class-variance-authority";
5
+ import { listVariants } from "./ListVariants";
6
+
7
+ interface Props
8
+ extends HTMLAttributes<"div">,
9
+ VariantProps<typeof listVariants> {}
10
+
11
+ const {
12
+ class: className,
13
+ outerBorder,
14
+ innerBorders,
15
+ rounded,
16
+ ...attrs
17
+ } = Astro.props;
18
+ ---
19
+
20
+ <div
21
+ {...attrs}
22
+ class={cn(listVariants({ outerBorder, innerBorders, rounded, className }))}
23
+ >
24
+ <slot />
25
+ </div>
@@ -0,0 +1,39 @@
1
+ ---
2
+ import { cn } from "@/utils/cn";
3
+ import type { HTMLAttributes } from "astro/types";
4
+ import type { VariantProps } from "class-variance-authority";
5
+ import { listItemVariants } from "./ListVariants";
6
+
7
+ export interface Props
8
+ extends HTMLAttributes<"div">,
9
+ Omit<HTMLAttributes<"a">, "type" | "disabled">,
10
+ Omit<HTMLAttributes<"button">, "type" | "disabled">,
11
+ VariantProps<typeof listItemVariants> {
12
+ as?: "a" | "button" | "div";
13
+ }
14
+
15
+ const {
16
+ class: className,
17
+ as,
18
+ disabled,
19
+ rounded,
20
+ active,
21
+ ...attrs
22
+ } = Astro.props;
23
+
24
+ let Comp: typeof as = "div";
25
+ if (as === "a" || Astro.props.href) {
26
+ Comp = "a";
27
+ } else if (as === "button") {
28
+ Comp = "button";
29
+ }
30
+ ---
31
+
32
+ <Comp
33
+ {...attrs}
34
+ disabled={disabled}
35
+ class={cn(listItemVariants({ active, disabled, rounded, className }))}
36
+ aria-label="list-item"
37
+ >
38
+ <slot />
39
+ </Comp>
@@ -0,0 +1,65 @@
1
+ import { cva } from "class-variance-authority";
2
+
3
+ const baseClass = "flex flex-col bg-surface text-foreground overflow-hidden";
4
+
5
+ const listVariants = cva(baseClass, {
6
+ variants: {
7
+ outerBorder: {
8
+ true: "border border-border",
9
+ false: null,
10
+ },
11
+ innerBorders: {
12
+ true: "divide-y divide-border",
13
+ false: null,
14
+ },
15
+ rounded: {
16
+ none: "rounded-none",
17
+ xs: "rounded-xs",
18
+ sm: "rounded-sm",
19
+ md: "rounded-md",
20
+ lg: "rounded-lg",
21
+ xl: "rounded-xl",
22
+ },
23
+ },
24
+ defaultVariants: {
25
+ outerBorder: true,
26
+ innerBorders: true,
27
+ rounded: "lg",
28
+ },
29
+ });
30
+
31
+ const listItemBaseClass =
32
+ "px-4 py-2 flex items-center justify-between text-base text-start";
33
+
34
+ const listItemVariants = cva(listItemBaseClass, {
35
+ variants: {
36
+ active: {
37
+ true: "bg-foreground/5",
38
+ false: null,
39
+ },
40
+ disabled: {
41
+ false: null,
42
+ true: "opacity-50 cursor-not-allowed",
43
+ },
44
+ rounded: {
45
+ none: "rounded-none",
46
+ xs: "rounded-xs",
47
+ sm: "rounded-sm",
48
+ md: "rounded-md",
49
+ lg: "rounded-lg",
50
+ xl: "rounded-xl",
51
+ },
52
+ },
53
+ compoundVariants: [
54
+ {
55
+ disabled: false,
56
+ class: "hover:bg-foreground/5 focus:outline-none",
57
+ },
58
+ ],
59
+ defaultVariants: {
60
+ disabled: false,
61
+ rounded: "none",
62
+ },
63
+ });
64
+
65
+ export { listItemVariants, listVariants };
@@ -0,0 +1,5 @@
1
+ import List from "./List.astro";
2
+ import ListItem from "./ListItem.astro";
3
+ import { listItemVariants, listVariants } from "./ListVariants";
4
+
5
+ export { List, ListItem, listItemVariants, listVariants };
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  import { type HTMLAttributes } from "astro/types";
3
3
 
4
- interface Props extends Omit<HTMLAttributes<"select">, "type"> {}
4
+ interface Props extends HTMLAttributes<"option"> {}
5
5
 
6
6
  const { ...attrs } = Astro.props;
7
7
  ---
@@ -0,0 +1,12 @@
1
+ ---
2
+ import { cn } from "@/utils/cn";
3
+ import type { HTMLAttributes } from "astro/types";
4
+
5
+ interface Props extends HTMLAttributes<"div"> {}
6
+
7
+ const { class: className, ...attrs } = Astro.props;
8
+ ---
9
+
10
+ <div {...attrs} role="status" class={cn("animate-pulse", className)}>
11
+ <slot />
12
+ </div>
@@ -0,0 +1,18 @@
1
+ ---
2
+ import { cn } from "@/utils/cn";
3
+ import type { HTMLAttributes } from "astro/types";
4
+
5
+ interface Props extends HTMLAttributes<"div"> {}
6
+
7
+ const { class: className, ...attrs } = Astro.props;
8
+ ---
9
+
10
+ <div
11
+ {...attrs}
12
+ class={cn(
13
+ "rounded-md bg-muted text-muted-foreground flex items-center justify-center",
14
+ className,
15
+ )}
16
+ >
17
+ <slot />
18
+ </div>
@@ -0,0 +1,4 @@
1
+ import Skeleton from "./Skeleton.astro";
2
+ import SkeletonItem from "./SkeletonItem.astro";
3
+
4
+ export { Skeleton, SkeletonItem };
package/dist/index.js CHANGED
@@ -43,7 +43,7 @@ var registry_default = {
43
43
  },
44
44
  {
45
45
  name: "select",
46
- version: "0.0.1"
46
+ version: "0.0.2"
47
47
  },
48
48
  {
49
49
  name: "switch",
@@ -56,6 +56,18 @@ var registry_default = {
56
56
  {
57
57
  name: "radio",
58
58
  version: "0.0.1"
59
+ },
60
+ {
61
+ name: "list",
62
+ version: "0.0.1"
63
+ },
64
+ {
65
+ name: "divider",
66
+ version: "0.0.1"
67
+ },
68
+ {
69
+ name: "skeleton",
70
+ version: "0.0.1"
59
71
  }
60
72
  ]
61
73
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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":[]}
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.2\"\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 \"name\": \"list\",\n \"version\": \"0.0.1\"\n },\n {\n \"name\": \"divider\",\n \"version\": \"0.0.1\"\n },\n {\n \"name\": \"skeleton\",\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,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;;;ACtEA,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 CHANGED
@@ -1,47 +1,54 @@
1
- {
2
- "name": "@orbitkit/components",
3
- "version": "0.0.1",
4
- "description": "Customizable UI components designed for seamless integration and scalability.",
5
- "main": "./dist/index.js",
6
- "type": "module",
7
- "types": "./dist/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "types": "./dist/index.d.ts",
11
- "import": "./dist/index.js"
12
- },
13
- "./dist/*": "./dist/*"
14
- },
15
- "scripts": {
16
- "build": "tsup",
17
- "dev": "tsup --watch",
18
- "format:check": "eslint . && prettier --check .",
19
- "format:fix": "eslint --fix . && prettier --write .",
20
- "components:link": "pnpm link . --global",
21
- "components:unlink": "pnpm rm --global @orbitkit/components"
22
- },
23
- "keywords": [
24
- "ui",
25
- "kit",
26
- "components",
27
- "orbit",
28
- "tailwind"
29
- ],
30
- "author": "NSMichelJ (Michelito)",
31
- "license": "MIT",
32
- "packageManager": "pnpm@10.9.0",
33
- "devDependencies": {
34
- "@types/fs-extra": "11.0.4",
35
- "@types/node": "22.15.3",
36
- "astro": "5.7.10",
37
- "class-variance-authority": "0.7.1",
38
- "clsx": "2.1.1",
39
- "fs-extra": "11.3.0",
40
- "tailwind-merge": "3.2.0",
41
- "tailwindcss": "4.1.5",
42
- "tsup": "8.4.0"
43
- },
44
- "files": [
45
- "dist"
46
- ]
47
- }
1
+ {
2
+ "name": "@orbitkit/components",
3
+ "version": "0.1.0",
4
+ "description": "Customizable UI components designed for seamless integration and scalability.",
5
+ "main": "./dist/index.js",
6
+ "type": "module",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.js"
12
+ },
13
+ "./dist/*": "./dist/*"
14
+ },
15
+ "scripts": {
16
+ "build": "tsup",
17
+ "dev": "tsup --watch",
18
+ "format:check": "eslint . && prettier --check .",
19
+ "format:fix": "eslint --fix . && prettier --write .",
20
+ "components:link": "pnpm link . --global",
21
+ "components:unlink": "pnpm rm --global @orbitkit/components",
22
+ "publish:beta": "pnpm build && npm publish --tag beta --access public",
23
+ "publish:release": "pnpm build && npm publish --access public"
24
+ },
25
+ "keywords": [
26
+ "ui",
27
+ "kit",
28
+ "components",
29
+ "orbit",
30
+ "tailwind"
31
+ ],
32
+ "author": "NSMichelJ (Michelito)",
33
+ "license": "MIT",
34
+ "packageManager": "pnpm@10.9.0",
35
+ "devDependencies": {
36
+ "@types/fs-extra": "11.0.4",
37
+ "@types/node": "22.15.3",
38
+ "astro": "5.7.10",
39
+ "class-variance-authority": "0.7.1",
40
+ "clsx": "2.1.1",
41
+ "fs-extra": "11.3.0",
42
+ "tailwind-merge": "3.2.0",
43
+ "tailwindcss": "4.1.5",
44
+ "tsup": "8.4.0"
45
+ },
46
+ "repository": {
47
+ "type": "git",
48
+ "url": "https://github.com/nsmichelj/orbitui.git",
49
+ "directory": "package/components"
50
+ },
51
+ "files": [
52
+ "dist"
53
+ ]
54
+ }