kang-components 0.1.0 → 0.2.0

package/README.md

@@ -74,6 +74,27 @@ const act = useAnimatedAction();
 const onClick = () => act(() => navigate('/next'));
 ```
 
+## Action-sheet primitives
+
+CSS-first layout for a bottom-sheet "actions" panel — a vertical container, a
+list, and tappable action rows with subtle press feedback. Colors stay with the
+consumer: `actionSheetRow` takes the pressed-state background, so Kang carries no
+theme knowledge.
+
+```ts
+import styled from 'styled-components';
+import { actionSheetContainer, actionSheetList, actionSheetRow } from 'kang-components';
+
+const Container = styled.div`${actionSheetContainer()}`;
+const List = styled.div`${actionSheetList()}`;
+const Row = styled.button`
+	${({ theme }) => actionSheetRow(theme.colors.surfaceVariant)}
+`;
+```
+
+Per-row content (leading icon, label, destructive tint, ripple) is the
+consumer's to layer on top of the row.
+
 ## Build
 
 ```bash

package/dist/action-sheet.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Action-sheet layout primitives — CSS-first, domain-free.
+ *
+ * The shared shape of a bottom-sheet "actions" panel: a vertical container, a
+ * list, and tappable action rows with subtle press feedback. Each helper
+ * returns a plain CSS string to interpolate into your styling layer.
+ *
+ *   const Container = styled.div`${actionSheetContainer()}`;
+ *   const List = styled.div`${actionSheetList()}`;
+ *   const Row = styled.button`${actionSheetRow(theme.colors.surfaceVariant)}`;
+ *
+ * Colors stay with the consumer: `actionSheetRow` takes the pressed-state
+ * background so Kang carries no theme knowledge. Per-row content styling (icon
+ * tint, destructive text, etc.) is the consumer's to layer on.
+ */
+/** Vertical action-sheet wrapper: column flex with standard sheet padding. */
+export declare const actionSheetContainer: () => string;
+/** The list of action rows. */
+export declare const actionSheetList: () => string;
+/**
+ * A single tappable action row: leading-icon + label layout with subtle press
+ * feedback (`pressSubtle`, with a background-color transition). Pass
+ * `activeBackground` to tint the pressed state; omit it to leave the pressed
+ * background to the consumer.
+ */
+export declare const actionSheetRow: (activeBackground?: string) => string;
+//# sourceMappingURL=action-sheet.d.ts.map

package/dist/action-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-sheet.d.ts","sourceRoot":"","sources":["../src/action-sheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,QAAO,MAKvC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,eAAe,QAAO,MAGlC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,sBAAuB,MAAM,KAAG,MAiB1D,CAAC"}

package/dist/action-sheet.js

@@ -0,0 +1,53 @@
+/**
+ * Action-sheet layout primitives — CSS-first, domain-free.
+ *
+ * The shared shape of a bottom-sheet "actions" panel: a vertical container, a
+ * list, and tappable action rows with subtle press feedback. Each helper
+ * returns a plain CSS string to interpolate into your styling layer.
+ *
+ *   const Container = styled.div`${actionSheetContainer()}`;
+ *   const List = styled.div`${actionSheetList()}`;
+ *   const Row = styled.button`${actionSheetRow(theme.colors.surfaceVariant)}`;
+ *
+ * Colors stay with the consumer: `actionSheetRow` takes the pressed-state
+ * background so Kang carries no theme knowledge. Per-row content styling (icon
+ * tint, destructive text, etc.) is the consumer's to layer on.
+ */
+import { pressSubtle } from './press.js';
+/** Vertical action-sheet wrapper: column flex with standard sheet padding. */
+export const actionSheetContainer = () => `
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 0.5rem 0;
+`;
+/** The list of action rows. */
+export const actionSheetList = () => `
+	display: flex;
+	flex-direction: column;
+`;
+/**
+ * A single tappable action row: leading-icon + label layout with subtle press
+ * feedback (`pressSubtle`, with a background-color transition). Pass
+ * `activeBackground` to tint the pressed state; omit it to leave the pressed
+ * background to the consumer.
+ */
+export const actionSheetRow = (activeBackground) => `
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding: 1rem;
+	background: none;
+	border: none;
+	border-radius: 0.75rem;
+	cursor: pointer;
+	overflow: hidden;
+	${pressSubtle('background-color 0.15s ease-out')}
+	-webkit-tap-highlight-color: transparent;
+${activeBackground ? `
+	&:active {
+		background-color: ${activeBackground};
+	}` : ''}
+`;
+//# sourceMappingURL=action-sheet.js.map

package/dist/action-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-sheet.js","sourceRoot":"","sources":["../src/action-sheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,8EAA8E;AAC9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAW,EAAE,CAAC;;;;;CAKjD,CAAC;AAEF,+BAA+B;AAC/B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;CAG5C,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,gBAAyB,EAAU,EAAE,CAAC;;;;;;;;;;;GAWlE,WAAW,CAAC,iCAAiC,CAAC;;EAE/C,gBAAgB,CAAC,CAAC,CAAC;;sBAEC,gBAAgB;GACnC,CAAC,CAAC,CAAC,EAAE;CACP,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { BOUNCE_CURVE, PRESS_SCALE_PRIMARY, PRESS_SCALE_SUBTLE, pressPrimary, pressSubtle, pressPrimaryScale, pressSubtleScale, } from './press.js';
 export { useAnimatedAction } from './use-animated-action.js';
+export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action-sheet.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { BOUNCE_CURVE, PRESS_SCALE_PRIMARY, PRESS_SCALE_SUBTLE, pressPrimary, pressSubtle, pressPrimaryScale, pressSubtleScale, } from './press.js';
 export { useAnimatedAction } from './use-animated-action.js';
+export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action-sheet.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kang-components",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook).",
 	"type": "module",
 	"license": "MIT",