@lism-css/ui 0.1.1 → 0.2.0

package/dist/components/Avatar/astro/index.d.ts

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

package/dist/components/Avatar/react/Avatar.d.ts

@@ -0,0 +1,6 @@
+export default function Avatar({ size, src, alt, ...props }: {
+    [x: string]: any;
+    size?: string | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+}): import("react").JSX.Element;

package/dist/components/Avatar/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Avatar';

package/dist/components/Badge/astro/index.d.ts

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

package/dist/components/Badge/react/Badge.d.ts

@@ -0,0 +1 @@
+export default function Badge(props: any): import("react").JSX.Element;

package/dist/components/Badge/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Badge';

package/dist/components/Button/astro/index.d.ts

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

package/dist/components/Button/react/Button.d.ts

@@ -0,0 +1 @@
+export default function Button(props: any): import("react").JSX.Element;

package/dist/components/Button/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Button';

package/dist/components/astro.d.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Avatar } from './Avatar/astro';
+export { default as Badge } from './Badge/astro';
+export { default as Button } from './Button/astro';
 export { default as Modal } from './Modal/astro';
 export { default as Tabs } from './Tabs/astro';

package/dist/components/react.d.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Avatar } from './Avatar/react';
+export { default as Badge } from './Badge/react';
+export { default as Button } from './Button/react';
 export { default as Modal } from './Modal/react';
 export { default as Tabs } from './Tabs/react';

package/dist/style.css

@@ -1 +1 @@
-@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.25s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}}
+@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.25s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism.modules{}@layer lism.modules{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}.-hov\:reverse{--hov-c:var(--bgc);--hov-bgc:var(--c)}.-hov\:reverse:where(.c--button--fill){--hov-bgc:transparent}.-hov\:reverse:where(.c--button--outline){--hov-c:var(--base)}@media (any-hover:hover){.-hov\:reverse:hover{background-color:var(--hov-bgc)!important;color:var(--hov-c)!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",

package/src/components/Avatar/_style.css

@@ -0,0 +1,2 @@
+/* Avatar component styles */
+/* このコンポーネントは現時点でカスタムスタイルを必要としません */

package/src/components/Avatar/astro/Avatar.astro

@@ -0,0 +1,10 @@
+---
+import { Frame } from 'lism-css/astro';
+// import '../_style.css';
+
+const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
+---
+
+<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
+	<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
+</Frame>

package/src/components/Avatar/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Avatar.astro';

package/src/components/Avatar/react/Avatar.jsx

@@ -0,0 +1,10 @@
+import { Frame } from 'lism-css/react';
+// import '../_style.css';
+
+export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
+	return (
+		<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
+			<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
+		</Frame>
+	);
+}

package/src/components/Avatar/react/index.js

@@ -0,0 +1 @@
+export { default } from './Avatar';

package/src/components/Badge/_style.css

@@ -0,0 +1,15 @@
+@layer lism.modules {
+	.c--badge {
+		--c: var(--base);
+		--bgc: var(--text);
+		--bdc: transparent;
+		color: var(--c);
+		background-color: var(--bgc);
+		border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+	}
+	.c--badge--outline {
+		--c: var(--text);
+		--bgc: transparent;
+		--bdc: currentColor;
+	}
+}

package/src/components/Badge/astro/Badge.astro

@@ -0,0 +1,16 @@
+---
+import { Lism } from 'lism-css/astro';
+import '../_style.css';
+
+const props = Astro.props;
+
+// c--badge では c, bgc は 変数で受け取る
+const _propConfig = {
+	c: { isVar: 1 },
+	bgc: { isVar: 1 },
+};
+---
+
+<Lism lismClass='c--badge' tag='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props}>
+	<slot />
+</Lism>

package/src/components/Badge/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Badge.astro';

package/src/components/Badge/react/Badge.jsx

@@ -0,0 +1,14 @@
+import { Lism } from 'lism-css/react';
+import '../_style.css';
+
+export default function Badge(props) {
+	// c--badge では c, bgc は 変数で受け取る
+	const _propConfig = {
+		c: { isVar: 1 },
+		bgc: { isVar: 1 },
+	};
+
+	return (
+		<Lism lismClass='c--badge' tag='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props} />
+	);
+}

package/src/components/Badge/react/index.js

@@ -0,0 +1 @@
+export { default } from './Badge';

package/src/components/Button/_style.css

@@ -0,0 +1,34 @@
+@layer lism.modules {
+	.c--button {
+		--c: var(--base);
+		--bgc: var(--text);
+		--bdc: var(--bgc);
+
+		color: var(--c);
+		background-color: var(--bgc);
+		border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+
+		gap: var(--s10);
+		text-decoration: none;
+		place-content: center;
+		place-items: center;
+	}
+	.c--button--outline {
+		--c: var(--text);
+		--bgc: transparent;
+		--bdc: var(--c);
+	}
+
+	:where(.c--button) > .a--icon {
+		scale: 1.05;
+	}
+
+	/* l--gridを使用する場合の追加スタイル */
+	.c--button:where(.l--grid) {
+		grid-template-columns: minmax(1em, auto) 1fr minmax(1em, auto);
+		justify-items: center;
+	}
+	.c--button:where(.l--grid) > :not(.a--icon) {
+		grid-column: 2;
+	}
+}

package/src/components/Button/astro/Button.astro

@@ -0,0 +1,16 @@
+---
+import { Flex } from 'lism-css/astro';
+import '../_style.css';
+
+const props = Astro.props;
+
+// c--button では c, bgc は 変数で受け取る
+const _propConfig = {
+	c: { isVar: 1 },
+	bgc: { isVar: 1 },
+};
+---
+
+<Flex lismClass='c--button' tag='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props}>
+	<slot />
+</Flex>

package/src/components/Button/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Button.astro';

package/src/components/Button/react/Button.jsx

@@ -0,0 +1,14 @@
+import { Flex } from 'lism-css/react';
+import '../_style.css';
+
+export default function Button(props) {
+	// c--button では c, bgc は 変数で受け取る
+	const _propConfig = {
+		c: { isVar: 1 },
+		bgc: { isVar: 1 },
+	};
+
+	return (
+		<Flex lismClass='c--button' tag='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props} />
+	);
+}

package/src/components/Button/react/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

package/src/components/astro.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Avatar } from './Avatar/astro';
+export { default as Badge } from './Badge/astro';
+export { default as Button } from './Button/astro';
 export { default as Modal } from './Modal/astro';
 export { default as Tabs } from './Tabs/astro';

package/src/components/react.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Avatar } from './Avatar/react';
+export { default as Badge } from './Badge/react';
+export { default as Button } from './Button/react';
 export { default as Modal } from './Modal/react';
 export { default as Tabs } from './Tabs/react';

package/src/style.scss

@@ -1 +1,4 @@
-@use './components/Accordion/_style.css';
+@use './components/Accordion/_style.css' as accordion;
+@use './components/Avatar/_style.css' as avatar;
+@use './components/Badge/_style.css' as badge;
+@use './components/Button/_style.css' as button;