@edu-tosel/design 1.0.301 → 1.0.303

package/modal/design/ConfirmModal.design.js

@@ -2,17 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label } from "../../widget";
 import { cn } from "../../util";
 import ModalDesign from "../design/Modal.design";
+import { useResponsive } from "../../hook";
 export default function ConfirmModalDesign({ titles, showAction, buttons, children, option, }) {
     const container = {
-        displays: "flex flex-col",
+        displays: "flex flex-col justify-between",
     };
     const buttonBox = {
-        positions: "absolute bottom-4 md:bottom-5 right-2 md:right-5",
-        displays: "flex gap-1 md:gap-2.5",
+        positions: "absolute bottom-3.5 right-3.5",
+        displays: "flex flex-row gap-1 sm:gap-x-3.5",
     };
+    const isSm = useResponsive("sm");
     return (_jsx(ModalDesign, { titles: titles, showAction: showAction, option: option, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, option, disabled }) => (_jsx(Label.Button, { title: title, onClick: onClick, disabled: disabled, option: {
                             ...option,
-                            width: option?.width ?? "lg",
+                            width: isSm ? option?.width ?? "lg" : "sm",
                             height: "sm",
                         } }, title))) })] }) }));
 }

package/modal/design/Modal.design.js

@@ -59,7 +59,7 @@ function ModalDesign({ titles, showAction, children, option, debug, }) {
     const { width, height, noClose, boundary, position } = option ?? {};
     const { event } = showAction ?? {};
     const container = {
-        paddings: "p-5 md:p-5",
+        paddings: "p-5",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
         styles: "rounded-xl bg-white relative overflow-hidden",
         shadows: !!position && (boundary ?? "box-shadow"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.301",
+  "version": "1.0.303",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -4,7 +4,62 @@ import type { PluginAPI } from "tailwindcss/types/config";
 
 // import twElements from "tw-elements/dist/plugin";
 // import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
-import safelist from "./tailwind.config.safelist";
+
+const colors = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+];
+const intensities = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+];
+const variants = ["hover"];
+const safelist = [
+  ...colors.flatMap((color) =>
+    intensities.map((intensity) => `bg-${color}-${intensity}`)
+  ),
+  ...colors.flatMap((color) =>
+    intensities.map((intensity) => `text-${color}-${intensity}`)
+  ),
+  ...variants.flatMap((variant) =>
+    colors.flatMap((color) =>
+      intensities.map((intensity) => `${variant}:bg-${color}-${intensity}`)
+    )
+  ),
+  ...variants.flatMap((variant) =>
+    colors.flatMap((color) =>
+      intensities.map((intensity) => `${variant}:text-${color}-${intensity}`)
+    )
+  ),
+];
 
 export default {
   content: [

package/version.txt

@@ -1 +1 @@
-1.0.301
+1.0.303

package/widget/design/Label.design.js

@@ -5,10 +5,10 @@ const widthSize = {
     "4xs": "w-7",
     "3xs": "w-10",
     "2xs": "w-13",
-    xs: "w-20",
-    sm: "w-22.5",
-    md: "w-45",
-    lg: "w-50",
+    xs: "min-w-20",
+    sm: "min-w-22.5",
+    md: "min-w-45",
+    lg: "min-w-50",
     full: "w-full",
     auto: "w-auto",
 };
@@ -40,6 +40,7 @@ export default function LabelDesign({ title, onClick, disabled, option, hoverSta
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-var font-medium",
+        paddings: "px-3.5",
         boundary,
         styles: height === "xs" ||
             height === "2xs" ||

package/tailwind.config.safelist.ts

@@ -1,63 +0,0 @@
-const colors = [
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-];
-const intensities = [
-  "50",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-];
-const variants = ["hover"];
-const safelist = [
-  // bg-{color}-{intensity}
-  ...colors.flatMap((color) =>
-    intensities.map((intensity) => `bg-${color}-${intensity}`)
-  ),
-
-  // text-{color}-{intensity}
-  ...colors.flatMap((color) =>
-    intensities.map((intensity) => `text-${color}-${intensity}`)
-  ),
-
-  // hover:bg-{color}-{intensity}
-  ...variants.flatMap((variant) =>
-    colors.flatMap((color) =>
-      intensities.map((intensity) => `${variant}:bg-${color}-${intensity}`)
-    )
-  ),
-
-  // hover:text-{color}-{intensity}
-  ...variants.flatMap((variant) =>
-    colors.flatMap((color) =>
-      intensities.map((intensity) => `${variant}:text-${color}-${intensity}`)
-    )
-  ),
-];
-export default safelist;