@alif-ui-test/core 1.11.0

package/dist/components/Transition/Transition.utils.js

@@ -0,0 +1,152 @@
+const a = {
+  x: (t) => `translateX(${t}px)`,
+  y: (t) => `translateY(${t}px)`
+}, l = () => ({
+  enter: { opacity: 1 },
+  exit: { opacity: 0 },
+  transitionProperty: "opacity"
+}), n = (t, o) => ({
+  enter: {
+    opacity: 1,
+    transform: t === "X" ? a.x(0) : a.y(0)
+  },
+  exit: {
+    opacity: 0,
+    transform: t === "X" ? a.x(o) : a.y(o)
+  },
+  transitionProperty: "opacity, transform"
+}), i = (t) => ({
+  enter: { opacity: 1, transform: `scale${t ?? ""}(1)` },
+  exit: { opacity: 0, transform: `scale${t ?? ""}(0)` },
+  base: {
+    transformOrigin: t === "X" ? "left" : "top"
+  },
+  transitionProperty: "transform, opacity"
+}), s = (t) => ({
+  enter: { opacity: 1, transform: "translateY(0) skew(0deg, 0deg)" },
+  exit: {
+    opacity: 0,
+    transform: `translateY(${t === "top" ? "-20px" : "20px"}) skew(-10deg, -5deg)`
+  },
+  base: {
+    transformOrigin: t === "top" ? "top" : "bottom"
+  },
+  transitionProperty: "transform, opacity"
+}), p = (t) => ({
+  enter: { opacity: 1, transform: "translateY(0) rotate(0deg)" },
+  exit: {
+    opacity: 0,
+    transform: `translateY(20px) rotate(${t === "left" ? "-5deg" : "5deg"})`
+  },
+  base: {
+    transformOrigin: t === "left" ? "bottom" : "top"
+  },
+  transitionProperty: "transform, opacity"
+}), r = (t) => ({
+  enter: { opacity: 1, transform: "scale(1)" },
+  exit: {
+    opacity: 0,
+    transform: `scale(0.9) translateY(${t === "bottom" ? 10 : -10}px)`
+  },
+  transitionProperty: "transform, opacity"
+}), g = () => ({
+  enter: {
+    opacity: 1,
+    display: "grid",
+    gridTemplateRows: "1fr"
+  },
+  exit: {
+    opacity: 0,
+    display: "grid",
+    gridTemplateRows: "0fr"
+  },
+  transitionProperty: "grid-template-rows, opacity"
+}), d = {
+  fade: l(),
+  "fade-up": n("Y", 20),
+  "fade-down": n("Y", -20),
+  "fade-left": n("X", 20),
+  "fade-right": n("X", -20),
+  "slide-down": {
+    enter: { opacity: 1, transform: "translateY(0)" },
+    exit: { opacity: 0, transform: "translateY(-100%)" },
+    base: { transformOrigin: "top" },
+    transitionProperty: "transform, opacity"
+  },
+  "slide-up": {
+    enter: { opacity: 1, transform: "translateY(0)" },
+    exit: { opacity: 0, transform: "translateY(100%)" },
+    base: { transformOrigin: "bottom" },
+    transitionProperty: "transform, opacity"
+  },
+  "slide-left": {
+    enter: { opacity: 1, transform: "translateX(0)" },
+    exit: { opacity: 0, transform: "translateX(100%)" },
+    base: { transformOrigin: "left" },
+    transitionProperty: "transform, opacity"
+  },
+  "slide-right": {
+    enter: { opacity: 1, transform: "translateX(0)" },
+    exit: { opacity: 0, transform: "translateX(-100%)" },
+    base: { transformOrigin: "right" },
+    transitionProperty: "transform, opacity"
+  },
+  scale: i(),
+  "scale-x": i("X"),
+  "scale-y": i("Y"),
+  "skew-up": s("top"),
+  "skew-down": s("bottom"),
+  "rotate-left": p("left"),
+  "rotate-right": p("right"),
+  pop: {
+    ...r("bottom"),
+    base: { transformOrigin: "center center" }
+  },
+  "pop-top-left": {
+    ...r("top"),
+    base: { transformOrigin: "top left" }
+  },
+  "pop-top-right": {
+    ...r("top"),
+    base: { transformOrigin: "top right" }
+  },
+  "pop-bottom-left": {
+    ...r("bottom"),
+    base: { transformOrigin: "bottom left" }
+  },
+  "pop-bottom-right": {
+    ...r("bottom"),
+    base: { transformOrigin: "bottom right" }
+  },
+  collapser: g()
+}, b = {
+  entering: "enter",
+  entered: "enter",
+  exiting: "exit",
+  exited: "exit",
+  "pre-exiting": "exit",
+  "pre-entering": "exit"
+};
+function x({
+  transition: t,
+  status: o,
+  duration: f,
+  timingFunction: c
+}) {
+  const m = b[o], y = {
+    WebkitBackfaceVisibility: "hidden",
+    willChange: "transform, opacity",
+    transitionDuration: `${f}ms`,
+    transitionTimingFunction: c
+  }, e = typeof t == "string" ? d[t] : t;
+  return e ? {
+    ...y,
+    transitionProperty: e.transitionProperty,
+    ...e.base ?? {},
+    ...e[m]
+  } : {};
+}
+export {
+  x as getTransitionStyles,
+  d as transitions
+};

package/dist/components/Typography/Typography.js

@@ -0,0 +1,23 @@
+import { jsx as c } from "react/jsx-runtime";
+import { resolveTypography as i } from "../../utils/typography.js";
+const v = ({
+  category: e,
+  proportions: o,
+  color: r,
+  margin: t,
+  className: s,
+  style: l = {},
+  element: n = "p",
+  ...p
+}) => {
+  const y = n, m = {
+    ...i(e, o),
+    color: r,
+    margin: t || 0,
+    ...l
+  };
+  return /* @__PURE__ */ c(y, { style: m, className: s, ...p });
+};
+export {
+  v as Typography
+};

package/dist/components/Typography/Typography.types.js

@@ -0,0 +1 @@
+