@xjur-ui/react 1.0.3 → 1.0.6

package/dist/components/search-input.js

@@ -201,7 +201,7 @@ function SearchInputContent({
     {
       variants: {
         variant: {
-          outlined: "rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary",
+          outlined: "rounded-circle focus-within:border-primary-idle ",
           line: "rounded-none border-t-0 border-b-1 border-x-0",
           action: "rounded-tr-none rounded-br-none border-r-0"
         }

package/dist/components/select.js

@@ -285,7 +285,7 @@ function SearchInputContent({
     {
       variants: {
         variant: {
-          outlined: "rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary",
+          outlined: "rounded-circle focus-within:border-primary-idle ",
           line: "rounded-none border-t-0 border-b-1 border-x-0",
           action: "rounded-tr-none rounded-br-none border-r-0"
         }
@@ -349,7 +349,7 @@ function SelectTrigger({
         className,
         "group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center",
         "bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border",
-        "data-[state=open]:border-primary-idle data-[state=open]:shadow-focus-primary",
+        "data-[state=open]:border-primary-idle",
         "has-[input:not(:placeholder-shown)]:text-primary-idle",
         "has-[input:not(:placeholder-shown)]:border-primary-idle"
       ),

package/dist/components/skeleton.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+declare function Skeleton({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,16 @@
+// src/components/skeleton.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("bg-layer-skeleton animate-pulse", className),
+      "data-slot": "skeleton",
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};

package/dist/components/status.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ComponentProps } from 'react';
+import { ClassVariantProps } from '@xjur-ui/util';
+
+declare const statusVariants: (props?: ({
+    variant?: "neutral" | "success" | "warning" | "danger" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StatusProps extends ComponentProps<'div'>, ClassVariantProps<typeof statusVariants> {
+    text?: string;
+}
+declare function Status({ text, variant, className, ...props }: StatusProps): react_jsx_runtime.JSX.Element;
+
+export { Status, type StatusProps, statusVariants };

package/dist/components/status.js

@@ -0,0 +1,111 @@
+// src/components/status.tsx
+import { cva as cva2, cx } from "@xjur-ui/util";
+
+// src/components/typography.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "@xjur-ui/util";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+var typographyVariants = cva("", {
+  variants: {
+    variant: {
+      body: "",
+      label: "",
+      title: "",
+      headline: ""
+    },
+    size: {
+      "sm-2x": "",
+      "sm-1x": "",
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    weight: {
+      thin: "font-thin",
+      extraLight: "font-extralight",
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extraBold: "font-extrabold",
+      black: "font-black"
+    }
+  },
+  compoundVariants: [
+    { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
+    { variant: "body", size: "sm", class: "text-size-body-sm" },
+    { variant: "body", size: "md", class: "text-size-body-md" },
+    { variant: "body", size: "lg", class: "text-size-body-lg" },
+    { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
+    { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
+    { variant: "label", size: "sm", class: "text-size-label-sm" },
+    { variant: "label", size: "md", class: "text-size-label-md" },
+    { variant: "label", size: "lg", class: "text-size-label-lg" },
+    { variant: "title", size: "sm", class: "text-size-title-sm" },
+    { variant: "title", size: "md", class: "text-size-title-md" },
+    { variant: "title", size: "lg", class: "text-size-title-lg" },
+    { variant: "headline", size: "sm", class: "text-size-headline-sm" },
+    { variant: "headline", size: "md", class: "text-size-headline-md" },
+    { variant: "headline", size: "lg", class: "text-size-headline-lg" }
+  ],
+  defaultVariants: {
+    variant: "body",
+    size: "md",
+    weight: "normal"
+  }
+});
+var Typography = memo(
+  ({
+    variant,
+    size,
+    weight,
+    asChild,
+    className,
+    ...props
+  }) => {
+    const Component = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: typographyVariants({ variant, size, weight, className }),
+        ...props
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+// src/components/status.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var statusVariants = cva2(
+  [
+    "inline-flex items-center justify-center px-small py-small-1x rounded-small-1x text-label-sm font-medium text-neutral-label h-large-2x"
+  ],
+  {
+    variants: {
+      variant: {
+        success: "bg-success-idle",
+        warning: "bg-warning-idle",
+        danger: "bg-danger-idle",
+        neutral: "bg-alt-3"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Status({
+  text = "Status",
+  variant = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: cx(statusVariants({ variant }), className), ...props, children: /* @__PURE__ */ jsx2(Typography, { size: "sm", variant: "label", weight: "medium", children: text }) });
+}
+export {
+  Status,
+  statusVariants
+};

package/dist/components/test.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Test(): react_jsx_runtime.JSX.Element;
+
+export { Test };

package/dist/components/test.js

@@ -0,0 +1,8 @@
+// src/components/test.tsx
+import { jsx } from "react/jsx-runtime";
+function Test() {
+  return /* @__PURE__ */ jsx("div", { children: "Test" });
+}
+export {
+  Test
+};

package/dist/components/tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, variant, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    variant?: 'simple' | 'rich';
+}): react_jsx_runtime.JSX.Element;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -0,0 +1,58 @@
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 1,
+  variant = "simple",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      className: cx(
+        "text-size-body-sm text-balance",
+        "data-[variant=simple]:bg-alt-2 data-[variant=simple]:text-neutral-label data-[variant=simple]:rounded-small-1x data-[variant=simple]:px-small data-[variant=simple]:py-small-1x",
+        "data-[variant=rich]:bg-layer-2-idle data-[variant=rich]:text-neutral-dark data-[variant=rich]:rounded-small data-[variant=rich]:border-border-layer-2 data-[variant=rich]:p-large data-[variant=rich]:border",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin)",
+        className
+      ),
+      "data-slot": "tooltip-content",
+      "data-variant": variant,
+      sideOffset,
+      ...props,
+      children
+    }
+  ) });
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};