@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/library/ui/Select.tsx

@@ -1,113 +0,0 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-
-function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
-  return (
-    <SelectPrimitive.Trigger
-      className={[
-        "flex h-10 w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2",
-        "text-sm text-slate-900 placeholder:text-slate-400",
-        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:focus:ring-offset-slate-950",
-        className
-      ].filter(Boolean).join(" ")}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
-          <path
-            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z"
-            fill="currentColor"
-          />
-        </svg>
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value {...props} />;
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        className={[
-          "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-900 shadow-md",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        ].filter(Boolean).join(" ")}
-        position={position}
-        {...props}
-      >
-        <SelectPrimitive.Viewport
-          className={[
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ].filter(Boolean).join(" ")}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      className={[
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-        "focus:bg-slate-100 focus:text-slate-900",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        "dark:focus:bg-slate-800 dark:focus:text-slate-50",
-        className
-      ].filter(Boolean).join(" ")}
-      {...props}
-    >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
-            <path
-              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-              fill="currentColor"
-            />
-          </svg>
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-export {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-};

package/src/components/library/ui/Spinner.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-
-const SIZE_CLASSES = {
-  xs: "h-3 w-3",
-  sm: "h-4 w-4",
-  md: "h-5 w-5",
-  lg: "h-6 w-6",
-  xl: "h-8 w-8",
-} as const;
-
-const TONE_CLASSES = {
-  brand: "text-brand-500",
-  white: "text-white",
-  muted: "text-slate-400 dark:text-slate-500",
-  current: "text-current",
-} as const;
-
-export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
-  size?: keyof typeof SIZE_CLASSES;
-  tone?: keyof typeof TONE_CLASSES;
-  label?: string;
-}
-
-/**
- * Animated spinner.
- */
-export default function Spinner({
-  size = "md",
-  tone = "brand",
-  label = "Loading",
-  className = "",
-  ...rest
-}: SpinnerProps) {
-  return (
-    <svg
-      {...rest}
-      className={[
-        "animate-spin",
-        SIZE_CLASSES[size],
-        TONE_CLASSES[tone],
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      role="status"
-      aria-label={label}
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-}

package/src/components/library/ui/Text.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-
-const SIZE_CLASSES = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg",
-  xl: "text-xl",
-  xxl: "text-2xl"
-} as const;
-
-const WEIGHT_CLASSES = {
-  regular: "font-normal",
-  medium: "font-medium",
-  bold: "font-semibold"
-} as const;
-
-export interface UITextProps<T extends React.ElementType = "span"> {
-  as?: T;
-  size?: keyof typeof SIZE_CLASSES;
-  weight?: keyof typeof WEIGHT_CLASSES;
-  muted?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export default function UIText<T extends React.ElementType = "span">({
-  as,
-  size = "md",
-  weight = "regular",
-  muted = false,
-  className = "",
-  children,
-  ...rest
-}: UITextProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof UITextProps<T>>) {
-  const Comp = as || "span";
-
-  return (
-    <Comp
-      className={[
-        SIZE_CLASSES[size],
-        WEIGHT_CLASSES[weight],
-        muted ? "text-slate-600 dark:text-slate-300" : "text-slate-900 dark:text-slate-50",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </Comp>
-  );
-}

package/src/components/library/ui/UIButton.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-
-const VARIANT_CLASSES = {
-  primary:
-    "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent",
-  secondary:
-    "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
-  destructive:
-    "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
-  outline:
-    "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
-  ghost:
-    "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
-  link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent"
-} as const;
-
-const SIZE_CLASSES = {
-  sm: "h-8 px-3 text-sm",
-  md: "h-10 px-4 text-sm",
-  lg: "h-12 px-5 text-base",
-  icon: "h-10 w-10 p-0"
-} as const;
-
-export interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: keyof typeof VARIANT_CLASSES;
-  size?: keyof typeof SIZE_CLASSES;
-  fullWidth?: boolean;
-}
-
-export default function UIButton({
-  variant = "primary",
-  size = "md",
-  fullWidth = false,
-  disabled = false,
-  className = "",
-  children,
-  ...rest
-}: UIButtonProps) {
-  const variantClass = VARIANT_CLASSES[variant];
-  const sizeClass = SIZE_CLASSES[size];
-
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      className={[
-        "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
-        "disabled:cursor-not-allowed disabled:opacity-60",
-        variantClass,
-        sizeClass,
-        fullWidth ? "w-full" : "",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-}

package/src/components/library/ui/UIInput.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-export interface UIInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export default function UIInput({ className = "", ...rest }: UIInputProps) {
-  return (
-    <input
-      className={[
-        "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm",
-        "placeholder:text-slate-400",
-        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
-        "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    />
-  );
-}