@kushagradhawan/kookie-ui 0.1.6 → 0.1.8

package/src/props/index.ts

@@ -12,6 +12,7 @@ export * from './leading-trim.prop.js';
 export * from './margin.props.js';
 export * from './padding.props.js';
 export * from './radius.prop.js';
+export * from './shadow.props.js';
 export * from './text-align.prop.js';
 export * from './text-wrap.prop.js';
 export * from './truncate.prop.js';
@@ -42,6 +43,7 @@ export * from '../components/grid.props.js';
 export * from '../components/heading.props.js';
 export * from '../components/hover-card.props.js';
 export * from '../components/icon-button.props.js';
+export * from '../components/image.props.js';
 export * from '../components/inset.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';

package/src/props/shadow.props.ts

@@ -0,0 +1,30 @@
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+const shadowValues = ['1', '2', '3', '4', '5', '6'] as const;
+
+const shadowPropDefs = {
+  /**
+   * Sets the CSS **box-shadow** property using design system shadow tokens.
+   * Supports shadow scale values and responsive objects.
+   *
+   * @example
+   * shadow="3"
+   * shadow={{ sm: '2', lg: '4' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+   */
+  shadow: {
+    type: 'enum',
+    className: 'rt-r-shadow',
+    values: shadowValues,
+    responsive: true,
+  },
+} satisfies {
+  shadow: PropDef<(typeof shadowValues)[number]>;
+};
+
+type ShadowProps = GetPropDefTypes<typeof shadowPropDefs>;
+
+export { shadowPropDefs };
+export type { ShadowProps };

package/styles.css

@@ -5375,6 +5375,7 @@
   }
 }
 .rt-Text {
+  font-family: var(--default-font-family);
   line-height: var(--line-height, var(--default-line-height));
   letter-spacing: var(--letter-spacing, inherit);
 }
@@ -10697,6 +10698,45 @@
     --icon-button-ghost-padding: var(--space-3);
   }
 }
+.rt-Image {
+  display: block;
+  object-fit: var(--object-fit);
+  box-shadow: var(--box-shadow);
+  border-radius: max(var(--radius-3), var(--radius-full));
+}
+.rt-r-fit-cover {
+  --object-fit: cover;
+}
+.rt-r-fit-contain {
+  --object-fit: contain;
+}
+.rt-r-fit-fill {
+  --object-fit: fill;
+}
+.rt-r-fit-scale-down {
+  --object-fit: scale-down;
+}
+.rt-r-fit-none {
+  --object-fit: none;
+}
+.rt-r-shadow-1 {
+  --box-shadow: var(--shadow-1);
+}
+.rt-r-shadow-2 {
+  --box-shadow: var(--shadow-2);
+}
+.rt-r-shadow-3 {
+  --box-shadow: var(--shadow-3);
+}
+.rt-r-shadow-4 {
+  --box-shadow: var(--shadow-4);
+}
+.rt-r-shadow-5 {
+  --box-shadow: var(--shadow-5);
+}
+.rt-r-shadow-6 {
+  --box-shadow: var(--shadow-6);
+}
 .rt-Inset {
   box-sizing: border-box;
   --margin-top: 0px;