lucentia-ui 0.1.7 → 0.1.8

package/README.md

@@ -96,20 +96,15 @@ ThemeProvider は：
 
 という役割を持ちます。
 
-### テーマ切り替え例(Next.js)
+## テーマ設定例
 
 ```tsx
-import { useState } from "react";
 import { ThemeProvider, Button } from "lucentia-ui";
 
 export default function App() {
-  const [theme, setTheme] = useState<"light" | "dark">("light");
-
   return (
-    <ThemeProvider theme={theme}>
-      <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
-        Toggle theme
-      </Button>
+    <ThemeProvider theme="dark">
+    {children}
     </ThemeProvider>
   );
 }

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import type { DividerProps } from "./types";
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Divider.module.css";
+export const Divider = ({ orientation = "horizontal", variant = "default", className, }) => {
+    return (_jsx("div", { role: "separator", "aria-orientation": orientation, "data-orientation": orientation, "data-variant": variant, className: [styles.divider, className].filter(Boolean).join(" ") }));
+};

package/dist/components/Divider/Divider.module.css

@@ -0,0 +1,28 @@
+.divider {
+  background: var(--color-border);
+  flex-shrink: 0;
+}
+
+/* orientation */
+.divider[data-orientation="horizontal"] {
+  width: 100%;
+  height: 2px;
+}
+
+.divider[data-orientation="vertical"] {
+  width: 2px;
+  height: 100%;
+}
+
+
+/* variants */
+
+.divider[data-variant="groove"][data-orientation="horizontal"]{
+  box-shadow: var(--shadow-sm-in);
+  height: 4px;
+}
+
+.divider[data-variant="groove"][data-orientation="vertical"]{
+  box-shadow: var(--shadow-sm-in);
+  width: 4px;
+}

package/dist/components/Divider/Divider.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Divider } from "./Divider";
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type Story = StoryObj<typeof Divider>;
+export declare const Default: Story;
+export declare const Groove: Story;
+export declare const Vertical: Story;

package/dist/components/Divider/Divider.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from "./Divider";
+const meta = {
+    title: "Components/Divider",
+    component: Divider,
+    args: {
+        orientation: "horizontal",
+        variant: "default",
+    },
+    argTypes: {
+        orientation: {
+            control: "radio",
+            options: ["horizontal", "vertical"],
+        },
+        variant: {
+            control: "radio",
+            options: ["default", "groove"],
+        },
+    },
+};
+export default meta;
+/**
+ * 共通レンダラー
+ * - vertical / horizontal 両方確認できるサイズ
+ * - flex + shrink防止前提
+ */
+const renderDivider = (args) => (_jsx("div", { style: {
+        display: "flex",
+        width: "200px",
+        height: "200px",
+        alignItems: "center",
+        justifyContent: "center",
+    }, children: _jsx(Divider, { ...args }) }));
+export const Default = {
+    render: renderDivider,
+};
+export const Groove = {
+    render: renderDivider,
+    args: {
+        variant: "groove",
+    },
+};
+export const Vertical = {
+    render: renderDivider,
+    args: {
+        orientation: "vertical",
+    },
+};

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from "./Divider";
+export type { DividerProps, DividerOrientation, DividerVariant } from "./types";

package/dist/components/Divider/index.js

@@ -0,0 +1 @@
+export { Divider } from "./Divider";

package/dist/components/Divider/types.d.ts

@@ -0,0 +1,7 @@
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "default" | "groove";
+export interface DividerProps {
+    orientation?: DividerOrientation;
+    variant?: DividerVariant;
+    className?: string;
+}

package/dist/components/Divider/types.js

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

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from "./ThemeProvider.module.css";
 export function ThemeProvider({ theme = "light", children, }) {
-    return (_jsx("div", { className: `${styles.theme} ${theme === "dark" ? styles.dark : styles.light}`, children: children }));
+    return (_jsx("main", { className: `${styles.theme} ${theme === "dark" ? styles.dark : styles.light}`, children: children }));
 }

package/dist/components/ThemeProvider/ThemeProvider.module.css

@@ -22,6 +22,7 @@
 
   /* ===== Layout ===== */
   --container: 1120px;
+  
 }
 
 .light {

package/dist/styles/base.css

@@ -36,10 +36,13 @@ html {
 body {
   line-height: 1.5;
   font-family: var(--font, system-ui, -apple-system, sans-serif);
-  color: var(--color-on-background, #161d1d);
-  background-color: var(--color-background, #f4fbfa);
   padding: 0;
-}  
+}
+
+main {
+  min-height: 100vh;
+  background: var(--color-background);
+}
 
 /* リスト */
 ul,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React UI design token and component system based on neumorphism, featuring two color themes: light and dark.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",