@refraction-ui/react 0.3.7 → 0.3.9

package/dist/index.cjs

@@ -11588,8 +11588,283 @@ var Pagination = React42__namespace.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var Callout = () => /* @__PURE__ */ jsxRuntime.jsx("div", {});
-var Steps = () => /* @__PURE__ */ jsxRuntime.jsx("div", {});
+
+// ../callout/dist/index.js
+function createCallout(props = {}) {
+  const ariaProps = {};
+  if (props.role) {
+    ariaProps.role = props.role;
+  } else {
+    ariaProps.role = "region";
+  }
+  return {
+    ariaProps,
+    dataAttributes: { "data-slot": "callout" }
+  };
+}
+function createCalloutIcon() {
+  return { dataAttributes: { "data-slot": "callout-icon" } };
+}
+function createCalloutContent() {
+  return { dataAttributes: { "data-slot": "callout-content" } };
+}
+function createCalloutTitle() {
+  return { dataAttributes: { "data-slot": "callout-title" } };
+}
+function createCalloutDescription() {
+  return { dataAttributes: { "data-slot": "callout-description" } };
+}
+var calloutVariants = cva({
+  base: "relative w-full rounded-lg border p-4 text-sm flex gap-3",
+  variants: {
+    variant: {
+      default: "bg-muted/50 border-border text-foreground",
+      destructive: "bg-destructive/10 border-destructive/20 text-destructive",
+      success: "bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-400",
+      warning: "bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-400",
+      info: "bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-400"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var calloutTitleVariants = cva({
+  base: "font-semibold leading-none tracking-tight mb-1"
+});
+var calloutDescriptionVariants = cva({
+  base: "text-sm opacity-90 leading-relaxed"
+});
+var Callout = React42__namespace.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    const api = createCallout({ role: variant === "destructive" ? "alert" : "region" });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(calloutVariants({ variant }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+Callout.displayName = "Callout";
+var CalloutIcon = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCalloutIcon();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-shrink-0 mt-0.5", className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CalloutIcon.displayName = "CalloutIcon";
+var CalloutContent = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCalloutContent();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1", className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CalloutContent.displayName = "CalloutContent";
+var CalloutTitle = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCalloutTitle();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "h5",
+      {
+        ref,
+        className: cn(calloutTitleVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CalloutTitle.displayName = "CalloutTitle";
+var CalloutDescription = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCalloutDescription();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(calloutDescriptionVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CalloutDescription.displayName = "CalloutDescription";
+
+// ../steps/dist/index.js
+function createSteps() {
+  return { dataAttributes: { "data-slot": "steps" } };
+}
+function createStep() {
+  return { dataAttributes: { "data-slot": "step" } };
+}
+function createStepIndicator() {
+  return { dataAttributes: { "data-slot": "step-indicator" } };
+}
+function createStepContent() {
+  return { dataAttributes: { "data-slot": "step-content" } };
+}
+function createStepTitle() {
+  return { dataAttributes: { "data-slot": "step-title" } };
+}
+function createStepDescription() {
+  return { dataAttributes: { "data-slot": "step-description" } };
+}
+var stepsVariants = cva({
+  base: "flex flex-col gap-0",
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var stepVariants = cva({
+  base: "flex gap-3",
+  variants: {
+    status: {
+      completed: "text-foreground",
+      active: "text-foreground",
+      upcoming: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var stepIndicatorVariants = cva({
+  base: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold",
+  variants: {
+    status: {
+      completed: "border-primary bg-primary text-primary-foreground",
+      active: "border-primary bg-background text-primary",
+      upcoming: "border-muted bg-background text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var stepTitleVariants = cva({
+  base: "font-semibold leading-none tracking-tight"
+});
+var stepDescriptionVariants = cva({
+  base: "text-sm text-muted-foreground mt-1"
+});
+var Steps = React42__namespace.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const api = createSteps();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(stepsVariants({ orientation }), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+Steps.displayName = "Steps";
+var Step = React42__namespace.forwardRef(
+  ({ className, status, ...props }, ref) => {
+    const api = createStep();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(stepVariants({ status }), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+Step.displayName = "Step";
+var StepIndicator = React42__namespace.forwardRef(
+  ({ className, status, ...props }, ref) => {
+    const api = createStepIndicator();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(stepIndicatorVariants({ status }), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+StepIndicator.displayName = "StepIndicator";
+var StepContent = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createStepContent();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1 pb-8", className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+StepContent.displayName = "StepContent";
+var StepTitle = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createStepTitle();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "h4",
+      {
+        ref,
+        className: cn(stepTitleVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+StepTitle.displayName = "StepTitle";
+var StepDescription = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createStepDescription();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        className: cn(stepDescriptionVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+StepDescription.displayName = "StepDescription";
 var FileTree = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {});
 };
@@ -11597,15 +11872,95 @@ var IconSystem = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {});
 };
 
-// ../react-skip-to-content/dist/index.js
-var SkipToContent = () => {
-  return null;
-};
+// ../skip-to-content/dist/index.js
+function createSkipToContent() {
+  return { dataAttributes: { "data-slot": "skip-to-content" } };
+}
+var skipToContentVariants = cva({
+  base: "fixed left-4 top-4 z-[100] -translate-y-16 rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-md transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+});
+var SkipToContent = React42__namespace.forwardRef(
+  ({ className, targetId = "main-content", children = "Skip to content", ...props }, ref) => {
+    const api = createSkipToContent();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref,
+        href: `#${targetId}`,
+        className: cn(skipToContentVariants(), className),
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    );
+  }
+);
+SkipToContent.displayName = "SkipToContent";
 
-// ../react-code-block/dist/index.js
-var CodeBlock = () => {
-  return null;
-};
+// ../code-block/dist/index.js
+function createCodeBlock() {
+  return { dataAttributes: { "data-slot": "code-block" } };
+}
+function createCodeBlockHeader() {
+  return { dataAttributes: { "data-slot": "code-block-header" } };
+}
+function createCodeBlockContent() {
+  return { dataAttributes: { "data-slot": "code-block-content" } };
+}
+var codeBlockVariants = cva({
+  base: "relative overflow-hidden rounded-lg border bg-zinc-950 text-zinc-50 dark:bg-zinc-900"
+});
+var codeBlockHeaderVariants = cva({
+  base: "flex items-center justify-between border-b border-zinc-800 bg-zinc-900/50 px-4 py-2 text-xs text-zinc-400"
+});
+var codeBlockContentVariants = cva({
+  base: "overflow-x-auto p-4 text-sm font-mono leading-relaxed"
+});
+var CodeBlock = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCodeBlock();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(codeBlockVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var CodeBlockHeader = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCodeBlockHeader();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(codeBlockHeaderVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CodeBlockHeader.displayName = "CodeBlockHeader";
+var CodeBlockContent = React42__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const api = createCodeBlockContent();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "pre",
+      {
+        ref,
+        className: cn(codeBlockContentVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+CodeBlockContent.displayName = "CodeBlockContent";
 
 // ../link-card/dist/index.js
 function createLinkCard(_props = {}) {
@@ -11736,6 +12091,10 @@ exports.CATEGORY_LABELS = CATEGORY_LABELS;
 exports.Calendar = Calendar;
 exports.CalendarHeader = CalendarHeader;
 exports.Callout = Callout;
+exports.CalloutContent = CalloutContent;
+exports.CalloutDescription = CalloutDescription;
+exports.CalloutIcon = CalloutIcon;
+exports.CalloutTitle = CalloutTitle;
 exports.Card = Card2;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -11749,6 +12108,8 @@ exports.CarouselItem = CarouselItem;
 exports.CarouselTrigger = CarouselTrigger;
 exports.Checkbox = Checkbox;
 exports.CodeBlock = CodeBlock;
+exports.CodeBlockContent = CodeBlockContent;
+exports.CodeBlockHeader = CodeBlockHeader;
 exports.CodeEditor = CodeEditor;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent;
@@ -11843,6 +12204,11 @@ exports.SkipToContent = SkipToContent;
 exports.SlideViewer = SlideViewer;
 exports.StatsGrid = StatsGrid;
 exports.StatusIndicator = StatusIndicator;
+exports.Step = Step;
+exports.StepContent = StepContent;
+exports.StepDescription = StepDescription;
+exports.StepIndicator = StepIndicator;
+exports.StepTitle = StepTitle;
 exports.Steps = Steps;
 exports.Switch = Switch;
 exports.TableOfContents = TableOfContents;