@xjur-ui/react 1.0.0 → 1.0.1

package/dist/components/{ui/input/label.js → radio.js}

@@ -1,8 +1,9 @@
-// src/components/ui/input/label.tsx
-import { memo as memo3 } from "react";
-import { cx as cx3 } from "@xjur-ui/util";
+// src/components/radio.tsx
+import "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cx } from "@xjur-ui/util";
 
-// src/components/ui/typography.tsx
+// src/components/typography.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "@xjur-ui/util";
 import { memo } from "react";
@@ -78,88 +79,78 @@ var Typography = memo(
 );
 Typography.displayName = "Typography";
 
-// src/components/ui/input/root.tsx
-import { createContext, use } from "react";
-import { cx as cx2 } from "@xjur-ui/util";
-
-// src/components/ui/input/message.tsx
-import { memo as memo2 } from "react";
-import { cx } from "@xjur-ui/util";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var InputMessage = memo2(
-  ({
-    children,
-    className,
-    weight = "normal",
-    variant = "body",
-    size = "sm-1x",
-    ...props
-  }) => {
-    const { errorMessage } = useInput();
-    return /* @__PURE__ */ jsx2(
-      Typography,
+// src/components/radio.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function RadioGroup({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    RadioGroupPrimitive.Root,
+    {
+      className: cx(
+        "gap-small flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+        className
+      ),
+      "data-orientation": orientation,
+      "data-slot": "radio-group",
+      ...props
+    }
+  );
+}
+function RadioItem({
+  className,
+  id,
+  label,
+  disabled = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "gap-small flex items-center", children: [
+    /* @__PURE__ */ jsx2(
+      RadioGroupPrimitive.Item,
       {
         className: cx(
-          "text-neutral-dark data-[error=true]:text-danger-idle",
+          // layout
+          "size-large-alt rounded-circle inline-flex items-center justify-center transition-[border-color,box-shadow,background-color] duration-200 outline-none",
+          // base
+          "border-border-layer-2 bg-layer-2-idle cursor-pointer border-2",
+          // hover/focus (desmarcado)
+          "hover:border-primary-idle focus:border-primary-idle focus:shadow-focus-primary",
+          // estado checked
+          "data-[state=checked]:bg-primary-active data-[state=checked]:border-primary-active",
+          // hover quando estiver checked (opcional)
+          "data-[state=checked]:hover:border-primary-idle",
+          // disabled
+          "disabled:hover:border-border-layer-2 disabled:cursor-not-allowed disabled:opacity-[38%]",
           className
         ),
-        "data-error": !!errorMessage,
-        size,
-        variant,
-        weight,
+        "data-slot": "radio-group-item",
+        disabled,
+        id,
         ...props,
-        children
+        children: /* @__PURE__ */ jsx2(
+          RadioGroupPrimitive.Indicator,
+          {
+            className: "relative flex items-center justify-center",
+            "data-slot": "radio-group-indicator"
+          }
+        )
       }
-    );
-  }
-);
-InputMessage.displayName = "InputMessage";
-
-// src/components/ui/input/root.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var InputRootContext = createContext({});
-function useInput() {
-  const context = use(InputRootContext);
-  if (!context) {
-    throw new Error(
-      "useInput must be called within <Input.Root> or <Select.Root>"
-    );
-  }
-  return context;
-}
-
-// src/components/ui/input/label.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var InputLabel = memo3(
-  ({
-    children,
-    htmlFor,
-    variant = "label",
-    weight = "medium",
-    size = "sm",
-    className,
-    ...props
-  }) => {
-    const { errorMessage } = useInput();
-    return /* @__PURE__ */ jsx4(
+    ),
+    !!label && /* @__PURE__ */ jsx2(
       Typography,
       {
         asChild: true,
-        className: cx3(
-          "text-title-neutral data-[error=true]:text-danger-label-active w-fit",
-          className
-        ),
-        "data-error": !!errorMessage,
-        size,
-        variant,
-        weight,
-        ...props,
-        children: /* @__PURE__ */ jsx4("label", { htmlFor, children })
+        className: "text-size-body-sm data-[disabled=true]:opacity-38",
+        "data-disabled": disabled,
+        weight: "medium",
+        children: /* @__PURE__ */ jsx2("label", { htmlFor: id, children: label })
       }
-    );
-  }
-);
-InputLabel.displayName = "InputLabel";
+    )
+  ] });
+}
 export {
-  InputLabel
+  RadioGroup,
+  RadioItem
 };

package/dist/components/search-input.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';
+
+type SearchInputProps = {
+    variant?: 'outlined' | 'line' | 'action';
+};
+declare function SearchInputRoot({ className, variant, ...props }: ComponentProps<'div'> & SearchInputProps): react_jsx_runtime.JSX.Element;
+declare function SearchInputContent({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SearchInputLabel({ htmlFor, ...props }: ComponentProps<'label'>): react_jsx_runtime.JSX.Element;
+declare function SearchInputText({ className, ...props }: ComponentProps<'input'>): react_jsx_runtime.JSX.Element;
+declare function SearchInputSlot(props: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SearchInputAction({ className, appearance, variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { SearchInputAction, SearchInputContent, SearchInputLabel, type SearchInputProps, SearchInputRoot, SearchInputSlot, SearchInputText };

package/dist/components/search-input.js

@@ -0,0 +1,274 @@
+// src/components/search-input.tsx
+import { cva as cva3, cx as cx2 } from "@xjur-ui/util";
+import { createContext } from "react";
+
+// 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/button.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2, cx } from "@xjur-ui/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  [
+    "outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"
+  ],
+  {
+    variants: {
+      size: {
+        md: "py-small_1x-alt px-medium text-size-body-md",
+        sm: "py-small-1x px-small text-size-label-sm",
+        icon_md: "p-small text-size-body-md h-large-4x w-large-4x",
+        icon_sm: "p-small-1x text-size-label-sm h-large-2x w-large-2x"
+      },
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        destructive: "",
+        outlined: "bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"
+      },
+      appearance: {
+        solid: "",
+        ghost: "bg-transparent"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        appearance: "solid",
+        class: "bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"
+      },
+      {
+        variant: "primary",
+        appearance: "ghost",
+        class: "text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"
+      },
+      {
+        variant: "secondary",
+        appearance: "solid",
+        class: "bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"
+      },
+      {
+        variant: "secondary",
+        appearance: "ghost",
+        class: "hover:bg-layer-1-hover active:bg-layer-1-pressed"
+      },
+      {
+        variant: "tertiary",
+        appearance: "solid",
+        class: "bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"
+      },
+      {
+        variant: "tertiary",
+        appearance: "ghost",
+        class: "hover:bg-layer-2-hover active:bg-layer-2-pressed"
+      },
+      {
+        variant: "destructive",
+        appearance: "solid",
+        class: "bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"
+      },
+      {
+        variant: "destructive",
+        appearance: "ghost",
+        class: "text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "primary",
+      appearance: "solid"
+    }
+  }
+);
+function Button({
+  asChild,
+  className,
+  variant = "primary",
+  size = "md",
+  appearance = "solid",
+  ...props
+}) {
+  const Component = asChild ? Slot2 : "button";
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      className: cx(buttonVariants({ variant, appearance, size }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/search-input.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SearchInputRootContext = createContext({
+  variant: "outlined"
+});
+function SearchInputRoot({
+  className,
+  variant = "outlined",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(SearchInputRootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx3("div", { className: cx2(className, "relative flex w-full"), ...props }) });
+}
+function SearchInputContent({
+  className,
+  ...props
+}) {
+  const contentVarians = cva3(
+    [
+      "gap-small py-small_1x-alt px-small flex items-center w-full",
+      "h-large-4x rounded-circle",
+      "border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal",
+      "group-hover:border-border-layer-3 transition-colors duration-200",
+      "disabled:opacity-60",
+      "focus-within:border-primary-idle"
+    ],
+    {
+      variants: {
+        variant: {
+          outlined: "rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary",
+          line: "rounded-none border-t-0 border-b-1 border-x-0",
+          action: "rounded-tr-none rounded-br-none border-r-0"
+        }
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx3(SearchInputRootContext.Consumer, { children: ({ variant }) => /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cx2(className, contentVarians({ variant })),
+      "data-variant": variant,
+      ...props
+    }
+  ) });
+}
+function SearchInputLabel({
+  htmlFor,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    Typography,
+    {
+      asChild: true,
+      className: cx2("absolute -top-[22px] left-0"),
+      size: "sm",
+      variant: "label",
+      weight: "medium",
+      children: /* @__PURE__ */ jsx3("label", { htmlFor, ...props })
+    }
+  );
+}
+function SearchInputText({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3("input", { className: cx2(className, "flex-1 outline-none"), ...props });
+}
+function SearchInputSlot(props) {
+  return /* @__PURE__ */ jsx3("div", { ...props, "data-slot": "search-input-slot" });
+}
+function SearchInputAction({
+  className,
+  appearance = "ghost",
+  variant = "outlined",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      ...props,
+      appearance,
+      className: cx2(
+        className,
+        "cursor-pointer",
+        "h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none",
+        "text-size-body-md text-neutral-dark gap-small-1x"
+      ),
+      "data-slot": "search-input-action",
+      variant
+    }
+  );
+}
+export {
+  SearchInputAction,
+  SearchInputContent,
+  SearchInputLabel,
+  SearchInputRoot,
+  SearchInputSlot,
+  SearchInputText
+};

package/dist/components/select.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { ListContent, ListItem, ListHeader, ListHeaderTitle } from './list.js';
+import { SearchInputText } from './search-input.js';
+import { TypographyProps, Typography } from './typography.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';
+import './button.js';
+
+declare function SelectRoot(props: ComponentProps<typeof RadixPopover.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, ...props }: ComponentProps<typeof RadixPopover.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, sideOffset, side, align, ...props }: ComponentProps<typeof RadixPopover.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ className, displayValue, ...props }: ComponentProps<'input'> & {
+    displayValue?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SelectMultiValue({ className, values, children, ...props }: ComponentProps<'div'> & {
+    values: string[];
+}): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, htmlFor, children, ...props }: TypographyProps & {
+    htmlFor?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SelectOptions(props: ComponentProps<typeof ListContent>): react_jsx_runtime.JSX.Element;
+declare function SelectOption({ className, ...props }: ComponentProps<typeof ListItem>): react_jsx_runtime.JSX.Element;
+declare function SelectOptionText(props: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
+declare function SelectHeader(props: ComponentProps<typeof ListHeader>): react_jsx_runtime.JSX.Element;
+declare function SelectHeaderTitle(props: ComponentProps<typeof ListHeaderTitle>): react_jsx_runtime.JSX.Element;
+declare function SelectDropdown(props: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SelectRightSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SelectSearch(props: ComponentProps<typeof SearchInputText>): react_jsx_runtime.JSX.Element;
+
+export { SelectContent, SelectDropdown, SelectHeader, SelectHeaderTitle, SelectLabel, SelectLeftSlot, SelectMultiValue, SelectOption, SelectOptionText, SelectOptions, SelectRightSlot, SelectRoot, SelectSearch, SelectTrigger, SelectValue };