ar-design 0.1.13 → 0.1.14

package/dist/assets/css/components/data-display/card/card.css

@@ -0,0 +1,15 @@
+.ar-card {
+  background-color: var(--white);
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+}
+.ar-card > .title {
+  padding: 1rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+.ar-card > .title > .ar-typography-title {
+  margin-bottom: 0 !important;
+}
+.ar-card > .content {
+  padding: 1rem;
+}

package/dist/assets/css/components/data-display/typography/paragraph/core.css

@@ -1,5 +1,5 @@
 .ar-typography-paragraph {
-  margin-bottom: 1rem;
+  margin-bottom: 0.25rem;
   color: var(--gray-900);
   font-family: var(--system);
 }

package/dist/assets/css/components/data-display/typography/paragraph/size.css

@@ -0,0 +1,8 @@
+.ar-typography-paragraph.large {
+  font-size: 1.25rem;
+}
+.ar-typography-paragraph.normal {
+}
+.ar-typography-paragraph.small {
+  font-size: 0.75rem;
+}

package/dist/assets/css/components/data-display/typography/typography.css

@@ -8,3 +8,4 @@
 @import url("./paragraph/core.css");
 @import url("./paragraph/color.css");
 @import url("./paragraph/align.css");
+@import url("./paragraph/size.css");

package/dist/assets/css/components/form/switch/core/border.css

@@ -0,0 +1,80 @@
+/* #region Border Color -> PRIMARY */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary {
+  box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary > .xxy {
+  box-shadow: 0 0 0 2.5px var(--primary);
+}
+/* #endregion */
+/* Border Color -> PRIMARY */
+
+/* #region Border Color -> SECONDARY */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary {
+  box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary > .xxy {
+  box-shadow: 0 0 0 2.5px var(--secondary);
+}
+/* #endregion */
+/* Border Color -> SECONDARY */
+
+/* #region Border Color -> SUCCESS */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.success {
+  box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.success > .xxy {
+  box-shadow: 0 0 0 2.5px var(--success);
+}
+/* #endregion */
+/* Border Color -> SUCCESS */
+
+/* #region Border Color -> WARNING */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.warning {
+  box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.warning > .xxy {
+  box-shadow: 0 0 0 2.5px var(--warning);
+}
+/* #endregion */
+/* Border Color -> WARNING */
+
+/* #region Border Color -> DANGER */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.danger {
+  box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.danger > .xxy {
+  box-shadow: 0 0 0 2.5px var(--danger);
+}
+/* #endregion */
+/* Border Color -> DANGER */
+
+/* #region Border Color -> INFORMATION */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.information {
+  box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.information > .xxy {
+  box-shadow: 0 0 0 2.5px var(--information);
+}
+/* #endregion */
+/* Border Color -> INFORMATION */
+
+/* #region Border Color -> DARK */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.dark {
+  box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.dark > .xxy {
+  box-shadow: 0 0 0 2.5px var(--dark);
+}
+/* #endregion */
+/* Border Color -> DARK */
+
+/* #region Border Color -> LIGHT */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.light {
+  box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.light > .xxy {
+  box-shadow: 0 0 0 2.5px var(--light);
+}
+/* #endregion */
+/* Border Color -> LIGHT */
+

package/dist/assets/css/components/form/switch/switch.css

@@ -0,0 +1,47 @@
+.ar-switch-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  height: var(--input-height);
+}
+.ar-switch-wrapper > label {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0 0.5rem;
+  width: 100%;
+  user-select: none;
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]) {
+  display: none;
+}
+
+.ar-switch-wrapper > label > .ar-switch {
+  position: relative;
+  display: inline-block;
+  width: 2.25rem;
+  height: 1rem;
+  transition: box-shadow 250ms ease-in-out;
+}
+
+.ar-switch-wrapper > label > :is(input[type="checkbox"]) + .ar-switch > .xxy {
+  position: absolute;
+  top: 50%;
+  left: 0.15rem;
+  transform: translateY(-50%);
+  display: inline-block;
+  content: "";
+  background-color: var(--white);
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: left 150ms, width 150ms 350ms, height 150ms 350ms, box-shadow 150ms 500ms ease-in-out;
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch > .xxy {
+  left: calc(2.25rem - 0.9rem);
+  width: 1rem;
+  height: 1rem;
+}
+
+@import url("./core/border.css");

package/dist/assets/css/components/layout/grid-system/row/core.css

@@ -6,6 +6,9 @@
   margin-top: -0.75rem;
   margin-left: -0.75rem;
 }
+.row:has(+ .row) {
+  margin-bottom: 0.75rem;
+}
 .row > * {
   padding-top: 0.75rem;
   padding-left: 0.75rem;

package/dist/assets/css/components/layout/layout.css

@@ -38,10 +38,4 @@
   min-width: calc(60% - 5%);
 }
 
-.ar-layout > main > aside.ar-aside.right {
-  background-color: var(--white);
-  padding: 1rem;
-  border-radius: var(--border-radius-lg);
-}
-
 @import url("./header.css");

package/dist/assets/css/core/ar-core.css

@@ -174,6 +174,13 @@
   color: var(--gray-500) !important;
   cursor: no-drop !important;
 }
+:is(input, button):is(.outlined):disabled {
+  background-color: transparent !important;
+}
+:is(input, button):is(.dashed):disabled {
+  background-color: transparent !important;
+  border: dashed 1px var(--gray-500) !important;
+}
 :is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.borderless) {
   background-color: var(--gray-100) !important;
   color: var(--gray-500) !important;

package/dist/components/data-display/card/Types.d.ts

@@ -0,0 +1,4 @@
+export type Props = {
+    children: React.JSX.Element | string;
+    title?: string;
+};

package/dist/components/data-display/card/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-display/card/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Props } from "./Types";
+import "../../../assets/css/components/data-display/card/card.css";
+declare const Card: React.FC<Props>;
+export default Card;

package/dist/components/data-display/card/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Typography from "../typography";
+import "../../../assets/css/components/data-display/card/card.css";
+const { Title } = Typography;
+const Card = ({ children, title }) => {
+    return (React.createElement("div", { className: "ar-card" },
+        React.createElement("div", { className: "title" },
+            React.createElement(Title, { Level: "h4" }, title || "")),
+        React.createElement("div", { className: "content" }, children)));
+};
+export default Card;

package/dist/components/data-display/typography/paragraph/Paragraph.js

@@ -1,12 +1,14 @@
 "use client";
 import React, { useRef } from "react";
-const Paragraph = ({ children, color, align = "left", upperCase = false }) => {
+const Paragraph = ({ children, color, align = "left", size, upperCase = false, }) => {
     // refs
     let _className = useRef("ar-typography-paragraph").current;
     if (align)
         _className += ` ${align}`;
     if (color)
         _className += ` ${color}`;
+    if (size)
+        _className += ` ${size}`;
     return React.createElement("p", { className: _className }, upperCase ? children.toLocaleUpperCase() : children);
 };
 Paragraph.displayName = "Paragraph";

package/dist/components/data-display/typography/paragraph/Types.d.ts

@@ -4,5 +4,6 @@ export type Props = {
     children: string;
     color?: ParagraphColors | Colors;
     align?: "left" | "center" | "right";
+    size?: "small" | "normal" | "large";
     upperCase?: boolean;
 };

package/dist/components/form/checkbox/index.js

@@ -3,22 +3,32 @@ import React, { useRef } from "react";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
 const Checkbox = ({ label, variant = "outlined", status = "primary", border, ...attributes }) => {
     // refs
-    let _wrapperClassName = useRef("ar-checkbox-wrapper").current;
-    let _checkboxClassName = useRef("ar-checkbox").current;
+    let _checkbox = useRef(null);
+    let _wrapperClassName = "ar-checkbox-wrapper";
+    let _checkboxClassName = "ar-checkbox";
     // checkbox -> variant
     if (variant)
         _checkboxClassName += ` ${variant}`;
     // status
-    if (status)
-        _checkboxClassName += ` ${status}`;
+    _checkboxClassName += ` light`;
     // border
     _checkboxClassName += ` border-style-solid`;
     _checkboxClassName += ` border-radius-${border?.radius || "sm"}`;
     return (React.createElement("div", { className: _wrapperClassName },
         React.createElement("label", null,
-            React.createElement("input", { type: attributes.type || "checkbox", ...attributes }),
+            React.createElement("input", { type: attributes.type || "checkbox", ...attributes, onChange: (event) => {
+                    (() => {
+                        const _current = _checkbox.current;
+                        if (!_current)
+                            return;
+                        event.target.checked
+                            ? _current.classList.replace("light", status)
+                            : _current.classList.replace(status, "light");
+                    })();
+                    (() => attributes.onChange && attributes.onChange(event))();
+                } }),
             React.createElement("span", null,
-                React.createElement("span", { className: _checkboxClassName }),
+                React.createElement("span", { ref: _checkbox, className: _checkboxClassName }),
                 label && React.createElement("span", { className: "label" }, label)))));
 };
 Checkbox.displayName = "Checkbox";

package/dist/components/form/switch/Types.d.ts

@@ -0,0 +1,8 @@
+import { Colors } from "../../../libs/types";
+export type Props = {
+    label?: string;
+    status?: Colors;
+    border?: {
+        radius: "sm" | "pill";
+    };
+} & React.InputHTMLAttributes<HTMLInputElement>;

package/dist/components/form/switch/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/switch/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Props } from "./Types";
+import "../../../assets/css/components/form/switch/switch.css";
+declare const Switch: React.FC<Props>;
+export default Switch;

package/dist/components/form/switch/index.js

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+import "../../../assets/css/components/form/switch/switch.css";
+const Switch = ({ label, status = "primary", border, ...attributes }) => {
+    // refs
+    let _switch = useRef(null);
+    // variables
+    let _wrapperClassName = "ar-switch-wrapper";
+    let _switchClassName = `ar-switch filled`;
+    let _xxyClassName = `xxy`;
+    // status
+    _switchClassName += ` light`;
+    // border
+    _switchClassName += ` border-style-solid`;
+    _switchClassName += ` border-radius-${border?.radius || "pill"}`;
+    _xxyClassName += ` border-radius-${border?.radius || "pill"}`;
+    return (React.createElement("div", { className: _wrapperClassName },
+        React.createElement("label", null,
+            React.createElement("input", { type: attributes.type || "checkbox", ...attributes, onChange: (event) => {
+                    (() => {
+                        const _current = _switch.current;
+                        if (!_current)
+                            return;
+                        event.target.checked
+                            ? _current.classList.replace("light", status)
+                            : _current.classList.replace(status, "light");
+                    })();
+                    (() => attributes.onChange && attributes.onChange(event))();
+                } }),
+            React.createElement("span", { ref: _switch, className: _switchClassName },
+                React.createElement("span", { className: _xxyClassName })),
+            label && React.createElement("span", { className: "label" }, label))));
+};
+Switch.displayName = "Switch";
+export default Switch;

package/dist/components/layout/LSider.js

@@ -4,7 +4,10 @@ import useLayout from "../../libs/core/application/hooks/useLayout";
 const LSider = () => {
     // hooks
     const { options } = useLayout();
-    return (options?.sider?.left?.active && (React.createElement("aside", { className: "ar-aside left" }, options?.sider?.left?.element)));
+    const sider = options?.sider?.left;
+    if (!sider?.active)
+        return null;
+    return React.createElement("aside", { className: "ar-aside left" }, sider.element);
 };
 LSider.displayName = "Layout.LSider";
 export default LSider;

package/dist/components/layout/RSider.js

@@ -4,7 +4,10 @@ import useLayout from "../../libs/core/application/hooks/useLayout";
 const RSider = () => {
     // hooks
     const { options } = useLayout();
-    return (options?.sider?.right?.element && (React.createElement("aside", { className: "ar-aside right" }, options?.sider?.right?.element)));
+    const sider = options?.sider?.right;
+    if (!sider?.active)
+        return null;
+    return React.createElement("aside", { className: "ar-aside right" }, sider.element);
 };
 RSider.displayName = "Layout.RSider";
 export default RSider;

package/dist/index.d.ts

@@ -4,7 +4,9 @@ import ButtonGroup from "./components/form/button-group";
 import Input from "./components/form/input";
 import Select from "./components/form/select";
 import Checkbox from "./components/form/checkbox";
+import Switch from "./components/form/switch";
 import Radio from "./components/form/radio";
+import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Typography from "./components/data-display/typography";
 import Divider from "./components/data-display/divider";
@@ -14,4 +16,4 @@ import Menu from "./components/navigation/menu";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
 import useLayout from "./libs/core/application/hooks/useLayout";
-export { Button, ButtonGroup, Input, Select, Checkbox, Radio, Chip, Typography, Divider, Alert, Menu, Grid, Layout, useLayout, SyntaxHighlighter, };
+export { Button, ButtonGroup, Input, Select, Switch, Checkbox, Radio, Card, Chip, Typography, Divider, Alert, Menu, Grid, Layout, useLayout, SyntaxHighlighter, };

package/dist/index.js

@@ -5,8 +5,10 @@ import ButtonGroup from "./components/form/button-group";
 import Input from "./components/form/input";
 import Select from "./components/form/select";
 import Checkbox from "./components/form/checkbox";
+import Switch from "./components/form/switch";
 import Radio from "./components/form/radio";
 // Data Display
+import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Typography from "./components/data-display/typography";
 import Divider from "./components/data-display/divider";
@@ -22,9 +24,9 @@ import useLayout from "./libs/core/application/hooks/useLayout";
 // Others
 export { 
 // Form Elements
-Button, ButtonGroup, Input, Select, Checkbox, Radio, 
+Button, ButtonGroup, Input, Select, Switch, Checkbox, Radio, 
 // Data Display
-Chip, Typography, Divider, 
+Card, Chip, Typography, Divider, 
 // Feedback
 Alert, 
 // Navigation

package/dist/libs/core/application/contexts/Layout.d.ts

@@ -12,12 +12,12 @@ type LayoutOptions = {
     };
 };
 type LayoutContextProps = {
-    options: Partial<LayoutOptions>;
-    setOptions: React.Dispatch<React.SetStateAction<Partial<LayoutOptions>>>;
+    options: LayoutOptions;
+    setOptions: React.Dispatch<React.SetStateAction<LayoutOptions>>;
 };
 type LayoutProviderProps = {
     children: React.ReactNode;
 };
-declare const LayoutContext: React.Context<Partial<LayoutContextProps>>;
+declare const LayoutContext: React.Context<LayoutContextProps>;
 declare const LayoutProvider: ({ children }: LayoutProviderProps) => React.JSX.Element;
 export { LayoutContext, LayoutProvider };

package/dist/libs/core/application/contexts/Layout.js

@@ -1,8 +1,17 @@
 "use client";
 import React, { createContext, useState } from "react";
-const LayoutContext = createContext({});
+const defaultOptions = {
+    sider: {
+        left: { element: null, active: false },
+        right: { element: null, active: false },
+    },
+};
+const LayoutContext = createContext({
+    options: defaultOptions,
+    setOptions: () => { },
+});
 const LayoutProvider = ({ children }) => {
-    const [options, setOptions] = useState({});
+    const [options, setOptions] = useState(defaultOptions);
     return (React.createElement(LayoutContext.Provider, { value: { options, setOptions } }, children));
 };
 export { LayoutContext, LayoutProvider };

package/dist/libs/core/application/hooks/useLayout.d.ts

@@ -1,5 +1,5 @@
-declare const useLayout: () => Partial<{
-    options: Partial<{
+declare const useLayout: () => {
+    options: {
         sider: {
             left?: {
                 element?: import("react").ReactNode;
@@ -10,8 +10,8 @@ declare const useLayout: () => Partial<{
                 active: boolean;
             };
         };
-    }>;
-    setOptions: import("react").Dispatch<import("react").SetStateAction<Partial<{
+    };
+    setOptions: import("react").Dispatch<import("react").SetStateAction<{
         sider: {
             left?: {
                 element?: import("react").ReactNode;
@@ -22,6 +22,6 @@ declare const useLayout: () => Partial<{
                 active: boolean;
             };
         };
-    }>>>;
-}>;
+    }>>;
+};
 export default useLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",