@cloudwick/astral-ui-cli 2.0.0 → 2.0.1
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/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1071,7 +1071,7 @@ async function promptForConfig({
|
|
|
1071
1071
|
// package.json
|
|
1072
1072
|
var package_default = {
|
|
1073
1073
|
name: "@cloudwick/astral-ui-cli",
|
|
1074
|
-
version: "2.0.
|
|
1074
|
+
version: "2.0.1",
|
|
1075
1075
|
description: "CLI for installing Astral UI components in any codebase",
|
|
1076
1076
|
main: "dist/index.js",
|
|
1077
1077
|
bin: {
|
|
@@ -1483,11 +1483,11 @@ var REGISTRY = {
|
|
|
1483
1483
|
},
|
|
1484
1484
|
{
|
|
1485
1485
|
"name": "badge.tsx",
|
|
1486
|
-
"content": 'import * as React from "react";\nimport { badgeVariants } from "./badgeVariants";\n\n/**\n * Badge component for displaying small counts, labels, or statuses\n */\nexport interface IBadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Text to be displayed inside the badge */\n label?:
|
|
1486
|
+
"content": 'import * as React from "react";\nimport { badgeVariants } from "./badgeVariants";\n\n/**\n * Badge component for displaying small counts, labels, or statuses\n */\nexport interface IBadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Text to be displayed inside the badge */\n label?: React.ReactNode;\n /** Icon to be displayed before the label */\n prefixIcon?: React.ReactNode;\n /** Icon to be displayed after the label */\n suffixIcon?: React.ReactNode;\n /** Badge appearance style */\n variant?: "filled" | "ghost" | "outline" | "text";\n /** Badge size */\n size?: "sm" | "md" | "lg";\n /** Badge color scheme */\n color?: "primary" | "secondary" | "success" | "warning" | "error";\n}\n\n/**\n * Badge component for displaying small counts, labels, or statuses\n */\nexport const Badge = React.forwardRef<HTMLDivElement, IBadgeProps>(\n (\n {\n className,\n label,\n prefixIcon,\n suffixIcon,\n variant = "filled",\n size = "md",\n color = "primary",\n ...props\n },\n ref\n ) => {\n const classes = badgeVariants({ variant, size, color, class: className });\n\n return (\n <div\n ref={ref}\n className={classes}\n {...props}\n >\n {prefixIcon && <span className="mr-1 inline-flex">{prefixIcon}</span>}\n {label && <span>{label}</span>}\n {suffixIcon && <span className="ml-1 inline-flex">{suffixIcon}</span>}\n </div>\n );\n }\n);\n\nBadge.displayName = "Badge";\n'
|
|
1487
1487
|
},
|
|
1488
1488
|
{
|
|
1489
1489
|
"name": "README.md",
|
|
1490
|
-
"content": "# Badge Component\n\n## Component Overview\n\nThe Badge component displays small count indicators, status labels, or categorical information.\n\n**When to use:**\n- Status indicators (active, pending, error)\n- Notification counts\n- Category labels\n- Version tags\n- Feature flags\n\n**Component Architecture:**\n- Styled with Tailwind CSS and cva\n- Multiple color variants\n- Size variants\n- Optional dismiss functionality\n\n## Basic Usage\n\n```tsx\nimport { Badge } from \"@components\";\n\nexport function Example() {\n return <Badge>New</Badge>;\n}\n```\n\n**Note:** Update the import path based on your project structure. If you used the Astral UI CLI, the typical import path would be `@components/ui/badge` or `@components/badge`.\n\n## Component Props\n\n| Prop | Type | Default | Required | Description |\n|------|------|---------|----------|-------------|\n| `label` | `
|
|
1490
|
+
"content": "# Badge Component\n\n## Component Overview\n\nThe Badge component displays small count indicators, status labels, or categorical information.\n\n**When to use:**\n- Status indicators (active, pending, error)\n- Notification counts\n- Category labels\n- Version tags\n- Feature flags\n\n**Component Architecture:**\n- Styled with Tailwind CSS and cva\n- Multiple color variants\n- Size variants\n- Optional dismiss functionality\n\n## Basic Usage\n\n```tsx\nimport { Badge } from \"@components\";\n\nexport function Example() {\n return <Badge>New</Badge>;\n}\n```\n\n**Note:** Update the import path based on your project structure. If you used the Astral UI CLI, the typical import path would be `@components/ui/badge` or `@components/badge`.\n\n## Component Props\n\n| Prop | Type | Default | Required | Description |\n|------|------|---------|----------|-------------|\n| `label` | `React.ReactNode` | `undefined` | No | Text to be displayed inside the badge |\n| `prefixIcon` | `React.ReactNode` | `undefined` | No | Icon to be displayed before the label |\n| `suffixIcon` | `React.ReactNode` | `undefined` | No | Icon to be displayed after the label |\n| `variant` | `'filled' \\| 'ghost' \\| 'outline' \\| 'text'` | `'filled'` | No | Badge appearance style |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | No | Badge size |\n| `color` | `'primary' \\| 'secondary' \\| 'success' \\| 'warning' \\| 'error'` | `'primary'` | No | Badge color scheme |\n| `className` | `string` | `undefined` | No | Additional CSS classes |\n\n**Note:** This component forwards refs to the container div element (`HTMLDivElement`).\n\n## Practical Examples\n\n### Status Badges\n\n```tsx\nimport { Badge } from \"@components\";\n\nfunction StatusBadges() {\n return (\n <div className=\"flex gap-2\">\n <Badge color=\"success\">Active</Badge>\n <Badge color=\"warning\">Pending</Badge>\n <Badge color=\"error\">Failed</Badge>\n <Badge color=\"secondary\">Draft</Badge>\n </div>\n );\n}\n```\n\n### Notification Count\n\n```tsx\nimport { Badge } from \"@components\";\nimport { Button } from \"@components\";\n\nfunction NotificationButton() {\n return (\n <div className=\"relative inline-block\">\n <Button prefixIcon=\"bell\">Notifications</Button>\n <Badge \n className=\"absolute -top-2 -right-2\" \n size=\"sm\"\n color=\"error\"\n >\n 5\n </Badge>\n </div>\n );\n}\n```\n"
|
|
1491
1491
|
}
|
|
1492
1492
|
],
|
|
1493
1493
|
"directories": []
|
|
@@ -2576,7 +2576,7 @@ PanelHeader.displayName = "PanelHeader";
|
|
|
2576
2576
|
},
|
|
2577
2577
|
{
|
|
2578
2578
|
"name": "panel.tsx",
|
|
2579
|
-
"content": 'import * as React from "react";\nimport ReactDOM from "react-dom";\nimport { FocusOn } from "react-focus-on";\n\nimport { panelVariants, cssVisibilityVariants } from "./panelVariants";\nimport { PanelHeader } from "./panelHeader";\nimport { PanelBody } from "./panelBody";\nimport { PanelFooter } from "./panelFooter";\n\nexport interface IPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {\n /**\n * Variant of the Panel\n * @default compact\n */\n variant?: "extended" | "compact";\n /**\n * Prop to control the panel display\n * @default false\n */\n showPanel?: boolean;\n /**\n * Toggle the visibility of the Panel without unmounting it\n * @default false\n */\n toggleVisibilityUsingCss?: boolean;\n /**\n * Overwrite the Panel styles by passing space separated class names\n */\n className?: string;\n /**\n * Accepts children of ReactNode type\n */\n children: React.ReactNode;\n /**\n * Direction from which the panel slides in\n * @default "right"\n */\n slideDirection?: "left" | "right";\n /**\n * If true, indicates that the app is in RTL (right-to-left) mode\n * When true in RTL mode, slideDirection="left" will make panel open from right\n * @default false\n */\n rtl?: boolean;\n /**\n * Pass a reference to the element where the Panel needs to be rendered\n * @default document.body\n */\n portalTarget?: HTMLElement;\n /**\n * A list of Refs to be considered as a part of the Lock. The html elements in the list will be accessible while the Panel is open.\n */\n shards?: ( HTMLElement | React.RefObject<HTMLElement> )[];\n /**\n * Optional callback function to call when panel is closed\n */\n onClose?: ( e: React.MouseEvent<HTMLDivElement> | KeyboardEvent ) => void;\n}\n\n// Create the base Panel component\nconst PanelComponent = React.forwardRef<HTMLDivElement, IPanelProps>(\n ({\n variant = "compact",\n showPanel = false,\n toggleVisibilityUsingCss = false,\n className,\n children,\n rtl,\n slideDirection = "right",\n portalTarget = typeof document !== "undefined" ? document.body : undefined,\n shards,\n onClose,\n ...props\n }, ref ) => {\n // In RTL mode, we invert the slide direction\n const effectiveSlideDirection = rtl\n ? ( slideDirection === "left" ? "right" : "left" )\n : slideDirection;\n const panelRef = React.useRef<HTMLDivElement>( null );\n const [ shouldRender, setShouldRender ] = React.useState( false );\n\n // Handle showing/hiding the panel\n React.useEffect(() => {\n if ( showPanel ) {\n setShouldRender( true );\n }\n\n // When toggleVisibilityUsingCss = false, this timeout hides the panel before the slide out animation ends.\n if ( shouldRender && !showPanel ) {\n setTimeout(() => setShouldRender( false ), 490 );\n }\n }, [ showPanel, shouldRender ]);\n\n // Handle escape key for closing\n React.useEffect(() => {\n // Esc key handling\n const handleEscClick = ( event: KeyboardEvent ) => event.code === "Escape" && onClose?.( event );\n\n const removeListener = () => {\n document.removeEventListener( "keydown", handleEscClick, false );\n };\n\n // Event Listener added for the keypress and click when component mounts\n if ( showPanel ) {\n document.addEventListener( "keydown", handleEscClick, false );\n } else {\n removeListener();\n }\n\n return () => {\n // Event Listener removed for the keypress and click when component unmounts\n removeListener();\n };\n }, [ showPanel, onClose ]);\n\n // Using CSS to control visibility\n if ( toggleVisibilityUsingCss ) {\n const { container, overlay, panel } = cssVisibilityVariants({\n direction: effectiveSlideDirection,\n variant,\n showPanel\n });\n\n return portalTarget ? ReactDOM.createPortal(\n <FocusOn\n as="div"\n enabled={showPanel}\n shards={shards}\n className={container()}\n >\n <div\n className={overlay()}\n onClick={onClose}\n />\n\n {children && (\n <div\n id="panel"\n aria-modal="true"\n role="dialog"\n {...rtl ? { dir: "rtl" } : {}}\n ref={ref || panelRef}\n className={panel({ class: className })}\n {...props}\n >\n {children}\n </div>\n )}\n </FocusOn>,\n portalTarget\n ) : null;\n } else {\n const panelAnimation = (\n showPanel\n ? `slideIn${effectiveSlideDirection === "right" ? "Right" : "Left"}`\n : `slideOut${effectiveSlideDirection === "right" ? "Right" : "Left"}`\n ) as "slideInRight" | "slideOutRight" | "slideInLeft" | "slideOutLeft";\n\n const { container } = panelVariants();\n const { overlay } = panelVariants({\n animation: showPanel ? "appear" : "disappear",\n visibility: showPanel ? "visible" : "hidden"\n });\n const { panel } = panelVariants({\n variant,\n animation: panelAnimation,\n visibility: "visible",\n direction: effectiveSlideDirection\n });\n\n return shouldRender && portalTarget ? ReactDOM.createPortal(\n <FocusOn\n as="div"\n enabled={showPanel}\n shards={shards}\n className={container()}\n >\n <div\n className={overlay()}\n onClick={onClose}\n />\n\n {children && (\n <div\n id="panel"\n aria-modal="true"\n role="dialog"\n {...rtl ? { dir: "rtl" } : {}}\n ref={ref || panelRef}\n className={panel({ class: className })}\n {...props}\n >\n {children}\n </div>\n )}\n </FocusOn>,\n portalTarget\n ) : null;\n }\n }\n);\n\nPanelComponent.displayName = "Panel";\n\n// Define the compound component type\ntype TPanelCompoundComponent = typeof PanelComponent & {\n Header: typeof PanelHeader;\n Body: typeof PanelBody;\n Footer: typeof PanelFooter;\n};\n\n// Create the compound component by casting\nexport const Panel = PanelComponent as TPanelCompoundComponent;\n\n// Attach the subcomponents\nPanel.Header = PanelHeader;\nPanel.Body = PanelBody;\nPanel.Footer = PanelFooter;\n'
|
|
2579
|
+
"content": 'import * as React from "react";\nimport ReactDOM from "react-dom";\nimport { FocusOn } from "react-focus-on";\n\nimport { panelVariants, cssVisibilityVariants } from "./panelVariants";\nimport { PanelHeader } from "./panelHeader";\nimport { PanelBody } from "./panelBody";\nimport { PanelFooter } from "./panelFooter";\n\nexport interface IPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {\n /**\n * Variant of the Panel\n * @default compact\n */\n variant?: "extended" | "compact";\n /**\n * Prop to control the panel display\n * @default false\n */\n showPanel?: boolean;\n /**\n * Toggle the visibility of the Panel without unmounting it\n * @default false\n */\n toggleVisibilityUsingCss?: boolean;\n /**\n * Overwrite the Panel styles by passing space separated class names\n */\n className?: string;\n /**\n * Accepts children of ReactNode type\n */\n children: React.ReactNode;\n /**\n * Direction from which the panel slides in\n * @default "right"\n */\n slideDirection?: "left" | "right";\n /**\n * If true, indicates that the app is in RTL (right-to-left) mode\n * When true in RTL mode, slideDirection="left" will make panel open from right\n * @default false\n */\n rtl?: boolean;\n /**\n * Pass a reference to the element where the Panel needs to be rendered\n * @default document.body\n */\n portalTarget?: HTMLElement;\n /**\n * A list of Refs to be considered as a part of the Lock. The html elements in the list will be accessible while the Panel is open.\n */\n shards?: ( HTMLElement | React.RefObject<HTMLElement> )[];\n /**\n * Optional callback function to call when panel is closed\n */\n onClose?: ( e: React.MouseEvent<HTMLDivElement> | KeyboardEvent ) => void;\n}\n\n// Create the base Panel component\nconst PanelComponent = React.forwardRef<HTMLDivElement, IPanelProps>(\n ({\n variant = "compact",\n showPanel = false,\n toggleVisibilityUsingCss = false,\n className,\n children,\n rtl,\n slideDirection = "right",\n portalTarget = typeof document !== "undefined" ? document.body : undefined,\n shards,\n onClose,\n ...props\n }, ref ) => {\n // In RTL mode, we invert the slide direction\n const effectiveSlideDirection = rtl\n ? ( slideDirection === "left" ? "right" : "left" )\n : slideDirection;\n const panelRef = React.useRef<HTMLDivElement>( null );\n const [ shouldRender, setShouldRender ] = React.useState( false );\n\n // Handle showing/hiding the panel\n React.useEffect(() => {\n if ( showPanel ) {\n setShouldRender( true );\n }\n\n // When toggleVisibilityUsingCss = false, this timeout hides the panel before the slide out animation ends.\n if ( shouldRender && !showPanel ) {\n setTimeout(() => setShouldRender( false ), 490 );\n }\n }, [ showPanel, shouldRender ]);\n\n // Handle escape key for closing\n React.useEffect(() => {\n // Esc key handling\n const handleEscClick = ( event: KeyboardEvent ) => event.code === "Escape" && onClose?.( event );\n\n const removeListener = () => {\n document.removeEventListener( "keydown", handleEscClick, false );\n };\n\n // Event Listener added for the keypress and click when component mounts\n if ( showPanel ) {\n document.addEventListener( "keydown", handleEscClick, false );\n } else {\n removeListener();\n }\n\n return () => {\n // Event Listener removed for the keypress and click when component unmounts\n removeListener();\n };\n }, [ showPanel, onClose ]);\n\n // Using CSS to control visibility\n if ( toggleVisibilityUsingCss ) {\n const { container, overlay, panel } = cssVisibilityVariants({\n direction: effectiveSlideDirection,\n variant,\n showPanel\n });\n\n return portalTarget ? ReactDOM.createPortal(\n <FocusOn\n as="div"\n enabled={showPanel}\n shards={shards}\n className={container()}\n >\n <div\n className={overlay()}\n onClick={onClose}\n id="panel-overlay"\n />\n\n {children && (\n <div\n id="panel"\n aria-modal="true"\n role="dialog"\n {...rtl ? { dir: "rtl" } : {}}\n ref={ref || panelRef}\n className={panel({ class: className })}\n {...props}\n >\n {children}\n </div>\n )}\n </FocusOn>,\n portalTarget\n ) : null;\n } else {\n const panelAnimation = (\n showPanel\n ? `slideIn${effectiveSlideDirection === "right" ? "Right" : "Left"}`\n : `slideOut${effectiveSlideDirection === "right" ? "Right" : "Left"}`\n ) as "slideInRight" | "slideOutRight" | "slideInLeft" | "slideOutLeft";\n\n const { container } = panelVariants();\n const { overlay } = panelVariants({\n animation: showPanel ? "appear" : "disappear",\n visibility: showPanel ? "visible" : "hidden"\n });\n const { panel } = panelVariants({\n variant,\n animation: panelAnimation,\n visibility: "visible",\n direction: effectiveSlideDirection\n });\n\n return shouldRender && portalTarget ? ReactDOM.createPortal(\n <FocusOn\n as="div"\n enabled={showPanel}\n shards={shards}\n className={container()}\n >\n <div\n className={overlay()}\n onClick={onClose}\n id="panel-overlay"\n />\n\n {children && (\n <div\n id="panel"\n aria-modal="true"\n role="dialog"\n {...rtl ? { dir: "rtl" } : {}}\n ref={ref || panelRef}\n className={panel({ class: className })}\n {...props}\n >\n {children}\n </div>\n )}\n </FocusOn>,\n portalTarget\n ) : null;\n }\n }\n);\n\nPanelComponent.displayName = "Panel";\n\n// Define the compound component type\ntype TPanelCompoundComponent = typeof PanelComponent & {\n Header: typeof PanelHeader;\n Body: typeof PanelBody;\n Footer: typeof PanelFooter;\n};\n\n// Create the compound component by casting\nexport const Panel = PanelComponent as TPanelCompoundComponent;\n\n// Attach the subcomponents\nPanel.Header = PanelHeader;\nPanel.Body = PanelBody;\nPanel.Footer = PanelFooter;\n'
|
|
2580
2580
|
},
|
|
2581
2581
|
{
|
|
2582
2582
|
"name": "index.ts",
|
|
@@ -3042,7 +3042,7 @@ export const scrollbarVariants = tv({
|
|
|
3042
3042
|
"files": [
|
|
3043
3043
|
{
|
|
3044
3044
|
"name": "textFieldVariants.ts",
|
|
3045
|
-
"content": 'import { tv } from "tailwind-variants";\n\nexport const textFieldVariants = tv({\n slots: {\n container: "inline-flex flex-col gap-2 relative",\n label: "text-base font-medium text-secondary-400 dark:text-secondary-300",\n input: [\n "w-full rounded border border-gray-200 text-secondary-400",\n "placeholder:text-secondary-200 dark:placeholder:text-secondary-400",\n "outline-none focus:border-primary-500 focus:shadow-primary-2px",\n "disabled:bg-gray-50 disabled:text-secondary-200",\n "dark:border-secondary-500 dark:bg-iridium dark:disabled:bg-secondary-800 dark:disabled:text-secondary-500",\n "dark:focus:border-primary-400 dark:text-secondary-200"\n ],\n icon: "w-5 absolute top-1/2 -translate-y-1/2 text-gray-800 dark:text-gray-800",\n helperText: "text-xs font-normal"\n },\n variants: {\n size: {\n md: {\n input: "
|
|
3045
|
+
"content": 'import { tv } from "tailwind-variants";\n\nexport const textFieldVariants = tv({\n slots: {\n container: "inline-flex flex-col gap-2 relative",\n label: "text-base font-medium text-secondary-400 dark:text-secondary-300",\n input: [\n "w-full rounded border border-gray-200 text-secondary-400",\n "placeholder:text-secondary-200 dark:placeholder:text-secondary-400",\n "outline-none focus:border-primary-500 focus:shadow-primary-2px",\n "disabled:bg-gray-50 disabled:text-secondary-200",\n "dark:border-secondary-500 dark:bg-iridium dark:disabled:bg-secondary-800 dark:disabled:text-secondary-500",\n "dark:focus:border-primary-400 dark:text-secondary-200"\n ],\n icon: "w-5 absolute top-1/2 -translate-y-1/2 text-gray-800 dark:text-gray-800",\n helperText: "text-xs font-normal"\n },\n variants: {\n size: {\n md: {\n input: "ps-3 pe-3 py-2.5 text-base"\n },\n lg: {\n input: "ps-4 pe-4 py-3 text-md"\n }\n },\n error: {\n true: {\n input: "border-error-500 focus:shadow-error-2px dark:border-error-400",\n helperText: "text-error-500 dark:text-error-400"\n },\n false: {\n helperText: "text-secondary-400 dark:text-secondary-200"\n }\n },\n withPrefix: {\n true: { input: "ps-8" },\n false: {}\n },\n withSuffix: {\n true: { input: "pe-8" },\n false: {}\n },\n position: {\n prefix: {},\n suffix: {}\n }\n },\n compoundVariants: [\n { size: "md", position: "prefix", class: { icon: "start-3" } },\n { size: "md", position: "suffix", class: { icon: "end-3" } },\n { size: "lg", position: "prefix", class: { icon: "start-4" } },\n { size: "lg", position: "suffix", class: { icon: "end-4" } }\n ],\n defaultVariants: {\n size: "md",\n error: false,\n withPrefix: false,\n withSuffix: false,\n position: "prefix"\n }\n});\n'
|
|
3046
3046
|
},
|
|
3047
3047
|
{
|
|
3048
3048
|
"name": "textField.tsx",
|