@a2v2ai/uikit 0.0.37 → 0.0.38

package/Flex/Flex.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse"
+type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline"
+type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly"
+type FlexWrap = "nowrap" | "wrap" | "wrap-reverse"
+type FlexGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48
+
+const flexVariants = cva("flex", {
+  variants: {
+    direction: {
+      row: "flex-row",
+      column: "flex-col",
+      "row-reverse": "flex-row-reverse",
+      "column-reverse": "flex-col-reverse",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly",
+    },
+    wrap: {
+      nowrap: "flex-nowrap",
+      wrap: "flex-wrap",
+      "wrap-reverse": "flex-wrap-reverse",
+    },
+    gap: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      3: "gap-3",
+      4: "gap-4",
+      5: "gap-5",
+      6: "gap-6",
+      8: "gap-8",
+      10: "gap-10",
+      12: "gap-12",
+      16: "gap-16",
+      20: "gap-20",
+      24: "gap-24",
+      32: "gap-32",
+      40: "gap-40",
+      48: "gap-48",
+    },
+  },
+  defaultVariants: {
+    direction: "column",
+    align: "start",
+    justify: "start",
+    wrap: "nowrap",
+    gap: 0,
+  },
+})
+
+type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
+  direction?: FlexDirection
+  align?: FlexAlign
+  justify?: FlexJustify
+  wrap?: FlexWrap
+  gap?: FlexGap
+  as?: React.ElementType
+}
+
+const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
+  (
+    {
+      className,
+      direction,
+      align,
+      justify,
+      wrap,
+      gap,
+      as: Component = "div",
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(flexVariants({ direction, align, justify, wrap, gap, className }))}
+        {...props}
+      />
+    )
+  }
+)
+Flex.displayName = "Flex"
+
+export { Flex, flexVariants }
+export type { FlexProps, FlexDirection, FlexAlign, FlexJustify, FlexWrap, FlexGap }