Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ export default defineConfig({
vite: {
plugins: [tailwindcss()],
ssr: {
noExternal: ["zod"],
noExternal: ["zod", "nanoid"],
},
},
adapter: vercel({
Expand Down
1 change: 1 addition & 0 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"alpinejs": "^3.15.4",
"astro": "^5.16.4",
"astro-robots-txt": "^1.0.0",
"class-variance-authority": "^0.7.1",
"culori": "^4.0.2",
"expressive-code-collapsible": "^0.1.0",
"nanoid": "^5.0.9",
Expand Down
23 changes: 19 additions & 4 deletions apps/web/public/r/avatar.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,37 @@
"files": [
{
"path": "ui/avatar/Avatar.astro",
"content": "---\n/**\n * @component Avatar\n * @title Avatar\n * @description An image representing a user or entity, with fallback support when unavailable.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2531-2620&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n * <div class=\"flex flex-row flex-wrap items-center gap-12\">\n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://github.com/bejamas.png\" alt=\"@bejamas\" />\n * </AvatarImage>\n * <AvatarFallback>BJ</AvatarFallback>\n * </Avatar>\n * <Avatar class=\"rounded-lg\">\n * <AvatarImage>\n * <img src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n * </AvatarImage>\n * <AvatarFallback>TK</AvatarFallback>\n * </Avatar>\n * <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://github.com/withastro.png\" alt=\"@withastro\" />\n * </AvatarImage>\n * <AvatarFallback>WA</AvatarFallback>\n * </Avatar>\n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n * </AvatarImage>\n * <AvatarFallback>SH</AvatarFallback>\n * </Avatar>\n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://github.com/fredkschott.png\" alt=\"@fredkschott\" />\n * </AvatarImage>\n * <AvatarFallback>FS</AvatarFallback>\n * </Avatar>\n * </div>\n * </div>\n * \n * @usage\n * \n * ```astro nocollapse\n * ---\n * import { Avatar, AvatarImage, AvatarFallback } from '@bejamas/ui/components/avatar';\n * ---\n * \n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n * </AvatarImage>\n * <AvatarFallback>TK</AvatarFallback>\n * </Avatar>\n * ```\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n as: Tag = \"div\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar\"\n class={cn(\"relative flex size-8 shrink-0 overflow-hidden rounded-full\", className)}\n>\n <slot />\n</Tag>\n\n",
"content": "---\n/**\n * @component Avatar\n * @title Avatar\n * @description An image representing a user or entity, with fallback support when unavailable.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2531-2620&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n * <div class=\"flex flex-wrap items-center gap-4\">\n * <Avatar>\n * <AvatarImage src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n * <AvatarFallback>TK</AvatarFallback>\n * <AvatarBadge />\n * </Avatar>\n * <AvatarGroup>\n * <Avatar>\n * <AvatarImage src=\"https://github.com/withastro.png\" alt=\"@withastro\" />\n * <AvatarFallback>WA</AvatarFallback>\n * </Avatar>\n * <Avatar>\n * <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"@bejamas\" />\n * <AvatarFallback>BJ</AvatarFallback>\n * </Avatar>\n * <AvatarGroupCount>+2</AvatarGroupCount>\n * </AvatarGroup>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n * Avatar,\n * AvatarImage,\n * AvatarFallback,\n * AvatarBadge,\n * AvatarGroup,\n * AvatarGroupCount,\n * } from '@bejamas/ui/components/avatar';\n * ---\n *\n * <Avatar size=\"lg\">\n * <AvatarImage src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n * <AvatarFallback>TK</AvatarFallback>\n * <AvatarBadge />\n * </Avatar>\n * ```\n *\n * @examples\n *\n * ### Sizes\n *\n * <div class=\"flex items-center gap-4\">\n * <Avatar size=\"sm\">\n * <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"small\" />\n * <AvatarFallback>SM</AvatarFallback>\n * </Avatar>\n * <Avatar>\n * <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"default\" />\n * <AvatarFallback>MD</AvatarFallback>\n * </Avatar>\n * <Avatar size=\"lg\">\n * <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"large\" />\n * <AvatarFallback>LG</AvatarFallback>\n * </Avatar>\n * </div>\n *\n * ### Badge\n *\n * <Avatar>\n * <AvatarImage src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n * <AvatarFallback>TK</AvatarFallback>\n * <AvatarBadge />\n * </Avatar>\n *\n * ### Group\n *\n * <AvatarGroup>\n * <Avatar>\n * <AvatarImage src=\"https://github.com/withastro.png\" alt=\"@withastro\" />\n * <AvatarFallback>WA</AvatarFallback>\n * </Avatar>\n * <Avatar>\n * <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"@bejamas\" />\n * <AvatarFallback>BJ</AvatarFallback>\n * </Avatar>\n * <Avatar>\n * <AvatarFallback>FS</AvatarFallback>\n * </Avatar>\n * <AvatarGroupCount>+3</AvatarGroupCount>\n * </AvatarGroup>\n *\n * ### With `astro:assets` Image\n *\n * ```astro nopreview nocollapse\n * ---\n * import { Image } from \"astro:assets\";\n * import profile from \"@/assets/profile.jpg\";\n * import { Avatar, AvatarImage, AvatarFallback } from \"@bejamas/ui/components/avatar\";\n * ---\n *\n * <Avatar>\n * <AvatarImage>\n * <Image src={profile} alt=\"Profile photo\" />\n * </AvatarImage>\n * <AvatarFallback>PR</AvatarFallback>\n * </Avatar>\n * ```\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n class?: string;\n size?: \"default\" | \"sm\" | \"lg\";\n} & HTMLAttributes<\"span\">;\n\nconst {\n class: className = \"\",\n size = \"default\",\n ...rest\n} = Astro.props as Props;\n---\n\n<span\n {...rest}\n data-slot=\"avatar\"\n data-size={size}\n class={cn(\n \"group/avatar relative flex size-8 shrink-0 select-none rounded-full\",\n \"after:absolute after:inset-0 after:rounded-full after:border after:border-border\",\n \"after:mix-blend-darken dark:after:mix-blend-lighten\",\n \"data-[size=sm]:size-6 data-[size=lg]:size-10\",\n \"z-1\",\n className,\n )}\n>\n <slot />\n</span>\n",
"type": "registry:ui"
},
{
"path": "ui/avatar/AvatarImage.astro",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n as: Tag = \"div\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar-image\"\n class={cn(\"relative z-10 aspect-square size-full [&_img]:size-full [&_img]:object-cover\", className)}\n>\n <slot />\n</Tag>\n\n",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n src?: string;\n alt?: string;\n} & HTMLAttributes<\"img\">;\n\nconst {\n as,\n class: className = \"\",\n src,\n alt = \"\",\n ...rest\n} = Astro.props as Props;\n\nconst Tag = (as ?? \"div\") as HTMLTag;\n---\n\n{\n src || as === \"img\" ? (\n <img\n {...rest}\n data-slot=\"avatar-image\"\n src={src}\n alt={alt}\n class={cn(\n \"relative z-10 rounded-full aspect-square size-full object-cover\",\n className,\n )}\n />\n ) : (\n <Tag\n {...rest}\n data-slot=\"avatar-image\"\n class={cn(\n \"relative z-10 rounded-full aspect-square size-full overflow-hidden\",\n \"[&_img]:size-full [&_img]:object-cover\",\n className,\n )}\n >\n <slot />\n </Tag>\n )\n}\n",
"type": "registry:ui"
},
{
"path": "ui/avatar/AvatarFallback.astro",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n as: Tag = \"div\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar-fallback\"\n class={cn(\"absolute inset-0 bg-muted flex size-full items-center justify-center rounded-full text-muted-foreground font-medium uppercase select-none\", className)}\n>\n <slot />\n</Tag>\n\n",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n as: Tag = \"div\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar-fallback\"\n class={cn(\n \"bg-muted text-muted-foreground absolute inset-0 flex size-full items-center justify-center rounded-full text-sm\",\n \"group-data-[size=sm]/avatar:text-xs\",\n className,\n )}\n>\n <slot />\n</Tag>\n",
"type": "registry:ui"
},
{
"path": "ui/avatar/AvatarBadge.astro",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"span\">;\n\nconst {\n as: Tag = \"span\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar-badge\"\n class={cn(\n \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className,\n )}\n>\n <slot />\n</Tag>\n",
"type": "registry:ui"
},
{
"path": "ui/avatar/AvatarGroup.astro",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n as: Tag = \"div\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar-group\"\n class={cn(\n \"group/avatar-group flex -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background\",\n className,\n )}\n>\n <slot />\n</Tag>\n",
"type": "registry:ui"
},
{
"path": "ui/avatar/AvatarGroupCount.astro",
"content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n as?: HTMLTag;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n as: Tag = \"div\",\n class: className = \"\",\n ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n {...rest}\n data-slot=\"avatar-group-count\"\n class={cn(\n \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2\",\n \"[&>svg]:size-4\",\n \"group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n \"group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5\",\n className,\n )}\n>\n <slot />\n</Tag>\n",
"type": "registry:ui"
},
{
"path": "ui/avatar/index.ts",
"content": "export { default as Avatar } from \"./Avatar.astro\";\nexport { default as AvatarImage } from \"./AvatarImage.astro\";\nexport { default as AvatarFallback } from \"./AvatarFallback.astro\";\n\n",
"content": "export { default as Avatar } from \"./Avatar.astro\";\nexport { default as AvatarImage } from \"./AvatarImage.astro\";\nexport { default as AvatarFallback } from \"./AvatarFallback.astro\";\nexport { default as AvatarBadge } from \"./AvatarBadge.astro\";\nexport { default as AvatarGroup } from \"./AvatarGroup.astro\";\nexport { default as AvatarGroupCount } from \"./AvatarGroupCount.astro\";\n",
"type": "registry:ui"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/web/public/r/card.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"files": [
{
"path": "ui/card/Card.astro",
"content": "---\n/**\n * @component Card\n * @title Card\n * @description UI container for grouping content with header, footer, etc.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-3884&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Card class=\"w-full max-w-sm\">\n * <CardMedia class=\"m-1\">\n * <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=30&contrast=0&w=748&h=500&seed=bejamas\" alt=\"Gradient Cover\" class=\"w-full h-full object-cover\" width=\"374\" height=\"250\" loading=\"lazy\" />\n * </CardMedia>\n * <CardHeader>\n * <div class=\"flex items-center gap-2 justify-between\">\n * <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2\">\n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=90&contrast=0&w=80&h=80&seed=bejamas-avatar\" alt=\"grdient avatar\" />\n * </AvatarImage>\n * <AvatarFallback>AW</AvatarFallback>\n * </Avatar>\n * </div>\n * <Date date=\"2025-08-24T12:00:00Z\" class=\"text-sm text-muted-foreground\" />\n * </div>\n * </CardHeader>\n * <CardContent class=\"space-y-4\">\n * <CardTitle>Strong Foundations, Built to Scale</CardTitle>\n * <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>\n * <Button variant=\"outline\" as=\"a\" href=\"#\">Read more</Button>\n * </CardContent>\n * <Separator />\n * <CardFooter>\n * <p class=\"text-sm text-muted-foreground\">Categories</p>\n * <div class=\"flex items-center gap-2\">\n * <Badge variant=\"secondary\">Marketing</Badge>\n * <Badge variant=\"secondary\">UI Design</Badge>\n * </div>\n * </CardFooter>\n * </Card>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';\n * ---\n *\n * <Card>\n * <CardHeader>\n * <CardTitle>Card Title</CardTitle>\n * <CardDescription>Card Description</CardDescription>\n * </CardHeader>\n * <CardContent>\n * Card content goes here.\n * </CardContent>\n * <CardFooter>\n * <button>OK</button>\n * </CardFooter>\n * </Card>\n * ```\n */\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ntype CardVariant = \"default\" | \"ghost\";\n\ntype Props = {\n variant?: CardVariant;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n class: className = \"\",\n variant = \"default\",\n ...rest\n} = Astro.props as Props;\n\nconst cardVariants = cva(\n \"group/card relative bg-card overflow-clip text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm group/card [&:has(>_[data-slot=card-media]:first-child_img)]:pt-0 [a]:hover:bg-accent/5 [a]:transition-colors duration-100\",\n {\n variants: {\n variant: {\n default: \"\",\n ghost: \"border-transparent bg-transparent shadow-none\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n---\n\n<div\n {...rest}\n data-slot=\"card\"\n class={cn(cardVariants({ variant }), className)}\n>\n <slot />\n</div>\n",
"content": "---\n/**\n * @component Card\n * @title Card\n * @description UI container for grouping content with header, footer, etc.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-3884&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Card class=\"w-full max-w-sm\">\n * <CardMedia class=\"m-1\">\n * <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=30&contrast=0&w=748&h=500&seed=bejamas\" alt=\"Gradient Cover\" class=\"w-full h-full object-cover\" width=\"374\" height=\"250\" loading=\"lazy\" />\n * </CardMedia>\n * <CardHeader>\n * <div class=\"flex items-center gap-2 justify-between\">\n * <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2\">\n * <Avatar>\n * <AvatarImage>\n * <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=90&contrast=0&w=80&h=80&seed=bejamas-avatar\" alt=\"grdient avatar\" />\n * </AvatarImage>\n * <AvatarFallback>AW</AvatarFallback>\n * </Avatar>\n * </div>\n * <Date date=\"2025-08-24T12:00:00Z\" class=\"text-sm text-muted-foreground\" />\n * </div>\n * </CardHeader>\n * <CardContent class=\"space-y-4\">\n * <CardTitle>Strong Foundations, Built to Scale</CardTitle>\n * <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>\n * <Button variant=\"outline\" as=\"a\" href=\"#\">Read more</Button>\n * </CardContent>\n * <Separator />\n * <CardFooter>\n * <p class=\"text-sm text-muted-foreground\">Categories</p>\n * <div class=\"flex items-center gap-2\">\n * <Badge variant=\"secondary\">Marketing</Badge>\n * <Badge variant=\"secondary\">UI Design</Badge>\n * </div>\n * </CardFooter>\n * </Card>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';\n * ---\n *\n * <Card>\n * <CardHeader>\n * <CardTitle>Card Title</CardTitle>\n * <CardDescription>Card Description</CardDescription>\n * </CardHeader>\n * <CardContent>\n * Card content goes here.\n * </CardContent>\n * <CardFooter>\n * <button>OK</button>\n * </CardFooter>\n * </Card>\n * ```\n */\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ntype CardVariant = \"default\" | \"ghost\";\n\ntype Props = {\n variant?: CardVariant;\n class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n class: className = \"\",\n variant = \"default\",\n ...rest\n} = Astro.props as Props;\n\nconst cardVariants = cva(\n \"group/card bg-card overflow-clip text-card-foreground flex flex-col gap-6 rounded-xl ring-1 ring-border py-6 shadow-sm group/card [&:has(>_[data-slot=card-media]:first-child_img)]:pt-0 [a]:hover:bg-accent/5 [a]:transition-colors duration-100\",\n {\n variants: {\n variant: {\n default: \"\",\n ghost: \"ring-transparent bg-transparent shadow-none\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n---\n\n<div\n {...rest}\n data-slot=\"card\"\n class={cn(cardVariants({ variant }), className)}\n>\n <slot />\n</div>\n",
"type": "registry:ui"
},
{
Expand Down
Loading