@a-type/ui 1.5.1 → 1.5.3

package/dist/esm/components/note/Note.stories.js

@@ -0,0 +1,15 @@
+// @unocss-include
+import { Note } from './Note.js';
+const meta = {
+    title: 'Note',
+    component: Note,
+    args: {
+        children: 'This is a note',
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=Note.stories.js.map

package/dist/esm/components/note/Note.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.stories.js","sourceRoot":"","sources":["../../../../src/components/note/Note.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;IAEf,IAAI,EAAE;QACL,QAAQ,EAAE,gBAAgB;KAC1B;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "type": "module",
   "files": [
     "/dist",

package/src/components/box/Box.tsx

@@ -15,6 +15,7 @@ export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type BoxResponsive<T> =
 	| T
 	| {
+			default?: T;
 			sm?: T;
 			md?: T;
 			lg?: T;
@@ -26,6 +27,10 @@ function isResponsive<T>(
 	return typeof value === 'object';
 }
 
+function hasDefault<T>(value: BoxResponsive<T>, val: T) {
+	return value === val || (isResponsive(value) && value.default === val);
+}
+
 export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	className?: string;
 	direction?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
@@ -84,10 +89,16 @@ export function Box({
 			className={clsx(
 				'layer-components:flex layer-components:relative',
 				{
-					'layer-components:flex-row': direction === 'row',
-					'layer-components:flex-col': direction === 'col',
-					'layer-components:flex-row-reverse': direction === 'row-reverse',
-					'layer-components:flex-col-reverse': direction === 'col-reverse',
+					'layer-components:flex-row': hasDefault(direction, 'row'),
+					'layer-components:flex-col': hasDefault(direction, 'col'),
+					'layer-components:flex-row-reverse': hasDefault(
+						direction,
+						'row-reverse',
+					),
+					'layer-components:flex-col-reverse': hasDefault(
+						direction,
+						'col-reverse',
+					),
 					'layer-components:sm:flex-row':
 						isResponsive(direction) && direction.sm === 'row',
 					'layer-components:sm:flex-col':
@@ -112,7 +123,7 @@ export function Box({
 						isResponsive(direction) && direction.lg === 'row-reverse',
 					'layer-components:lg:flex-col-reverse':
 						isResponsive(direction) && direction.lg === 'col-reverse',
-					'layer-components:flex-wrap': wrap,
+					'layer-components:flex-wrap': hasDefault(wrap, true),
 					'layer-components:sm:flex-wrap': isResponsive(wrap) && wrap.sm,
 					'layer-components:md:flex-wrap': isResponsive(wrap) && wrap.md,
 					'layer-components:lg:flex-wrap': isResponsive(wrap) && wrap.lg,
@@ -131,11 +142,11 @@ export function Box({
 					'layer-components:justify-end': justify === 'end',
 					'layer-components:justify-between': justify === 'between',
 					'layer-components:justify-around': justify === 'around',
-					'layer-components:p-xs': p === 'xs',
-					'layer-components:p-sm': p === 'sm',
-					'layer-components:p-md': p === 'md' || p === true,
-					'layer-components:p-lg': p === 'lg',
-					'layer-components:p-xl': p === 'xl',
+					'layer-components:p-xs': hasDefault(p, 'xs'),
+					'layer-components:p-sm': hasDefault(p, 'sm'),
+					'layer-components:p-md': hasDefault(p, 'md') || hasDefault(p, true),
+					'layer-components:p-lg': hasDefault(p, 'lg'),
+					'layer-components:p-xl': hasDefault(p, 'xl'),
 					'layer-components:sm:p-xs': isResponsive(p) && p.sm === 'xs',
 					'layer-components:sm:p-sm': isResponsive(p) && p.sm === 'sm',
 					'layer-components:sm:p-md': isResponsive(p) && p.sm === 'md',

package/src/components/icon/generated/IconSpritesheet.tsx

@@ -937,6 +937,26 @@ export const IconSpritesheet = (props: any) => (
 					strokeLinejoin="round"
 				/>
 			</symbol>
+			<symbol id="icon-enterKey" viewBox="0 0 15 15">
+				<path
+					d="M10.5 8V10.5H3.5M3.5 10.5L5 9M3.5 10.5L5 12"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M14.5 2H6.5V6.5H0.5V14H14.5V2Z"
+					stroke="currentColor"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-gamePiece" viewBox="0 0 15 15">
+				<path
+					d="M10 2.5C10 4 8.5 5 8.5 5L10 11C11.1722 11.4548 12.0956 11.9049 12.5 13C9.5 14.5 5.5 14.5 2.5 13C2.85427 12.0596 3.71706 11.5944 5 11L6.5 5C6.5 5 5 4 5 2.5C5 1 6.52369 0.5 7.5 0.5C8.47631 0.5 10 1 10 2.5Z"
+					stroke="currentColor"
+					strokeLinejoin="round"
+				/>
+			</symbol>
 		</defs>
 	</svg>
 );

package/src/components/icon/generated/iconNames.ts

@@ -83,6 +83,8 @@ export const iconNames = [
 	'previous',
 	'skipStart',
 	'skipEnd',
+	'enterKey',
+	'gamePiece',
 ] as const;
 
 export type IconName = (typeof iconNames)[number];

package/src/components/note/Note.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Note } from './Note.js';
+
+const meta = {
+	title: 'Note',
+	component: Note,
+
+	args: {
+		children: 'This is a note',
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Note>;
+
+export default meta;
+
+type Story = StoryObj<typeof Note>;
+
+export const Default: Story = {};

package/src/components/note/Note.tsx

@@ -7,13 +7,22 @@ export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 
 export function Note({ className, children, ...rest }: NoteProps) {
 	return (
-		<div className={classNames('pr-20px', className)} {...rest}>
-			<div className="flex flex-col p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0">
-				{children}
-				<div className="w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash">
-					<div
-						className={`absolute top--20px left-0 border0px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:(content-[""] absolute top--7px left--9px border-8px border-solid border-transparent border-b-primary-wash border-l-primary-wash)`}
-					/>
+		<div className={classNames(className)} {...rest}>
+			<div className="flex flex-row ">
+				<div className="flex-1 p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0">
+					{children}
+				</div>
+				<div
+					className="flex flex-col items-stretch justify-stretch flex-[0_0_20px]"
+					aria-hidden
+				>
+					<div className="border-0 border-solid border-primary-dark border-b-1px border-l-1px flex-[0_0_20px] w-[20px] h-[20px] relative">
+						<div className="absolute w-1px bg-primary-dark h-26px rotate--45 left-9px top--4px transform-origin-cc" />
+						<div
+							className={`border-solid box-content border-transparent border-r-primary-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br`}
+						/>
+					</div>
+					<div className="bg-primary-wash flex-1 border-0 border-solid border-primary-dark border-r-1px border-b-1px" />
 				</div>
 			</div>
 		</div>