@lism-css/ui 0.1.2 → 0.2.1

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

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

package/dist/components/Alert/getProps.d.ts

@@ -0,0 +1,20 @@
+export type AlertProps = {
+    type?: string;
+    keycolor?: string;
+    layout?: string;
+    icon?: string;
+    flow?: string;
+    [key: string]: unknown;
+};
+export default function getAlertProps({ type, keycolor, layout, icon, flow, ...props }: AlertProps): {
+    icon: string;
+    layout: string;
+    flow: string;
+    lismClass: string;
+    keycolor: string;
+    ai: string;
+    p: string;
+    g: string;
+    bd: boolean;
+    bdrs: string;
+};

package/dist/components/Alert/presets.d.ts

@@ -0,0 +1,6 @@
+type PresetData = {
+    icon: string;
+    color: string;
+};
+declare const PRESETS: Record<string, PresetData>;
+export default PRESETS;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { AlertProps } from '../getProps';
+export default function Alert({ children, ...inputProps }: AlertProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

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

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

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

package/dist/components/Callout/getProps.d.ts

@@ -0,0 +1,22 @@
+export type CalloutProps = {
+    type?: string;
+    keycolor?: string;
+    icon?: string;
+    title?: string;
+    flow?: string;
+    [key: string]: unknown;
+};
+export default function getCalloutProps({ type, keycolor, icon, title, flow, ...props }: CalloutProps): {
+    icon: string | null;
+    title: string | undefined;
+    flow: string;
+    lismClass: string;
+    keycolor: string | null;
+    p: string;
+    g: string;
+    bdc: string;
+    'bd-x-s': boolean;
+    bdw: string;
+    bxsh: string;
+    bdrs: string;
+};

package/dist/components/Callout/presets.d.ts

@@ -0,0 +1,6 @@
+type PresetData = {
+    icon: string;
+    color: string;
+};
+declare const PRESETS: Record<string, PresetData>;
+export default PRESETS;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { CalloutProps } from '../getProps';
+export default function Callout({ children, ...inputProps }: CalloutProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

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

package/dist/components/astro.d.ts

@@ -1,6 +1,8 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Alert } from './Alert/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 Callout } from './Callout/astro';
 export { default as Modal } from './Modal/astro';
 export { default as Tabs } from './Tabs/astro';

package/dist/components/react.d.ts

@@ -1,6 +1,8 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Alert } from './Alert/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 Callout } from './Callout/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)}.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}}
+@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}}

package/package.json

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

package/src/components/Alert/_style.css

@@ -0,0 +1 @@
+/* Alert component styles */

package/src/components/Alert/astro/Alert.astro

@@ -0,0 +1,17 @@
+---
+import { Flow, Lism, Center, Icon } from 'lism-css/astro';
+import getAlertProps, { type AlertProps } from '../getProps';
+
+type Props = AlertProps;
+
+const { icon, layout, flow, ...alertProps } = getAlertProps(Astro.props);
+---
+
+<Lism layout={layout} {...alertProps}>
+	<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
+		<Icon icon={icon} />
+	</Center>
+	<Flow flow={flow}>
+		<slot />
+	</Flow>
+</Lism>

package/src/components/Alert/astro/index.ts

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

package/src/components/Alert/getProps.ts

@@ -0,0 +1,37 @@
+import PRESETS from './presets';
+
+export type AlertProps = {
+	type?: string;
+	keycolor?: string;
+	layout?: string;
+	icon?: string;
+	flow?: string;
+	[key: string]: unknown;
+};
+
+export default function getAlertProps({
+	type = 'alert',
+	keycolor,
+	layout = 'flex',
+	icon,
+	flow = 's',
+	...props
+}: AlertProps) {
+	const presetData = type ? PRESETS[type] : null;
+	const _icon = icon || presetData?.icon || 'info';
+	const _color = keycolor || presetData?.color || 'currentColor';
+
+	return {
+		icon: _icon,
+		layout,
+		flow,
+		lismClass: 'c--alert u-cbox',
+		keycolor: _color,
+		ai: 'center',
+		p: '15',
+		g: '15',
+		bd: true,
+		bdrs: '10',
+		...props,
+	};
+}

package/src/components/Alert/presets.ts

@@ -0,0 +1,33 @@
+type PresetData = {
+	icon: string;
+	color: string;
+};
+
+const PRESETS: Record<string, PresetData> = {
+	alert: {
+		icon: 'alert',
+		color: 'red',
+	},
+	point: {
+		icon: 'lightbulb',
+		color: 'orange',
+	},
+	warning: {
+		icon: 'warning',
+		color: 'yellow',
+	},
+	check: {
+		icon: 'check-circle',
+		color: 'green',
+	},
+	help: {
+		icon: 'question',
+		color: 'purple',
+	},
+	info: {
+		icon: 'info',
+		color: 'blue',
+	},
+};
+
+export default PRESETS;

package/src/components/Alert/react/Alert.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { Flow, Lism, Center, Icon } from 'lism-css/react';
+import getAlertProps, { type AlertProps } from '../getProps';
+
+export default function Alert({ children, ...inputProps }: AlertProps & { children?: ReactNode }) {
+	const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
+
+	return (
+		<Lism layout={layout} {...alertProps}>
+			<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
+				<Icon icon={icon} />
+			</Center>
+			<Flow flow={flow}>{children}</Flow>
+		</Lism>
+	);
+}

package/src/components/Alert/react/index.ts

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

package/src/components/Button/_style.css

@@ -32,23 +32,3 @@
 		grid-column: 2;
 	}
 }
-
-/* --------------------
-  reverse
- -------------------- */
-.-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/src/components/Callout/_style.css

@@ -0,0 +1 @@
+/* Callout component styles */

package/src/components/Callout/astro/Callout.astro

@@ -0,0 +1,24 @@
+---
+import { Flow, Flex, Stack, Icon, Center } from 'lism-css/astro';
+import getCalloutProps, { type CalloutProps } from '../getProps';
+
+type Props = CalloutProps;
+
+const { icon, title, flow, ...calloutProps } = getCalloutProps(Astro.props);
+---
+
+<Stack {...calloutProps}>
+	{
+		title && (
+			<Flex class='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
+				<Center class='c--callout_icon' fz='xl'>
+					<Icon icon={icon} />
+				</Center>
+				<span class='c--callout_title'>{title}</span>
+			</Flex>
+		)
+	}
+	<Flow class='c--callout_body' flow={flow}>
+		<slot />
+	</Flow>
+</Stack>

package/src/components/Callout/astro/index.ts

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

package/src/components/Callout/getProps.ts

@@ -0,0 +1,32 @@
+import PRESETS from './presets';
+
+export type CalloutProps = {
+	type?: string;
+	keycolor?: string;
+	icon?: string;
+	title?: string;
+	flow?: string;
+	[key: string]: unknown;
+};
+
+export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
+	const presetData = type ? PRESETS[type] : null;
+	const _icon = icon || presetData?.icon || null;
+	const _keycolor = keycolor || presetData?.color || null;
+
+	return {
+		icon: _icon,
+		title,
+		flow,
+		lismClass: 'c--callout u-cbox',
+		keycolor: _keycolor,
+		p: '20',
+		g: '10',
+		bdc: 'keycolor',
+		'bd-x-s': true,
+		bdw: '4px',
+		bxsh: '10',
+		bdrs: '5',
+		...props,
+	};
+}

package/src/components/Callout/presets.ts

@@ -0,0 +1,33 @@
+type PresetData = {
+	icon: string;
+	color: string;
+};
+
+const PRESETS: Record<string, PresetData> = {
+	alert: {
+		icon: 'alert',
+		color: 'red',
+	},
+	point: {
+		icon: 'lightbulb',
+		color: 'orange',
+	},
+	warning: {
+		icon: 'warning',
+		color: 'yellow',
+	},
+	check: {
+		icon: 'check-circle',
+		color: 'green',
+	},
+	help: {
+		icon: 'question',
+		color: 'purple',
+	},
+	note: {
+		icon: 'note',
+		color: 'blue',
+	},
+};
+
+export default PRESETS;

package/src/components/Callout/react/Callout.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Flow, Flex, Stack, Icon, Center } from 'lism-css/react';
+import getCalloutProps, { type CalloutProps } from '../getProps';
+
+export default function Callout({ children, ...inputProps }: CalloutProps & { children?: ReactNode }) {
+	const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
+
+	return (
+		<Stack {...calloutProps}>
+			{title && (
+				<Flex className='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
+					<Center className='c--callout_icon' fz='xl'>
+						<Icon icon={icon} />
+					</Center>
+					<span className='c--callout_title'>{title}</span>
+				</Flex>
+			)}
+			<Flow className='c--callout_body' flow={flow}>
+				{children}
+			</Flow>
+		</Stack>
+	);
+}

package/src/components/Callout/react/index.ts

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

package/src/components/astro.ts

@@ -1,6 +1,8 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Alert } from './Alert/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 Callout } from './Callout/astro';
 export { default as Modal } from './Modal/astro';
 export { default as Tabs } from './Tabs/astro';

package/src/components/react.ts

@@ -1,6 +1,8 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Alert } from './Alert/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 Callout } from './Callout/react';
 export { default as Modal } from './Modal/react';
 export { default as Tabs } from './Tabs/react';